:root, [data-bs-theme=light] {
    --bs-body-color: var(--bs-primary);
    --bs-success: #30A732;
    --bs-success-rgb: rgb(48, 167, 50);
    --bs-success-hover: #2A9029;
    --bs-warning: #FFA900;
    --bs-info: #00b0f0;
    --bs-secondary: #EDF7FD;
    --bs-secondary-rgb: rgb(237, 247, 253);
    --bs-font-sans-serif: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.bg-finbuddy-secondary {
    background-color: var(--bs-secondary) !important;
}

.bg-finbuddy-success {
    background-color: var(--bs-success) !important;
}

.mw-2-rem {
    max-width: 2rem;
}

.mw-25-rem {
    max-width: 25rem;
    margin-left: auto;
    margin-right: auto;
}

.fs-smaller {
    font-size: smaller;
}

.left-0 {
    left: 0 !important;
}

.right-0 {
    right: 0 !important;
}

a {
    color: var(--bs-primary);
}

h1, h2, strong {
    font-weight: 600; /*Semibold*/
}

.justify-items-center {
    justify-items: center;
}

.text-gray {
    color: #CCCCCC !important;
}

.mx-6 {
    padding-right: 6rem;
    padding-left: 6rem;
}

.container {
    --bs-gutter-x: 2rem;
    max-width: 670px;
}

.fade-in {
    opacity: 0;
    transition: opacity .1s ease-in;
}

    .fade-in.show {
        opacity: 1;
    }

.fade-out {
    opacity: 1;
    transition: opacity .1s ease-out;
}

    .fade-out.hide {
        opacity: 0;
    }

.circle-img {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--bs-success);
    border-radius: 50%;
}

.check-circle-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
}

    .check-circle-logo .logo-img img {
        width: 12rem;
    }

        .check-circle-logo .logo-img img.idin-logo {
            width: 8rem;
        }

    .check-circle-logo .logo-img span {
        font-size: 6rem;
        font-weight: 600;
    }

    .check-circle-logo .logo-img .circle-checked {
        position: absolute;
        right: 1rem;
        bottom: 1rem;
    }

        .check-circle-logo .logo-img .circle-checked img {
            width: 3rem;
            height: 3rem;
        }

.bank-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    background-color: var(--bs-secondary);
    border-radius: 1rem;
    padding-top: 3rem;
    padding-left: 1.5rem;
    padding-bottom: 3rem;
    padding-right: 1.5rem;
}

    .bank-wrapper .bank-logo {
        width: 8rem;
    }

.decor-question {
    border: 0;
}

.btn:focus, .btn.focus, select:focus {
    box-shadow: none !important;
    outline: 2px solid black !important;
    outline-offset: 2px;
}

.btn {
    min-width: 15rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    border-radius: .625rem;
    font-weight: 600;
    font-size: var(--bs-body-font-size);
}

