:root {
    --primary-color: #0f324e;
    --secondary-color: #3498db;
    --accent-color: #e74c3c;
    --light-bg: #ecf0f1;
    --dark-text: #2c3e50;
    --light-text: #ffffff;
}



.sidebar-menu > li > a {
    color: var(--light-text) !important;
    font-size: 15px !important;
    padding: 12px 15px !important;
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a {
    background: var(--secondary-color) !important;
    color: var(--light-text) !important;
    border-left: 4px solid var(--accent-color) !important;
}

/* Topbar styling */
.main-header {
    background: var(--primary-color) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.main-header .navbar {
    background-color: var(--primary-color) !important;
}

.main-header .navbar .nav > li > a {
    color: var(--light-text) !important;
}
/* Sidebar styling */
.main-sidebar {
   
    background: var(--primary-color) !important;
}

.wrapper {
    background: var(--primary-color) !important;
}
/* Button styling */
.btn-primary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.btn-success {
    background-color: #27ae60 !important;
    border-color: #27ae60 !important;
}

.btn-danger {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Content area styling */
.content-wrapper {
    background: var(--light-bg) !important;
}

.box {
    border-top: 3px solid var(--secondary-color) !important;
}

/* Table styling */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(52, 152, 219, 0.05) !important;
}

.table > thead > tr > th {
    background-color: var(--primary-color) !important;
    color: var(--light-text) !important;
}

.navbar,
        .logo,
        .sidebar-menu>li>.treeview-menu,
        .skin-black {
            background: var(--secondary-color) !important;
        }

        .skin-black .sidebar-menu>li>.treeview-menu {
            background: var(--secondary-color) !important;
        }
       .treeview-menu>li>a{
            background: var(--dark-text) !important;
        }
        .skin-black .sidebar-menu .treeview>a:hover,
        .sidebar-menu>li>a:hover {
            background: var(--secondary-color) !important;
        }

        .skin-black .sidebar-menu>li.active>a {
            background: var(--secondary-color) !important;

        }

        .skin-black .sidebar-menu>li.active>a {
            border-left-color: var(--secondary-color) !important;
        }