.calculator {
width: 81.7708333333vw;
margin: 3vw auto !important;
}
.calculator h3 {
font-size: 1.4vw;
}
.calculator .style-blue-btn {
background: linear-gradient(45deg, #1372f7, #1372f7);
height: 3.5vw;
width: 96%;
margin: 0 auto;
justify-content: center;
}
.calculator .style-blue-btn::after {
-webkit-animation: blickBtn 3s infinite;
}
@-webkit-keyframes blickBtn {
0% {
top: -5.2083333333vw;
left: -4.1666666667vw;
}
15% {
top: -5.2083333333vw;
left: 36.0416666667vw;
}
100% {
top: -5.2083333333vw;
left: 36.0416666667vw;
}
}
@keyframes blickBtn {
0% {
top: -5.2083333333vw;
left: -4.1666666667vw;
}
15% {
top: -5.2083333333vw;
left: 36.0416666667vw;
}
100% {
top: -5.2083333333vw;
left: 36.0416666667vw;
}
}
.calculator .nice-select {
margin: 0;
padding: 0 1.1vw 0 0.4vw;
border-radius: 7px;
border-color: #1372f7;
}
.calculator .nice-select .option {
padding-left: 0;
padding-right: 0;
text-align: center;
}
.calculator .nice-select span {
font-size: 0.9vw;
}
.monthlyPayment-text {
font-size: 1.8vw;
font-weight: 400;
}
.text-muted {
font-size: 1vw;
text-align: justify;
line-height: 1.2em;
}
.text-muted,
.result-label,
.range-description,
.fs-4,
.monthlyPayment-text {
color: #112d86 !important;
}
.person-type__button.active,
.person-type__button:hover:not(.active) {
color: #1372f7 !important;
}
.person-type__button {
color: #66729a !important;
}
.card-input .card-input-text {
color: #2f3e55;
}
.tooltip {
--bs-tooltip-bg: #1372f7;
--bs-tooltip-color: #fff;
opacity: 1 !important;
}
input[type="range"]::-webkit-slider-thumb,
input[type="range"]:active::-webkit-slider-thumb {
background: #1372f7 !important;
}
.result-value {
color: #1372f7;
}
.fs-4 {
font-weight: 400;
}
.person-type {
display: flex;
align-items: center;
width: 80%;
height: 2.5vw;
background: #f1f3f8;
border: 1px solid #e4e7ef;
border-radius: 28px;
box-sizing: border-box;
}
.person-type__button {
flex: 1;
height: 100%;
border: 0;
border-radius: 20px;
background: transparent;
font-size: 1.1vw;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.person-type__button.active {
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.card-input {
display: flex;
align-items: center;
width: 100%;
height: 70%;
padding: 10% 7%;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
box-sizing: border-box;
}
.card-input .value-input {
flex: 1;
min-width: 0;
padding: 0;
border: 0;
outline: none;
background: transparent;
font-size: 1.3vw;
font-weight: 600;
}
.card-input .card-input-text {
flex-shrink: 0;
padding: 0.3vw 0.5vw;
border-radius: 7px;
background: #f5f7fb;
font-size: 1vw;
font-weight: 500;
}
.card-input input::-webkit-inner-spin-button,
.card-input input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.card-input input[type="number"] {
-moz-appearance: textfield;
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 0.25vw;
border-radius: 3px;
background: #d3d3d3;
}
input[type="range"]::-webkit-slider-runnable-track {
height: 0.25vw;
border-radius: 3px;
background: transparent;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
margin-top: -0.4vw;
width: 1.1vw;
height: 1.1vw;
border-radius: 50%;
cursor: pointer;
}
.calculator {
margin: 5% auto;
}
.card-body {
border-radius: 50px;
background: url(https://yoowills.by/wp-content/uploads/2022/10/quiz-bg.jpg);
background-size: cover;
}
.calc-price {
margin-bottom: 7vw !important;
}
.questions .wrapper {
width: 86.25vw;
}
.questions {
margin: 7vw !important;
}
.questions__title {
padding: 0;
}
.calculator-title {
font-size: 2.5vw;
font-weight: 700;
}
.image-card {
background-color: #e4edfb;
border-radius: 20%;
width: 80%;
height: 80%;
text-align: center;
}
.image-card img {
width: 60%;
margin: auto;
}
.form-label {
font-weight: 600;
font-size: 1.25vw;
}
.tooltipSpan {
font-size: 1.25vw;
cursor: pointer;
}
.card {
background: #f4f6fa;
border: none;
padding: 5%;
border-radius: 16px;
height: 100%;
}
.result-label {
font-size: 1.1vw;
}
.result-value {
font-size: 3.5vw;
font-weight: 700;
line-height: 4vw;
}
.result-row {
padding: 0.5vw 0;
border-bottom: 1px solid #dee2e6;
}
.result-row:last-child {
border-bottom: 0;
}
input[type="range"] {
cursor: pointer;
}
.currency-wrapper {
display: none;
}
.invalid-message {
color: #dc3545;
font-size: 13px;
display: none;
}
.range-description {
display: flex;
justify-content: space-between;
font-size: 0.9vw;
margin-top: 0.5vw;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.container,
.container-fluid,
.row {
--bs-gutter-x: 1.5vw;
--bs-gutter-y: 0;
}
.d-flex {
display: flex !important;
}
.d-block {
display: block !important;
}
.align-items-center {
align-items: center !important;
}
.justify-content-between {
justify-content: space-between !important;
}
.position-relative {
position: relative !important;
}
.w-100 {
width: 100% !important;
}
.row {
display: flex;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-0.5 * var(--bs-gutter-x));
margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row>* {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
margin-top: var(--bs-gutter-y);
}
.col-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-2 {
flex: 0 0 auto;
width: 15%;
}
.col-3 {
flex: 0 0 auto;
width: 26.66666667%;
}
.col-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.col-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
.p-4 {
padding: 1.5vw !important;
}
.p-lg-5 {
padding: 3vw !important;
}
.ps-0 {
padding-left: 0 !important;
}
.pe-0 {
padding-right: 0 !important;
}
.pe-4 {
padding-right: 1.5vw !important;
}
.ps-0 {
padding-left: 0 !important;
}
.ms-3 {
margin-left: 1vw !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-2 {
margin-bottom: 0.5vw !important;
}
.mb-3 {
margin-bottom: 1vw !important;
}
.mb-4 {
margin-bottom: 1.5vw !important;
}
.mb-5,
.mb-6 {
margin-bottom: 2vw !important;
}
.mt-2 {
margin-top: 1vw !important;
}
.my-3 {
margin-top: 1.5vw !important;
margin-bottom: 1.5vw !important;
}
.g-4 {
--bs-gutter-x: 1.5vw;
--bs-gutter-y: 1.5vw;
}
.fs-4 {
font-size: 1.3vw !important;
}
.fs-5 {
font-size: 2vw !important;
}
@media (min-width: 769px) {
.col-lg-5 {
flex: 0 0 auto;
width: 41.66666667%;
}
.col-lg-7 {
flex: 0 0 auto;
width: 58.33333333%;
}
.p-lg-5 {
padding: 3vw !important;
}
}
@media (max-width: 768.98px) {
.col-lg-5,
.col-lg-7 {
width: 100%;
}
.p-4 {
padding: 1.5vw !important;
}
.fs-4 {
font-size: 4vw !important;
}
.small {
font-size: 1.8vw;
}
.calculator-title {
font-size: 6.25vw;
}
.calculator .card-body {
padding: 4vw 3vw !important;
border-radius: 25px;
background: #e8f1fe;
}
.calculator h3 {
font-size: 5vw;
}
.calculator .style-blue-btn {
height: 6vw;
}
.result-block {
display: block !important;
}
.result-block .fs-4 {
margin-top: 2vw;
font-weight: 500;
}
.my-3 {
margin-top: 4vw !important;
margin-bottom: 4vw !important;
}
.fs-5 {
font-size: 7vw !important;
}
.col-lg-5 {
margin-top: 4vw;
}
.col-1 {
width: 7%;
}
.calculator .nice-select {
padding: 0 8vw 0 3vw;
display: flex;
height: 7vw;
margin: 1vw 0;
}
.calculator .nice-select span {
margin: auto;
}
.monthlyPayment-text {
font-size: 4.9vw;
}
.mb-6,
.mb-4 {
margin-bottom: 4vw !important;
}
.mb-3 {
margin-bottom: 3vw !important;
}
.result-label {
font-size: 4vw;
}
.result-value {
font-size: 9vw;
line-height: 10vw;
}
.mb-2 {
margin-bottom: 3.5vw !important;
}
.calculator .nice-select span,
.text-muted {
font-size: 3.4vw;
}
.person-type {
height: 10vw;
width: 100%;
}
.person-type__button {
font-size: 4vw;
}
.person-type__button .card-input .value-input,
.card-input .card-input-text,
.range-description {
font-size: 3.5vw;
line-height: 6.75vw;
}
.card-input .card-input-text {
padding: 1vw 1.5vw;
}
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track {
height: 1.8vw;
}
.image-card img {
width: 80%;
}
.tooltipSpan {
margin-right: 1vw;
}
input[type="range"]::-webkit-slider-thumb {
margin-top: -1vw;
width: 4vw;
height: 4vw;
}
.calculator-title {
font-size: 6.5vw;
margin-bottom: 3vw;
}
.mb-5 {
margin-bottom: 2vw !important;
}
.form-label {
font-size: 4vw;
margin-right: 1vw;
}
.row-block {
display: grid;
grid-template-columns: auto 1fr;
padding-bottom: 3vw;
}
.image-card {
width: 10vw;
height: 100%;
}
.image-col {
grid-column: 1;
grid-row: 1;
width: auto !important;
max-width: none !important;
padding-right: 3vw !important;
}
.title-col {
width: auto !important;
max-width: none !important;
padding-right: 0 !important;
}
.row-block .title-block {
grid-column: 2;
grid-row: 1;
width: 100%;
white-space: nowrap;
}
.input-col {
grid-column: 1 / -1;
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
margin-top: 3vw;
}
.input-col .card-input {
width: 100%;
margin-top: 0;
height: 80%;
padding: 2vw;
}
.card-input .value-input {
font-size: 4vw;
}
.row-block {
display: grid;
grid-template-columns: max-content 1fr;
row-gap: 1vw;
padding-bottom: 2vw;
}
.row-block>.col-7 {
display: contents;
} .row-block>.col-3 {
grid-column: 1 / -1;
grid-row: 2;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 2vw 0 0 0;
}
.row-block .card-input {
width: 100%;
margin: 0;
} .row-block .range-block {
grid-column: 1 / -1;
grid-row: 3;
width: 100%;
min-width: 0;
padding: 0 !important;
margin: 0 !important;
}
.row-block .form-range {
display: block;
width: 100%;
max-width: 100%;
}
.row-block .range-description {
display: flex;
justify-content: space-between;
width: 100%;
}
}
.text-end {
text-align: right;
}
.tooltipSpan {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
margin: auto 0 auto 0.7vw;
color: #1372f7;
font-size: 1.2vw;
line-height: 1;
cursor: pointer;
}
.tooltipSpan::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: calc(100% + 0.6vw);
z-index: 1000;
width: max-content;
max-width: 18vw;
padding: 0.55vw 0.8vw;
transform: translateX(-50%) translateY(0.3vw);
background: #1372f7;
color: #fff;
border-radius: 0.35vw;
font-size: 0.9vw;
font-weight: 400;
line-height: 1.4;
text-align: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.15s ease,
transform 0.15s ease;
}
.tooltipSpan::before {
content: "";
position: absolute;
left: 50%;
bottom: calc(100% + 0.1vw);
z-index: 1001;
transform: translateX(-50%) translateY(0.3vw);
border-left: 0.35vw solid transparent;
border-right: 0.35vw solid transparent;
border-top: 0.4vw solid #1372f7;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.15s ease,
transform 0.15s ease;
}
.tooltipSpan:hover::after,
.tooltipSpan:hover::before {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
@media (max-width: 991px) {
.tooltipSpan {
font-size: 2vw;
}
.tooltipSpan::after {
max-width: 60vw;
padding: 1.5vw 2vw;
font-size: 2.5vw;
border-radius: 1vw;
}
.tooltipSpan::before {
border-left-width: 1.2vw;
border-right-width: 1.2vw;
border-top-width: 1.3vw;
}
}
@media (max-width: 575px) {
.tooltipSpan {
font-size: 3vw;
}
.tooltipSpan::after {
max-width: 60vw;
padding: 1.5vw 2vw;
font-size: 3.4vw;
border-radius: 1vw;
}
.tooltipSpan::before {
border-left-width: 3vw;
border-right-width: 3vw;
border-top-width: 2vw;
}
}