@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;
}


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

  vertical-align: middle;


  //transform: translateY(-50%);

  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;
    /*color: #FFFFFF;*/


    padding: 10px 0 0px 10px;

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

    position: relative;

    margin-bottom: 0px;
    top: 0px;
    //height: auto;


    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;


  /*transform: scale(1);*/

}


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

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


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

}

$color: rgba(0, 0, 0, 0.05);
.dzs-select-wrapper.opener-list {

  .search-field {
    width: calc(100% - 10px);

    border: 1px solid rgba(0, 0, 0, .1);

    margin: 5px 5px;

    padding: 5px 10px;
  }

  .opener-list-wrap {

    max-height: 200px;
    overflow: auto;
    display: none;

    //box-shadow:         inset 0 0 10px #000000;

    border: 1px solid #ddd;
    background-color: #ffffff;
    border-top-width: 0;


    > .search-field {
      font-size: 13px;

    }

    > .opener-list {

      > .bigoption {
        padding: 10px 14px;
        line-height: 1;
        background-color: #ffffff;

        font-size: 13px;

        display: block;
      }

      > .bigoption:hover {
        background-color: #eeeeee;
      }
    }

  }

  &.skin-tooltip {
    .search-field {
      display: none;
    }

    .opener-list-wrap {

      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate3d(-50%, 0, 0);
      z-index: 5;

      overflow: visible;

      &:before {
        content: "";
        $border_size: 5px;

        border: $border_size solid transparent;

        border-bottom-color: #ffffff;

        position: absolute;
        bottom: 100%;
        left: 49%;
      }

      margin-top: 15px;

      max-width: 180px;

      padding: 5px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 5px;

      box-shadow: 0 0 5px rgba(0, 0, 0, .15);

      .bigoption:first-child {
        border-radius: 5px 5px 0 0;
      }

      .bigoption:last-child {
        border-radius: 0 0 5px 5px;
      }

      .bigoption {
        padding: 12px;

        text-align: center;

        > * {
          display: inline-block;
          vertical-align: middle;

          & + * {
            margin-left: 5px;
          }
        }
      }


      .the-icon {

      }
    }
  }

  &.opener-list-absolute {
    .opener-list-wrap {
      position: absolute;
      left: 0;
      top: 100%;
      min-width: 150px;
      z-index: 55;
    }
  }
}

.dzs-select-wrapper.opener-list.active-animation, .dzs-select-wrapper.opener-list.active {
  .opener-list-wrap {
    display: block;

  }
}


.dzs-select-wrapper.opener-listbuttons {

  width: 100%;

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

  .bigoption {
    display: inline-block;
    margin-right: 0;

  }

  .bigoption.active-checked {

    background-color: #20dbfc;
  }

  &.skin-gamma {

    .bigoption {
      margin-right: 0;
      margin-bottom: 0;


      color: #222222;
      border-radius: 5px;
      $transition-property: color, background;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;

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

    .bigoption.active-checked {

      background-color: #2d3d3b;
    }
  }

  &.skin-btn-secondary {
    .selector-btn-secondary {
      display: inline-block;
      width: auto;
      padding: 5px 11px;

      background-color: #DDDDDD;

      border-radius: 4px;

      margin-right: 4px;
      margin-bottom: 4px;
      font-size: 11px;
      font-weight: bold;

      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);

      $transition-property: color, background;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);


      color: #222222;

      &:hover, &.active-checked {
        background-color: #444444;
        color: #ffffff;
      }
    }
  }


  &.option-display-block {
    .bigoption {

      .option-con {

        display: block;
      }
    }
  }

}



@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;

    //font-size: 13px;

    > 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;
    }
  }
}