/*
Compile-Minify: true
Compile-Area: everywhere
Compile-OutputGroup: headtag
Compile-Exports: product-selector-css
Compile-Dependencies: bootstrap, site
*/

/*.sb-product-selector-primary{
    background-color: #e9e9e9;padding:20px;margin-bottom:5px;
}*/
.sb-product-selector-primary .sb-selector-form {
    /*background-color: #e9e9e9;*/
    padding: 20px 0;
    margin-bottom: 5px;
    position: relative;
    min-height: 140px;
}
.sb-product-selector-availability{
    text-align:center;
}
/*@media (min-width: 769px) {
    .sb-product-selector-primary .sb-product-selector-multi-availability{
        position:absolute;top:0;right:15px;bottom:10px;
    }
    .sb-product-selector-primary .sb-product-selector-single-availability{
        
    }
    .sb-product-selector-primary .sb-product-selector-multi-availability .sb-product-selector-quantity{
        position:absolute;bottom:0;
    }
}*/

.radio-color {
    margin-bottom: 5px;
    width: 38px;
    height: 38px;
    background-position: center;
    background-repeat: no-repeat;
    border-color: #ccc;
    background-color: #fff;
}
.radio-color.active{
    border-color: #383634;
    border-bottom: 5px solid #383634;
}
.radio-upsell-color {
    width: 24px;
    height: 24px;
}

.radio-black {
    background-color: black;
}

.radio-blackmonochrome {
    background-color: #111;
}

.radio-opticalwhite {
    background-color: white;
}

.radio-charcoal {
    background-color: #A8AAAC
}

.radio-navy {
    background-color: navy;
}

.radio-pink {
    background-color: pink;
}

.radio-red {
    background-color: red;
}

.radio-white {
    background-color: white;
}
/*.radio-color.radio-black.active{
    border-color: white;
}*/

[data-toggle="buttons"]>.radio-color input[type="radio"] {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}

.sb-selector-option .sb-selector-input-group, .sb-selector-option .btn{
    margin-bottom: 5px;    
    margin-right: 5px;
}

.sb-selector-option select {
    /*background-color: #dbdddc;*/
    border-radius: 10px;
    /*-moz-appearance:none; /* Firefox 
    -webkit-appearance:none; /* Safari and Chrome 
    background: url('../images/selectarrows.png') no-repeat right #fff;*/
}

.sb-selector-upsell-option select {
    background-color: #fff;
    background: url('../images/selectarrows.png') no-repeat right #fff; 
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
} 

label.sb-product-not-available {
    border-style: dotted;
    opacity: 0.5;
}

label.sb-product-never-available {
    border-style: dotted;
    opacity: 0.5;
}
.colorlabel, .sizelabel {
    font-size: 12px;
    color: #666;
}

/*
    Used to override "sb-product-never-available" for all the labels with "radio-color"
    If the clicked option is color and not available 
    or color is selected and no size is selected (happens after the second call e.g select OOS color then select back an in-stock color it will fade the rest)
*/
.sb-product-never-available-override {
    border-style: solid !important;
    opacity: 1 !important;
}