/* --- sizeMap --- */
.fa-dot-circle-o:before {content: "\f192";} .fa-circle-o:before {content: "\f10c";}
.color .color-text {display:none;} .sizeMap-row .color .color-image, #Result {opacity: 0; animation: radio 1.5s forwards;}
@keyframes radio { 0% {opacity: 0;} 10% {opacity: 0;} 100% {opacity: 1;} }
.sizeMap-row .marker, .sizeMap-row .marker-noaktive {display:none;}
.sizeMap-row .name-color {display:block; padding: 0px; color: #3d3d3d; font-weight: 600;}
.sizeMap-row #Result {width: fit-content; display: inline-table; margin: 6px 0px 10px 0px; background: #f9e8d9; padding: 3px 6px 4px 6px; font-size: 14px; letter-spacing: 1px; font-family: Tahoma, Arial, sans-serif; font-weight: 500; 
border: dashed 1px #ff6a00; color: #373737;}
.sizeMap-row .color.active {border-color: #ff842b !important;}
.sizeMap-row .color {border-radius: 6%;}
.sizeMap-row .color {display: inline-block; width: 60px; height: 60px; margin: 0px 1px 0px 0px; cursor: pointer; text-align: center; border: 2px solid #ffffff; 
transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out;}
.sizeMap-row .color:hover {border-color: #A19B9B;}
.sizeMap-row .color-image {display: flex; margin: 3px auto; width: 50px; height: 50px; border-radius: 5%; box-shadow: 0px 0px 1px 0px #b3b3b3 inset;}
.sizeMap-row .size-block {position:relative; margin: 10px 0px 20px 0px;}
.sizeMap-row .size-title {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; color: #3d3d3d; font-weight: 600;}
.sizeMap-row .size {display: block; height: 40px; padding: 9px 2px 9px 10px; font-size: 15px; font-family: Tahoma, Arial, sans-serif; letter-spacing: 1.2px; color: #2b2b2b; cursor: pointer; border-bottom: 1px solid #b5b5b5; background: #ffffff; transition: all .3s ease-in-out;}
.sizeMap-row .size:hover {background: #EEEEEE;}
/* --- Выпадающий список вместо размера --- */
#dropdown-size {position:relative; width: 100%; height: 39px; margin: 8px 0px 0px 0px; padding: 9px 0px 8px 10px; background-color: #ffffff; border: 1px solid #b5b5b5; cursor: pointer; font-size: 14px; letter-spacing: 0.2px; 
box-shadow: inset -55px 0 25px -20px #fff; transition: all .3s ease-in-out;}
#dropdown-size:hover {background-color:rgba(230, 230, 230, 0.9);}
#dropdown-size.focus {background-color:rgba(230, 230, 230, 0.9);}
#dropdown-size .carat:after {position: absolute; display: block; content: ''; width: 10px; height: 10px; top: 50%; right: 14px; margin-top: -3px; border-bottom: 1px solid #000000; border-right: 1px solid #000000;
transform: rotate(45deg) translateY(-50%); transition: all .4s ease-in-out; transform-origin: 50% 0;}
#dropdown-size.open .carat:after {margin-top: 3px; transform: rotate(-135deg) translateY(-50%);}
.size-block .uris {display:none; position: absolute; top: 100%; left: -1px; right: 0; width: 100.3%; margin: 14px 0; z-index:910; border-top: 1px solid #b5b5b5; border-left: 1px solid #b5b5b5; border-right: 1px solid #b5b5b5; 
background: #fff; border-radius: 2px; box-sizing: border-box; box-shadow: 0px 1px 6px 4px rgba(0,0,0,.12);}
.size-block .uris:before {position: absolute; bottom: 100%; right: 16px; display: block; width: 8px; height: 8px; content: ''; margin-bottom: -4px; border-top: 1px solid #b5b5b5; border-left: 1px solid #b5b5b5;
background: #fff; box-shadow: 0px 1px 8px 3px rgba(0,0,0,.1); transform: rotate(45deg); transition: all .3s ease-in-out;}
.size-block .option-hover:before {background: #EEEEEE;} .property-form .opactos {opacity: 0.5;}
@keyframes opus { 0% {opacity: 0;} 30% {opacity: 0;} 100% {opacity: 0.3;} }
/* --- Стили вместо выбора цвета, заменяем круглые миниатюры имитирующие радиокнопки --- */
.color-block .name-color {margin-bottom: 0px;} .sizeMap-row .size-title-bloc {padding: 10px 0px 0px 0px;} 
.sizeMap-row .cveta-text {display: block; width: 100%; height: 39px; margin: 0px 0px 14px; border-radius: 0px; border: solid 1px #D1D1D1; text-align: left; letter-spacing: 0.4px;}
.sizeMap-row .cveta-text .color-text {position: relative; top: -2px; font-size: 14px; letter-spacing: 0.4px;}
.sizeMap-row .cveta-text.active .color-text {position: relative; top: -2px; font-size: 14px; letter-spacing: 0.4px;}    
.sizeMap-row .cveta-text:hover {border-color: #D1D1D1; background-color: #F0F0F0 !important;}
.sizeMap-row .cveta-text.active {cursor: default; pointer-events: none; 
/* --- background-color: #F0F0F0 !important; border: solid 1px #D1D1D1 !important; --- */
}	
.sizeMap-row .cveta-text .marker {display: none;}
.sizeMap-row .cveta-text.active .marker {display: inline-block; width: 19px; height: 19px; margin: 9px 4px 9px 8px; color: #ff7c00; font-size: 20px;}
.sizeMap-row .cveta-text .marker-noaktive {display: inline-block; width: 19px; height: 19px; margin: 9px 4px 9px 8px; color: #adadad; font-size: 20px;}
.sizeMap-row .cveta-text.active .marker-noaktive {display:none;}