/* font link */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
:root {
    --background-page: #f7f9fb;
    --background-body: #dce8ff3d;
    --white-color: #ffffff;
    --title-color: #012970;
    --black-color: #000000;
    --lable-color: #656d9a;
    --border-color: #e2e7f1;
    --body-color: #2b2d3b;
    --secondary-color: #22c5ad;
    --primary-color: #4154f1;
    --danger-color: #dc3545;
    --info-color: #0dcaf0;
    --secondary-gray-color: #949fc4;
    --secondary-gray-color-light: rgba(148, 159, 196, 0.1);
    --primary-color-hover: rgba(65, 83, 241, 0.85);
    --hover-noti: #f6f9ff;
    --warning-color: #ff9f43;
    --pink-color: #fd3c97;
    --bs-heading-color: #384adf;
}

/* Dark Mode */
[data-theme="dark"] {
    --background-page: #1a1a2e;
    --background-body: #000000;
    --white-color: #202031;
    --title-color: #f3f3f3;
    --bs-heading-color: #384adf;
    --black-color: #f9f9f9;
    --lable-color: #a5a6c5;
    --border-color: #38394a;
    --body-color: #e0e0e0;
    --secondary-color: #1db7a8;
    --primary-color: #384adf;
    --danger-color: #e06a6a;
    --info-color: #0aa9cc;
    --secondary-gray-color: #8b95b2;
    --secondary-gray-color-light: rgba(139, 149, 178, 0.1);
    --primary-color-hover: rgba(56, 74, 223, 0.85);
    --hover-noti: #2a2c3a;
    --warning-color: #d98c3a;
    --pink-color: #e33c84;
}


@media (max-width: 1150px) {
    #nav-item{
        padding: 0 0.4rem;
    }
}
@media (max-width: 991px) {
    #navbarSupportedContent:not(.show){
        display: flex !important;
        flex-direction: column;
        position: fixed;
        transform: translateX(100%);
        top: 0;
        background: var(--white-color);
        height: 100vh;
        overflow: auto;
    }
    #navbarSupportedContent{
        /* display: block !important; */
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: 320px;
        transition: transform 0.4s, visibility 0.4s;
        will-change: transform, visibility;
        background: var(--white-color);
        height: 100vh;
        overflow: auto;
        overflow-x: hidden !important;
        transform: translateX(0);
        padding: 1rem 1rem 1rem;
        z-index: 99999;
        -webkit-box-shadow: 0.5px -0.5px 8px 4px rgba(56, 56, 56, 0.05);
        -moz-box-shadow: 0.5px -0.5px 8px 4px rgba(56, 56, 56, 0.05);
        box-shadow: 0.5px -0.5px 8px 4px rgba(56, 56, 56, 0.05);
        border-left: 1px solid var(--border-color);
    }
    #nav-item{
        padding: 0.8rem 0.2rem 0.8rem 1rem;
        border-bottom: 1px solid var(--border-color);
    }
    #nav-item i{
        margin-left: 0.7rem;
    }
    #nav-item .fa-angle-down{
        margin: 0 auto 0 0;
    }
    #navtoggle-list{
        font-size: 16px !important;
        padding: 3px !important;
        cursor: pointer;
        color: var(--title-color);
        margin: 0;
        box-shadow: none;
        outline: 0;
        border: 1px solid var(--secondary-gray-color);
    }
    #navtoggle-list .bi-list{
        padding-left: 0;
        cursor: pointer;
        margin-top: 0;
        margin-left: 0;
    }
    #navtoggle-list.close{
        margin-right: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 7px !important;
        font-size: 20px !important;
    }
    #navtoggle-list:hover{
        background: var(--background-body);
        border-color: var(--secondary-color);
    }
    #navtoggle-list:focus{
        border-color: var(--secondary-color);
    }
    .Quick_Links{
        font-size: 12px !important;
    }
}

@media (max-width: 768px){
    
}