/******************
    User custom CSS
    ---------------
upd
    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/*** LimeSurvey Triade Default Styles ***/
/*** Author - Tony Partner ***/
/*** http://partnersurveys.com ***/

/* trikon_pink_grey.png is the trikon, optimum dimensions for the image are 432x378 px */
/* ball-1.png is the initial ball */
/* ball-2.png is the ball when dragging starts */
/* ball-3.png is the ball when droppable (inside the triangle) */
.triadeQuestion {
  box-sizing: border-box;
}

.triadeQuestion .triade-container {
  position: relative;
  margin: 0 auto;
  box-sizing: content-box;
  width: 432px;
}

.triadeQuestion .top-text,
.triadeQuestion .left-text,
.triadeQuestion .right-text {
  width: 50%;
  text-align: center;
  font-size: 100%;
  line-height: 100%;
}

.triadeQuestion .top-text {
  margin: 0 auto;
}

.triadeQuestion .left-text {
  float: left;
  /* margin-left: -25%; */
  text-align: left;
  width: 49%;
}

.triadeQuestion .right-text {
  float: right;
  /* margin-right: -25%; */
  text-align: right;
  width: 49%;
}

.triadeQuestion .containment-wrapper {
  position: relative;
  width: 100%;
  padding: 0px;
}

.triadeQuestion .triade-draggable,
.triade-draggable {
  position: absolute;
  left: 5px;
  top: 21px;
  width: 32px;
  height: 32px;
  background-color: grey;
  border-radius: 16px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;
  z-index: 100;
}

.triadeQuestion .ui-draggable-dragging {
  background-color: #585858;
}

.triadeQuestion .triade-draggable-droppable {
  background-color: #f95c5a;
}

.triadeQuestion .triade-droppable,
.triade-droppable {
  z-index: 1;
  width: 400px; /* Should be same width as triangle background image */
  height: 346px; /*Should be same height as triangle background image */
  padding: 16px; /* Should be 1/2 width of the .triade-draggable element */
  background: transparent url(../images/tr-grey.png) no-repeat;
  /* background: transparent url(../images/trikon-orange-grey.png) no-repeat; */
  background-position: 16px 16px; /* Should be same as padding above */
  box-sizing: content-box;
}

.triadeQuestion .triade-container .triade-cancel {
  font-weight: bold;
  position: absolute;
  top: 100px;
  right: -100px;
  width: 100px;
  padding: 70px 0 0 0;
  background: url(../images/checkmark-empty.png) no-repeat center 0 transparent;
  background-size: 60%;
  cursor: pointer;
  text-align: left;
  border: 0 none;
}

.triadeQuestion .triade-container .triade-cancel:hover {
  background-position: center -250px;
  background: url(../images/checkmark-hover.png) no-repeat center 0 transparent;
  background-size: 60%;
  border-color: #00ff00;
}

.triadeQuestion .triade-container .triade-cancel.checked {
  background-position: center -500px;
  background: url(../images/checkmark-checked.png) no-repeat center 0
    transparent;
  background-size: 60%;
  border-color: #009900;
}

.triade-cancel .radio__label {
  line-height: normal;
  font-size: 0.8em;
  font-weight: normal;
}

.triadeQuestion .message-drop {
  clear: both;
  font-size: 12px;
}

.message-drop span.success {
  color: green;
}
.message-drop span.fail {
  color: red;
}

@media (max-width: 736px) {
  .triadeQuestion .left-text {
    margin-left: 0;
    text-align: left;
    /* font-size: 16px;
    font-size: 1rem; */
    /* left: 20px;
    position: fixed;
    width: 45%; */
  }
  .triadeQuestion .right-text {
    margin-right: 0;
    text-align: right;
    /* font-size: 16px; */
    /* font-size: 1rem; */
    /* position: fixed;
    left: 50%;
    width: 45%; */
  }
  .triadeQuestion .top-text {
    margin: 0 auto;
    width: 100%;
    /* font-size: 16px; */
    /* font-size: 1rem; */
  }
  .triadeQuestion .triade-droppable,
  .triade-droppable {
    z-index: 1;
    width: 200px;
    /* Should be same width as triangle background image */
    height: 173px;
    /*Should be same height as triangle background image */
    padding: 16px;
    /* Should be 1/2 width of the .triade-draggable element */
    /*padding-left: 5px;
		  padding-top: 21px;*/
    background: transparent url(../images/tr-grey-small.png) no-repeat;
    background-position: 16px 16px;
    /* Should be same as padding above */
    box-sizing: content-box;
  }
  .triadeQuestion .triade-container .triade-cancel {
    font-weight: bold;
    position: absolute;
    top: 0;
    padding: 40px 0 0 0;
    cursor: pointer;
    text-align: left;
    border: 0 none;
    font-size: 16px;
    font-size: 1rem;
    line-height: 120%;
  }
  .triadeQuestion .triade-container .triade-cancel:before {
    font-size: 24px;
    font-size: 1.5rem;
  }
  .triadeQuestion .triade-container .triade-cancel:hover {
    border-color: #00ff00;
  }
  .triadeQuestion .triade-container .triade-cancel:hover:before {
    font-size: 24px;
    font-size: 1.5rem;
  }
  .triadeQuestion .triade-container .triade-cancel.checked {
    border-color: #009900;
  }
  .triadeQuestion .triade-container .triade-cancel.checked:before {
    font-size: 24px;
    font-size: 1.5rem;
  }

  .triadeQuestion .triade-draggable,
  .triade-draggable {
    /* width: 16px;
    height: 16px; */
  }
}