/*  */
/* Default full sidebar for large screens */
body[data-sidebar-size="lg"] .app-menu.navbar-menu {
    width: 250px;
    transition: width 0.3s ease-in-out;
}

/* Small sidebar for large screens */
body[data-sidebar-size="sm"] .app-menu.navbar-menu {
    width: 80px;
}

/* Sidebar hidden (mobile default) */
body[data-sidebar-size="hidden"] .app-menu.navbar-menu {
    transform: translateX(-100%);
    position: fixed;
    height: 100%;
    background: #222;
    transition: transform 0.3s ease-in-out;
}

/* Sidebar open (mobile when toggled) */
body[data-sidebar-size="open"] .app-menu.navbar-menu {
    transform: translateX(0);
}
/* Hide hamburger button on medium and large screens (≥768px) */
@media (min-width: 768px) {
    #toggle-sidebar {
        display: none !important;
    }
}

/* Show hamburger button only on small screens (<768px) */
@media (max-width: 767px) {
    #toggle-sidebar {
        display: block !important;
    }
}





@font-face {
    font-family: 'Cocon Next Arabic';
    src: url('/build//fonts/CoconNextArabic-Regular.ttf') format('truetype'); /* Update the format if different */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cocon Next Arabic';
    src: url('/build/fonts/CoconNextArabic-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
/* @media (max-width: 992px) {
    .app-menu {
        position: fixed;
        left: -250px;
        width: 250px;
        top: 0;
        height: 100%;
        transition: left 0.3s ease-in-out;
    } */

    .app-menu.open {
        left: 0;
    }

    .topnav-hamburger .hamburger-icon span {
        display: block;
        width: 25px;
        height: 3px;
        background:rgba(247, 150, 33, 0.8);
        margin: 5px 0;
        transition: 0.4s;
    }
}
.app-menu.navbar-menu {
    /* background-color: #224EA2; */
    /* transform: translateX(-100%);
    transition: transform 0.3s ease-in-out; */
}

.app-menu.navbar-menu.open {
    transform: translateX(0); /* Show sidebar when "open" class is added */
}
.menu-dropdown .nav-link {
    font-family: 'Cocon Next Arabic', sans-serif;

}
/* Sidebar styles */
.app-menu .nav-item,      /* Targets each item */
.app-menu .nav-link,      /* Targets links within items */
.app-menu .menu-title {   /* Targets titles within sidebar */
    font-family: 'Cocon Next Arabic', sans-serif !important;
    font-size: 16px !important; /* Adjust size as needed */
    color: white;    /* Ensures text color within sidebar */
}

.app-menu .nav-link:hover {
    color: rgba(247, 150, 33, 0.8);  /* Highlight color on hover with 80% opacity */
}


.app-menu {
    background-color: #224EA2;
}

.app-menu .nav-link,
.app-menu .nav-link:hover {
    color: white;
}

/* Default (light mode) active button styles */
#add-rows_wrapper .paginate_button.page-item.active a {
    background-color: #F79621 !important;
    color: white !important;
    border-color: #F79621 !important;
}

/* Dark mode active button styles */
body.dark-mode #add-rows_wrapper .paginate_button.page-item.active a {
    background-color: #444444 !important;
    color: white !important;
    border-color: #444444 !important;
}



.navbar-menu, .topnav-hamburger {
    color: white;
}

.dropdown-menu {
    border-color: #224EA2;
}

.btn-primary {
    background-color: #224EA2;
    border-color: #224EA2;
}

.btn-danger {
    background-color: #F79621;
    border-color: #F79621;
}
body {
    font-family: 'Cocon Next Arabic', sans-serif;
}

table, .form-control, .btn {
    font-family: inherit;
}

.table thead th {
    background-color: #F79621;;
    color: white;
}



.btn-primary {
    background-color: #F79621;
    border-color: #F79621;
}

.btn-danger {
    background-color: #F79621;
    border-color: #F79621;
}
/* Ensure text and background are changed in dark mode */


/* Example of overriding sidebar styles in dark mode */
body.dark-mode .app-menu {
    background-color: #444444;  /* Dark background for sidebar */
}

body.dark-mode .app-menu .nav-link,
body.dark-mode .app-menu .menu-title {
    color: #e0e0e0;  /* Lighter text color for readability */
}
.slot-title {
    font-family: 'Cocon Next Arabic', sans-serif !important;
    font-size: 20px;
    color: #333;
}
h5 {
    font-family: 'Cocon Next Arabic', sans-serif !important;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

li {
    font-family: 'Cocon Next Arabic', sans-serif;
    font-size: 16px;
    color: #666;
}

.card-title {
    font-family: 'Cocon Next Arabic', sans-serif !important;
    font-size: 18px; /* Adjust the size as needed */
    font-weight: 500; /* Adjust weight if necessary */
    color: #333; /* Set text color */
    margin: 0; /* Ensure margin is consistent */
}
/* body.dark-mode .navbar-brand-box,
body.dark-mode .navbar-header {
    background-color: #333333;
} */

body.dark-mode .table thead th {
    background-color: #444444;
    color: #ffffff;
}

/* body.dark-mode .table tbody tr:hover {
    background-color: #444444;
} */

body.dark-mode .btn-primary {
    background-color: #444444;
    border-color: #444444;
}

body.dark-mode .btn-danger {
    background-color: #555555;
    border-color: #555555;
}
.paginate_button page-item active{
    color: #F79621;
}
.btn-topbar {
    /* Adjust these as needed for custom appearance */
    background-color: transparent;
    border: none;
    color: #F79621; /* Default icon color */
    /* Add any further styling needed */
}
.custom-color {
    color: #F79621; /* Replace with your custom color */
}

.btn-topbar:hover {
    color: #224EA2; /* Color on hover */
    /* Other hover effects */
}

.btn-topbar:active {
    color: #000; /* Color when button is active */
    /* Other active effects */
}

body.dark-mode .logo-dark {
    display: block; /* Show dark logo in dark mode */
}

body.dark-mode .logo-light {
    display: none; /* Hide light logo in dark mode */
}

body.dark-mode .custom-color {
    color: #444444;; /* Replace with your custom color */
}
.logo-light {
    display: block; /* Default logo is light */
}

.logo-dark {
    display: none; /* Default logo hidden */
}


.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1rem;
}

label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

select, input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

button {
    background-color: #f57c00;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #e65100;
}

.row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.col-md-4 {
    flex: 1;
    min-width: 250px; /* Adjust based on your layout */
}


.auth-one-bg{
    background-color: #224EA2;
    background-image: url(/build/images/sam.png) !important; ;
    background-position: center;
    background-size: cover;
}