.btn-success {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

    .btn-success:hover {
        background-color: var(--bs-success-hover);
        border-color: var(--bs-success-hover);
    }

.btn-idin-image {
    height: 2rem;
}

.icon-star:before {
    content: "\e901";
}

.icon-arrow-down:before {
    content: "\e900";
}

.calendar {
    position: relative;
    border-top: 3rem solid var(--bs-primary);
    border-radius: .5rem;
    background: var(--bs-secondary);
    grid-template-columns: repeat(5, 3rem);
    display: grid;
    gap: .5rem;
    padding: .5rem;
    width: fit-content;
}

    .calendar .calendar-binders {
        position: absolute;
        margin-top: -2.25rem;
        display: flex;
        gap: 3.6rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .calendar.read-only-calendar .extra-binder {
        display: none;
    }

@media (min-width: 416px) {

    .calendar.read-only-calendar {
        grid-template-columns: repeat(7, 3rem);
    }

        .calendar.read-only-calendar .calendar-binders {
            gap: 3.1rem;
        }

        .calendar.read-only-calendar .extra-binder {
            display: block;
        }
}

.calendar .calendar-binders .binder .middle-line {
    position: absolute;
    margin-top: -1.625rem;
    margin-left: .375rem;
    display: flex;
    width: .5rem;
    height: 2.5rem;
    background: var(--bs-warning);
    border-radius: 1rem;
}

.calendar .calendar-binders .binder .bottom-circle {
    display: flex;
    width: 1.25rem;
    height: 1.25rem;
    background: white;
    border-radius: 1.25rem;
}

.calendar .calendar-item {
    display: flex;
    width: 3rem;
    height: 3rem;
    text-align: center;
    align-items: center;
    justify-content: center;
}

    .calendar .calendar-item .date-text {
        display: flex;
        width: 2.75rem;
        height: 2.75rem;
        background: white;
        text-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 2rem;
        font-size: small;
        font-weight: 600;
    }

        .calendar .calendar-item .date-text .bg-success {
            background-color: var(--bs-success) !important;
        }

.progress-step-indicator {
    display: flex;
    gap: 1rem;
    max-width: 25rem;
}

    .progress-step-indicator .step {
        background-color: white;
        border: 1px solid var(--bs-primary);
        width: 2.5rem;
        height: .625rem;
        border-radius: .625rem;
    }

    .progress-step-indicator .finished-step {
        background-color: var(--bs-success);
        border: 1px solid var(--bs-success);
    }

    .progress-step-indicator .current-step {
        border: 1px solid var(--bs-primary);
        background-color: var(--bs-primary);
    }


.form-control {
    border-radius: .625rem;
    border-color: var(--bs-primary);
    min-width: 15rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: var(--bs-body-font-size);
}

    .form-control::placeholder {
        color: var(--bs-primary);
    }

    /*IBAN input controls*/
    .form-control.country-code {
        min-width: auto;
        max-width: 4.2rem;
    }

    .form-control.iban {
        min-width: auto;
        max-width: 11.2rem;
    }

input[type=radio]:hover,
input[type=radio]:hover ~ label,
input[type=checkbox]:hover,
input[type=checkbox]:hover ~ label,
select,
option:hover {
    cursor: pointer;
}

input[type=radio]:checked ~ label,
input[type=checkbox]:checked ~ label {
    font-weight: 600;
}

.select-wrapper {
    position: relative;
    display: inline-block;
    font-size: var(--bs-body-font-size);
    min-width: 20rem;
    max-width: 24rem;
}

    .select-wrapper select {
        width: 100%;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-top: .75rem;
        padding-bottom: .75rem;
        -webkit-appearance: none;
        appearance: none;
        outline: none;
        border-radius: .625rem;
        border: 1px solid var(--bs-primary);
        box-shadow: none !important;
        color: var(--bs-body-color) !important;
    }

    .select-wrapper .arrow {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }

.idin-explainer-iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-width: 800px;
    border: 0;
}

.slider {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    align-items: center;
}

    .slider .slider-labels {
        display: flex;
        justify-content: space-between;
        width: 100%;
        gap: .5rem;
    }

        .slider .slider-labels img {
            aspect-ratio: 1/1;
            max-width: 100%;
        }

    .slider .review-slider-labels {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .slider .slider-container {
        position: relative;
        width: 90%;
    }

        .slider .slider-container .slider-track {
            position: absolute;
            left: 0;
            top: 0;
            height: 1rem;
            overflow: hidden;
            width: 100%;
            border-radius: 1rem;
            background-color: var(--bs-secondary);
            border: solid .1rem var(--bs-primary);
        }

        .slider .slider-container .slider-track-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 1rem;
            min-width: 1rem;
            max-width: 95%;
            background-color: var(--bs-primary);
        }

    .slider input {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 1rem;
        display: block;
        background-color: transparent;
        position: relative;
    }

        .slider input:focus {
            outline: none;
        }

        .slider input::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            background-color: var(--bs-success);
            width: 1.75rem;
            height: 1.75rem;
            border-radius: 50%;
        }

            .slider input::-webkit-slider-thumb:hover {
                cursor: pointer;
            }

        .slider input:focus::-webkit-slider-thumb {
            outline: .25rem solid var(--bs-success);
            outline-offset: .25rem;
        }


.w-000 {
    width: 0%;
}

.w-001 {
    width: 1%;
}

.w-002 {
    width: 2%;
}

.w-003 {
    width: 3%;
}

