#container {
    width: 100px;
    height: 100px;
    position: relative;
}

#view_overlay,
#infoi {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#infoi {
    z-index: 10;
}

#imgSpin {
    position: absolute;
    top: -9999px;
    left: -9999px;
    right: -9999px;
    bottom: -9999px;
    margin: auto;
}

.btnSpinControl {
    background: #000000;
    color: #66cc33;
    /*  width: 90%;*/
    /*width: 40px;*/
    /*max-width: 40px;
            max-height: 40px;*/
    /*min-width: 25px;
            min-height: 25px;*/
    font-size: 24px;
    border: none;
    margin-left: 1px;
    padding-bottom: 5px;
}

.h45 {
    /*height:45px;*/
}

.btnSpinRotator {
    width: 88%;
}

    .btnSpinRotator i {
        vertical-align: top;
        font-size: 22px;
        margin-top: 9px;
    }

.btnSpinZoomIn {
    width: 88%;
    margin-right: 1px;
}

.btnSpinZoomOut {
    width: 88%;
    margin-left: 1px;
}

.btnSpinControlDisabled {
    background: #76767c !important;
    color: #000 !important;
    /*width: 40px;*/
    /*max-width: 40px;
    max-height: 40px;*/
    /*min-width: 25px;
    min-height: 25px;*/
}

.btnViewSelect {
    /*max-width: 80px;
            height: 45px;*/
    width: 100%;
    /*height: 60px;*/
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    border: 2px solid #E5E5E9;
    margin-left: 2px;
}

    .btnViewSelect:focus {
        outline: solid #66cc33 1px;
    }

.btnViewSelectActive {
    border: 2px solid #66cc33 !important;
}

.btnViewSelect:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.spin-cntl-hdr-container {
    height: 40px;
    margin-top: 20px;
}

.fas {
    font-size: 22px;
}

.spin-cntl-hdr-container .spin-border {
    width: 100%;
    height: 8px;
    border-right: 2px solid #E5E5E9;
    border-left: 2px solid #E5E5E9;
    border-top: 2px solid #E5E5E9;
    margin-top: -30px;
}

.spinCntlHeader {
    text-align: center;
    color: #9c9c9c;
    font-weight: 400;
    height: 40px;
    /*border-right: 2px solid #E5E5E9;
    border-left: 2px solid #E5E5E9;*/
}

.btnSpinRotator {
    margin-right: 1px;
}

.spinCntlHeader .spin-hdr-bg {
    padding: 0 10px;
    display: inline-block;
    background-color: white;
    color: #76767c;
}

/**/
.btnSpinControl.color-btn-round {
    border-radius: 50%;
    width: 42px;
    height: 42px;
    color: none;
    border: 2px solid #E5E5E9;
}

.color-btn-round-active {
    border: 2px solid #66cc33 !important;
    width: 42px !important;
    height: 42px !important;
}



.btnSpinControl.color-btn-round:focus {
    border: 2px solid #66cc33;
    color: transparent;
    /*      width: 44px;*/
    height: 44px;
}


#spinCntSec1 {
    padding-right: 5px;
}

#spinCntSec2 {
    padding-left: 5px;
    padding-right: 5px;
}

#spinCntSec3 {
    padding-left: 5px;
    padding-right: 5px;
}

#spinCntSec4 {
    padding-left: 5px;
}

.select-color-text span {
    text-align: center;
    display: block;
    /*font-weight: bold;*/
}

.select-color-text {
    /*  display: inline-block;*/
    width: 100%;
    /* margin-left: -100px;
    margin-right: 100px;*/
    padding-left: 25%;
    padding-top: 0px;
}

#spinnerLabels_mobile {
    display: none;
    width: 100%;
    text-align: center;
}

#imgSpinnerContainer {
    width: 100%;
    height: 450px;
    overflow: hidden;
    border: solid 0px #000;
    position: relative;
}

.sp360ClrName {
    white-space: normal !important;
}

@media (max-width: 2000px) {
}

@media (max-width: 1200px) {
    .SpinnerControls .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .btnViewSelect {
        /*height: 80px;*/
    }

    .SpinnerControls .col-lg-3 {
        /*background-color:#ff0000 !important;*/
    }

    .SpinnerControls .col-lg-4 {
        /*background-color: #ff0000 !important;*/
    }

    .SpinnerControls .col-lg-6 {
        /*background-color: #ff0000 !important;*/
    }

    .SpinnerControls .col-lg-12 {
        /*background-color: #ff0000 !important;*/
    }

    .select-color-text, .select-color-text_m {
        /*  display: inline-block;*/
        width: 50% !important;
        /* margin-left: -100px;
    margin-right: 100px;*/
        margin-top: -30px !important;
        padding-left: 0 !important;
        padding-top: 35px;
    }

    #spinCntSec1 {
        padding-left: 5px;
    }


    .znZoom {
        width: 46% !important;
    }

}

@media (max-width: 1100px) {
    .select-color-text, .select-color-text_m {
        /*  display: inline-block;*/
        width: 51% !important;
        /* margin-left: -100px;
        margin-right: 100px;*/
        padding-left: 0 !important;
        padding-top: 35px
    }

    #imgSpinnerContainer {
        zoom: 80%
    }

    .znZoom {
        height: 35px !important;
    }
}

