.calculator {  }
.calculator .card {
padding: 0;
border: 1px solid #CED7D9;
border-radius: 10px;
overflow: hidden;
}
.calculator .card-body {
display: flex;
flex-direction: column;
gap: 48px;
}
.calculator .card-body,
.calculator .card-footer {
padding: 48px;
}
.calculator .card-footer {
background: #f3f2f1;
border-top: 1px solid #CED7D9
}
@media (width < 992px) {
.calculator .card-body {
gap: 32px;
}
.calculator .card-body,
.calculator .card-footer {
padding: 32px;
}
}
@media (width < 768px) {
.calculator .card-body {
gap: 24px;
}
.calculator .card-body,
.calculator .card-footer {
padding: 20px;
}
}
.calculator-price {
color: var(--e-global-color-secondary);
font-size: 16px;
font-weight: 600;
line-height: 20px;
text-align: right;
}
.calculator-price.primary { font-size: 24px;
line-height: 30px;
}
@media (width < 768px) {
.calculator-price.primary {
font-size: 20px;
line-height: 26px;
}
}
.form-fieldset {
display: flex;
flex-direction: column;
gap: 24px;
}
.form-fieldset-legend {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
color: var(--e-global-color-secondary);
font-size: 21px;
font-weight: 600;
line-height: 26px;
}
@media (width < 768px) {
.form-fieldset {
gap: 16px;
}
.form-fieldset-legend {
font-size: 18px;
line-height: 22px;
}
}
.form-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: space-between;
align-items: center;
gap: 8px;
}
@media (width >= 768px) {
.form-group {
grid-template-columns: repeat(3, 1fr);
}
.form-group .col-span-2 {
grid-column: span 2 / span 2;
}
}
.form-label {
color: var(--e-global-color-text);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-height: 46px !important;
padding: 8px 16px;
background-color: #fff;
border: 1px solid #757575 !important;
border-radius: 6px !important;
color: var(--e-global-color-text) !important;
font-size: 16px;
font-weight: 400;
line-height: 20px;
transition: none !important;
}
.form-control:focus {
border-color: var(--e-global-color-primary) !important;
}
select.form-control {
background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%2317873E\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'m2 5 6 6 6-6\'/%3e%3c/svg%3e');
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px 12px;
}
@media (width < 768px) {
.form-group:not(.form-group-row) {
grid-template-columns: repeat(1, 1fr);
}
} .form-radio-group {
display: flex;
justify-content: flex-end;
gap: 8px;
}
@media (width < 768px) {
.form-radio-group {
justify-content: flex-start;
}
}
.form-radio {
--checked-color: var(--e-global-color-primary);
--checked-bg: rgba(23, 135, 62, 0.05);
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: 10px;
padding: 12px 16px;
border: 1px solid #757575;
border-radius: 6px;
transition: all .15s ease-in-out;
cursor: pointer;
color: var(--e-global-color-secondary);
font-size: 16px;
font-weight: 600;
line-height: 20px;
}
.form-radio:has(input:checked) {
background-color: var(--checked-bg);
border-color: var(--checked-color);
color: var(--checked-color);
}
.form-radio input {
appearance: none;
display: grid;
place-content: center;
background-color: #fff;
margin: 0;
width: 20px;
height: 20px;
border: 1px solid #757575;
border-radius: 50%;
transform: translateY(-0.075em);
}
.form-radio input:checked {
border-color: var(--checked-color);
}
.form-radio input:before {
content: '';
width: 10px;
height: 10px;
background-color: var(--checked-color);
border-radius: 50%;
transform: scale(0);
transition: all .15s ease-in-out;
}
.form-radio input:checked::before {
transform: scale(1);
}
.form-radio.secondary {
--checked-bg: rgba(0, 0, 0, 0.05);
--checked-color: var(--e-global-color-secondary);
}