button[data-kt-stepper-action="next"],
button[data-kt-stepper-action="previous"],
button[data-kt-stepper-action="submit"] {
    color: #fff !important;
    background-color: #264072 !important;

}

button[data-kt-stepper-action="next"]:hover,
button[data-kt-stepper-action="previous"]:hover,
button[data-kt-stepper-action="submit"]:hover {
    color: #fff !important;
    background-color: #2f559a !important;

}

.welcome .intro {
    position: relative;
    color: #fff;
    padding: 50px 40px;
}

.welcome .intro > .contractor {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 40%;
}

.welcome .intro > p {
    margin: 0 0 20px 40%;
}

.welcome .intro > .heading {
    font-size: 23px;
    border-left: 3px solid rgba(255, 255, 255, 0.25);
    padding-left: 20px;
    margin-left: 40%;
}

.fade-out {
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0));
}

.fade-out-sm {
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 95%, rgba(0,0,0,0));
}

.card.pro-partner-gradient {
    background: url('/assets/media/propartner/calculator_bg.png');
    background-size: contain;
}

.bg-blue,
.bg-step-1 {
    background-color: #264072 !important;
}

.bg-step-2,
.bg-final,
.bg-green {
    background-color: #6E8C36 !important;
}

.bg-step-3 {
    background-color: #6BBBAE !important;
}

.bg-step-4 {
    background-color: #F1BE48 !important;
}

.bg-step-5 {
    background-color: #7A99AC !important;
}

.bg-step-6 {
    background-color: #AC2A2A !important;
}

.bg-step-7 {
    background-color: #4F868E !important;
}

.bg-step-8 {
    background-color: #A9C47F !important;
}

.bg-step-9 {
    background-color: #63666A !important;
}

.bg-step-10 {
    background-color: #DFD1A7 !important;
}

.bg-step-11 {
    background-color: #A09074 !important;
}

.bg-step-12 {
    background-color: #ED8B00 !important;
}

.bg-step-13 {
    background-color: #97999B !important;
}

.btn.btn-active-light-blue {
    border-color: var(--bs-gray-400) !important;
}

.btn-check:checked + .btn.btn-active-light-blue,
.btn.btn-active-light-blue:hover {
    color: #264072 !important;
    background-color: #e1e7f2 !important;
    border-color: #264072 !important;
}

[data-bs-theme=dark] .btn-check:checked + .btn.btn-active-light-blue,
[data-bs-theme=dark] .btn.btn-active-light-blue:hover {
    color: #264072 !important;
    background-color: #162133 !important;
    border-color: #264072 !important;
}

.btn-check:checked + .btn.btn-active-light-blue i,
.btn.btn-active-light-blue:hover i {
    color: #264072 !important;
}

.btn-check img,
.btn.btn-active-light-blue img {
    filter: invert(66%) sepia(8%) saturate(688%) hue-rotate(186deg) brightness(96%) contrast(90%); !important;
}

.btn-check:checked + .btn.btn-active-light-blue img,
.btn.btn-active-light-blue:hover img {
    filter: invert(22%) sepia(10%) saturate(4645%) hue-rotate(185deg) brightness(94%) contrast(90%) !important;
}

.btn.btn-green {
    color:  #fff !important;
    background-color: #6E8C36 !important;
}

.btn.btn-green:hover {
    color:  #fff !important;
    background-color: #5c772b !important;
}

.step-info {
    position: absolute;
    top: -40px;
    left: -40px;
    z-index: 1;
}

.step-info::after {
    border:  3px solid #fff;
}

#ppc form > .card {
    margin-top: 20px;
    margin-left: 100px;
    margin-right: 100px;
    margin-bottom: 50px;
}

#ppc form .estimated-value input {
    border-width: 3px !important;
}

#ppc form .estimated-value input:focus {
    background-color: var(--bs-gray-100) !important;
    border-color: var(--bs-primary) !important;
}

.card.bg-white {
    background-color: #fff !important;
}

[data-bs-theme=dark] .card.bg-white {
    background-color: #15171C !important;
}

.estimated-value .progresswrapper {
    font-size: 15px;
    text-align: right;
}