@media (max-width: 996px) {

    .znZoom {
        height: 30px !important;
    }


    /*.SpinnerControls .col-md-6 {
                flex: 0 0 50%;
                max-width: 50%;
            }*/
    .btnViewSelect {
        /*height: 80px;*/
    }

    .SpinnerControls .col-lg-3 {
        /*background-color:#ff0000 !important;*/
    }

    .SpinnerControls .col-lg-4 {
        /*background-color: #ff0000 !important;*/
    }

    .SpinnerControls .col-lg-6 {
        /*background-color: #ff0000 !important;*/
    }

    .SpinnerControls .col-lg-12 {
        /*background-color: #ff0000 !important;*/
    }

    .select-color-text, .select-color-text_m {
        /*  display: inline-block;*/
        width: 51% !important;
        /* margin-left: -100px;
             margin-right: 100px;*/
        padding-left: 0 !important;
        margin-top: -10px !important;
    }

    #spinCntSec1 {
        padding-left: 5px;
    }

    #imgSpinnerContainer {
        zoom: 65%
    }
}


@media (max-width: 766px) {

    .znZoom {
        height: 100% !important;
    }




    .select-color-text, .select-color-text_m {
        /*  display: inline-block;*/
        width: 51% !important;
        /* margin-left: -100px;
             margin-right: 100px;*/
        padding-left: 0 !important;
        margin-top: -30px !important;
    }

    #spinCntSec1 {
        padding-left: 5px;
    }

    #imgSpinnerContainer {
        zoom: 100%;
        height: 360px;
    }
}

@media (max-width: 646px) {

    .select-color-text {
        /*  display: inline-block;*/
        width: 51% !important;
        /* margin-left: -100px;
             margin-right: 100px;*/
        padding-left: 0 !important;
        margin-top: -20px !important;
    }

    #spinCntSec1 {
        padding-left: 5px;
    }



    .btnSpinControl.color-btn-round {
        border-radius: 50%;
        width: 50px;
        height: 50px;
        color: none;
        border: 2px solid #E5E5E9;
    }

    /*    .color-btn-round-active {
        border: 2px solid #00ff21 !important;
        width: 50px !important;
        height: 50px !important;
    }
*/


}

@media (max-width: 560px) {

    .znbtnSpinZoomIn {
        text-align: left;
    }

    .znbtnSpinZoomOut {
        text-align: left;
    }

    .znLBL {
        margin-left:-10px;
    }


    .select-color-text {
        /*  display: inline-block;*/
        width: 51% !important;
        /* margin-left: -100px;
             margin-right: 100px;*/
        padding-left: 0 !important;
        margin-top: -30px !important;
    }

    #imgSpinnerContainer {
        height: 355px;
        zoom: 80%;
    }


    #spinCntSec1 {
        padding-left: 5px;
    }
}


@media (max-width: 500px) {
    .SpinnerControls .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #imgSpinnerContainer {
        width: 100%;
        margin-left: -10px;
        margin-right: 2px;
        height: 250px;
        zoom: 70%
    }


    #imgSpin {
        zoom: 70%
    }



    #spinnerLabels_mobile {
        display: block;
        text-align: center;
    }

    #spinnerLabels_desktop {
        display: none;
    }

    .btnViewSelect {
        /*height: 90px;*/
    }

    #spinCntSec1 {
        padding-left: 5px;
    }


    .select-color-text {
        /*  display: inline-block;*/
        width: 51% !important;
        /* margin-left: -100px;
            margin-right: 100px;*/
        padding-left: 0 !important;
        background-color: blue;
    }

    .spinnerLabels_mobile {
        width: 100% !important;
    }

    .select-color-text_m {
        width: 100% !important;
    }




    .btnSpinControl.color-btn-round {
        border-radius: 50%;
        width: 50px !important;
        height: 50px !important;
        color: none;
        border: 2px solid #E5E5E9;
    }

    .color-btn-round-active {
        border: 2px solid #66cc33 !important;
        width: 50px !important;
        height: 50px !important;
    }
}




@media (max-width: 415x) {

    #imgSpin {
        zoom: 80%
    }

    #imgSpinnerContainer {
        height: 210px;
    }




    .btnSpinControl.color-btn-round {
        border-radius: 50%;
        width: 50px !important;
        height: 50px !important;
        color: none;
        border: 2px solid #E5E5E9;
    }

    .color-btn-round-active {
        border: 2px solid #66cc33 !important;
        width: 50px !important;
        height: 50px !important;
    }
}









@media (max-width: 320px) {

    #imgSpin {
        zoom: 70%
    }

    #imgSpinnerContainer {
        height: 200px;
    }



    .btnSpinControl.color-btn-round {
        border-radius: 50%;
        width: 50px !important;
        height: 50px !important;
        color: none;
        border: 2px solid #E5E5E9;
    }

    .color-btn-round-active {
        border: 2px solid #66cc33 !important;
        width: 50px !important;
        height: 50px !important;
    }
}