body {
    background-color: #f5f5f5;
    background-image: url('../figma/wizard-img/background.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.main-container {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

    .main-container .right-side {
        border-radius: 24px;
    }

        .main-container .right-side .title h1 {
            font-size: 2.5rem;
            font-weight: 600;
            text-align: right;
            margin-bottom: 1.5rem;
            line-height: 1.5;
        }

        .main-container .right-side ol {
            padding-right: 1rem !important;
            width: 90%;
        }

            .main-container .right-side ol li {
                font-size: 1.125rem;
                font-weight: 400;
                line-height: 1.5;
                margin-bottom: 1rem;
            }

                .main-container .right-side ol li:last-child {
                    margin-bottom: 0;
                }

        .main-container .right-side .form-check label {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            margin-bottom: 1rem;
        }

        .main-container .right-side .form-check input {
            width: 1rem;
            height: 1rem;
            margin-left: 0.5rem;
        }

@media screen and (max-width: 992px) {
    .wizard-index-row {
        flex-direction: column-reverse !important;
    }
}

.wizard-nav-tabs-container #role-first-tab-pane .box {
    padding: 50px 20px !important;
    min-height: 350px;
}

.wizard-body {
    width: 85%;
    margin: 0 auto;
}

.wizard-tabs-container {
    margin-top: 2rem;
}

.wizard-controls .nav.nav-tabs {
    border-bottom: 0;
    margin-bottom: 0;
}

    .wizard-controls .nav.nav-tabs button {
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: 1px solid var(--bs-primary);
        overflow: hidden;
    }

    .wizard-controls .nav.nav-tabs li {
        position: relative;
    }

        .wizard-controls .nav.nav-tabs li::before {
            overflow: hidden;
            position: absolute;
            content: '';
            width: 700%;
            height: 2px;
            background-color: red;
            top: 50%;
            /* right: 150%; */
            /* transform: translate(-50%, -50%); */
        }

        .wizard-controls .nav.nav-tabs li:last-child::before {
            display: none;
        }

.wizard-controls .nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: var(--bs-primary);
    border-color: #fff;
    color: #fff;
}

.tab-content-one {
    gap: 3rem;
}

.tab-content {
    margin-top: 20px;
}

#first-tab-pane .box,
#role-first-tab-pane .box,
#second-tab-pane .box,
#third-tab-pane .box,
#forth-tab-pane .box,
#fifth-tab-pane .box,
#nafath-tab-pane .box {
    box-shadow: 0px 0px 2px 0px #00ab5233;
    box-shadow: 0px 2px 10px 0px #00ab521a;
    margin: 0 auto;
    border-radius: 12px;
    margin-bottom: 30px;
    margin-top: 0.5rem;
}

#first-tab-pane .box {
    width: 550px;
    max-width: 100%;
}

#second-tab-pane .box,
#nafath-tab-pane .box {
    max-width: 470px;
}

#third-tab-pane .box {
    max-width: 600px;
}

#forth-tab-pane .box,
#fifth-tab-pane .box {
    max-width: 570px;
}

.custom-inputs {
    direction: ltr;
}

    .custom-inputs input {
        border-radius: 12px;
        border: 1px solid #ebebeb;
        height: 72px;
        text-align: center;
        font-size: 1.3rem;
    }

    .custom-inputs .col:last-child {
        padding-right: 10px !important;
    }

    .custom-inputs input:focus {
        border-color: var(--bs-primary);
        box-shadow: none;
    }

#forth-tab-pane .box .custom-inputs input {
    height: 50px;
    font-size: 0.9rem;
}

form label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #000;
    margin-bottom: 0.5rem;
    display: block;
    text-align: right;
    direction: rtl;
}

form input[type='text'],
form input[type='email'],
form input[type='number'],
form input[type='password'],
form input[type='date'],
form select,
.input-group-text {
    border-radius: 12px;
    border: 1px solid #ebebeb;
    direction: rtl;
    height: 48px;
    font-size: 16px;
    line-height: 3.5rem;
}

    form input[type='text']:focus,
    form input[type='email']:focus,
    form input[type='number']:focus,
    form input[type='password']:focus,
    form input[type='date']:focus,
    form select:focus,
    .form-select:focus,
    .form-control:focus,
    form input[type='text']:active,
    form input[type='email']:active,
    form input[type='number']:active,
    form input[type='password']:active,
    form input[type='date']:active,
    form select:active {
        border-color: var(--bs-primary);
        box-shadow: none;
    }

.payment-form .labelexpanded > input {
    display: none;
}

.payment-form .labelexpanded input:checked + .radio-btns {
    border: 2.84px solid var(--bs-primary);
    color: #fff;
}

.payment-form .radio-btns {
    box-shadow: 0px 0px 13.501300811767578px 0px rgba(51, 51, 51, 0.12);
    border-radius: 12px;
    position: relative;
    text-align: center;
    padding: 15px 20px;
    cursor: pointer;
    background-color: #fff;
    border: 2.84px solid transparent;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-form .tab-pane {
    margin-bottom: 55px;
}

.former-contributor-details {
    background: #00ab521f;
    border-radius: 12px;
    padding: 15px;
    font-size: 14px;
}

@media screen and (max-width: 640px) {
    .tab-content-one {
        gap: 1rem;
        flex-wrap: wrap;
    }
    /* 
    #fifth-tab-pane .custom-radio-btns label {
      width: 100%;
      margin-bottom: 0.5rem;
    } */
    #fifth-tab-pane .radio-btns {
        padding: 10px;
    }
}

.success-wizard-container {
    background-image: url('../figma/wizard-img/darker-blob-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
}

    .success-wizard-container .box {
        box-shadow: 0px 0px 2px 0px #00ab5233;
        box-shadow: 0px 2px 10px 0px #00ab521a;
        margin: 0 auto;
        border-radius: 12px;
    }

        .success-wizard-container .box img {
            height: 140px;
        }

.role-illustrate-img {
    width: 120px;
    height: 120px;
}

.nafath-otp span {
    background-color: #198754;
    opacity: 0.7;
    color: #fff;
    padding: 15px;
    border-radius: 50%;
}