.estimated-value .progresswrapper .progressbarholder {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-100);
    border-radius: .92rem;
    color: var(--bs-gray-700);
    transition: color .2s ease;
}

.estimated-value .progresswrapper .progressbarholder .bar {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: .92rem;
}

.estimated-value .progresswrapper .progressbarholder .bar.bar1 {
    background-color: #264072;
    z-index: 14;
}
.estimated-value .progresswrapper .progressbarholder .bar.bar2 {
    background-color: #6E8C36;
    z-index: 13;
}
.estimated-value .progresswrapper .progressbarholder .bar.bar3 {
    background-color: #6BBBAE;
    z-index: 12;
}
.estimated-value .progresswrapper .progressbarholder .bar.bar4 {
    background-color: #F1BE48;
    z-index: 11;
}
.estimated-value .progresswrapper .progressbarholder .bar.bar5 {
    background-color: #7A99AC;
    z-index: 10;
}
.estimated-value .progresswrapper .progressbarholder .bar.bar6 {
    background-color: #E4002B;
    z-index: 9;
}
.estimated-value .progresswrapper .progressbarholder .bar.bar7 {
    background-color: #4F868E;
    z-index: 8;
}
.estimated-value .progresswrapper .progressbarholder .bar.bar8 {
    background-color: #A9C47F;
    z-index: 7;
}
.estimated-value .progresswrapper .progressbarholder .bar.bar9 {
    background-color: #63666A;
    z-index: 6;
}
.estimated-value .progresswrapper .progressbarholder .bar.bar10 {
    background-color: #DFD1A7;
    z-index: 5;
}
.estimated-value .progresswrapper .progressbarholder .bar.bar11 {
    background-color: #A09074;
    z-index: 4;
}
.estimated-value .progresswrapper .progressbarholder .bar.bar12 {
    background-color: #ED8B00;
    z-index: 3;
}
.estimated-value .progresswrapper .progressbarholder .bar.bar13 {
    background-color: #97999B;
    z-index: 2;
}

.badge-rep {
    background-color: #4F868E;
    color:  #fff;
}

.badge-green {
    color: #fff;
    background-color: #6E8C36;
}

.modal-survey .modal-header > .badge {
    left: -20px;
    top: -20px
}

.header-rounded {
    position: relative;
}

.header-rounded::before {
    content: "";
    position: absolute;
    background-color: transparent;
    left: 0;
    bottom: -30px;
    height: 30px;
    width: 100%;
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
    box-shadow: 0 -20px 0 0 var(--bs-primary);
    z-index: 1;
}

.header-rounded-sm::before {
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.header-rounded.bg-step-1::before {
    box-shadow: 0 -20px 0 0 #264072;
}

.header-rounded.bg-step-2::before,
.header-rounded.bg-final::before,
.header-rounded.bg-green::before {
    box-shadow: 0 -20px 0 0 #6E8C36;
}

.header-rounded.bg-step-3::before {
    box-shadow: 0 -20px 0 0 #6BBBAE;
}

.header-rounded.bg-step-4::before {
    box-shadow: 0 -20px 0 0 #F1BE48;
}

.header-rounded.bg-step-5::before {
    box-shadow: 0 -20px 0 0 #7A99AC;
}

.header-rounded.bg-step-6::before {
    box-shadow: 0 -20px 0 0 #AC2A2A;
}

.header-rounded.bg-step-7::before {
    box-shadow: 0 -20px 0 0 #4F868E;
}

.header-rounded.bg-step-8::before {
    box-shadow: 0 -20px 0 0 #A9C47F;
}

.header-rounded.bg-step-9::before {
    box-shadow: 0 -20px 0 0 #63666A;
}

.header-rounded.bg-step-10::before {
    box-shadow: 0 -20px 0 0 #DFD1A7;
}

.header-rounded.bg-step-11::before {
    box-shadow: 0 -20px 0 0 #A09074;
}

.header-rounded.bg-step-12::before {
    box-shadow: 0 -20px 0 0 #ED8B00;
}

.header-rounded.bg-step-13::before {
    box-shadow: 0 -20px 0 0 #97999B;
}

#ppc > .loader {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: .92rem;
}

#ppc > .loader > .spinner-border {
    width: 50px;
    height: 50px;
}