@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
  transition-property: $transition-property;
  transition-duration: $transition-duration;

  @if $transition-timing == ease-out-quart {
    transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
  } @else {
    transition-timing-function: $transition-timing;
  }
}

@mixin boxsizing() {
  box-sizing: border-box;
}

@mixin center_it() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}


select.dzs-style-me {
  opacity: 0;

  $transition-property: opacity;
  $transition-duration: 0.3s;
  $transition-timing: ease-in;

  @include apply_transition($transition-property, $transition-duration, $transition-timing);

}

select.dzs-style-me > li {

  display: none;
}

ul.dzs-style-me > li {

  display: none;


}

.dzs-style-me-feeder:not(.a):not(.b):not(.c) {
  display: none;
}


.dzs-select-wrapper {
  position: relative;
  color: #444444;
  display: inline-block;
  vertical-align: top;

  width: 100%;

  height: auto;


  .buddyboss-select {
    display: none;
  }

  opacity: 0;

  $transition-property: opacity;
  $transition-duration: 0.3s;
  $transition-timing: ease-in;

  @include apply_transition($transition-property, $transition-duration, $transition-timing);

  @include boxsizing();

  * {
    @include boxsizing();
  }

  &:not(.opener-listbuttons) {

    max-width: 250px;
  }
}


.dzs-select-wrapper.init-readyall {
  opacity: 1;
}

.dzs-select-wrapper.autowidth {
  width: auto;
  max-width: none;
}

.dzs-select-wrapper .dzs-select-wrapper-head {
  position: relative;
  height: 34px;
  color: #444444;
  border: 1px solid #bbbbbb;

  cursor: pointer;

  background-color: #d7dfdf;


  width: 100%;
  display: block;
  vertical-align: top;

  padding: 5px;

  display: flex;
  align-items: center;
}


.dzs-select-wrapper .dzs-select-wrapper-head > .the-text {
  position: relative;
  left: 0px;
  top: 0%;

  vertical-align: middle;


  font-size: 13px;
  line-height: 1;


  $transition-property: font-size;
  $transition-duration: 0.3s;
  $transition-timing: ease-in;


  @include apply_transition($transition-property, $transition-duration, $transition-timing);

  &.the-text--curr-selected {


    ~ .the-text {
      font-size: 0;
    }

    &.empty, &:empty {
      font-size: 0;

      ~ .the-text {
        font-size: 13px;
      }
    }
  }
}

.dzs-select-wrapper select {
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 30px;
  font-size: 13px;
  display: inline-block;
  left: 0;
  line-height: 30px;
  vertical-align: middle;
  cursor: pointer;
}

.dzs-select-wrapper .select-option {
  cursor: pointer;
}


.dzs-select-wrapper[class*="opener-"] select {

  display: none;


}

@import "css_inc/skin_beige";
@import "css_inc/skin_charm";


.dzs-select-wrapper.skin-justvisible {
  .dzs-select-wrapper-head {

    background-color: transparent;
    border-width: 0px;
  }
}

.dzs-select-wrapper.opener-bigoptions {
  .opener-bigoptions-wrap {
    border: 1px solid #bbbbbb;
    background-color: #d6d0bc;


    padding: 10px 0 0px 10px;

    opacity: 0;
    visibility: hidden;
    height: 0;

    position: relative;

    margin-bottom: 0px;
    top: 0px;


    transform: scale(0);

    transform-origin: center bottom;


    $transition-property: transform, margin, top;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);


    > div {
    }
  }

  .bigoption {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 150px;
    min-height: 150px;
    padding: 10px;

    box-sizing: border-box;

    background-color: rgba(255, 255, 255, 0.3);

    position: relative;

    > .center-it {
      @include center_it();
    }

  }
}


.dzs-select-wrapper.active .opener-bigoptions-wrap {

  opacity: 1;
  visibility: visible;


}


.dzs-select-wrapper.active-animation .opener-bigoptions-wrap {

  transform: scale(1);
  opacity: 1;
  visibility: visible;


  margin-bottom: 15px;
  top: 15px;

}


.option-for-blank:not(.a):not(.a):not(.a):not(.a):not(.a) {
  display: none;
}

.opener-is-fullwidth {
  & + .real-opener-wrap {
    $i: 1;

    &[data-opener-children-length="#{$i}"] {
      .bigoption {
        width: 100% / $i;
      }
    }

    $i: 2;

    &[data-opener-children-length="#{$i}"] {
      .bigoption {
        width: 100% / $i;
      }
    }

    $i: 3;

    &[data-opener-children-length="#{$i}"] {
      .bigoption {
        width: 100% / $i;
      }
    }
  }
}

@import "css_inc/opener";


@import "css_inc/skin_nova";
@import "css_inc/skin_checkbox";


.dzs-select-wrapper.opener-radio {
  .dzs-select-wrapper-head {
    display: none;
  }

  .bigoption {
    display: inline-block;
    margin-right: 15px;
    color: #fff;
    position: relative;
    line-height: 1;
    font-size: 14px;


    .small-bubble {
      $size: 12px;
      width: $size;
      height: $size;

      margin-left: 10px;

      background-color: #ffffff;
      display: inline-block;

      border-radius: 50%;
    }
  }

  .bigoption.active-checked:after {


    content: '\2713';

    color: #111;

    position: absolute;
    right: 0;
    top: 0;


  }


}

.dzs-checkbox-selector {

  font-size: 0;

  > label {
    cursor: pointer;
    display: inline-block;


    > input[type=checkbox] {
      display: none;
    }
  }
}


.color-option {

  $size: 23px;
  width: $size;
  height: $size;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.3);

  display: inline-block;

  margin-right: 5px;


  $transition-property: border-color;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;

  @include apply_transition($transition-property, $transition-duration, $transition-timing);
}

@import "css_inc/skin_colornova";
@import "css_inc/skin_bigwhite";
@import "css_inc/star_rating";


.option-con {
  position: relative;
}

.option-con .option-label {
  position: absolute;
  width: auto;
  display: inline-block;
  left: 50%;
  bottom: 15px;
  background-color: rgba(255, 255, 255, 0.7);
  color: #444444;
  padding: 3px 5px;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: color, background 0.3s ease-out;
}


body .dzs-select-wrapper.opener-listbuttons .bigoption.active-checked .option-label {
  background-color: rgba(30, 30, 30, 0.80);
  color: #ffffff;
}


.fig-position {
  width: 33.333%;
  padding-top: 33.333%;

  display: inline-block;

  position: relative;

  .fig-position--inner {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 0;
    margin: 0;

    width: calc(100% - 10px);
    height: calc(100% - 10px);

    border-radius: 5px;

    background-color: #dddddd;

    .the-text {
      @include center_it();

      font-weight: bold;
      font-size: 11px;
      text-transform: uppercase;
    }
  }
}