* {
box-sizing: border-box;
}
.calculator {
background: #F8F8F8;
box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.05);
border-radius: 8px;
padding: 16px;
}
.calculator__form-wrap {
position: relative;
}
.calculator__form-wrap:last-child {
margin-top: 24px;
}
.calculator__label{
cursor: default!important;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
}
.calculator__range-input {
position: absolute!important;
background-color: #d6d6d6!important;
-webkit-appearance: none!important;
bottom: 0!important;
left: -0!important;
padding: 0!important;
min-height: auto!important;
width: 100%!important;
height: 1px!important;
border-radius: 5px!important;
background-image: linear-gradient( #EEAF41,  #EEAF41)!important;
background-repeat: no-repeat!important;
transition: 0s!important;
}
.calculator__range-input[name~="sendingRange"] {
background-size: 10% 100%;
}
.calculator__range-input[name~="priceRange"] {
background-size: 3% 100%;
}
.calculator__range-input:focus {
box-shadow:  none!important;
}
.calculator__range-input:focus-visible {
box-shadow: 0px 0px 0px 2px #5bc0de!important;
}
.calculator__range-input::-webkit-slider-thumb {
-webkit-appearance: none;
height: 9px;
width: 9px;
border-radius: 50%;
background: #EEAF41;
cursor: ew-resize;
transition: background .3s ease-in-out;
}
.calculator__range-input::-webkit-slider-runnable-track  {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}
.calculator__form-text {
position: absolute;
bottom: 16px;
right: 14px;
font-family: 'Roboto';
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #ADADB8;
}
.calculator__input {
height: 48px!important;
width: 100%!important;
background: #fff!important;
border: 1px solid #D6D6D6!important;
border-radius: 2px!important;
padding: 0 16px 0 16px!important;
outline: none!important;
margin-top: 9px!important;
}
.calculator__input::placeholder {
color:#ADADB8
}
.calculator__input:focus {
box-shadow:  none!important;
}
.calculator__input:focus-visible {
box-shadow: 0px 0px 0px 2px #5bc0de!important;
}
.calculator__title {
font-family: 'Roboto';
text-align: center;
margin-top: 48px;
font-weight: 500;
font-size: 48px;
line-height: 56px;
color: #333;
}
.calculator__desc {
margin-top: 48px;
}
.calculator__block {
display: flex;
flex-direction: column;
padding: 32px;
background: #EEEEEE;
box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.05);
border-radius: 8px;
}
.calculator__block-title h3 {
margin: 0;
padding: 0;
font-family: 'Nunito Sans';
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #333333;
}
.calculator__block-title img {
width: 32px;
height: 32px;
margin-right: 16px;
}
.calculator__block--edo {
background: #FFFFFF;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
margin-bottom: 24px;
}
.calculator__block--edo .calculator__block-title{
display: flex;
align-items: center;
}
.calculator__block-price {
margin-top: 16px;
flex: 1;
}
.calculator__block-price > span:first-child {
margin-right: 8px;
}
#edo-price, #current-price {
font-family: 'Roboto';
font-weight: 500;
font-size: 32px;
line-height: 38px;
color: #333333;
}
.calculator__block-price span:last-child {
font-family: 'Roboto';
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #ADADB8;
}
.calculator__block-text {
margin-top: 32px;
font-family: 'Roboto';
font-weight: 400;
font-size: 18px;
line-height: 24px;
}
.calculator__block-link {
margin-top: 16px;
}
.calculator__block-link a{
text-decoration: none;
border: 0.1rem solid;
border-radius: 0.2rem;
cursor: pointer;
display: flex;
align-items: center;
height: 48px;
color: #fff;
line-height: 1;
outline: none;
transition: .3s;
width: 100%;
justify-content: center;
padding: 0 1.6rem;
background-color: #eeaf41;
border-color: #ec9b0e;
}
.calculator__block-link a:hover {
background: #eba01e;
box-shadow: 0 0.2rem 0.4rem rgb(0 0 0 / 7%);
}
.calculator__block-link a:active {
box-shadow: inset 0 0.3rem 0.4rem rgb(0 0 0 / 10%);
background: #ec9b0e;
}
.calculator__block-link a:focus-visible {
box-shadow: 0 0.2rem 0.4rem rgb(0 0 0 / 7%), 0 0 0 0.3rem #5bc0de;
background: #eba01e;
}
@media (min-width: 768px) {
.calculator {
padding: 56px;
}
.calculator__form {
display: flex;
align-items: center;
justify-content: center;
}
.calculator__form-wrap {
max-width: 320px;
}
.calculator__form-wrap:first-child {
margin-right: 32px;
}
.calculator__block {
width: calc(100% / 2);
}
.calculator__desc {
display: flex;
justify-content: center;
}
.calculator__block:first-child {
margin-right: 32px;
}
.calculator__block-link {
max-width: 229px;
}
.calculator__block--edo {
margin-bottom: 0;
}
.calculator__form-wrap:last-child {
margin-top: 0;
}
}