#dlina, #shirina {width: 80px;}

@media (max-width: 544px)
{
	.pictt { height: 70vmin!important; width: 70vmin!important;}
}

/* === Общие стили для всех range === */
.input-range {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    background: #e0e0e0;
    border-radius: 4px;
    height: 6px;
}

/* === Вертикальный ползунок — настоящий, без transform === */
.vertical-slider-wrapper {
    display: inline-block;
    width: 8px;
    height: 35vmin;
    position: relative;
}

.input-range.vertical {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 4px;
    outline: none;
    /* Критически важно: чтобы thumb был по центру */
    writing-mode: vertical-lr; /* ← делает трек вертикальным */
    -webkit-writing-mode: vertical-lr;
    transform: rotate(180deg);
}

/* Стиль трека (полосы) — вертикальный */
.input-range.vertical::-moz-range-track {
    width: 8px;
    height: 100%;
    background: #e0e0e0;
    border-radius: 4px;
}

/* Стиль thumb — круглый, жёлтый, как у горизонтального */
.input-range.vertical::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fed700;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    /* Центрируем thumb по вертикали */
    margin-top: -10px; /* half of thumb height */
}

.input-range.vertical::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fed700;
    cursor: pointer;
    border: 2px solid #333;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin-top: -10px;
}

/* === Горизонтальный ползунок (под изображением) === */
.input-range.horizontal {
    width: 35vmin;
    height: 6px;
}

/* === Стиль для "ползунка" (thumb) — Chrome / Firefox === */
.input-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fed700;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.input-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fed700;
    cursor: pointer;
    border: 2px solid #333;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.horizontal-slider-wrapper {
    display: inline-block;
    width: 35vmin;
    height: 6px;
}

.input-range.horizontal {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 4px;
    outline: none;
}

.input-range.horizontal::-webkit-slider-track,
.input-range.horizontal::-moz-range-track {
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 4px;
}



.pictt {display: inline-block; height: 35vmin ; width: 35vmin ; border: 1px #eee solid; padding: 5px;}

.single_variation_wrap {float: right;}
.left {float: left;}

.itogi {
	width: 100%;
	 border-top: 1px solid #ddd;
	 padding: 15px 0 0 15px;

}





nav {margin-bottom: 0!important;}
	.button {color: #FFF; background-color: #fed700; float: right;}
	.ajax-reply{ margin-top:2em; clear: both;}


.lbp {text-align: center;}
[type="radio"] {display: none;}

.grow {margin: 0 auto;}
.grow:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  opacity: 1;
  text-align: center;

}

.lbl {vertical-align: top; width: 150px;}

.lbl span {
	width: 100%;
    display: block;
	min-height: 37px;
	max-width: 150px;
    text-align: center;
	cursor: pointer;
	}


label div {width: 100px; height: 100px; cursor: pointer; background-size: contain; opacity: 0.5; background-repeat:no-repeat; background-position-x: center;}
label span {opacity: 0.8;}
label span input{ width: 35px; background-color: #e7e7e6; text-align: center;}

[type="radio"]:disabled + label  {
   background-color: #e1e1e1;
}

[type="radio"]:disabled + label span  {
    opacity: 0.3;
}


[type="radio"]:checked + label div, [type="radio"]:checked + label span  {
    opacity: 1;
}

[type="radio"]:disabled + label div, [type="radio"]:disabled + label span  {
    cursor: no-drop;
}

legend {    line-height: 1.5em;
    color: #333e48;
	width: 60%;
	margin: 5px;}
fieldset {border: 1px orange solid; padding: 7px;}

#material_img_mater {max-height: 350px; margin: 0 auto;}

#material {
    display: inline-block;
    max-width: 100%;
    padding: .375rem 1.75rem .375rem .75rem;
    padding-right: .75rem \9;
    color: #55595c;
    vertical-align: middle;

    background-image: none \9;
    background-size: 8px 10px;
    border: 1px solid #ccc;
    -moz-webearance: none;
    -webkit-webearance: none;
    border-radius: 1.071em;
    color: #7e7e7e;
    border-color: #e3e3e3;
}