:root {
    /* colors */

    --color-white: #fff;
    --color-black: #000;
    --sub-header-gradient-color: linear-gradient(90.76deg, #1B5EF9 12.61%, #06ADD5 86.51%);
    --header-bg-color: #081775;

    --color-black-827: #111827;
    --color-black-222: #222;
    --color--gray-280: #6B7280;
    --color-gray-3AF: #9CA3AF;
    --color-gray-555: #555;
    --color-grey-5DB: #D2D5DB;
    --color-grey-393: #939393;
    --color-blue-hyperlink: #1C3FCA;
    --color-green-780: #2DB780;
    --button-bg: #1C3FCA;
    --color-blue-391: #0E2391;
    --color-red-613: #E30613;
    --color-red-329: #A30329;
    --color-red-853: #E22853;
    --color-purple-7BC: #AB47BC;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800;
    --font-weight-900: 900;
    --font-size-10: 10px;
    --font-size-12: 12px;
    --font-size-13: 13px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-17: 17px;
    --font-size-18: 18px;
    --font-size-19: 19px;
    --font-size-20: 20px;
    --font-size-21: 21px;
    --font-size-22: 22px;
    --font-size-23: 23px;
    --font-size-24: 24px;
    --font-size-26: 26px;
    --font-size-28: 28px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-25 {
    padding-top: 25px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-35 {
    padding-top: 35px;
}

.pl-8 {
    padding-left: 8px;
}

.pl-10 {
    padding-left: 10px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-20 {
    padding-left: 20px;
}

.pr-10 {
    padding-right: 10px;
}

.pr-20 {
    padding-right: 20px;
}

.plr-5 {
    padding-left: 5px;
    padding-right: 5px;
}

.mt-8 {
    margin-top: 8px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-12 {
    margin-top: 12px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

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

.mt-35 {
    margin-top: 35px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-90 {
    margin-top: 90px;
}

.mt-40 {
    margin-top: 40px;
}

/* margin bottom */
.mb-0 {
    margin-bottom: 0px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-8 {
    margin-bottom: 8px;
}


.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-25 {
    margin-bottom: 25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-40 {
    margin-bottom: 40px;
}

/* margin left */
.ml-8 {
    margin-left: 8px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-25 {
    margin-left: 25px;
}

/* margin right */
.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}

.mr-20 {
    margin-right: 20px;
}

.mr-25 {
    margin-right: 25px;
}

.gap-16 {
    column-gap: 16px;
}

/* fonts class */
body {
    font-family: Inter !important;
    font-variant-ligatures: none;
    font-kerning: normal;
    font-feature-settings: "liga" 0;
    line-height: inherit !important;
}

.wrapper-body {
    min-height: calc(100vh - 110px);
}

.font-header-1 {
    font-family: Inter;
    font-size: 28px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.01em;

}

.font-header-2 {
    font-family: Inter;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: var(--color-black-827);
}

.font-p-1 {
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.font-p-2 {
    font-family: Inter;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
}

.font-p-3 {
    font-family: Inter;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

.font-p-4 {
    font-family: Inter;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

.font-p-5 {
    font-family: Inter;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.font-p-6 {
    font-family: Inter;
    font-size: 14px;
    font-weight: 600;
}

.font-p-7 {
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
}

.font-p-8 {
    font-family: Inter;
    font-size: 16px;
    font-weight: 500;
}

.font-p-9 {
    font-family: Inter;
    font-size: 12px;
    font-weight: 500;
}

.font-p-10 {
    font-family: Inter;
    font-size: 14px;
    font-weight: 500;
}

.gray-280 {
    color: var(--color--gray-280);
}

.gray-555 {
    color: var(--color-gray-555);
}

.white {
    color: var(--color-white);
}

.black-222 {
    color: var(--color-black-222);
}

.black-827 {
    color: var(--color-black-827);
}

.blue-391 {
    color: var(--color-blue-391);
}

.red-329 {
    color: var(--color-red-329);
}

.red-853 {
    color: var(--color-red-853);
}

.grey-5DB {
    color: var(--color-grey-5DB);
}

.green-780 {
    color: var(--color-green-780) !important;
}

.purple-7BC {
    color: var(--color-purple-7BC) !important;
}

.bg-transaction-success {
    background-color: #D0DDFC;
}

.bg-transaction-failed {
    background-color: #FDDACC;
}

.red-613 {
    color: var(--color-red-613);
}

.grey-393 {
    color: var(--color-grey-393);
}

.bg-chipBlue {
    background-color: #EBF9EF;
}

.bg-chipPink {
    background-color: #FEF8E6;
}

.chips {
    padding: 4px 8px;
    border-radius: 6px;
    color: #2A3140;
    display: flex;
    justify-content: center;
    align-items: center;
}

input[type="checkbox"] {
    width: 18.7px !important;
    height: 18.7px !important;
    border-radius: 2px !important;

}

input[type="checkbox"]:checked {
    background-color: #0029B2;
    border: none;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    box-shadow: none;
}

.form-check-input[type="radio"] {
    width: 18px;
    height: 18px;
    border: 1.5px solid #6B7280;
    cursor: pointer;
    background-color: #fff;
    filter: brightness(100%);

}

.form-check-input[type="radio"]:checked {
    filter: brightness(100%);
    border-color: #1C3FCA;
    background-color: #fff;
    background-image: url('/img-radio-innerCircle.svg') !important;
    background-size: 10px 10px;
}

.form-check label {
    margin-left: 5px;
}

a {
    font-family: Inter;
    color: #052EAB !important;
    font-weight: 600;
}

a[disabled] {
    pointer-events: none;
    font-size: 14px;
    font-weight: 400;
    color: #6B7280;
}
a,
a:hover,
a:focus {
    text-decoration: none !important;
}

.btn-modal {
    width: 292px;
    min-height: 44px;
    border-radius: 11px;
    background-color: #1C3FCA !important;
    border-style: none;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF !important;
    padding: 10px 50px;
}

@media (max-width: 350px) {
    .btn-modal {
        width: 100%;
    }
}

.btn-continue {
    width: 228px;
    height: 48px;
    border-radius: 12px;
    background-color: #1C3FCA !important;
    border-style: none;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF !important;
}

.btn-continue:hover,
.btn:active {
    color: #fff;
    background-color: #1C3FCA !important;
}

.btn.disabled,
.btn:disabled {
    background-color: #A3BAF9 !important;
    color: #F5F6FB !important;
}


.tooltip-inner {
    padding: 6px 12px !important;
}

.tooltip {
    --bs-tooltip-max-width: 400px !important;
    --bs-tooltip-color: #D2D5DB !important;
    --bs-tooltip-bg: #1F2937 !important;
    --bs-tooltip-opacity: 1 !important;
    font-family: Inter !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    font-size: 12px !important;
}