@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
    transition-property: $transition-property;transition-duration: $transition-duration;-moz-transition-property:$transition-property;-moz-transition-duration: $transition-duration;-webkit-transition-property:$transition-property;-webkit-transition-duration: $transition-duration;-o-transition-property:$transition-property;-o-transition-duration: $transition-duration;-ms-transition-property:$transition-property;
    -ms-transition-duration: $transition-duration;-ms-transition-timing-function:$transition-timing;

    @if $transition-timing == ease-out-quart {
        -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
        -moz-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
        -o-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
        transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    } @else {
        -webkit-transition-timing-function:$transition-timing;
        -moz-transition-timing-function:$transition-timing;
        -o-transition-timing-function:$transition-timing;
        transition-timing-function: $transition-timing;
    }
}
@mixin boxsizing() {
    -moz-box-sizing:    border-box;   -webkit-box-sizing: border-box;    box-sizing:        border-box;
}



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{
    display: none;
}


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

    max-width: 100%;


  opacity: 0;

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

  @include apply_transition($transition-property, $transition-duration, $transition-timing);
}
.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: #d6d0bc;


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


.dzs-select-wrapper .the-text {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 13px;
    line-height: 1; }
.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;


}

.dzs-select-wrapper.skin-beige{

}
.dzs-select-wrapper.skin-beige:after {

        position: absolute;
        content: '\f107';
        font-family: FontAwesome;
        color: #777777;
        font-size: 12px;
        right: 10px;
        top: 8px;

    top: 50%;
    margin-top: -5px;

        pointer-events: none;


    transform: rotate(0deg);

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



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

}
.dzs-select-wrapper.select-focused.skin-beige:after {

    transform: rotate(90deg);

}

.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;*/

        margin-top: 15px;
        padding: 10px 0 0px 10px;

        display: none;

        transition-property: all;
        transition-duration: 0.2s;
        -moz-transition-property: all;
        -moz-transition-duration: 0.2s;
        -webkit-transition-property: all;
        -webkit-transition-duration: 0.2s;
        -o-transition-property: all;
        -o-transition-duration: 0.2s;
        -ms-transition-property: all;
        -ms-transition-duration: 0.2s;
        -ms-transition-timing-function: linear;
        -webkit-transition-timing-function: linear;
        -moz-transition-timing-function: linear;
        -o-transition-timing-function: linear;
        transition-timing-function: linear;

        transform: scale(0);



    }

    .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);

    }
}


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

    display: block;


    /*transform: scale(1);*/

}


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

    transform: scale(1);

}


.dzs-select-wrapper.opener-listbuttons{

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

    .bigoption{
        display: inline-block;
        margin-right: 0;
        color:#fff;
    }
    .bigoption.active{

        background-color: #20dbfc;
    }


}

.dzs-select-wrapper.opener-listbuttons.skin-nova{


    font-size:0;

        .bigoption.active{
            background-color: #2d6987;
            color: #ffffff;
        }
        .bigoption{

            font-size: 13px;
            background-color: #FAFAFA;
            color: #222222;

            line-height: 1;
            padding: 10px;
            border-right: 1px solid rgba(0,0,0,.3);

            display: inline-block;


            font-size: 13px;

            $transition-property: color,background;
            $transition-duration: 0.3s;
            $transition-timing: ease-in;

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


        }



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




}


.dzs-select-wrapper.opener-listbuttons.skin-checkbox{

    .bigoption{
        display: inline-block;
        margin-right: 10px;
        color:#fff;
        padding: 3px 3px;
    }


    .bigoption.active{

        position: relative;
        background-color: transparent;

    }
    .bigoption.active:before{

        background-color: #ffffff;

        content: '';


        position: absolute;
        right:0;
        top: auto;
        bottom:4px;

        width: 12px;
        height: 12px;
        border-radius: 50%;
    }
    .bigoption.active:after{

        background-color: transparent;

        content: '\2713';

        font-size: 12px;

        color:#111;
        line-height: 1;

        position: absolute;
        right:0;
        top: auto;
        bottom:3px;
    }
}

.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: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;
        }
    }
}
.dzs-checkbox-selector.skin-nova{

    >label{
        input:checked + .the-label{
            background-color: #2d6987;
            color: #ffffff;
        }
        .the-label{

            font-size: 13px;
            background-color: #FAFAFA;
            color: #222222;

            line-height: 1;
            padding: 10px;
            border-right: 1px solid rgba(0,0,0,.3);

            display: inline-block;



            $transition-property: color,background;
            $transition-duration: 0.3s;
            $transition-timing: ease-in;

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


        }
    }

    >label:first-child{
        .the-label{
            border-radius: 5px 0 0 5px;
        }
    }
    >label:last-child{
        .the-label{
            border-radius: 0 5px 5px 0;
        }
    }

}