#form-dileram {
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 3%;
    display: inline-block;
    max-width: 100%;
    z-index: 6;
    position: relative;
}

.raschet .banner__text-item span {
    color: #000;
}

#raschet h4 {
    margin-top: 0px;
    margin-bottom: 20px;
}

div.calc-controls .calc-heading {
    margin: 1em 0 0.5em 0;
    font-size: 2rem;
}
div.calc-controls .calc-section-heading {
    margin: 2em 0 1.5em 0;
    font-size: 1.5rem;
    font-weight: 500;
}
div.calc-controls dl {
    display: grid;
    grid-gap: 1.5rem 1rem;
    grid-template-columns: 1fr 3fr;
    margin-bottom: 3rem;
}
div.calc-controls dl dd {
    padding-top: 0.25em;
}
div.calc-controls dl dd.has-error,
div.calc-controls dl dt.has-error {
    color: #202a45;
}
div.calc-controls dl dd span.error-text {
    display: block;
    color: #202a45;
    font-size: 0.8em;
}
div.calc-controls textarea {
    width: 100%;
}
div.calc-controls input[type="text"] {
    width: 100%;
    height: auto;
}
div.calc-controls input[type="number"] {
    max-width: 8rem;
    height: auto;
    -moz-appearance: textfield;
}
div.calc-controls input[type="number"]::-webkit-outer-spin-button,
div.calc-controls input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
div.calc-controls textarea[required],
div.calc-controls input[required] {
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M14.641 11.439l-.005-.002.005-.008-2.475-1.429 2.486-1.435-.001-.001c.132-.081.176-.254.098-.389l-.006-.008.002-.001-.789-1.367-.001.001c-.08-.13-.247-.175-.381-.103l-.001-.001-2.491 1.438v-2.88h-.001c-.005-.155-.131-.279-.287-.279l-.011.001v-.002h-1.578v.001c-.153.004-.275.127-.28.279h-.001v2.876l-2.495-1.44-.001.001c-.137-.073-.308-.026-.386.109l-.004.009-.001-.001-.789 1.367h.001c-.073.134-.028.302.102.382l.005.003.002.002.003.001 2.489 1.437-2.434 1.406-.061.026c-.137.079-.184.255-.106.392l-.001.001.816 1.414.005-.003c.088.105.241.136.365.065l.004-.003.005.008 2.483-1.434v2.801l-.008.066c0 .158.128.287.286.288v.001h1.633v-.005c.136-.023.239-.141.239-.283l-.001-.005h.009v-2.867l2.426 1.4.053.04c.137.079.312.032.392-.104h.001l.791-1.371v-.002l.025-.043-.004-.003c.047-.129-.003-.277-.126-.348z' fill='red'/%3E%3C/svg%3E")
        right 0.6em no-repeat;
}
div.calc-controls div.radio-set {
    margin: 0 -0.4em -0.4em 0;
}



div.calc-controls div.radio-set input[type="radio"] {
	
	
	
    clip: rect(0 0 0 0);
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    white-space: nowrap;
    border: 0;
    overflow: hidden;
}









  





div.calc-controls div.radio-set input[type="radio"] + label {
	
  position: relative;
  display: inline-block;
  
  border: 2px solid #e9ecef;
  text-align: center;
  color: #292929;
  text-decoration: none;
   padding: 8px 10px;
  margin: 0 0.4em 0.4em 0;
  line-height: 1.3em;
  font-size: 14px;
  cursor: pointer;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.22);
  border-radius: 0.5rem;
  background-color: rgba(0, 0, 0, 0.02);
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   min-width: 40px;
	
  
	

	
}











div.calc-controls div.radio-set input[type="radio"] + label.color_label_0,
div.calc-controls div.radio-set input[type="radio"] + label.color_label_1 {
  display: block;
  width: 100%;
  border: 2px solid #e9ecef;
  text-align: center;
  color: #fff;
  text-decoration: none;
  padding: 8px 0;
  font-size: 14px;
  cursor: pointer;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.22);
  border-radius: 0.5rem;
}








