/* Dragula - drag and drop */ 
.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}

.gu-hide {
  display: none !important;
}

.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.gu-transit {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

/* Star raiting */

.rating .star::before {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 17.6 16.8' style='enable-background:new 0 0 17.6 16.8;' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%23009DBB;' d='M8.8,1.6l2,4L11,6.1l0.5,0.1L16,6.9L12.8,10l-0.4,0.4l0.1,0.5l0.8,4.4l-4-2.1L8.8,13l-0.5,0.2 l-4,2.1l0.8-4.4l0.1-0.5L4.8,10L1.6,6.9L6,6.2l0.5-0.1l0.2-0.5L8.8,1.6 M8.8,0C8.6,0,8.4,0.1,8.3,0.3l-2.4,5L0.4,6 C0,6.1-0.1,6.6,0.2,6.9l4,3.9l-0.9,5.4c-0.1,0.3,0.2,0.6,0.5,0.6c0.1,0,0.2,0,0.2-0.1l4.9-2.6l4.9,2.6c0.1,0,0.2,0.1,0.2,0.1 c0.3,0,0.5-0.3,0.5-0.6l-0.9-5.4l4-3.9c0.3-0.3,0.1-0.8-0.3-0.9l-5.5-0.8l-2.4-5C9.1,0.1,9,0,8.8,0L8.8,0z'/%3E%3C/g%3E%3C/svg%3E%0A");
  width: 20px;
  height: 20px;
  margin: 0 3px;
}

.rating .star::after {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 17.6 16.8' style='enable-background:new 0 0 17.6 16.8;' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%23009DBB;' d='M-74.1-2.4l2,4l0.2,0.5l0.5,0.1l4.5,0.6L-70.1,6l-0.4,0.4l0.1,0.5l0.8,4.4l-4-2.1L-74.1,9l-0.5,0.2 l-4,2.1l0.8-4.4l0.1-0.5L-78.1,6l-3.2-3.1l4.5-0.6l0.5-0.1l0.2-0.5L-74.1-2.4 M-74.1-4c-0.2,0-0.4,0.1-0.4,0.3l-2.4,5L-82.4,2 c-0.4,0.1-0.6,0.6-0.3,0.9l4,3.9l-0.9,5.4c-0.1,0.3,0.2,0.6,0.5,0.6c0.1,0,0.2,0,0.2-0.1l4.9-2.6l4.9,2.6c0.1,0,0.2,0.1,0.2,0.1 c0.3,0,0.5-0.3,0.5-0.6l-0.9-5.4l4-3.9c0.3-0.3,0.1-0.8-0.3-0.9l-5.5-0.8l-2.4-5C-73.7-3.9-73.9-4-74.1-4L-74.1-4z'/%3E%3C/g%3E%3Cpath style='fill:%23009DBB;' d='M9.2,0.3l2.4,5L17.1,6c0.4,0.1,0.6,0.6,0.3,0.9l-4,3.9l0.9,5.4c0.1,0.4-0.4,0.7-0.7,0.5l-4.9-2.6 l-4.9,2.6c-0.4,0.2-0.8-0.1-0.7-0.5l0.9-5.4l-4-3.9C-0.1,6.6,0,6.1,0.4,6l5.5-0.8l2.4-5C8.5-0.1,9.1-0.1,9.2,0.3z'/%3E%3C/svg%3E%0A");
  margin: 0 3px;
}

.rating:not([disabled]) .star:hover::after,
.rating .star.active::after {
  width: 20px;
  height: 20px;
}

.rating[disabled] {
  opacity: 0.4;
  filter: grayscale(1);
}

/* ------------------ */

.criteria-wrapper {
  /* Prevent the user from selecting text in the example */
  user-select: none;
  -webkit-user-select: none;
}



.criteria-wrapper {
  background: #fafafa;
  border: 1px solid #e3e3e3;
  padding: 20px 15px;
  border-radius: 3px;

}

.criteria-wrapper .inner-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.criteria-wrapper .ranking-info {
  margin-bottom: 30px;
  margin-left: -15px;
  margin-right: -15px;
  padding: 0 15px 20px;
  border-bottom: 1px solid #dadada;
}

.criteria-wrapper .ranking-info>div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.criteria-wrapper .ranking-info p {
  margin: 15px 15px 0;
  color: #808080;
  font-size: 14px;
  line-height: 1.2;
}

.criteria-wrapper .ranking-info .svg-box {
  height: 30px;
  width: 80px;
}

[data-id="3"] .criteria-wrapper .ranking-info .svg-box {
  height: 40px;
  width: 40px;
}

.criteria-wrapper .ranking-info .svg-box svg {
  width: 100%;
  height: 100%;
}



p.info-step {
  margin-bottom: 30px !important;
}

.criteria {
  border-radius: 3px;
  padding: 15px;
  background: #fff;
  margin-bottom: 10px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  box-shadow: 1px 1px 2px -1px #bababa;
  cursor: move;
  min-height: 78px;
  max-width: 630px;
  transition: box-shadow .3s;
}

.criteria .criteria-info {
  padding-right: 30px;
  flex-grow: 1;
  margin-bottom: 0 !important;

}

.criteria::before {
  content: url('../../../../images/elements/rankings/index/six_dots.svg');
  width: 10px;
  height: 20px;
  display: block;
  position: absolute;
  right: 25px;
  top: 15px;
}

.criteria.disabled {
  cursor: initial;
}

.criteria.disabled::before {
  display: none;
}

.log .fit-form .form-wrapper form fieldset,
.log .log-form .form-wrapper form fieldset {
  padding: 45px 30px;
}

.criteria input {
  display: none;
}

.criteria h4 {
  font-family: 'HK Grotesk';
  font-size: 18px;
  text-transform: uppercase;
  color: #333;
  font-weight: 600;
  margin: 0;
}

.criteria p {
  margin: 0;
  font-weight: 400;
  margin-top: 7px;
  color: #444;
  line-height: 1.2;
}

.criteria.active {
  background: #f0f0f0;
}

.criteria.post-active {
  box-shadow: 0 0 14px -4px #009dbb;
}

.criteria.drag:hover .move-btns {
  display: flex;
}

.move-btns {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 60px;
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  cursor: pointer;
}

.move-btns span {
  display: block;
  height: 50%;
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.move-btns span svg {
  width: 20px;
  opacity: .6;
}

.move-btns span.btn-down svg {
  transform: rotate(180deg);
}

.criteria-number {
  margin-bottom: 10px;
  font-family: 'Montserrat';
  font-weight: 600;
  font-size: 32px;
  color: #333;
  box-shadow: 1px 1px 2px -1px #bababa;
  border-right: 1px solid #d0d0d0;
  border-radius: 3px;
  background: #fff;
}

.criteria-number .num {
  width: 78px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------sticky----------- */

@media screen and (min-width: 769px) {
  .ranking-info .desk {
    display: block;
  }

  .mob {
    display: none !important;
  }

  .move-btns span:hover {
    background: #e4e4e4;
  }

  .log .log-form .form-wrapper form {
    align-items: flex-start;
  }

  .log.fit.big {
    overflow: initial;
  }

  .steps {
    position: sticky;
    top: 0;
  }


  .criteria-desc {
    max-height: 45px;
    overflow: hidden;
  }

  .criteria:hover {
    background: #f7f7f7;
  }

  .custom-tooltip {
    display: none;
  }

  .criteria a.ico-btn.arrow.down.more svg {
    width: 15px;
    transform: rotate(90deg);
    margin-bottom: -4px;
    margin-left: 5px;
    transition: transform .3s;
  }


  .criteria a.ico-btn.arrow.down.more {
    font-size: 13px;
    color: #333;
    font-weight: 600;
    margin-top: 10px;
    display: block;
    text-decoration: none;
    display: none;
  }

  .criteria a.ico-btn.arrow.down.more.show {
    display: block;
  }

  .criteria a.ico-btn.arrow.down.more.active svg {
    transform: rotate(-90deg);
  }

}

@media screen and (max-width: 768px) {

  .remove-scrolling {
    height: 100vh !important;
    overflow: hidden !important;

  }

  .ranking-info .desk {
    display: none !important;
  }

  .ranking-info .mob {
    display: block;
  }

  .ranking-info .mob .svg-box:first-child {
    transform: rotate(-25deg);
  }

  .criteria .criteria-info {
    padding-right: 60px;
  }

  #ranking_criteria_shadow .criteria .criteria-info {
    padding-right: 20px;
  }

  .move-btns {
    display: block;
  }

  .move-btns span {
    background: #fff;
    border: 1px solid #f0f0f0;
  }



  .criteria-wrapper .ranking-info .svg-box {
    width: 30px;
    opacity: .8;

  }

  .criteria-wrapper .ranking-info p {
    margin-top: 0;
  }

  .criteria-wrapper .ranking-info svg path,
  .criteria-wrapper .ranking-info svg line {
    stroke: #333 !important;
  }

  .move-btns {
    display: none !important;
  }

  .criteria p {
    display: none;
  }

  .criteria-number {
    font-size: 28px;
  }

  .criteria-number .num {
    width: 50px;
  }

  .criteria.active {
    background: #009dbb;
  }

  .criteria.active .custom-tooltip .data-tooltip {
    z-index: -1;
  }

  .criteria.active h4 {
    color: #fff;
  }

  [data-id="2"] .criteria.disabled::before {
    content: url('../../../../images/icons/click_mob_icon.svg');
    width: 18px;
    height: 45px;
    display: block;
    opacity: .5;
    transform: rotate(-25deg);

  }

  .criteria.active::before {
    content: url('../../../../images/icons/drag_mob_icon.svg');
    width: 35px;
    height: 45px;
  }

  .criteria a.ico-btn.arrow.down.more {
    display: none !important;
  }

  .star-rating-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
  }

  [data-remove-stars-btn] {
    white-space: nowrap;
    order: 1;
    font-size: 14px;
    text-decoration: underline;
    padding-top: 6px;
  }

  [data-remove-stars-btn].disable {
    color: #c3c3c3;
  }

  .criteria .custom-tooltip .data-tooltip {
    background: none;
    color: #666;
    width: auto;
    font-weight: 400;
    margin: 0;
    padding: 5px 0;
    text-align: left;
    text-decoration: underline;
    font-size: 14px;
    line-height: normal;
    height: auto;
    display: inline-block;
  }

  .criteria .custom-tooltip .data-tooltip:after {
    color: #fff;
    padding: 10px;
    font-size: 14px;
  }

  .criteria .custom-tooltip .data-tooltip:after,
  .criteria .custom-tooltip .data-tooltip:before {
    z-index: 9;
    top: auto;
    bottom: calc(100% + 5px);
  }

  .criteria .custom-tooltip .data-tooltip:before {
    bottom: 100%;

  }

  /* --------------------------------------------------------------------------------------------------------- */

  .criteria.drag:not(.disabled):not(.active):nth-child(2n) {
    animation-name: keyframes1;
    animation-iteration-count: infinite;
    transform-origin: 50% 10%;
    -webkit-transition: all .2s ease-in-out;
    animation-delay: -0.5;
    animation-duration: .3s
  }

  .criteria.drag:not(.disabled):not(.active):nth-child(2n-1) {
    animation-name: keyframes2;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: 30% 5%;
    animation-delay: -0.5;
    animation-duration: .3s
  }


  @keyframes keyframes1 {
    0% {
      transform: rotate(-0.5deg);
      animation-timing-function: ease-in;
    }

    50% {
      transform: rotate(1deg);
      animation-timing-function: ease-out;
    }
  }

  @keyframes keyframes2 {
    0% {
      transform: rotate(0.5deg);
      animation-timing-function: ease-in;
    }

    50% {
      transform: rotate(-1deg);
      animation-timing-function: ease-out;
    }
  }

  /* ------------------------------------------------------------------------------------------------------------------- */

}

@media screen and (max-width: 649px) {

  .criteria .custom-tooltip .data-tooltip:after {
    left: 0;
    transform: translate(0);
  }

  .criteria .custom-tooltip .data-tooltip:before {
    left: 10px;
  }

  .log .log-form .form-wrapper form fieldset {
    padding: 45px 0;
  }

  #ranking_criteria_shadow .criteria {
    flex-wrap: wrap;
  }

  #ranking_criteria_shadow .criteria .criteria-info {
    padding-right: 0;
  }

  .star-rating-box {
    margin-top: 20px;
    flex-direction: row;
  }

  .criteria>div:first-child {
    width: 100%;
  }

  [data-remove-stars-btn] {
    order: -1;
    padding-top: 0;
    margin-right: 10px;
    padding-bottom: 10px;
  }

  .rating .star::before,
  .rating:not([disabled]) .star:hover::after,
  .rating .star.active::after {
    width: 30px;
    height: 30px;
  }

}