﻿
.spc_container{--selection-plain-color:var(--primary-color);--selection-overlay-color:var(--primary-color-030);}

.spc_container{position:relative;}
.spc_container .waiting{position:absolute;top:0;right:0;bottom:0;left:0;min-height:42px;background-color:rgba(255,255,255,0.75);}
.spc_container .waiting i{position:absolute;top:50%;left:50%;margin-left:-0.5em;margin-top:-0.5em;font-size:28px;}
.spc_container .displayPage{display:none;}
.spc_container .displayPage.active{display:block;}

.spc_container .simplifiedModePanel{display:none;text-align:center;margin-bottom:1em;padding:.5em;}
.spc_container .simplifiedModePanel span{cursor:pointer;color:var(--light-text-color);text-decoration:none;}
.spc_container .simplifiedModePanel span > i.iconOpen{display:none;}
.spc_container .simplifiedModePanel span > i.fa-fw{text-align:left;}
.spc_container .simplifiedModePanel span:hover{color:var(--text-color);text-decoration:underline;}
.spc_container .simplifiedModePanel span:hover > i.iconOpen{display:inline-block;}
.spc_container .simplifiedModePanel span:hover > i.iconClose{display:none;}
.spc_container.simplifiedMode .simplifiedModePanel{display:block;}

.spc_container .selection:not(:last-child){margin-bottom:30px;}
.spc_container .selection > span.title{font-size:1.3em;}
.spc_container .selection > span.title::after{content:':';}
.spc_container .selection > span.description{display:block;}

.spc_container .selection .externalQuantitySelector{float:right;}
.spc_container .selection.smallView .externalQuantitySelector{display:none;}
.spc_container .selection .externalQuantitySelector span.title{font-size:1.3em;margin-right:10px;vertical-align:middle;}
.spc_container .selection .externalQuantitySelector span.title::after{content:':';}
.spc_container .selection .externalQuantitySelector span.component{vertical-align:middle;}

