/* the default look of the tabs in the topbar (dark mode) */

.tabs {
    background-color: #2a2a2a;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #444;
    position: relative;
}
.tab { padding: 14px 24px; cursor: pointer; }
.tab a { text-decoration: none; color: #eaeaea; font-weight: 500; }
.tab.active { background-color: #3a3a3a; border-bottom: 3px solid #4db6ff; }
.tab:hover { background-color: #3f3f3f; }

/* the light mode override */

body.light-mode .tabs {
    background-color: #e5e5e5;
    border-bottom: 1px solid #ccc;
}
body.light-mode .tab a {
    color: #1f1f1f;
}
body.light-mode .tab.active {
    background-color: #dcdcdc;
    border-bottom: 3px solid #007acc;
}
body.light-mode .tab:hover {
    background-color: #d0d0d0;
}