:root {
    --darkred: rgb(179, 60, 60);
    --darkgreen: #357d91;
}

.app-version-number {
    top: -5px;
}

    .app-version-number kbd {
        padding: 2px 5px !important;
        font-family: tahoma !important;
        font-size: 11px;
    }

.top-fixed {
    z-index: 9999999 !important;
}

.schedule_section .contents {
    width: 100%;
}

.program_card .purchase-btn.schedules-btn {
    background-color: #f1f1f1 !important;
    color: #858585 !important;
}

.certificate_card {
    width: 100%
}

    .certificate_card .content {
        position: absolute
    }

.schedule_list {
    height: auto !important;
}

.event_card_image img {
    width: 100%;
}

.event_card_container {
    flex-wrap: inherit !important;
}

.card-bodyx {
    padding: 30px 40px;
    border-radius: 20px;
    border: 0.72px solid #C6C6D1;
    background: #98CFF71A;
    backdrop-filter: blur(27px);
}

.footer {
    /*margin-top: 2em;*/
}

.btn-info {
    color: #fff;
    background-color: #5091cd;
    border-color: #5091cd;
}

.alert-info {
    color: #4184c5;
    background-color: #ddedfc;
    border-color: #ddedfc;
}

.dashboard_details_container {
    margin-top: 1.5rem !important;
}

.burger {
    position: absolute;
}

.logo {
    padding-top: 2px !important;
}


.dashboard_details_form {
    gap: 10px !important;
}

.dashboard_details_form_input_container input {
    padding: 20px 35px !important;
}

.my-side-bar {
    position: fixed !important;
    top: 0 !important;
    right: 31% !important;
    bottom: 0 !important;
}

    .my-side-bar:not(.active) {
        display: none !important;
    }

    .my-side-bar.active {
        display: flex !important;
    }

.profile-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.form-content {
    height: auto !important;
}

.signup-form-submit-container {
    background: none !important;
}







@media (max-width: 600px) {

    .registration-form {
        width: 98% !important;
    }

    .signup-form, .signup-form form {
        width: 98% !important;
    }
}

.signup-form, .signup-form form {
    width: 100% !important;
}

.expanded-content form {
    margin-top: 20px;
}

    .expanded-content form label {
        font-size: 14px;
        color: #344054;
        font-weight: 500;
        margin-bottom: 7px;
    }

.form-control-input:disabled, .form-control-input[readonly] {
    background-color: #e9ecef;
    opacity: 1;
}

.form-control-input {
    width: 100% !important;
    max-width: 100% !important;
    height: 48px;
    padding: 10px 16px;
    gap: 8px;
    border-radius: 32px;
    background: var(--white);
    outline: none;
    border: none;
    width: 100%;
}

    .form-control-input, .form-control-input::placeholder {
        color: #787797;
        font-weight: 300;
        font-size: 16px;
    }

.form-control-input {
    color: #2A285E;
}

.form-control-input {
    padding: 10px 16px 10px 34px;
}

.form-control-input-ar {
    padding: 10px 34px 10px 34px;
}

.btn-submit, .btn-submit:disabled {
    background-color: #5091CD;
    height: 48px;
    text-align: center;
    width: 100%;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    outline: none;
    border: none;
    color: #ffffff;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #5091CD;
    transition: .3s ease-in-out;
}

    .btn-submit:disabled {
        background-color: #F2F4F7;
        border: 1px solid #C6C6D1;
        color: #C6C6D1
    }

    .btn-submit:hover {
        background-color: #fff;
        color: #5091CD !important;
        border: 1px solid #5091CD;
    }

        .btn-submit:hover span svg path {
            fill: #5091CD;
        }

        .btn-submit:hover span svg {
            transition: .3s ease-in-out;
        }

        .btn-submit:hover span svg {
            transform: translateX(5px);
        }

    .btn-submit:disabled:hover {
        background-color: #F2F4F7;
        border: 1px solid #C6C6D1;
        color: #C6C6D1 !important
    }

        .btn-submit:disabled:hover span svg path {
            fill: #C6C6D1;
        }

        .btn-submit:disabled:hover span svg {
            transform: translateX(0);
        }

    .btn-submit:disabled svg path {
        fill: #C6C6D1;
    }