.spc_container .selection.standardDropDown{}
.spc_container .selection.standardDropDown > span.title{display:inline-block;}
.spc_container .selection.standardDropDown select{display:inline-block;min-width:200px;margin-left:30px;border:0;background-color:#f1f1f1;padding:2px;}
.spc_container .selection.standardDropDown select option.hidden{display:none;}
.spc_container .selection.standardDropDown.smallView > span{display:block;}
.spc_container .selection.standardDropDown.smallView select{display:block;margin-left:0;min-width:unset;width:100%;}

.spc_container .selection.sizeRadioList{user-select:none;}
.spc_container .selection.sizeRadioList > span.title{display:block;}
.spc_container .selection.sizeRadioList .sizePreview{position:relative;margin-top:10px;height:230px;background-color:#f1f1f1;background-position:center center;background-repeat:no-repeat;overflow:hidden;}
.spc_container .selection.sizeRadioList .sizePreview img.hands{position:absolute;}
.spc_container .selection.sizeRadioList .sizePreview img.objects{position:absolute;}
.spc_container .selection.sizeRadioList .sizePreview span.photo{position:absolute;z-index:2;background-color:#fff;transform:rotate(-1deg);}
.spc_container .selection.sizeRadioList .sizePreview span.photo .printArea{position:absolute;display:inline-flex;justify-content:center;align-items:center;font-size:1.2em;color:#999;font-weight:bold;}
.spc_container .selection.sizeRadioList .sizePreview span.photo .printArea.standardBackground{background-size:cover;background-repeat:no-repeat;background-position:center 15%;/*background-image:url('/Images/SelectionValues/SizeRadioList/photo.jpg?v=1');*/}
.spc_container .selection.sizeRadioList .sizePreview span.photo .printArea.poster{border:1px dashed #bbb;margin:-1px;}
.spc_container .selection.sizeRadioList .sizePreview span.photo .printArea .sizeLabel{position:absolute;top:-1.4em;}
.spc_container .selection.sizeRadioList .sizePreview span.panel{position:absolute;z-index:2;background-color:#fff;display:inline-flex;justify-content:center;align-items:center;font-size:1.2em;color:#999;font-weight:bold;}
.spc_container .selection.sizeRadioList .sizePreview span.panel.withImage{background-color:transparent;box-shadow:none !important;}
.spc_container .selection.sizeRadioList .sizePreview span.panel.withImage > img{position:absolute;width:103%;height:103%;object-fit:fill;z-index:-1;}
.spc_container .selection.sizeRadioList .sizePreview div.overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;}
.spc_container .selection.sizeRadioList.smallView .sizePreview:not(.panel){display:none;}

.spc_container .sizePreview.animated, .spc_container .sizePreview.animated img.hands, .spc_container .sizePreview.animated img.objects, .spc_container .sizePreview.animated div.overlay{transition:.1s;}
.spc_container .sizePreview.animated span.photo, .spc_container .sizePreview.animated span.photo .printArea, .spc_container .sizePreview.animated span.panel{transition:.1s;}

.spc_container .selection.sizeRadioList .radioListScroller{margin-top:10px;max-height:calc(5 * (1.5em + 10px));overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;}
.spc_container .selection.sizeRadioList .radioListScroller .radioList::before, .spc_container .selection.sizeRadioList .radioListScroller .radioList::after{content:'';display:block;flex-shrink:0;position:-webkit-sticky;position:sticky;height:0;left:0;right:0;z-index:1;}
.spc_container .selection.sizeRadioList .radioListScroller .radioList::before{order:0;top:0;background:linear-gradient(#fff,rgba(255,255,255,0));}
.spc_container .selection.sizeRadioList .radioListScroller .radioList::after{order:25;bottom:0;background:linear-gradient(rgba(255,255,255,0),#fff);}
.spc_container .selection.sizeRadioList .radioListScroller.scrollTop .radioList::before{height:20px;margin-bottom:-20px;}
.spc_container .selection.sizeRadioList .radioListScroller.scrollBottom .radioList::after{height:20px;margin-top:-20px;}

.spc_container .selection.sizeRadioList .radioList{display:flex;flex-flow:column nowrap;position:relative;}
.spc_container .selection.sizeRadioList .radioList > .suggested{order:10;}
.spc_container .selection.sizeRadioList .radioList > .other{order:20;}
.spc_container .selection.sizeRadioList .radioList > h4{position:-webkit-sticky;position:sticky;top:-1px;z-index:2;margin:0;padding:10px 5px;background-color:#fff;transition:box-shadow .3s;}
.spc_container .selection.sizeRadioList .radioList > h4 b{font-size:1.15em;}
.spc_container .selection.sizeRadioList .radioList > h4 .goToBest{float:right;margin-right:2em;color:#666;cursor:pointer;font-weight:normal;opacity:0;transition:opacity .3s;}
.spc_container .selection.sizeRadioList .radioList > h4.isSticky:not(.underSticky){box-shadow:0 6px 6px -3px rgba(43,43,43,0.2);padding-top:11px;}
.spc_container .selection.sizeRadioList .radioList > h4.isSticky .goToBest{opacity:1;}
.spc_container .selection.sizeRadioList .radioList > h4:not(:first-of-type){margin-top:20px;}
.spc_container .selection.sizeRadioList .radioList > h4.suggested{order:5;}
.spc_container .selection.sizeRadioList .radioList > h4.other{order:15;}
.spc_container .selection.sizeRadioList .radioList > h4 i.fa-info-circle{color:#999;cursor:help;}
.spc_container .selection.sizeRadioList .radioList > div{display:flex;align-items:flex-start;}
.spc_container .selection.sizeRadioList .radioList > div.hidden{display:none;}
.spc_container .selection.sizeRadioList .radioList > div.alternate{background-color:#f6f6f6;}
.spc_container .selection.sizeRadioList .radioList > div input[type="radio"]{flex:0 0 15px;box-sizing:border-box;height:calc(1.5em + 6px);margin:2px 8px 2px 7px;z-index:1;}
.spc_container .selection.sizeRadioList .radioList > div label{flex:1 1 100%;box-sizing:border-box;padding:3px 3px 3px 30px;margin-left:-30px;border:2px solid transparent;display:flex;align-items:flex-start;line-height:1.5em;cursor:pointer;transition:background-color .2s, border-color .2s;}
.spc_container .selection.sizeRadioList .radioList > div input[type="radio"]:checked + label{background-color:var(--selection-overlay-color);border-color:var(--selection-plain-color);}
.spc_container .selection.sizeRadioList .radioList > div label .value{min-width:150px;}
.spc_container .selection.sizeRadioList .radioList > div label .propIcon{display:none;}
.spc_container .selection.sizeRadioList:not(.smallView) .radioList.showPropIcon > div label .propIcon{display:inline-block;}

.spc_container .selection.sizeRadioList .radioList > div label .promoContainer{display:inline-flex;align-items:center;gap:10px;margin:-1px auto;padding:1px 10px;background-color:var(--discount-color);color:#fff;border-radius:3px;}
.spc_container .selection.sizeRadioList .radioList > div label .promoContainer:empty{display:none;}
.spc_container .selection.sizeRadioList .radioList > div label .promoContainer .price{font-weight:bold;}

.spc_container .selection.sizeRadioList .radioList > div label .priceContainer{display:inline-flex;flex-direction:column;margin:0 2em 0 auto;}
.spc_container .selection.sizeRadioList .radioList > div label .priceContainer > span{display:inline-flex;flex-direction:row;color:#666;overflow:hidden;transition:height .2s, opacity .2s;}
.spc_container .selection.sizeRadioList .radioList > div label .priceContainer > span.actual{color:var(--discount-color);}
.spc_container .selection.sizeRadioList .radioList > div label .priceContainer > span:not(.actual){font-size:.8em;line-height:1.2em;height:1.2em;opacity:1;}
.spc_container .selection.sizeRadioList .radioList > div label .priceContainer > span .quantity{display:none;flex-grow:1;}
.spc_container .selection.sizeRadioList .radioList > div label .priceContainer > span .price{margin-left:auto;text-align:right;}
.spc_container .selection.sizeRadioList .radioList > div label .priceContainer > span .price.discount{margin-left:.5em;min-width:70px;text-align:right;}
.spc_container .selection.sizeRadioList .radioList.discountedPrice > div label .priceContainer > span .price:not(.discount){color:var(--standard-text-color);}
.spc_container .selection.sizeRadioList .radioList > div label .priceContainer > span .original{order:-1;margin-left:auto;color:#666;font-weight:normal;text-decoration:line-through;}
.spc_container .selection.sizeRadioList .radioList > div label .priceContainer > span .original.range{min-width:70px;margin-left:auto;}
.spc_container .selection.sizeRadioList .radioList > div label .priceContainer > span:not(.actual) .original.range{visibility:hidden;}

.spc_container .selection.sizeRadioList .radioList > div input[type="radio"]:not(:checked) + label .priceContainer > span:not(.actual){height:0;opacity:0;}
.spc_container .selection.sizeRadioList .radioList > div input[type="radio"]:not(:checked) + label .priceContainer > span .original.range{text-align:right;}
.spc_container .selection.sizeRadioList/*:not(.smallView)*/ .radioList:not(.withoutPriceRange) > div input[type="radio"]:checked + label .priceContainer > span .quantity{display:inline-block;}
.spc_container .selection.sizeRadioList/*:not(.smallView)*/ .radioList:not(.withoutPriceRange) > div input[type="radio"]:checked + label .priceContainer > span .price{min-width:70px;}
.spc_container .selection.sizeRadioList.smallView .radioList > div label .value{min-width:100px;}
.spc_container .selection.sizeRadioList.smallView .radioList > div label .priceContainer{margin-right:10px;}
/*.spc_container .selection.sizeRadioList.smallView .radioList > div label .priceContainer > span:not(.actual){display:none;}*/
.spc_container .selection.sizeRadioList.smallView .radioList > div label .priceContainer > span .price.discount{margin-left:auto;font-weight:normal;min-width:0;}
.spc_container .selection.sizeRadioList.smallView .radioList > div label .priceContainer > span .original{display:none;}
.spc_container .selection.sizeRadioList.smallView .radioList > h4 .goToBest{margin-right:10px;}

.spc_container .selection.sizeRadioList .togglePropIcons{display:none !important;position:relative;bottom:-15px;text-align:center;line-height:1em;font-size:0.9em;user-select:none;}
.spc_container .selection.sizeRadioList .togglePropIcons span{color:#bbb;cursor:pointer;transition:.2s;}
.spc_container .selection.sizeRadioList .togglePropIcons span:hover{color:#999;}
.spc_container .selection.sizeRadioList .togglePropIcons span:hover span{text-decoration:underline;}
.spc_container .selection.sizeRadioList.smallView .togglePropIcons{display:none;}

.spc_container .selection.iconRadioList{}
.spc_container .selection.iconRadioList > span.title{display:block;}
.spc_container .selection.iconRadioList .radioList .visualGroupTitle {font-weight:normal;font-size:1.1em;margin:15px 0 0;}
.spc_container .selection.iconRadioList .radioList .visualGroupDescription {color:#999;margin-top:5px;}
.spc_container .selection.iconRadioList .radioList .visualGroup{display:flex;flex-wrap:wrap;justify-content:center;white-space:nowrap;margin-top:15px;gap:10px;}
.spc_container .selection.iconRadioList .radioList .visualGroup > div{flex:0 0 calc((100% - 10px) / 2);display:flex;}
.spc_container .selection.iconRadioList .radioList .visualGroup > div.hidden{display:none;}
.spc_container .selection.iconRadioList .radioList .visualGroup > div input[type="radio"]{display:none;}
.spc_container .selection.iconRadioList .radioList .visualGroup > div label{flex-grow:1;padding:20px;border:2px solid transparent;border-radius:5px;text-align:center;white-space:normal;cursor:pointer;transition:background-color 0.2s, border-color 0.2s;}
.spc_container .selection.iconRadioList .radioList .visualGroup > div input[type="radio"]:checked + label{background-color:var(--selection-overlay-color);border-color:var(--selection-plain-color);}
.spc_container .selection.iconRadioList .radioList .visualGroup > div label .value{display:inline-block;font-size:1.2em;}
.spc_container .selection.iconRadioList .radioList .visualGroup > div label .price{color:var(--discount-color);font-size:1.1em;}
.spc_container .selection.iconRadioList .radioList .visualGroup > div label .price:not(:empty){margin-left:5px;}
.spc_container .selection.iconRadioList .radioList .visualGroup > div label .originalPrice{color:#666;text-decoration:line-through;}
.spc_container .selection.iconRadioList .radioList .visualGroup > div label .originalPrice:not(:empty){margin-left:5px;}
.spc_container .selection.iconRadioList .radioList .visualGroup > div label .description{display:block;}
.spc_container .selection.iconRadioList .radioList .visualGroup > div label .iconImg{display:inline-block;width:100%;max-width:269px;margin-top:10px;}
.spc_container .selection.iconRadioList.smallView .radioList .visualGroup > div:not(.hidden){flex:1 0 100%;}
.spc_container .selection.iconRadioList.smallView .radioList .visualGroup > div label{padding:5px 10px 10px 10px;}
.spc_container .selection.iconRadioList.smallView .radioList .visualGroup > div label .iconImg{width:75%;}

.spc_container .selection.iconRadioList.smallIcons .radioList .visualGroup{white-space:normal;}
.spc_container .selection.iconRadioList.smallIcons .radioList .visualGroup > div{flex:0 0 calc((100% - 20px) / 3);}
.spc_container .selection.iconRadioList.smallIcons .radioList .visualGroup > div label{padding:10px;}
.spc_container .selection.iconRadioList.smallIcons .radioList .visualGroup > div label .value{display:block;}
.spc_container .selection.iconRadioList.smallIcons .radioList .visualGroup > div label .price:not(:empty){margin-left:0;display:block;}
.spc_container .selection.iconRadioList.smallIcons .radioList .visualGroup > div label .iconImg{max-width:170px;}
.spc_container .selection.iconRadioList.smallIcons.smallView .radioList .visualGroup{flex-direction:column;}
.spc_container .selection.iconRadioList.smallIcons.smallView .radioList .visualGroup > div label{display:flex;align-items:center;}
.spc_container .selection.iconRadioList.smallIcons.smallView .radioList .visualGroup > div label .iconImg{order:-1;margin:0 10px 0 0;flex:0 1 auto;}
.spc_container .selection.iconRadioList.smallIcons.smallView .radioList .visualGroup > div label span{margin-top:0;flex:1 1 auto; text-align:left;}

.spc_container .selection.iconRadioList .radioList .visualGroup.secondary > div label{display:flex;align-items:center;text-align:left;padding:10px;}
.spc_container .selection.iconRadioList .radioList .visualGroup.secondary > div label .iconImg{flex:0 0 auto;width:80px;order:-1;margin:0 10px 0 0;}

.spc_container .propIcon span{display:inline-block;padding:1px 0;margin-right:6px;line-height:normal;position:relative;bottom:1px;border-radius:6px 0;color:#fff;text-align:center;min-width:3em;font-size:11px;background-color:#666;}
.spc_container .propIcon span.prop_1_1{background-color:#5C2300;}
.spc_container .propIcon span.prop_1_1:before{content:'1:1';}
.spc_container .propIcon span.prop_4_3{background-color:#D90000;}
.spc_container .propIcon span.prop_4_3:before{content:'4:3';}
.spc_container .propIcon span.prop_3_2{background-color:#0300DB;}
.spc_container .propIcon span.prop_3_2:before{content:'3:2';}
.spc_container .propIcon span.prop_16_9{background-color:#267F13;}
.spc_container .propIcon span.prop_16_9:before{content:'16:9';}
.spc_container .propIcon span.prop_2_1{background-color:#880DA3;}
.spc_container .propIcon span.prop_2_1:before{content:'2:1';}
.spc_container .propIcon span.prop_3_1{background-color:#D50081;}
.spc_container .propIcon span.prop_3_1:before{content:'3:1';}
.spc_container .propIcon span.prop_other{background-color:#5797DE;}
.spc_container .propIcon span.prop_other:before{content:'?';}

@media only screen and (max-width:1002px) {
.spc_container .selection.sizeRadioList .togglePropIcons{bottom:-7.5px;}
}

@media only screen and (max-width:780px) {
.spc_container .selection:not(:last-child){margin-bottom:15px;}
.spc_container .selection > span.description{display:none;}

.spc_container .selection.sizeRadioList .radioList > div label{flex-wrap:wrap;}
.spc_container .selection.sizeRadioList .radioList > div label .promoContainer{order:2;width:100%;margin:5px 26px 5px 0;justify-content:center;}
}