.djhj-notification{
    display: none !important;
}
:root, [data-bs-theme=light] {
    /*Colors*/
    --dark1-color: #042930;
    --dark2-color: #05343E;
    --primary-color: #063A45;
    --black-color: #1F2120;
    --light1-color: #36899A;
    --light2-color: #68A6B3;
    --light3-color: #AAD0D8;
    --light4-color: #D4E7EB;
    --light5-color: #E5F1F3;
    --s-color: #FDBD10;
    --g1-color: #5F6664;
    --g2-color: #A0A3A2;
    --g3-color: #D1D3D3;
    --g4-color: #E3E5E5;
    --g5-color: #FAFBFB;
    --white-color: #FFFFFF;
    --light-white-color: #E5F3F2;
    --orange-color: #CC7A00;
    --green-color: #1C9D0B;
    --light-orange-color: #F5E4CC;
    --lighter-orange-color: #FAF2E6;
    --light-green-color: #CCF5C9;
    --lighter-green-color: #E7FFE5;
    --light-blue-color: #A6D8D2;
    --danger-color: #A51616;


    /*--falcon-body-bg: #f7f7f7ad;*/
    --falcon-body-bg: var(--white-color);
    --falcon-bg-navbar-glass: var(--white-color);
    --falcon-body-color: var(--black-color);
    --falcon-heading-color: var(--black-color);
    --falcon-body-font-family: 'Almarai', "Open Sans", "Segoe UI Emoji", "Segoe UI Symbol";
    --falcon-font-sans-serif: 'Almarai', "Open Sans", "Segoe UI Emoji", "Segoe UI Symbol";
    --falcon-link-color-rgb: var(--black-color);
    --falcon-link-hover-color-rgb: var(--black-color);
    --falcon-secondary-color: var(--g1-color);
    --falcon-btn-hover-bg: var(--light-green-color);
    --falcon-btn-hover-border-color: var(--dark1-color) !important;
    --falcon-btn-hover-color: var(--g3-color);
    --falcon-input-focus-border-color-global: var(--light-green-color);
    --falcon-dropdown-link-hover-bg-global: var(--light4-color);
    --falcon-btn-active-bg: var(--light4-color);
    --falcon-btn-active-border-color: var(--light4-color);
}

.modal-header, .modal-footer {
    --falcon-modal-header-border-width: 0px;
    --falcon-modal-footer-border-width: 0px;

}


body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    background: var(--g5-color);

}

/* Almarai - Light */
.fw-300 {
    font-family: 'Almarai', sans-serif;
    font-weight: 300;
}

/* Almarai - Regular */
.fw-400 {
    font-family: 'Almarai', sans-serif;
    font-weight: 400;
}

/* Almarai - Bold */
.fw-700 {
    font-family: 'Almarai', sans-serif;
    font-weight: 700;
}

/* Almarai - Extra Bold */
.fw-800 {
    font-family: 'Almarai', sans-serif;
    font-weight: 800;
}


/*BORDERS */
.green-border {
    border: 1px solid #04814F;
}


.top-70 {
    top: 70%;
}

.end-65 {
    left: 65%;
}

/* TAGS */
.vl {
    border-left: 2px solid var(--light-white-color);
    height: 60px;
    position: absolute;
    left: 41%;
    margin-left: -3px;
    top: 0;
}

a:hover {
    text-decoration: underline;
    cursor: pointer;
}

.form-control, .select2-selection--single {
    border-radius: 8px;
    height: 54px !important;
    min-height: 54px !important;
    /*border: 1px solid var(--g4-color);*/
    background: #FFF;
}

.select2-container .select2-selection--single {
    /*height: 20px !important;*/
}

.select2-selection__rendered {
    padding-top: 21px;
}

.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgb(69 186 168 / 25%);
}


label {
    font-weight: 700;
    color: var(--g1-color);
}

/* BOXES */
.box {
    border-bottom: 1px solid var(--g3-color);
}
.top-border-radius{
    border-radius:10px 10px  0px 0px!important;
}
.bottom-border-radius{
    border-radius: 0px 0px 10px 10px!important;
}
.white-box {
    padding: 10px 20px;
    border-radius: 16px;
    border: 1px solid var(--light4-color);
    background: var(--white-color);
    box-shadow: -2px 2px 6px 0px rgba(31, 33, 32, 0.16);
}

.light4-box {
    background: var(--light4-color);
    padding: 20px 17px;
    gap: 23px;
    border-radius: 20px;
}

.confirmation-box {
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0px 0px 26px 0px rgba(31, 33, 32, 0.08);
    padding: 24px;
    gap: 24px;
    align-self: stretch;
}


.radius-5px {
    border-radius: 5px;

}

.pointer-cursor {
    cursor: pointer;
}

.dark-green-circle {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: var(--primary-color)
}


/*Line Heights */
.lh-md {
    line-height: 1.8rem;
}

.light4-circle {
    border-radius: 86px;
    border: 2px solid var(--light4-color);
    background: rgba(229, 243, 242, 0.95);
    display: flex;
    align-items: center;
    padding: 10px;
}

.lh-sm {
    line-height: 1.5rem;
}

.light4-circle {
    border-radius: 86px;
    border: 2px solid var(--light4-color);
    background: rgba(229, 243, 242, 0.95);
    display: flex;
    align-items: center;
    padding: 10px;
}

/******************** HEADER ***************/

.profile-img {
    border-radius: 200px;
    border: 2px solid var(--light4-color);

}

.my-orders {
    border-radius: 6px;
    border: 1px solid var(--light1-color);
    background: #0C5464;
    height: 84px;
    padding: 12px;
    gap: 12px;
}

#openedHeader {
    border-radius: 0px 0px 20px 20px;
}

.current-item {
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--light3-color);
}

.dropdown-badge {
    width: 14px;
    height: 14px;
    right: -5px;
    padding: 1px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid var(--light4-color);
    background: #FFF;
}

.dropdown-toggle::after {
    display: none;
}

b, strong {
    font-weight: 700;
}

/******************* MODAL *********************/

.modal-content {
    display: flex;
    width: 400px;
    padding: 64px 24px 34px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: var(--white-color);

    /* Drop Shadow 3 */
    box-shadow: 0px 0px 26px 0px rgba(31, 33, 32, 0.08);
}

/* ACCORDION */

.accordion-button:focus {
    border-color: white;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.alert.alert-block.alert-danger {
    display: none;
}

.bg-unconfirmed {
    color: var(--orange-color);
    border: 1px solid var(--orange-color);
    text-align: center;
    text-decoration: none !important; /* Remove underline */
}

.font-size-18 {
    font-size: 18px;
}

.font-size-14 {
    font-size: 14px;
}

.font-size-12 {
    font-size: 12px;
}

.font-size-22 {
    font-size: 22px;
}


/******************* PAGE LOADER *********************/
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* semi-transparent white */
    z-index: 9999;
}

.spinner {
    width: 48px;
    height: 48px;
    animation: spin 4s linear infinite; /* Rotate the spinner */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}