.calculator {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: clamp(30px,30px + 60 * (100vw - 800px) / 1120,90px)
}

.calculator hr {
    width: 100%; height: 1px;
    border: none; border-bottom: 1px solid #E1E1E1
}

.calculator:is(calculator-unit-converter) .converter-heading { 
    width: 100%; 
    text-align: center 
}

.calculator .main-with-sidebar .main { 
    /* flex-basis: clamp(400px, 400px + 300 * (100vw - 800px) / 1120, 700px); */
    /* flex-basis: clamp(400px, calc(400px + (700 - 400) * ((100vw - 700px) / (1920 - 800))), 700px);  */
    flex-basis: clamp(400px, calc(400px + (600 - 400) * ((100vw - 600px) / (1920 - 800))), 600px); 
}

.calculator .main-with-sidebar .sidebar {
    top: 50px;
    position: sticky;
    /* flex-basis: clamp(300px, 300px + 150 * (100vw - 800px) / 1120, 450px); */
    flex-basis: clamp(300px, calc(300px + (500 - 300) * ((100vw - 500px) / (1920 - 800))), 500px); 
}

.calculator fieldset {
    padding: 0;
    width: 100%;
    border: none
}

.calculator fieldset legend { width: 100% }
.calculator fieldset legend .calculator-functionality-label { max-width: 40ch }
.calculator fieldset legend .calculator-functionality-description { max-width: 1150px }

.calculator .fields-wrapper {
    border-radius: clamp(15px, calc(15px + (35 - 15) * ((100vw - 800px) / (1920 - 800))), 35px);
    padding: clamp(15px, calc(15px + (35 - 15) * ((100vw - 800px) / (1920 - 800))), 35px);
}

.calculator .fields {
    border-bottom: 1px solid var(--cLblue);
    padding-bottom: 30px
}

.calculator .form-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 15px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 250px
}

.calculator .form-group label {
    font-size: var(--fs-24);
    display: flex;
    flex-direction: column;
    color: #757575
}

.calculator .form-group input {
    width: 100%;
    padding: 5px;
    font-size: var(--fs-32)
}

.calculator .form-group select { 
    padding: 5px 10px; 
    font-size: var(--fs-32) 
}

.calculator .form-group input.input-error,
.calculator .form-group select.input-error { 
    border: 1px dashed red 
}

.calculator .result-controls {
    gap: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

.calculator .result-controls button { 
    flex: 1; 
    width: 100% 
}

.calculator .calculator-result {
    gap: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: var(--cWhite);
    border-radius: clamp(15px, calc(15px + (35 - 15) * ((100vw - 800px) / (1920 - 800))), 35px);
    padding: clamp(15px, calc(15px + (35 - 15) * ((100vw - 800px) / (1920 - 800))), 35px);
}

.calculator .calculator-result:empty { display: none }

.calculator .calculator-result.errors {
    border: 1px dashed red;
    text-align: center;
    font-size: var(--fs-20)
}

.calculator .calculator-result.errors>* { width: 100% }

.calculator .calculator-message {
    display: flex;
    flex-direction: column;
    gap: clamp(15px,15px + 35 * (100vw - 800px) / 1120px);
    padding: 0 30px;
    text-align: center
}

.calculator .calculator-message .result-value,
.calculator .calculator-message .calculation-label { 
    font-size: var(--fs-20-24) 
}

.calculator .calculator-message .result-value { font-weight: 500 }

.calculator .triplet {
    display: flex;
    flex-basis: 400px;
    flex-direction: column
}

.calculator .triplet .triplet-label {
    display: flex;
    flex-direction: column;
    color: #757575;
    padding-bottom: 10px;
    font-size: var(--fs-24)
}

.calculator .triplet .time-field {
    flex-basis: unset;
    gap: 0;
    min-width: 100px;
    padding-top: 10px
}

.calculator.calculator-complex .calculator-wrapper {
    width: 100%;
    border-radius: clamp(15px, calc(15px + (35 - 15) * ((100vw - 800px) / (1920 - 800))), 35px);
    padding: clamp(15px, calc(15px + (35 - 15) * ((100vw - 800px) / (1920 - 800))), 35px);

    /* padding: clamp( 30px, 30px + 30 * (100vw - 800px) / 1120px) clamp(15px, 15px + 45 * (100vw - 800px) / 1120px); */
    background: var(--cWhite);
}

.calculator.calculator-complex .calculator-wrapper .form-group { flex: 1 }

.calculator.calculator-complex .calculator-wrapper.calculation-results .form-group {
    text-align: center;
    align-items: center;
    justify-content: center
}

.calculator.calculator-complex .fields { width: 100% }
.calculator.calculator-complex .calculation-result-fieldset .red { color: red }
.calculator.calculator-complex .calculation-result-fieldset .red:before { content: "+" }
.calculator.calculator-complex .calculation-result-fieldset .green { color: green }
.calculator.calculator-complex .calculation-result-fieldset label { text-align: center }
.calculator.calculator-complex .calculation-result-fieldset .fields { padding: 0; border: none }

.calculator.calculator-complex .calculation-result-fieldset .fields>*+*:before {
    content: "";
    width: 60%;
    padding-bottom: 30px;
    border-top: 1px solid #E1E1E1
}


.recmodel.button-style {
    font-size: calc(var(--fs-32) * var(--font-scale));
    line-height: calc(var(--lh-1_1) * var(--font-scale));
}

/* @media (prefers-color-scheme: dark) {
    .calculator .form-group label { color:var(--cGray) }
    .calculator .calculator-result { background:var(--cBlack) }
    .calculator .triplet .triplet-label { color:var(--cGray) }
    .calculator.calculator-complex .calculator-wrapper { background:var(--cBlack) }
} */