@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Regular.eot');
    src: url('../fonts/Quicksand-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Quicksand-Regular.woff2') format('woff2'),
        url('../fonts/Quicksand-Regular.woff') format('woff'),
        url('../fonts/Quicksand-Regular.ttf') format('truetype'),
        url('../fonts/Quicksand-Regular.svg#Quicksand-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Bold.eot');
    src: url('../fonts/Quicksand-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Quicksand-Bold.woff2') format('woff2'),
        url('../fonts/Quicksand-Bold.woff') format('woff'),
        url('../fonts/Quicksand-Bold.ttf') format('truetype'),
        url('../fonts/Quicksand-Bold.svg#Quicksand-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
    --accent-color: #bdbdbd;
    --site1: #05243e;
    --site2: #7fc99b;
    --site3: #27b15b;
    --site4: #212529;
    --colorHighlightPassive: #42766c;
}


/********************
 GENERAL
 ********************/
body { background-color: #edeef2; color: var(--site4); font-family: 'Quicksand', sans-serif; font-size: 15px; font-weight: normal; line-height: 19px; }
p { margin-bottom: 25px; }
a, button { transition: .5s all ease; -webkit-transition: .5s all ease; }
a { color: var(--site1); }
a:hover { color: var(--site3); }
hr { border-top: 2px solid #bdbdbd; }

h1, h2, h3, h5 { color: var(--site1); font-family: 'Quicksand', sans-serif; font-weight: bold; }
h1 { font-size: 36px; line-height: 40px; margin-bottom: 40px; }
h2 { font-size: 21.5px; line-height: 27px; margin-bottom: 30px; }
h3 { font-size: 15px; line-height: 19px; }
h4, h5 { font-size: 20px; line-height: 24px; }
h6 { font-size: 18px; line-height: 22px; }

@media (width <= 1199px) {
    h1 { font-size: 32px; line-height: 36px; }
    h4, h5 { font-size: 20px; line-height: 24px; }
    h6 { font-size: 17px; line-height: 21px; }
}

@media (width <= 992px) {
    h1 { font-size: 30px; line-height: 34px; }
    h4, h5 { font-size: 19px; line-height: 23px; }
    h6 { font-size: 16px; line-height: 20px; }
}

@media (width <= 767px) {
    h1 { font-size: 27px; line-height: 31px; }
    h4, h5 { font-size: 18px; line-height: 22px; }
}

@media (width <= 576px) {
    h1 { font-size: 25px; line-height: 29px; }
    h4, h5 { font-size: 17px; line-height: 21px; }
}

ul { list-style: none; }
ul, ul > li { padding-left: 0; }
ul > li:not(:last-child) { margin-bottom: 12px; }
ul > li svg { float: left; margin-right: 10px; }

.list { list-style: disc; margin-bottom: 20px; margin-left: 20px; }
.list > li:not(:last-child) { margin-bottom: 3px; }

.p-relative { position: relative; }

.text-justify { text-align: justify; }

.bkg-site1 { background-color: var(--site1); }
.bkg-site2 { background-color: var(--site2); }
.bkg-site3 { background-color: var(--site3); }

.text-site1 { color: var(--site1); }
.text-site2 { color: var(--site2); }
.text-site3 { color: var(--site3); }
.text-site4 { color: var(--site4); }

.text-underline { text-decoration: underline; }

.float-right { float: right; }

.button { background-color: var(--site2); border: 0; border-radius: 6px; box-shadow: 0 2px 0 rgba(0,0,0,.1); color: white; display: inline-block; font-size: 15px; font-weight: bold; line-height: 41px; padding-inline: 36px; text-align: center; text-decoration: none; }
.button.button-small { font-size: 14px; line-height: 32px; padding-inline: 24px; }
.button:not([disabled]):hover { background-color: var(--site3); color: white; }

.button.button-outline { background-color: transparent; border:  1px solid var(--site2); color: var(--site2); }
.button.button-outline:hover { background-color: var(--site3); border-color: var(--site3); color: white; }

.button.button-site1 { background-color: var(--site1); }
.button.button-site1:hover { color: white; }

.button[disabled] { background-color: #d1d1d1; cursor: default; }

.fill { fill: var(--site2); }

.white-box, .box { background-color: white; border-radius: 6px; padding: 45px; }
.box { background-color: var(--site1); }
.white-box > *:last-child, .box > *:last-child { margin-bottom: 0; padding-bottom: 0; }
.brand-logo { width: 100px; }

@media (min-width: 1270px) {
    .container { max-width: 1210px; }
}

@media (max-width: 1269px) {
    .container { max-width: 100%; }
}

@media (width <= 1199px) {
    .white-box, .box { padding: 40px; }
}

@media (width <= 992px) {
    .white-box, .box { padding: 35px; }
}

@media (width <= 767px) {
    .white-box, .box { padding: 30px; }
}

@media (width <= 576px) {
    .white-box, .box { padding-inline: 20px; }
}


/**** Spacing ****/
.margin-bottom-xs { margin-bottom: 15px; }
.margin-bottom-sm { margin-bottom: 20px; }
.margin-bottom-md { margin-bottom: 40px; }

.margin-top-xs { margin-top: 15px; }
.margin-top-sm { margin-top: 20px; }
.margin-top-md { margin-top: 40px; }


/********************
 HEADER
 ********************/
#header { background-color: var(--site1); padding-bottom: 20px; padding-top: 20px; }

#header .container { margin-top: 15px; }

.progress, .progress-stacked { background-color: #42766c; display: inline-block; height: 1.8rem; overflow: visible; position: relative; width: calc(100% - 40px); }
/*.progress:before { content: ''; background: #42766c; bottom: 2px; height: 2px; left: 100%; position: absolute; width: 20px; }
.progress:after { content: "\f024"; color: var(--site3); bottom: 5px; font-family: 'Font Awesome 6 Free'; font-size: 22px; font-weight: bold; left: calc(100% + 17px); position: absolute; }*/
.progress-bar { background-color: var(--site2); border-radius: var(--bs-border-radius); height: 100%; }

#header .logout { color: white; display: inline-block; float: right; font-size: 22px; margin-left: 15px; position: relative; }
#header .logout:hover { color: var(--site2); }

@media (max-width: 992px) {
    #header .col-4 img { max-width: 170px; }
}


/********************
 STEPS
 ********************/


.steps-box {
    display: flex;
    justify-content: center;
    padding: 0 20px;
    margin-bottom: 30px;
}

.steps-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: space-between;
    width: 100%;
    gap: 20px 0;
    position: relative;
}

.step-item-container {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.step-item.circle {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin-bottom: 15px;
    background-color: var(--colorHighlightPassive);
    color: var(--site1);
    font-weight: 700;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.step-item.label {
    color: white;
    width: 120px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    opacity: .3;
}
.step-item-container.active .step-item.label {
    font-weight: 700;
    opacity: 1;
}
.step-item-container.active .step-item.circle {
    background-color: var(--site2);
}
.step-line {
    border-bottom: 1px solid;
    border-color: var(--colorHighlightPassive);
    left: 15px;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 75%;
    margin: 0 auto;
}
.step-line.mobile {
    display: none;
}

@media ( max-width: 576px ) {
    .steps-container  {
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }

    .step-line {
        width: 50%;
    }
    .step-line.mobile {
        display: block;
        top: calc(15px + 10px + 50%);
    }
}

/********************
 CONTENT
 ********************/
section#main-content { margin-block: 75px; }
section#main-content.customer-login { margin-top: 40px; }

.requirements { margin-bottom: 25px; }
.requirements > li { padding-left: 38px; position: relative; }
.requirements > li > svg { color: var(--site3); left: 10px; position: absolute; top: 2px; }
.requirements > li [class*="fa-"] { color: var(--site3); left: 10px; position: absolute; top: 2px; }

label { color: var(--site4); font-weight: bold; }
label + .form-control, label + select + .select2  { margin-top: 8px; }

.form-control, .select2 { background-color: white; border: 0; border-radius: 6px; box-shadow: 0 2px 0 rgba(0,0,0,.1); color: #596574; padding: 13px 12px; }
.select2 { padding-block: 14px; }
.form-control::placeholder { color: #bdbdbd; }
.form-control:focus, .form-control:hover { box-shadow: 0 2px 0 var(--site2); outline: 0; }

.form-control[readonly] { background-color: transparent; border-radius: 0; padding: 8px 5px; }
.readonly .input-group-text {
    background-color: transparent;
    border: none;
    color: #596574;
}

.input-group { border-radius: 6px; box-shadow: 0 2px 0 rgba(0,0,0,.1); }
.input-group .form-control { box-shadow: none; }
.input-group-text { height: 100%; }

.select2 { width: 100%!important; }
.select2-container--default .select2-selection--single { border: 0; border-radius: 0; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #bdbdbd; }
.select2-container--default .select2-selection--single .select2-selection__arrow { right: 6px; top: 50%; translate: 0 -50%; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: black; border-width: 6px 5px 0 5px; }

.select2-dropdown { border-color: #edeef2; }
.select2-results__option { margin-bottom: 0!important; padding: 14px 15px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #edeef2; color: #a76663; }

.fields-group + .fields-group, .form-group + .form-group { margin-top: 25px; }
.fields-group .form-group + .form-group { margin-top: 15px; }

fieldset { border: 1px solid #cccccc; border-radius: 6px; display: block; margin-top: 25px!important; padding: 25px 15px 15px; position: relative; }
fieldset > legend { background-color: #edeef2; display: inline-block; font-size: 15px; left: 15px; line-height: 19px; padding: 2px 15px; top: -12px; position: absolute; width: auto; }

.checkbox { font-size: 15px; font-weight: 300; line-height: 19px; padding-left: 30px; position: relative; }
.checkbox, .checkbox a { color: #05243e; }
.checkbox a:hover { color: var(--site3); }
.checkbox + .checkbox, .checkbox + .form-group { margin-top: 30px; }
.checkbox input { left: 0; position: absolute; top: 2px; }

.checkbox input[type="checkbox"], .checkbox input[type="radio"] { appearance: none; background-color: #bdbdbd; border-radius: 2px; cursor: pointer; height: 15px; width: 15px; }
.checkbox input[type="radio"] { border-radius: 50%; }
.checkbox input[type="checkbox"]:checked, .checkbox input[type="radio"]:checked { background: transparent url('../img/icons/square-check.webp') no-repeat center; background-size: contain; }

.form-switch .form-check-input { height: 1.4em; margin-left: -2.8em; position: relative; top: -5px; width: 2.5em; }
.form-switch .form-check-input:checked { background-color: var(--site2); border-color: var(--site3); }
.form-switch .form-check-input:checked, .form-switch .form-check-input:focus { box-shadow: none; }

input[type="range"] { appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; width: 100%; }
input[type="range"]::-webkit-slider-runnable-track { background: var(--site2); height: 4px; }
input[type="range"]::-moz-range-track { background: var(--site2); height: 4px; }
input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; margin-top: -7px; background-color: var(--site3); border-radius: 50%; height: 16px; width: 16px; }

.otp { display: grid; grid-gap: 10px; grid-template-columns: repeat(4, 1fr); margin-top: 8px; max-width: 300px; }
.otp input { text-align: center; }

@media (width >= 993px) {
    #main-content .panel { padding-right: 45px; }
}

@media (width <= 1299px) {
    section#main-content { margin-block: 60px; }
    .form-control { padding-block: 15px; }
    .select2 { padding-block: 13px; }
}

@media (width <= 992px) {
    section#main-content { margin-top: 45px; }
    section#main-content.customer-login { margin-top: 35px; }

    .form-group + .form-group { margin-top: 20px; }
    .form-control { padding-block: 14px; }
    .select2 { padding-block: 12px; }

    .checkbox + .checkbox, .checkbox + .form-group { margin-top: 25px; }

    .sidebar { margin-top: 30px; }
}

@media (width <= 767px) {
    section#main-content { margin-top: 40px; }
    section#main-content.customer-login { margin-top: 30px; }

    .form-group + .form-group { margin-top: 16px; }
    .form-control { padding-block: 13px; }
    .select2 { padding-block: 11px; }

    .form-group > .row .col-12:not(:first-child) .form-group { margin-top: 10px; }
}

@media (max-width: 576px) {
    .button { font-size: 14px; line-height: 36px; text-align: center; width: 100%; }
    .button + .button { margin-top: 12px; }

    h2 > .button, h3 > .button { margin-block: 12px; }
}


/********************
 CALCULATOR
 ********************/
.calculator { background-color: #edeef2; border-radius: 4px; box-shadow: 0 5px 25px rgba(5,36,62,.15); padding: 20px; }
.calculator h3 { display: inline-block; font-size: 18px; font-weight: bold; width: 100%; }
.calculator h3 .button { float: right; }
.calculator p { color: var(--site1); }
.calculator .amount { background-color: white; border-radius: 4px; color: black; display: inline-block; float: right; font-weight: 600; padding: 6px 12px; }
.calculator input[type="range"] { width: 100%; }

dl { background-color: white; border-radius: 4px; display: inline-block; padding-inline: 16px; width: 100%; }
dl dt, dl dd { display: inline-block; float: left; margin: 0; padding-block: 16px; }
dl dt:not(:nth-last-child(2)), dl dd:not(:last-child) { border-bottom: 1px solid rgba(94,118,138,.2); }
dl dt { width: 60%; }
dl dd { text-align: right; width: 40%; }

.white-box dl { padding-inline: 0; }
.white-box dl dt:first-child, .white-box dl dd:nth-child(2) { padding-top: 0; }

@media (max-width: 992px) {
    dl dt, dl dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 50%; }
}


/********************
 CUSTOMER AREA
 ********************/
.actions { background-color: white; border-radius: 4px; padding: 15px 25px; }
.actions > li { padding: 12px 0; }
.actions > li:not(:last-child) { border-bottom: 1px solid rgba(94,118,138,.2); margin-bottom: 0; }
.actions > li > a { padding-left: 27px; position: relative; text-decoration: none; }
.actions > li > a [class*="fa-"] { color: var(--site3); left: 0; position: absolute; top: 50%; translate: 0 -50%; }


/********************
 TABLES
 ********************/
.table th, .table td { padding: 10px; }
.table th { background-color: var(--site1); color: white; }
.table thead th:first-child { border-top-left-radius: 6px; }
.table thead th:last-child { border-top-right-radius: 6px; }
.table tbody tr:last-child td:first-child { border-bottom-left-radius: 6px; }
.table tbody tr:last-child td:last-child { border-bottom-right-radius: 6px; }

.text-center {
    text-align: center;
}

.profile-data-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.profile-data-list dt,
.profile-data-list dd
{
    width: 100%;
}