.w-004 {
    width: 4%;
}

.w-005 {
    width: 5%;
}

.w-006 {
    width: 6%;
}

.w-007 {
    width: 7%;
}

.w-008 {
    width: 8%;
}

.w-009 {
    width: 9%;
}

.w-010 {
    width: 10%;
}

.w-011 {
    width: 11%;
}

.w-012 {
    width: 12%;
}

.w-013 {
    width: 13%;
}

.w-014 {
    width: 14%;
}

.w-015 {
    width: 15%;
}

.w-016 {
    width: 16%;
}

.w-017 {
    width: 17%;
}

.w-018 {
    width: 18%;
}

.w-019 {
    width: 19%;
}

.w-020 {
    width: 20%;
}

.w-021 {
    width: 21%;
}

.w-022 {
    width: 22%;
}

.w-023 {
    width: 23%;
}

.w-024 {
    width: 24%;
}

.w-025 {
    width: 25%;
}

.w-026 {
    width: 26%;
}

.w-027 {
    width: 27%;
}

.w-028 {
    width: 28%;
}

.w-029 {
    width: 29%;
}

.w-030 {
    width: 30%;
}

.w-031 {
    width: 31%;
}

.w-032 {
    width: 32%;
}

.w-033 {
    width: 33%;
}

.w-034 {
    width: 34%;
}

.w-035 {
    width: 35%;
}

.w-036 {
    width: 36%;
}

.w-037 {
    width: 37%;
}

.w-038 {
    width: 38%;
}

.w-039 {
    width: 39%;
}

.w-040 {
    width: 40%;
}

.w-041 {
    width: 41%;
}

.w-042 {
    width: 42%;
}

.w-043 {
    width: 43%;
}

.w-044 {
    width: 44%;
}

.w-045 {
    width: 45%;
}

.w-046 {
    width: 46%;
}

.w-047 {
    width: 47%;
}

.w-048 {
    width: 48%;
}

.w-049 {
    width: 49%;
}

.w-050 {
    width: 50%;
}

.w-051 {
    width: 51%;
}

.w-052 {
    width: 52%;
}

.w-053 {
    width: 53%;
}

.w-054 {
    width: 54%;
}

.w-055 {
    width: 55%;
}

.w-056 {
    width: 56%;
}

.w-057 {
    width: 57%;
}

.w-058 {
    width: 58%;
}

.w-059 {
    width: 59%;
}

.w-060 {
    width: 60%;
}

.w-061 {
    width: 61%;
}

.w-062 {
    width: 62%;
}

.w-063 {
    width: 63%;
}

.w-064 {
    width: 64%;
}

.w-065 {
    width: 65%;
}

.w-066 {
    width: 66%;
}

.w-067 {
    width: 67%;
}

.w-068 {
    width: 68%;
}

.w-069 {
    width: 69%;
}

.w-070 {
    width: 70%;
}

.w-071 {
    width: 71%;
}

.w-072 {
    width: 72%;
}

.w-073 {
    width: 73%;
}

.w-074 {
    width: 74%;
}

.w-075 {
    width: 75%;
}

.w-076 {
    width: 76%;
}

.w-077 {
    width: 77%;
}

.w-078 {
    width: 78%;
}

.w-079 {
    width: 79%;
}

.w-080 {
    width: 80%;
}

.w-081 {
    width: 81%;
}

.w-082 {
    width: 82%;
}

.w-083 {
    width: 83%;
}

.w-084 {
    width: 84%;
}

.w-085 {
    width: 85%;
}

.w-086 {
    width: 86%;
}

.w-087 {
    width: 87%;
}

.w-088 {
    width: 88%;
}

.w-089 {
    width: 89%;
}

.w-090 {
    width: 90%;
}

.w-091 {
    width: 91%;
}

.w-092 {
    width: 92%;
}

.w-093 {
    width: 93%;
}

.w-094 {
    width: 94%;
}

.w-095 {
    width: 95%;
}

.w-096 {
    width: 96%;
}

.w-097 {
    width: 97%;
}

.w-098 {
    width: 98%;
}

.w-099 {
    width: 99%;
}

.w-100 {
    width: 100%;
}