/* This is the main CSS Style page */

/* Main Body */
/* Reset body and html to remove any default margin or padding */
@font-face {
    font-family: 'Noto Kufi Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/notokufiarabic/v21/CSRp4ydQnPyaDxEXLFF6LZVLKrodhu8t57o1kDc5Wh5v37bNlrWWfw.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}


@font-face {
    font-family: 'UAESymbol';
    src: url('../font/font.woff2') format('woff2'), url('../font/font.woff') format('woff'), url('../font/font.ttf') format('truetype');

    }


/*@font-face {
    font-family: "Calibri";
    src: url("fonts/calibri.woff2") format("woff2"), url("fonts/calibri.woff") format("woff");
    font-weight: normal;
    font-style: normal;    
}
*/
.dirham-symbol {
    font-family: 'UAESymbol', sans-serif;
    font-size: inherit;
    color: inherit;
    //font-weight: bold;
    //font-size: 25px;
}



body {
    height: 100vh;
    //background: linear-gradient(135deg, #1e3c72, #2a5298);
    background-color: var(--background); 

}

:root {
    --mix: linear-gradient(5deg, #b79a6d, #C8974C, #D5B66B, #966F2E);
    --mix2: color-mix(in srgb, var(--primary) 60%, var(--accent) 40%);
    --mix3: linear-gradient(35deg, #3a3938e0, #424140c0, #a6a5a480, #ffffff00);
    --btn-mix: linear-gradient(45deg, #b79a6d, #D5B66B);
    --font-primary: 'Noto Kufi Arabic', "Calibri", 'Noto Sans', 'Sans Serif Collection', sans-serif;
    --primary-size: 14px;
    --secondary-size: 16px;
    --secondary2-size: 18px;
    --primary-weight: 400;
    --primary: #b79a6d;
    --secondary: #5f5f5f;
    --accent: #C8974C;
    --white: #fff;
    --background: #cccccc60;
    //--background: #2C2C2C;
    --box-shadow: 0 3px 9px var(--secondary); /* 50% opacity */
}



body .form-control:focus {
    border-color: var(--primary); /* Highlight input field on focus */
    box-shadow: 0 0 6px var(--primary);
    outline: none;
}




body.theme-gold {
    --primary: #b79a6d;    
    --secondary: #5f5f5f;
    --accent: #C8974C;
    --background: #cccccc60;
}


body.theme-green {
    --mix: linear-gradient(5deg, #169f9f, #0eecda, #4ECDC4, #238281);
    --mix2: color-mix(in srgb, var(--primary) 60%, var(--accent) 40%);
    --primary: #169f9f;
    --accent: #0eecda;
    --accent2: #4ECDC4;
    --text: #ffffff;
    --background: #cccccc60;
}



body.theme-dark {
    --mix: linear-gradient(5deg, #161338, #3a3a3a, #121212, #4b4b4b, #2C2C2C);
    --mix2: color-mix(in srgb, var(--primary) 60%, var(--accent) 40%);
    --primary: #161338;
    --primary1: #3a3a3a;
    --accent: #2C2C2C;
    --accent1: #FF4500; /* Nice warm Orange */
    --background: #cccccc60;
}


body.theme-red {
    --mix: linear-gradient(5deg, #c9434c, #EB7D81, #f3a7ab, #a41e34);
    --mix2: color-mix(in srgb, var(--primary) 60%, var(--accent) 40%);
    --primary: #EB7D81;
    --accent: #f3a7ab;
    --text: #ffffff;
}









.Privacy {
    width: auto;
    //text-align: center;
    background: var(--mix);
    color: white;
    padding: 5px;
    font-size: 11px !important;
    display: flex;
    align-items: center;
    gap: 6px;
}


.footerlogo {
    display: inline-flex;
    align-items: center;
    //gap: 6px;
    font-weight: 600;
}

    .footerlogo img {
        width: 15px;
        height: 15px;
        //object-fit: contain;
    }




/* Shared button styles */
/* Button Styling */
body .form-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

body .btn-cancel, .btn-submit, .d-grid .btn-secondary, .d-grid .btn-danger {
    position: relative;
    width: 150px;
    height: 30px;
    padding: 4px;
    margin-top: 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer; /* Ensure buttons are clickable */
    font-family: var(--font-primary);
    font-weight: 500;
}

/* Submit Button Styles */
body .btn-submit {
    background: var(--primary); /* Gold background for submit button */
    color: #fff;
}

    body .btn-submit:hover {
        background-color: var(--secondary); /* Lighter brown for hover */
        color: #fff;
    }

/* Cancel Button Styles */
body .btn-cancel {
    border: 1px solid var(--primary); /* Border for cancel button */
    color: var(--primary); /* Text color for cancel button */
}

    body .btn-cancel:hover {
        background-color: var(--primary);
        color: #fff;
    }





























.container-fluid {
    display: flex;
    flex-direction: column;
    padding: 0px !important; /* Remove padding */
    width: 90%; /* Ensure full width */
    max-width: 1300px; /* Optional: Max width to avoid stretching on large screens */
    justify-content: center; /* Horizontally center */
}

.main--content {
    position: center;
    //background: #ebe9e9;
    width: 100%;
    padding: 10px !important;
    margin-top: -10px !important;
    //text-shadow: var(--box-shadow);
    //text-shadow: 1px 1px 0 rgba(255,255,255,0.6), 2px 2px 4px rgba(0,0,0,0.3);
}

    .main--content hr {
        margin-top: 0px;
        margin-bottom: 0px;
        color: var(--primary);
        
    }

.header--wrapper img {
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 50%;
}


.header--wrapper {
    display: flex;
    justify-content: space-between; /* Space out title and user info */
    align-items: center; /* Vertically center the items */
    flex-wrap: wrap; /* Ensure it wraps if necessary */
    background: #fff;
    border-radius: 0px;
    padding: 5px 10px !important;
    margin-bottom: 5px;
    width: 100%;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-bottom: 0px;
}

.header--title {
    color: var(--secondary);
    font-size: 12px !important;
    font-family: var(--font-primary);
    font-weight: normal !important;
    padding-left: 0px;
    text-shadow: var(--box-shadow);
    //text-shadow: 1px 1px 0 rgba(255,255,255,0.6), 2px 2px 4px rgba(0,0,0,0.3);
}

    .header--title h6 {
        font-size: 24px;
        font-family: var(--font-primary);
        font-weight: normal !important;
        color: var(--secondary);
        font-weight: 500 !important;
        text-shadow: var(--box-shadow);        
    }

.user--info {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}



.header--title span,
.header--title img {
    width: 23px;
    height: 23px;
    font-size: 18px;
}

.brand-link {
    text-decoration: none;
    color: inherit;
}

    
    .brand-link:hover {
        color: var(--primary);
    }






.search--box {
    background: rgba(237,237,237) !important;
    border-radius: 15px !important;
    color: rgba(113,99,186,255);
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 2px 3px !important;
    position: relative !important;
    width: 300px; /* Adjust the width as needed */
}

    .search--box input {
        width: 100%;
        padding: 8px 30px 8px 30px; /* Add padding on both sides to make space for icons */
        border-radius: 15px;
        border: 0px solid #ccc;
        font-size: 14px;
        background: transparent;
        padding: 7px;
    }

        .search--box input:focus {
            outline: 1px solid var(--primary);
        }


.search-icon {
    position: absolute;
    top: 50%;
    left: 10px; /* Adjust the icon's position */
    transform: translateY(-50%);
    color: var(--primary);
    font-size: var(--secondary2-size);
}

.clear-search {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: red;
    font-size: var(--secondary-size);
    cursor: pointer;
    padding-right: 5px;
    font-family: var(--font-primary);
    transition: transform 0.2s ease, color 0.3s ease;
}

    /* Optional: Hover effect for the clear icon */
    .clear-search:hover {
        color: red;        
        transform: translateY(-50%) scale(1.3); /* keep Y centering */
    }


.fa-search {
    border: none; /* Removes the border */
    outline: none; /* Removes the focus outline */
    color: red; /* Change color on hover */
    background: transparent; /* Makes the background transparent */
    margin-left: 10px !important; /* Optional: adjust padding to make it fit better */
    font-size: var(--secondary-size);
    cursor: pointer; /* Optional: adds pointer cursor for better UX */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition for background color and scale */
}

    .fa-search:hover {
        background-color: #f0f0f0; 
        transform: scale(1.2); /* Slightly increase the size of the button */
    }




























/* Main Page Side Bar */
/* Style for the main navigation menu */
.main-menu {
    display: flex;
    justify-content: space-between;
    background-color: white;
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative; /* To ensure that absolutely positioned subnavs are positioned relative to the menu */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 13px; /* Set the font size */
    font-weight: normal !important; /* Set the font weight */
    font-family: var(--font-primary);
}

    .main-menu ul {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .main-menu li {
        margin: 0px 9px;
    }

    .main-menu a {
        color: var(--secondary);
        text-decoration: none;
        padding: 0px 0px;
    }

    /* Style the main menu links */
    .main-menu a {
        position: relative; /* Position relative to make the pseudo-element work */
        text-decoration: none; /* Remove the default underline */
        padding-bottom: 3px; /* Space for the custom underline */
    }

    /* Custom underline effect on hover */
    .main-menu span::before {
        content: ''; /* Required to create a pseudo-element */
        position: absolute;
        bottom: 0; /* Position it directly below the text */
        left: 50%; /* Start from the left of the text */
        width: 0; /* Initially, the width is 0 */
        height: 1px; /* Height of the underline */
        background-color: var(--primary); /* Underline color */
        transition: width 0.3s ease-in-out, left 0.3s ease-in-out; /* Animate the width and position */
        transform: translateX(-0%); /* Adjust for exact centering of the line */
    }

    /* When hovering, expand the width of the underline to match the text */
    .main-menu span:hover::before {
        width: 100%; /* Make the underline full width */
        left: 0px;
    }

    /* On hover, also change the text color */
    .main-menu span:hover {
        color: var(--primary); /* Change text color on hover */
        border-radius: 4px;
    }
    /* On hover, also change the text color */
    .main-menu a:hover {
        color: var(--primary); /* Change text color on hover */
        border-radius: 4px;
    }





    /* Admin Control Menu Link */
    /* Style the submenu items */
    /* Subnav container (hidden by default) */
    .main-menu .has-subnav {
        position: relative;
    }

    .main-menu .subnav {
        display: none; /* keep hidden by default */
        position: absolute;
        top: 20px;
        left: 0;
        z-index: 9999;
        background-color: rgba(245, 245, 245, 0.95);
        padding: 0px;
        border-radius: 0px;
        box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.1);
        flex-direction: column;
        gap: 0px;
    }

    .main-menu .has-subnav.open > .subnav, .has-subnav.open > .nested-subnav {
        display: flex; /* show submenu when open class is added */
    }

    /* Rotate arrow when open */
    .main-menu .has-subnav.open > a > .arrow {
        transform: rotate(180deg);
        transition: transform 0.3s ease-in-out;
        color: var(--primary);
        border-radius: 0px;
    }

    /* Style the submenu items */
    .main-menu .subnav li {
        list-style: none;
        padding: 0px;
        width: 145px;
    }

    .main-menu .subnav a {
        color: black;
        text-decoration: none;
        display: block;
        padding: 8px;
        border-radius: 4px;
    }

        /* Hover effect for submenu items */
        .main-menu .subnav a:hover {
            //background-color: #f1f1f1;
            color: var(--primary);
        }


    /* Make the last two items align to the right */
    .main-menu.end:last-child {
        align-items: end;
    }



    /* Nested submenu (flyout to the right) */
    .main-menu .nested-subnav {
        top: 0; /* Align with the parent item */
        left: 100%; /* Position to the right of parent li */
        margin-left: 1px; /* Small gap if needed */
        white-space: nowrap; /* Prevent wrapping */
    }

    .main-menu .nested-subnav {
        display: none;
        position: absolute;
        top: 10px;
        left: 150px;
        background-color: rgba(245, 245, 245, 0.95);
        padding: 0;
        min-width: 160px;
        box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 999;
    }

    /* Show when parent li has 'open' */
    .main-menu .has-subnav.open > .nested-subnav {
        display: flex;
        flex-direction: column;
    }


    .main-menu .nested-subnav.open > a > .arrow {
        transform: rotate(90deg); /* Or 180deg for down arrow */
        transition: transform 0.2s ease;
    }





.line {
    //background-color: var(--primary);
    background: var(--mix);
    width: 100%; /* Full width of the page */
    height: 25px; /* Set height as needed (adjust this value) */
    margin-top: 0px; /* Optional: Add some space between nav and the div */
    margin-bottom: 0px; /* Optional: Add some space between nav and the div */
}






.theme-switcher {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 70px; /* you can change the width */
    transform: translateX(0);
    background: #f9f9f9;
    border-left: 2px solid #ccc;
    padding: 1.5rem;
    box-shadow: -5px 0 8px var(--primary);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: right 3.0s ease;
    z-index: 1000;
    align-items: center;
    padding-top: 70px;
}

    .theme-switcher.hidden {
        transform: translateX(150%);
    }


/*
#toggle-theme-switcher {
    //position: fixed;
    //top: 1rem;
    //right: 1rem;
    z-index: 1001;
}*/


.theme-switcher button {
    display: block;
    width: 50px;
    height: 50px;
    margin: 10px 0;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: transform 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

    .theme-switcher button:hover {
        transform: scale(1.1);
    }

/* Add some colors to differentiate */
    .theme-switcher .theme-cool {
        background-color: #b79a6d;
        font-size: var(--primary-size);
    }

    .theme-switcher .theme-green {
        background-color: #169f9f;
        font-size: var(--primary-size);
    }

    .theme-switcher .theme-dark {
        background-color: #161338;
        color: var(--white);
        font-size: var(--primary-size);
    }

    .theme-switcher .theme-red {
        background-color: #a41e34;
        font-size: var(--primary-size);
    }


.privacy {
    padding-left: 50px;
    padding-right: 50px;
}












/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}








.user-avatar-wrapper {
    position: relative;
    display: inline-block;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.notification-icon-wrapper {
    position: relative;
    display: inline-block;
       
}

.notification-badge {
    position: absolute;
    top: -6px;
    right: -9px;
    background: red;
    color: white;
    border-radius: 50%;
    font-size: 0.65rem;
    padding: 2px 5px;
    line-height: 1;
}

.notification-icon-wrapper[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 20px;
    right: 15px;
    background-color: black;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 10;
}












/* Spinner styles */

/*#spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}*/

/*#content {
    display: none;
}*/













/* Background Stock Chart */

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.bar, .node, .linee {
    position: absolute;
}

.bar {
    width: 5px;
    border-radius: 2px;
    opacity: 0.7;
}

.node {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 10px;
}

.linee {
    height: 2px;
    transform-origin: left;
    opacity: 0.7;
}

/* Colors for each line */
    .linee0 { background-color: #00ffcc; }
    .node0 { background-color: #00ffcc; box-shadow: 0 0 10px #00ffcc; }
    .bar0 { background: linear-gradient(to top, #00ffcc, transparent); }

    .linee1 { background-color: #ff6ec7; }
    .node1 { background-color: #ff6ec7; box-shadow: 0 0 10px #ff6ec7; }
    .bar1 { background: linear-gradient(to top, #ff6ec7, transparent); }

    .linee2 { background-color: #ffaa00; }
    .node2 { background-color: #ffaa00; box-shadow: 0 0 10px #ffaa00; }
    .bar2 { background: linear-gradient(to top, #ffaa00, transparent); }


.side-line {
    position: absolute;
    height: 1.25px;
    background-color: var(--primary);
    opacity: 0.2;
    transform-origin: left;
    transition: opacity 1s ease;
}



.full-width-alert {
    width: 690px !important;
    margin-left: -10px !important;
    margin-right: 0px !important;
    margin-top: 47px !important;
    border-radius: 0px !important;
    position: absolute !important;
    z-index: 9999 !important;
    height: 25px !important;
    padding: 3px 6px !important;
    font-size: 12px !important;
    line-height: 1.2 !important; /* keeps text height consistent */
}



/* Responsive tweaks */
@media (max-width: 768px) {
    .table-custom {
        font-size: 0.9rem;
    }

    form {
        padding: 15px;
        margin: 0 auto;
    }
}







.has-subnav .icon-house-path {
    stroke: var(--secondary);
    stroke-width: 1.6853932584269662;
    stroke-dasharray: none;
    stroke-linecap: round;
    stroke-dashoffset: 0;
    stroke-linejoin: round;
    stroke-miterlimit: 4;
    fill: #fff;
    fill-rule: nonzero;
    opacity: 1;
    transition: stroke 0.1s ease;
}

    .icon-house-path:hover {
        stroke: var(--primary);
    }




.button .icon-logout-path {
    stroke: var(--secondary);
    stroke-width: 1.048951048951049;
    stroke-dasharray: none;
    stroke-linecap: round;
    stroke-dashoffset: 0;
    stroke-linejoin: round; /* or "miter" depending on the path */
    stroke-miterlimit: 4;
    fill: #fff;
    z-index: 9999;
    fill-rule: nonzero;
    opacity: 1;
    transition: stroke 0.1s ease;
}

    .button .icon-logout-path:hover {
        stroke: var(--primary);
    }




/* Base style for all login icon paths */
.icon-login-path,
.icon-login-path-miter {
    stroke: var(--secondary);
    stroke-width: 0.6993;
    stroke-dasharray: none;
    stroke-linecap: round;
    stroke-dashoffset: 0;
    stroke-miterlimit: 4;
    fill: none;
    fill-rule: nonzero;
    opacity: 1;
    transition: stroke 0.3s ease;
}

/* One path uses miter linejoin */
.icon-login-path-miter {
    stroke-linejoin: miter;
}

/* Others use round linejoin */
.icon-login-path {
    stroke-linejoin: round;
}

/* Hover behavior */
.icon-login:hover .icon-login-path,
.icon-login:hover .icon-login-path-miter {
    stroke: var(--primary);
}






 


#session-timer {
    display: none; /* Initially hidden */
    position: fixed; /* Fix it relative to the viewport */
    top: 50%; /* Position it vertically at the center of the screen */
    left: 50%; /* Position it horizontally at the center of the screen */
    transform: translate(-50%, -50%); /* Offset by 50% of its own width and height to center it exactly */
    padding: 50px 50px; /* Add some padding for better look */
    background: #333; /* Background color */
    color: white; /* Text color */
    border-radius: 5px; /* Rounded corners */
    font-family: var(--font-primary);
    z-index: 9999; /* Make sure it appears above other elements */
}

    #session-timer.visible {
        display: block; /* Show when the 'visible' class is added */
    }

















.ui-lib-viewport_sm .ui-lib-language-switcher {
    gap: 16px;
    gap: 1rem
}


.ui-lib-language-switcher {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    gap: 5px;
    font-size: 12px;
}

    .ui-lib-language-switcher, .ui-lib-language-switcher:active, .ui-lib-language-switcher:focus, .ui-lib-language-switcher:visited {
        background-color: transparent;
        border: 0;
        text-transform: none;
        color: var(--secondary);
    }

        .ui-lib-language-switcher:hover {
            text-decoration: underline;
            color: var(--primary);
            //background: var(--primary); /* Underline color */
            transition: width 0.3s ease-in-out, left 0.3s ease-in-out; /* Animate the width and position */
            transform: translateX(-0%); /* Adjust for exact centering of the line */
        }

        .ui-lib-language-switcher svg.ui-lib-button__icon.ui-lib-icon path:first-of-type {
            stroke: var(--secondary);
        }

        .ui-lib-language-switcher:hover svg.ui-lib-button__icon.ui-lib-icon path:first-of-type {
            stroke: var(--primary);
        }

        .ui-lib-language-switcher svg.ui-lib-button__icon.ui-lib-icon path:not(:first-of-type) {
            stroke: var(--secondary);
        }


        .ui-lib-language-switcher:hover svg.ui-lib-button__icon.ui-lib-icon path:not(:first-of-type) {
            //fill: var(--primary);
            stroke: var(--primary);
        }

.button .ui-lib-language-switcher:hover {
    background-color: #f0f3f5;
    //background-color: var(#f0f4cc);
    color: var(--primary);
    border-radius: 25px;
}