


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

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


.submit-shortcode{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 5555;
}



.shortcode-output{

    width: 100%;
    height: auto;
    margin-top: 10px;
    padding: 10px;
    background-color: #d3d3d3;
    color: #444;
    font-family: Courier New, Arial;
}
.shortcode-output:empty{

    display: none;
}


.warning{
    background-color: #dab37a;
    padding: 10px 15px;

    font-size: 11px;
    color: #444444;

    display: inline-block;
}


.player-mockup{
    max-width: 450px;

    position: relative;
    .the-img{
        opacity: 0.6;
    }

    .bottom-right-buttons-area{
        position: absolute;

        right:0;
        text-align: right;

        top: 44.44%;

        min-width: 25px;
        min-height: 25px;

        border: 1px dashed rgba(132, 62, 173, 0.71);
    }
    .bottom-buttons-area{
        position: absolute;

        left:0;
        text-align: left;

        top: 70%;

        min-width: 25px;
        min-height: 25px;

        border: 1px dashed rgba(173, 162, 80, 0.71);
    }
}








*[name=extrahtml_in_bottom_controls_from_player]{
    width: 100%;
}
.dzs-col-md-6{
    textarea{

        width: 100%;
    }
}

.btn-zoomsounds{
    position: relative;
    padding: 7px 10px;
    border-radius: 3px;
    line-height: 1;
    white-space: nowrap;

    margin-right: 5px;
    font-weight: bold;

    color: #222222;
    text-decoration: none;

    font-size: 13px;

    cursor: pointer;

    &:before, > .the-bg{
        content: "";
        position: absolute;
        top:0; left:0; width: 100%; height: 100%;

        background-color: #eaeaea;
        border-radius: 4px;

        transform: scale(1);

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

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

    }


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

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

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

    >.the-icon{
        margin-right: 6px;

        >svg{
            display: block;

            path, polygon, polyline{
                fill: #444;

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

                @include apply_transition($transition-property, $transition-duration, $transition-timing);
            }
        }
    }
    .show-on-active{
        display: none;
    }
}



.player-but,.player-but-no-style{



    display: inline-block;
    position: relative;

    vertical-align: middle;

    margin-right: 5px;
}

$color: #444444;
.player-but{
    $size: 28px;
    width: $size;
    height: $size;

    background-color: transparent;


    color: $color;

    .the-icon-bg {

        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        border: 1px solid $color;

        border-radius: 50%;

        transform: translate3d(0%, 0%, 0) scale(1);


        transform: translate3d(0%,0%,0) scale(1);


        $transition-property: transform;
        $transition-duration: 0.3s;
        $transition-timing: ease-out;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }
    svg.svg-icon{

        width: 15px;
        height: 15px;
    }
    .svg-icon{

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%,-50%,0) scale(1);
        -webkit-transform: translate3d(-50%,-50%,0) scale(1);



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

        path{
            fill: $color;
        }
    }

    &:hover{
        .the-icon-bg{

            transform: translate3d(0%,0%,0) scale(0.9);
            -webkit-transform: translate3d(0%,0%,0) scale(0.9);
        }
        svg.svg-icon{
            transform: translate3d(-50%,-50%,0) scale(1.1);
            -webkit-transform: translate3d(-50%,-50%,0) scale(1.1);
        }
    }



}