.input-icon {
    position: absolute;
    top: 17px;
    left: 16px;
}

.input-icon-ar {
    position: absolute;
    top: 17px;
    right: 16px;
}

.input-clear-icon {
    position: absolute;
    top: 10px;
    right: 8px;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: background-color 0.3s, border-radius 0.3s;
}

    .input-clear-icon:hover, .input-clear-icon-ar:hover {
        background-color: #f1f1f1; /* Change this to your desired color */
        border-radius: 50%;
    }

.input-clear-icon-ar {
    position: absolute;
    left: 8px;
    top: 10px;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: background-color 0.3s, border-radius 0.3s;
}

.form-footer-wrapper {
    /*position: sticky !important;*/
}

.text-primary {
    color: rgb(80 145 205) !important;
}

.select2-container {
    left: unset !important;
}

.select2-container--default .select2-selection--single {
    border: 0px !important;
    width: 100% !important;
    background: transparent !important;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 10px !important;
        left: 10px !important;
    }

.select2-dropdown {
    top: -40px;
}

.select2-container--open .select2-dropdown--above {
    top: -15px !important;
}

.iti {
    width: 100%;
    max-width: 100%;
}

.iti--allow-dropdown .iti__flag-container {
    width: 22% !important;
}

.iti__selected-flag {
    padding: 0 0 0 15px !important;
    border-radius: 19px 0 0 19px !important;
}

.iti--allow-dropdown input, .iti--allow-dropdown input[type=text] {
    padding-left: 99px !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #000000 !important;
}

.alert-env-note {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 9999999;
    font-size: 14px;
}

.icon-sm {
    height: 24px !important;
}

.rounded-5 {
    border-radius: 30px;
}

.expanded-container .title {
    margin-bottom: 15px;
    font-size: 18px !important;
}


.select2-container--disabled, .radio_container_card_disabled {
    background: #e9ecef !important;
}

.datepicker table {
    /*width: var(--container-width);*/
}

.datepicker-months .month, .datepicker-years .year {
    width: auto;
}

.datepicker-months > table > tbody > tr > td, .datepicker-years > table > tbody > tr > td {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    height: auto;
}

.datepicker tbody tr > td span.month, .datepicker tbody tr > td span.year {
    width: 57px;
}




.btn-primary[disabled], .btn-primary.disabled {
    border-color: #999999;
    background-color: #cccccc;
    color: #666666;
}

.text-darkgreen {
    color: var(--darkgreen);
}

.fs-sm {
    font-size: 11pt;
}

.fs-xs {
    font-size: 9pt;
}

.nafath-otp-number {
    background: transparent url('../../../dist/img/preloader-darkgreen.svg') no-repeat center center;
    background-size: auto 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40pt;
    font-family: sans-serif !important;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--darkgreen);
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
    zoom: 3.5;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px var(--darkgreen);
    animation: fill-green .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}





.crossmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--darkred);
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.crossmark {
    zoom: 3.5;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px var(--darkred);
    animation: fill-red .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.crossmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill-green {
    100% {
        box-shadow: inset 0px 0px 0px 30px var(--darkgreen);
    }
}

@keyframes fill-red {
    100% {
        box-shadow: inset 0px 0px 0px 30px var(--darkred);
    }
}







/*login*/
.form-header {
    font-size: 40px !important;
    font-weight:700;
}

.signup-form-description {
    font-size: 20px !important;
    margin-top: 30px !important;
    font-weight: 700 !important;
}
.already-member {
    text-align: center;
}

.header__top_ln{
    cursor:pointer;
}

.close_btn,.close_btn:hover{
    background-color:initial !important;
}