* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --calc-imt-blue: #0079A4;
    --calc-imt-text-color: #333;
    --calc-imt-font-family: Noto Sans, sans-serif;
    --gap-big: 64px;
    --gap-standart: 32px;
    --gap-small: 16px;
    --gap-xsmall: 8px;
    --padding-big: 64px;
    --padding-standart: 32px;
    --padding-medium: 24px;
    --padding-small: 16px;
    --padding-xsmall: 8px;
    --line-height-big: 150%;
    --border-radius-standart: 16px;
    --border-radius-big: 32px;
    --font-weight-bold: 700;
}

@media screen and (max-width: 576px) {
    :root {
        --gap-big: 48px;
        --gap-standart: 24px;
        --padding-medium: 16px;
        --gap-small: 12px;
        --gap-xsmall: 6px;
        --padding-big: 48px;
        --padding-standart: 24px;
        --padding-small: 12px;
        --padding-xsmall: 6px;
    }
}

.p {
    color: var(--calc-imt-text-color);
    font-family: var(--calc-imt-font-family);
    font-size: 18px;
    margin: 0;
}

@media screen and (max-width: 576px) {
    .p {
        font-size: 16px;
    }
}

.h2 {
    color: var(--calc-imt-text-color);
    font-family: var(--calc-imt-font-family);
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    margin: 0;
}

@media screen and (max-width: 576px) {
    .h2 {
        font-size: 20px;
    }
}

.white {
    color: white;
}

.blue {
    color: var(--calc-imt-blue);
}

.calc-imt-cont {
    padding: var(--padding-standart);
    border-radius: var(--border-radius-standart);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-big);
    background: url(assets/45bb8077e67bc587f833c80b3934bf43.png) center center;
    max-width: 1504px;
}

@media screen and (max-width: 768px) {
    .calc-imt-cont {
        grid-template-columns: 1fr;
        gap: var(--gap-standart);
    }
}

.calc-imt-control-panel {
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
}

.calc-imt-result {
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
}

.calc-imt-control-panel__slider-cont {
    background-color: var(--calc-imt-blue);
    border-radius: var(--border-radius-standart);
    padding: var(--padding-medium) var(--padding-standart);
    display: flex;
    gap: var(--gap-standart);
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 992px) {
    .calc-imt-control-panel__slider-cont {
        flex-wrap: wrap;
        padding-bottom: var(--padding-standart);
    }
}

/* .calc-imt-control-panel__slider-cont_height {

}

.calc-imt-control-panel__slider-cont_weight {

} */

.calc-imt-control-panel__text {
    font-family: var(--calc-imt-font-family);
    font-size: 24px;
    font-weight: 500;
    flex-shrink: 0;
    width: 100px;
    margin: 0;
}

@media screen and (max-width: 768px) {
    .calc-imt-control-panel__text {
        font-size: 20px;
        width: 81px;
    }
}

.calc-imt-control-panel__counter {
    font-size: 24px;
    font-family: var(--calc-imt-font-family);
    color: var(--calc-imt-blue);
    background-color: white;
    padding-top: var(--padding-xsmall);
    padding-bottom: var(--padding-xsmall);
    border-radius: var(--border-radius-standart);
    width: 96px;
    font-weight: var(--font-weight-bold);
    text-align: center;
    flex-shrink: 0;
    border: 0;
    margin: 0;
}

@media screen and (max-width: 768px) {
    .calc-imt-control-panel__counter {
        font-size: 20px;
    }
}

.calc-imt-control-panel__counter:focus {
    border: 0;
    outline: none;
}

.calc-imt-control-panel__counter::-webkit-outer-spin-button,
.calc-imt-control-panel__counter::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.calc-imt-control-panel__counter[type=number]{
    -moz-appearance: textfield;
}

.calc-imt-control-panel__slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #D3D4DA;
    outline: none;
    border-radius: 2px;
}

.calc-imt-control-panel__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 33px;
    height: 17px;
    background: white;
    border-radius: 6px;
    box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    background-image: url(assets/calc-imt-control-panel__slider.svg);
    background-position: center;
    background-size: 17px 9px;
    background-repeat: no-repeat;
}

.calc-imt-control-panel__slider::-moz-range-thumb {
    width: 33px;
    height: 17px;
    background: white;
    border-radius: 6px;
    box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    background-image: url(assets/calc-imt-control-panel__slider.svg);
    background-position: center;
    background-size: 17px 9px;
    background-repeat: no-repeat;
}

.calc-imt-result__cont {
    background: white;
    padding: var(--padding-standart);
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    border-radius: var(--border-radius-standart);
    box-shadow: 0px 4px 27px 0px rgba(0, 0, 0, 0.05);
}

.calc-imt-result__text {
    font-family: var(--calc-imt-font-family);
    color: var(--calc-imt-blue);
    font-size: 28px;
    font-weight: var(--font-weight-bold);
}

.calc-imt-result__text_with-line-bottom {
    padding-bottom: var(--padding-small);
    border-bottom: 1px solid var(--calc-imt-blue);
}

@media screen and (max-width: 768px) {
    .calc-imt-result__text-result {
        font-size: 20px;
    }
}

.calc-imt-result__number-result-cont {
    display: flex;
    padding-top: var(--padding-small);
}

.calc-imt-result__imt-count-cont {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xsmall);
    padding-right: var(--padding-standart);
    border-right: 1px solid var(--calc-imt-blue);
    flex: 1 1 0;
}

.calc-imt-result__rec-weight-cont {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xsmall);
    padding-left: var(--padding-standart);
    flex: 1 1 0;
}

@media (max-width: 768px) {
    .article-builder-content table {
        display: block;
        max-width: 100vw;
        overflow-x: scroll;
        scrollbar-width: none;
    }
}