/* 1) Контейнер */
div.calc-controls .radio-set {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

/* 2) Базовые стили для всех label */
div.calc-controls .radio-set input[type="radio"] + label {
  display: block;
  box-sizing: border-box;
  /* flex под контент, min-width для «красивых» маленьких кнопок */
  flex: 0 1 auto;
  min-width: 3em;

  padding: 8px 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.3;
  color: #292929;
  background-color: rgba(0,0,0,0.02);

  border: 2px solid #e9ecef;
  border-radius: 0.5rem;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.22);
  cursor: pointer;
  user-select: none;
}

/* 2a) Жёсткая ширина только для цветных */
div.calc-controls .radio-set 
  input[type="radio"] + label[class^="color_label"] {
  flex: 0 0 calc((100% - 4 * 0.4em) / 5);
}

/* 2b) Для НЕвыбранных цветных с data-invert=1 делаем текст чёрным */
div.calc-controls .radio-set 
  input[data-invert="1"] + label[class*="color_label"] {
  color: #000 !important;
}

/* 3) Hover / focus для всех */
div.calc-controls .radio-set input[type="radio"]:hover + label,
div.calc-controls .radio-set input[type="radio"]:focus + label {
  background-color: rgba(0,0,0,0.5);
  color: #fff;
}

/* 4) Active для всех */
div.calc-controls .radio-set input[type="radio"]:active + label {
  background-color: #202020;
  color: #fff;
}

/* 5) Disabled для всех */
div.calc-controls .radio-set input[type="radio"]:disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 6a) Checked для обычных (не-цветных) */
div.calc-controls .radio-set 
  input[type="radio"]:checked + label:not([class*="color_label"]) {
  background-color: #202a45;
  color: #fff;
  box-shadow: none;
  cursor: default;
}

/* 6b) Hover/active поверх checked для обычных */
div.calc-controls .radio-set 
  input[type="radio"]:checked + label:not([class*="color_label"]):hover {
  background-color: #000;
}
div.calc-controls .radio-set 
  input[type="radio"]:checked + label:not([class*="color_label"]):active {
  background-color: #111;
  color: #fff;
}

/* 7a) Checked для цветных: прячем цифру, сохраняем фон */
div.calc-controls .radio-set 
  input[type="radio"]:checked + label[class*="color_label"] {
  position: relative;
  /* сделали !important, чтобы перебить правило data-invert=1 */
  color: transparent !important;
  box-shadow: none;
  cursor: default;
}

/* 7b) Псевдо-галочка по центру у цветных */
div.calc-controls .radio-set 
  input[type="radio"]:checked + label[class*="color_label"]::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 1.2em;
  line-height: 1;
  color: #fff;
  pointer-events: none;
}

/* 7c) Для выбранных color_label с data-invert=1 — галочка чёрная */
div.calc-controls .radio-set 
  input[data-invert="1"]:checked + label[class*="color_label"]::after {
  color: #000 !important;
}

/* 7d) Hover/active для checked color_label: лёгкое затемнение */
div.calc-controls .radio-set 
  input[type="radio"]:checked + label[class*="color_label"]:hover {
  filter: brightness(0.85);
}
div.calc-controls .radio-set 
  input[type="radio"]:checked + label[class*="color_label"]:active {
  filter: brightness(0.7);
}



@media screen and (max-width: 619px) {
    div.calc-controls .calc-heading {
        font-size: 1.5rem;
    }
    div.calc-controls .calc-section-heading {
        margin: 1.25em 0 1em 0;
        font-size: 1.25rem;
    }
    div.calc-controls dl {
        grid-gap: 0.35rem 0;
        grid-template-columns: 1fr;
        margin-bottom: 1.5rem;
    }
    div.calc-controls dl dd {
        padding-top: 0;
        font-weight: 500;
    }
    div.calc-controls dl dt {
        margin-bottom: 1rem;
    }
}

h5.itogo_racshet {
    font-size: 38px;
    color: red;
    padding-top: 10px;
}

.loader_img {
    margin-bottom: 20px;
}