@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
:root {
    --theme-color: #1E2022;
    --primary-color: #027E6F;
    --primary-hover-color: #037062;
    --disabled-color: #6C757D;
    --text-color-1: #677788;
    --text-color-2: #8C98A4;
}
body {
    font-family: "Inter", sans-serif;
    color: var(--theme-color);
    font-size: 0.85rem;
}
a {
    text-decoration: none;
    color: #027e6f;
}
a:hover {
    color: #016458;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, label {
 
}
.text-primary {
    --bs-text-opacity: 1;
    color: var(--primary-color) !important;
}
.theme-color { color: var(--theme-color);}
.text-color-1 { color: var(--text-color-1);}
.text-color-2 { color: var(--text-color-2);}
.form-control {
    border-color: rgb(231 234 243 / 70%);
    padding: 0.25rem 0.75rem;
    min-height: 2.8125rem;
    border-radius: 0.3125rem;
}
.form-control::-moz-placeholder {
    color: #8C98A4;
}
.form-control::placeholder {
    color: #8C98A4;
}
.form-control:focus {
    border-color: rgb(2 126 111 / 29%);
    border-bottom-color: rgb(2 126 111 / 50%);
    box-shadow: none;
}
.btn {
    padding: 0.657rem 1rem;
}

.btn-primary {
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-hover-color);
    --bs-btn-hover-border-color: var(--primary-hover-color);
    --bs-btn-active-bg: var(--primary-hover-color);
    --bs-btn-active-border-color: var(--primary-hover-color);
    --bs-btn-disabled-bg: var(--disabled-color);
    --bs-btn-disabled-border-color: var(--disabled-color);
}
.btn-outline-primary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-hover-color);
    --bs-btn-hover-border-color: var(--primary-hover-color);
    --bs-btn-active-bg: var(--primary-hover-color);
    --bs-btn-active-border-color: var(--primary-hover-color);
    --bs-btn-disabled-color: var(--primary-hover-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary-hover-color);
}
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.google-login-btn {
    border-color: #E7EAF3;
    color: #677788;
}

.google-login-btn:hover {
    border-color: var(--theme-color);
}
.form-box {
    border: 1px solid rgb(231 234 243 / 70%);
    padding: clamp(1.125rem, calc(5px + 3.125vw), 2.5rem);
    border-radius: 0.75rem;
    background-color: #fff;
    max-width: 480px;
    margin-inline: auto;
}

.form-box.welcome-box {
    max-width: 825px;
}
.or-text {position: relative;}
.or-text:after {content: '';position: absolute;width: 100%;background-color: #E7EAF3;height: 2px;left: 0;right: 0;top: 50%;}
.rmber-area .form-check-input {width:1rem;height:1rem;margin-top: 2px;margin-left: -1.5rem;}
.rmber-area .form-check-input:checked {
    background-color: #027e6f;
    border-color: #027e6f;
}

/* onboarding style start here */
.onboarding-sidebar {
    background: #F2F9F8;
    flex: 0 0 320px;
    width: 320px;
    padding-block: 100px;
    padding-inline: clamp(35px, calc(20px + 2vw), 100px);
    min-height: 100vh;
}
.onboarding-step-bar li:not(:last-child) {
    margin-bottom: 3rem;
}

.onboarding-step-bar li.current {
    color: #027E6F;
    font-weight: 600;
}

.onboarding-step-bar li.completed {}

.onboarding {
    font-size: 1rem;
}
.step-count {
    background: rgb(19 33 68 / 10%);
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    font-size: .85rem;
    font-weight: 600;
    color: #71869D;
    margin-right: 1rem;
    justify-content: center;
    align-items: center;
    display: flex; border-radius:100%;
}
.step-count svg, .completed .step-count span {
     display:none;
}
.completed .step-count svg {
     display:block;
}
.onboarding-step-bar .completed .step-count, .onboarding-step-bar .current .step-count {
    background: #027E6F;
    color: #FFFFFF;
}
.onboarding-content {
    padding-top: 50px;
}

.onboarding-header {
    margin-bottom: 25px;
}
.onboarding-content {
    padding-block: 50px;
    padding-inline: 3.125rem;
}

.onboarding-header {
    margin-bottom: 25px;
}

.dropdown.dropdown-user .dropdown-toggle span {
    background: #d1e7dd;
    width: 1.5rem;
    line-height: 1.5rem;
    display: inline-block;
    font-weight: 500;
    font-size: 11px;
    border-radius: 100%;
}
.dropdown.dropdown-user .dropdown-toggle::after {
    border-top-color:
}

.subscription-content {
    /* max-width: 785px; */
}
.subscription-col .card-header {
    background: rgb(2 126 111 / 5%);
}

.subscription-col .card .card-header:after {
    content: '';
    background-image: url("data:image/svg+xml,%0A%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='8' fill='white'/%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='7.5' stroke='black' stroke-opacity='0.15'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    height: 1rem;
    width: 1rem;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translate(0px, -50%);
}
.subscription-col input:checked ~ .card .card-header:after {

background-image: url("data:image/svg+xml,%0A%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='8' fill='%23027E6F'/%3E%3Crect x='4' y='4' width='8' height='8' rx='4' fill='white'/%3E%3C/svg%3E%0A");
}
fieldset {
     display: none;
}
fieldset.active {
     display: block;
}
.checkout-row .card {
    border: 1px solid rgb(231 234 243 / 70%);
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0px 6px 12px rgba(140, 152, 164, 0.075);
}
.checkout-row .card .card-header {
    background: none !important;
    border-bottom-color: rgb(231 234 243 / 70%);
    font-weight: 600;
    padding: 0.5rem 1rem;
}
.checkout-row .card .card-body {
    padding: 1rem;
}
.selected-subscription-message {
    font-size: 11px;
}

.selected-subscription-title {
    font-size: 1.375rem;
}

p.selected-subscription-services {
    font-size: 12px;
}
.summary-table tr td {
    border-top: 1px solid rgb(231 234 243 / 70%);
    padding: 1rem 0;
}
.summary-table tr.total-tr td {
    padding-bottom: 0.5rem;
}

td.total-value {
    font-size: 1.15rem;
}
@media (min-width: 1440px) {
    .onboarding-sidebar {   
        flex: 0 0 400px;
        width: 400px;
        padding: 100px;
    }
    .subscription-content {
        padding-inline: 75px;
    }
    .checkout-row .card .card-header, .checkout-row .card .card-body {
        padding: 0.75rem 1.25rem; 
    }
    .summary-table tr td {
    padding: 1.25rem 0;
}
}
@media (min-width: 1200px) and (max-width: 1440px) {
    .subscription-content {
        padding-inline: 30px;
    }
}


@media (max-width: 991px) {
    
    .onboarding-sidebar {
        flex: 0 0 250px;
        width: 250px;
        padding: 70px 20px 50px;
    }
    .onboarding-content {
    padding-block: 20px;
}
}
@media (max-width: 767px) {
    
    .onboarding-sidebar {
        flex: 0 0 100%;
        width: 100%;
        padding: 1.25rem 1rem;
        min-height: auto;
    }
    .onboarding-step-bar li:not(:last-child), .onboarding-step-bar li {
    margin-bottom: 0rem;
    margin-inline: 0.25rem;
}
.onboarding-step-bar li {
        font-size: .85rem;
    }
    .step-count {
    font-size: .85rem;
    margin-right: 0rem;
        margin-bottom: .5rem;
}
}
@media (max-width: 767px) {
    .onboarding-step-bar li {
        font-size: .75rem;
    }
}