.rotate270 {
    transform: rotate(-90deg);
}

.rotate90 {
    transform: rotate(90deg);
}

.v-slider {
    transform-origin: center left;
    transform: rotate(-90deg);
    background: #1d3664;
}

.gradient-slider {
    background: linear-gradient(to right, #1d3664 30%,#808080 50%, #B30004 70%);
}

.slider {
    background: #1d3664;
}

.cooling-slider {
    background: #832CEB;
}
.cold-slider {
    background: #315AA7;
}
.hot-slider {
    background: #B30004;
}

.mud-checkbox.hot-checkbox .mud-button-root {
    color: #B30004;
}

.mud-checkbox.cold-checkbox .mud-button-root {
    color: #315AA7;
}

.mud-checkbox.cooling-checkbox .mud-button-root {
    color: #832CEB;
}

.grid-images{
    display: grid;
    place-items: center;
    height: 100%;
}

.akm_drawing {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    max-height: 370px;
    max-width: 100%;
}

.akm_image {
    max-height: 270px;
    max-width: 100%;
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    outline: none;
    opacity: .9;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #d3d3d3;
    cursor: pointer;
}

    input[type=range]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #d3d3d3;
        cursor: pointer;
    }



.test {
    background-color: seagreen;
}

.grid-KwInput-container {
    display: grid;
    align-items: center;
    margin: 1em;
    column-gap: 10px;
    grid-template-areas:
        " range range range range range range"
        " number_cold . . . . number_hot"
}

.grid--KwInpit-range {
    grid-area: range;

}

.grid--KwInpit-number_cold {
    grid-area: number_cold;
    align-self: start;
}

.grid--KwInpit-number_hot {
    display: grid;
    grid-area: number_hot;
    justify-content: end;
}

@media (min-width: 960px) {
    .grid-KwInput-container {
        display: grid;
        place-items: center;
        grid-template-areas:
            " number_cold range range range range range range number_hot"
    } 
}