* {box-sizing: border-box; position: relative;}
:root{font: 18px/1.2 Ubuntu, sans-serif;}
html {width: 100%; height: 100%;}
body {width: 100%; height: 100%; margin: 0;  display: flex;}

.form{display: flex; flex: 0 0 400px; flex-direction: column; gap: 2rem; background: #333; color: white; padding: 2rem 1rem; border-right: 2px solid #888; height: 100%; overflow: auto;}
.form-section{display: flex; flex-direction: column; gap: 1rem;}
.form-title{font-weight: 700; text-transform: uppercase;}
.form-item{display: flex; flex-direction: column; gap: 5px; flex: 1;}
.form-row{display: flex; align-items: center; gap: 1rem;}
.form-boxes{display: flex; flex-direction: column; gap: 5px;}
.form-box{display: flex; align-items: center; gap: 5px; cursor: pointer;}
.form-radios{display: flex; border: 1px solid #888; border-radius: 5px;}
.form-radio{flex: 1; border: 1px solid #888; padding: 0.5rem 1rem; text-align: center; color: #888; cursor: pointer;}
.form-radio:first-child{border-radius: 4px 0 0 4px;}
.form-radio:last-child{border-radius: 0 4px 4px 0;}
.form-radio:has(input:checked){background: white; border-color: white; color: #333; font-weight: 700;}
.form-radio > input{display: none;}
.form-radio > input{display: none;}
.form input:not([type=checkbox]){flex: 1; width: 100%; height: 2rem; border: 2px solid #888; padding: 0.5rem; border-radius: 5px; font: inherit;}
.form button{flex: 1; height: 2rem; border: 2px solid #888; border-radius: 5px; font: inherit; background: #fff;}
.form button:hover{cursor: pointer; background: #eee;}

.view{display: grid; grid-template: 1fr 12% / 11% 1fr 11%; flex: 0 1 1000px; max-height: 100%; min-width: 400px; margin: auto; border: 2rem solid transparent; gap: 0 0.5rem; aspect-ratio: 3/2;}
.view-sides{display: flex; flex-direction: column; justify-content: space-evenly; padding: 0 0 70px;}
.view-sides img{width: 100%; display: block;}
.view-pictures{display: flex; gap: 0.5rem; grid-area: 2 / 2 / 3 / 3; padding: 0 45px;}
.view-pictures > *{flex: 1; height: 100%; object-fit: contain;}

.chart {width: 100%; height: 100%;}
.chart text{font-size: 1rem !important; font-family: Ubuntu, sans-serif;}


@media print {
    .form{display: none;}
}


@media (max-width: 1260px) {
    :root{font-size: 14px;}
    .form{flex: 0 0 300px;}
}
@media (max-width: 1000px) {
    :root{font-size: 12px;}
    .form{flex: 0 0 250px;}
}
@media (max-width: 800px) {
    :root{font-size: 10px;}
    .form{flex: 0 0 200px;}
    .form input:not([type=checkbox]){border-width: 1px;}
}