/* General styles */
body {    
    transition: background 0.3s, color 0.3s;
}



/* Dark Mode */
body.dark-mode {
    background-color: #1e1e1e;
    color: #fff;
}
body.dark-mode .wrapper{
    background-color: #333;
}
/* Navbar */
body.dark-mode .navbar {    
    transition: background 0.3s, color 0.3s;
}
body.dark-mode .sidebar{
    background-color: #333;
}
body.dark-mode .navbar {
    background-color: #555;
    color: linen;
    border-bottom: #333;    
}

body.dark-mode .navbar-main {
    background-color: #222;
    color: linen;
    box-shadow: 1px 1px 1px #222;

}

body.dark-mode .navbar-main:hover {
    box-shadow: 1px 1px 1px #333;
}

body.dark-mode .nav-custom {
    background-image: none;
    background-color: #222 !important;
    color: linen;
}

body.dark-mode .card {
    background-color: #444;
    color: linen;
}

body.dark-mode .card-header {
    background-color: #555;
    color: linen;
}

body.dark-mode .modal {
    --bs-modal-bg: #333;
    color: linen;
}

body.dark-mode .modal-header {
    background-color: #222;
    color: linen;
}

body.dark-mode .card-footer{
    background-color: #555;
    color: linen;
}

body.dark-mode a {    
    color: linen;
}

body.dark-mode .page-link {
    background-color: #333;
    color: linen;
}

body.dark-mode table, body.dark-mode th, body.dark-mode td {
    color: #ccc;
    background-color: transparent;
}

body.dark-mode .accordion-body {
    background-color: #333;
    color: linen;
}

body.dark-mode .tab-content {
    background-color: #111 !important;
    color: linen;
}

body.dark-mode .form-control, body.dark-mode .form-select {
    background-color: #111 !important;
    color: linen;
    border: 1px solid #444;
}

/* Sidebar */
.sidebar {    
    transition: background 0.3s, color 0.3s;
}

body.dark-mode .sidebar:after {
    background-color: #333;
    color: #fff;
}

body.dark-mode .accordion {
    background-color: #333;
    color: #fff;
    border: 1px solid #333;
}

body.dark-mode .accordion-flush .accordion-item .accordion-button, body.dark-mode .accordion-flush .accordion-item .accordion-button.collapsed {
    color: #fff;
    background-color: #444;
    border: 1px solid #444 !important;
}

body.dark-mode .accordion-item {
    border: 1px solid #444;
}

body.dark-mode .sidebar ul li a {
    color: whitesmoke;
}

body.dark-mode .sidebar button {
    color: linen;
}


body.dark-mode .main-panel {
    background-color: #333;
    color: #fff;
}


body.dark-mode .content {
    background-color: #333;
    color: #fff;
}
.content {
    transition: color 0.3s;
}

body.dark-mode .footer {
    background-color: #333;
    color: #fff;
}

/* Theme Toggle Button */
#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
}

body.light-mode #theme-icon {
    color: #ffa500;
}

body.dark-mode #theme-icon {
    color: #fff;
}


body.dark-mode .input-group-text {
    background-color: #333;
    color: linen;
}

body.dark-mode .list-group {
    background-color: #333;
    color: linen;
}
body.dark-mode .list-group-item  {
    background-color: #333;
    color: linen;
}
body.dark-mode .bg-gray {
    background: #444 !important;
    color: linen;
}

body.dark-mode .text-muted{    
    color: #aaa !important;
}

body.dark-mode .nav li a:hover, .nav li .current {
    text-shadow: none !important;
    color: #666;
}


body.dark-mode .input-group-text {
    border: none !important;
}