/* CSS Document */
/* ============================= */
/*          DARK MODE            */
/* ============================= */

body.dark-mode {
    background-color: #121212;
    color: #e4e6eb;
}

/* Links */
body.dark-mode a {
    /*color: #8ea6ff;*/
    color:#e4e6eb;
}

/* Header */
body.dark-mode #container .header {
    background-color: #1e1e1e;
    box-shadow: none;
}

body.dark-mode #container .header .logo {
    background-color: #1e1e1e;
    border-bottom: 1px solid #4878A8;
}

/* Sidebar */
body.dark-mode #container .body .sidebar {
    background-color: #1b1b1b;
    box-shadow: none;
}

body.dark-mode #container .body .sidebar ul.links {
    border-top: 1px solid #4878A8;
    border-bottom: 1px solid #4878A8;
}

/* Content Area */
body.dark-mode #container .body .content_area {
    background-color: #181818;
}

/* Cards */
body.dark-mode .card,
body.dark-mode .card_half,
body.dark-mode .card_links {
    background-color: #253242;
    box-shadow: none;
}

/* Card headers */
body.dark-mode .card_header {
    background-color: #375C82;
}

/* Card link header */
body.dark-mode .card_links_header {
    background-color: #375C82;
}

body.dark-mode .card_links_body {
    border: 1px solid #4878A8;
}

/* Forms */
body.dark-mode .form-control,
body.dark-mode .input-group-text,
body.dark-mode .custom-select {
    background-color: #2a2a2a;
    color: #e4e6eb;
    border-color: #4878A8;
}

/* Buttons */
body.dark-mode .btn {
    background-color: #FF9839;
}

body.dark-mode .btn:hover {
    background-color: #F97600;
}

body.dark-mode .btn1 {
    background-color: #FF9839;
}

body.dark-mode .btn1:hover {
    background-color: #F97600;
}

/* Login / Reset / Recovery Boxes */
body.dark-mode #login_box,
body.dark-mode #reset_box,
body.dark-mode #recovery_box {
    background-color: #1e1e1e;
    box-shadow: none;
}

/* Footer */
body.dark-mode .footer {
    /*color: #aaa;*/
    color: #e4e6eb;
}

/* 🔥 ADD THIS BELOW EVERYTHING */

body.dark-mode #container .body .sidebar .summary,
body.dark-mode #container .body .sidebar .summary p,
body.dark-mode #container .body .sidebar .summary span {
    color: #e4e6eb;
}

/* ============================= */
/*   DARK MODE - HEADER INFO     */
/* ============================= */

body.dark-mode #container .header .info {
    color: #FF9839;
    border-bottom: 1px solid #4878A8;
}

body.dark-mode #container .header .info .name {
    font-weight: bold;
    color: #e4e6eb;
}
body.dark-mode #secLink > .card_links_body{
    background: url("../images/icon-sec_2.svg") no-repeat center center;
}