/**
 * Confidentiality TempMails — Dark Red Theme
 * Pure visual overrides — no layout or positioning changes.
 */

/* =====================================================================
   VARIABLES
   ===================================================================== */
:root {
    --ct-bg-base:        #0d1117;
    --ct-bg-panel:       #161b22;
    --ct-bg-content:     #1c2128;
    --ct-bg-hover:       #21262d;
    --ct-bg-input:       #1e2530;
    --ct-red:            #c0392b;
    --ct-red-bright:     #e74c3c;
    --ct-red-glow:       #ff5252;
    --ct-red-dark:       #7b2218;
    --ct-red-muted:      rgba(192, 57, 43, 0.15);
    --ct-red-muted2:     rgba(192, 57, 43, 0.25);
    --ct-border:         #30363d;
    --ct-border-red:     #5c1717;
    --ct-font:           #e6edf3;
    --ct-font-muted:     #8b949e;
    --ct-shadow:         0 4px 24px rgba(0,0,0,0.7);
    --ct-shadow-red:     0 0 0 2px rgba(192, 57, 43, 0.45);
}

/* =====================================================================
   SCROLLBARS
   ===================================================================== */
* {
    scrollbar-color: #3d1010 var(--ct-bg-panel);
    scrollbar-width: thin;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ct-bg-panel); }
::-webkit-scrollbar-thumb { background: var(--ct-red-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ct-red); }

/* =====================================================================
   BASE
   ===================================================================== */
html, body {
    background-color: var(--ct-bg-base) !important;
    color: var(--ct-font) !important;
}

/* =====================================================================
   LAYOUT PANELS — colors only, no structural changes
   ===================================================================== */
#layout,
#layout > div {
    background-color: var(--ct-bg-base) !important;
}

#layout-list {
    background-color: var(--ct-bg-panel) !important;
    border-right-color: var(--ct-border) !important;
}

#layout-sidebar {
    background-color: var(--ct-bg-panel) !important;
    border-right-color: var(--ct-border) !important;
}

#layout-content {
    background-color: var(--ct-bg-content) !important;
}

#layout > div > .header {
    background-color: var(--ct-bg-panel) !important;
    border-bottom-color: var(--ct-border) !important;
    color: var(--ct-font) !important;
}

#layout > div > .footer {
    background-color: var(--ct-bg-panel) !important;
    border-top-color: var(--ct-border) !important;
    color: var(--ct-font-muted) !important;
    font-weight: normal !important;
}

#layout > div > .header a.button {
    color: var(--ct-font) !important;
}

/* =====================================================================
   TASK MENU (left icon column)
   ===================================================================== */
#layout-menu,
#layout-menu .special-buttons {
    background-color: var(--ct-bg-base) !important;
}

#layout-menu {
    border-right-color: var(--ct-border-red) !important;
}

#taskmenu a {
    color: var(--ct-font-muted) !important;
}

@media screen and (min-width: 481px) {
    #taskmenu a {
        color: var(--ct-font-muted) !important;
    }
    #taskmenu a:hover {
        color: var(--ct-font) !important;
        background-color: var(--ct-red-muted) !important;
    }
    #taskmenu a.selected,
    #taskmenu a.selected:hover {
        color: var(--ct-white, #fff) !important;
        background-color: var(--ct-red-muted2) !important;
    }
    #taskmenu .action-buttons a {
        color: var(--ct-red-bright) !important;
    }
    #taskmenu .action-buttons a:hover {
        color: var(--ct-red-bright) !important;
        background-color: var(--ct-red-muted) !important;
    }
    #taskmenu a.logout,
    #taskmenu a.logout:hover {
        color: var(--ct-red-glow) !important;
    }
    #taskmenu .special-buttons {
        background-color: var(--ct-bg-base) !important;
    }
}

@media screen and (max-width: 480px) {
    #taskmenu a {
        color: var(--ct-font) !important;
        border-bottom-color: var(--ct-border) !important;
    }
}

/* =====================================================================
   TOOLBAR
   ===================================================================== */
.menu.toolbar a,
.toolbar a.button {
    color: var(--ct-font) !important;
}

.toolbar a.button:hover,
.menu.toolbar a:not(.disabled):hover,
.menu.toolbar a:not(.disabled):focus {
    color: var(--ct-red-bright) !important;
    background-color: var(--ct-red-muted) !important;
}

.menu.toolbar a.selected {
    color: var(--ct-red-bright) !important;
}

.menu.toolbar .dropbutton a.dropdown:hover {
    background-color: var(--ct-red-muted) !important;
}

/* =====================================================================
   SEARCH BAR
   ===================================================================== */
.searchbar {
    background-color: var(--ct-bg-hover) !important;
    border-color: var(--ct-border) !important;
}

.searchbar input,
.searchbar a {
    color: var(--ct-font) !important;
    background-color: transparent !important;
}

.searchbar form:before {
    color: var(--ct-font-muted) !important;
}

/* =====================================================================
   LISTINGS (folder list + message list)
   ===================================================================== */
.listing li,
.listing tbody td {
    border-bottom-color: var(--ct-border) !important;
}

.listing li a,
.listing tbody td a,
.listing tbody td {
    color: var(--ct-font) !important;
}

.listing li.selected,
.listing li.selected > a,
.listing tr.selected td {
    color: var(--ct-font) !important;
    background-color: var(--ct-red-muted2) !important;
}

.listing li:hover > a,
.listing tr:not(.selected):hover td {
    background-color: var(--ct-bg-hover) !important;
}

.listing li.droptarget > a,
.listing tr.droptarget td {
    background-color: var(--ct-red-muted) !important;
}

/* Unread badge on folders */
.folderlist li.mailbox .unreadcount {
    background-color: var(--ct-red) !important;
    color: #fff !important;
}

/* Message list details */
.messagelist span.date,
.messagelist span.size,
.messagelist span.fromto {
    color: var(--ct-font-muted) !important;
}

.messagelist span.msgicon.status.unread::before {
    color: #f59e0b !important;
}

.messagelist tr.flagged td,
.messagelist tr.flagged span.attachment span {
    color: var(--ct-red-bright) !important;
}

.messagelist tr.deleted td {
    opacity: 0.5 !important;
}

.listing li.disabled,
.listing tr.disabled td {
    color: var(--ct-font-muted) !important;
    opacity: 0.55 !important;
}

.listing li ul {
    background-color: var(--ct-bg-panel) !important;
}

.listing li ul div.treetoggle {
    color: var(--ct-font-muted) !important;
}

.listing-info,
.listing span.secondary {
    color: var(--ct-font-muted) !important;
}

.listing span.attachment span {
    color: var(--ct-font-muted) !important;
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn-primary {
    background-color: var(--ct-red) !important;
    border-color: var(--ct-red-dark) !important;
    color: #fff !important;
}

.btn-primary:hover:not(:disabled),
.btn-primary:focus:not(:disabled) {
    background-color: var(--ct-red-bright) !important;
    border-color: var(--ct-red) !important;
    color: #fff !important;
}

.btn-secondary {
    background-color: var(--ct-bg-hover) !important;
    border-color: var(--ct-border) !important;
    color: var(--ct-font) !important;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #2d333b !important;
    border-color: var(--ct-red) !important;
    color: #fff !important;
}

.btn-danger {
    background-color: var(--ct-red-dark) !important;
    border-color: #5c1717 !important;
    color: #fff !important;
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--ct-red) !important;
    color: #fff !important;
}

.btn {
    color: var(--ct-font) !important;
}

.btn:disabled {
    opacity: 0.45 !important;
}

.floating-action-buttons a.button {
    background-color: var(--ct-red) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(192,57,43,0.5) !important;
}

.floating-action-buttons a.button:hover {
    background-color: var(--ct-red-bright) !important;
}

/* =====================================================================
   FORMS & INPUTS
   ===================================================================== */
.form-control,
.custom-file-label,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select.form-control {
    background-color: var(--ct-bg-input) !important;
    border-color: var(--ct-border) !important;
    color: var(--ct-font) !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select.form-control:focus {
    background-color: var(--ct-bg-hover) !important;
    border-color: var(--ct-red) !important;
    color: var(--ct-font) !important;
    box-shadow: var(--ct-shadow-red) !important;
}

::placeholder {
    color: var(--ct-font-muted) !important;
    font-weight: normal !important;
}

.input-group-text {
    background-color: var(--ct-bg-hover) !important;
    border-color: var(--ct-border) !important;
    color: var(--ct-font-muted) !important;
}

.multi-input > .content {
    border-color: var(--ct-border) !important;
}

.multi-input > .content.focused {
    border-color: var(--ct-red) !important;
    box-shadow: var(--ct-shadow-red) !important;
}

.recipient-input .recipient {
    background-color: var(--ct-red-muted) !important;
    border-color: var(--ct-border-red) !important;
    color: var(--ct-font) !important;
}

.recipient-input a.button.icon,
.recipient-input input {
    color: var(--ct-font) !important;
}

/* Custom switch */
.custom-switch .custom-control-label::before {
    background-color: var(--ct-bg-hover) !important;
    border-color: var(--ct-border) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ct-red) !important;
    border-color: var(--ct-red-dark) !important;
}

.custom-file-label::after {
    background-color: var(--ct-bg-hover) !important;
    color: var(--ct-font-muted) !important;
    border-color: var(--ct-border) !important;
}

input:disabled,
select:disabled {
    opacity: 0.45 !important;
}

.form-control-plaintext {
    color: var(--ct-font) !important;
}

/* =====================================================================
   MENUS & POPOVERS
   ===================================================================== */
.popover,
.popupmenu {
    background-color: var(--ct-bg-panel) !important;
    border-color: var(--ct-border) !important;
    box-shadow: var(--ct-shadow) !important;
}

.popover-body {
    color: var(--ct-font) !important;
}

.popover .menu li a,
.popupmenu .menu li a {
    color: var(--ct-font) !important;
}

.popupmenu .listing li > a:not(.disabled):hover,
.menu a:not(.disabled):hover,
.menu a:not(.disabled):focus {
    background-color: var(--ct-red-muted) !important;
    color: var(--ct-red-bright) !important;
}

.popover .menu li.separator {
    background-color: transparent !important;
    color: var(--ct-font-muted) !important;
}

.popover .menu ul + li.separator {
    border-top-color: var(--ct-border) !important;
}

/* Arrow colors for popovers */
.bs-popover-right > .arrow::after { border-right-color: var(--ct-border) !important; }
.bs-popover-left > .arrow::after  { border-left-color: var(--ct-border) !important; }
.bs-popover-top > .arrow::after   { border-top-color: var(--ct-border) !important; }
.bs-popover-bottom > .arrow::after { border-bottom-color: var(--ct-border) !important; }

/* Mobile popover header */
.popover-header {
    background-color: var(--ct-bg-panel) !important;
    border-bottom-color: var(--ct-border) !important;
    color: var(--ct-font) !important;
}

.popover-overlay {
    background-color: rgba(0,0,0,0.7) !important;
}

/* =====================================================================
   NOTIFICATIONS (message stack)
   ===================================================================== */
#messagestack div {
    color: var(--ct-font) !important;
}

#messagestack div i.icon:before {
    color: var(--ct-font) !important;
}

#messagestack .alert-info,
.ui.alert.boxinformation {
    background-color: #1b2a3b !important;
    border-left: 3px solid #3b82f6 !important;
}

#messagestack .alert-danger,
.ui.alert.boxerror {
    background-color: #2d0a0a !important;
    border-left: 3px solid var(--ct-red) !important;
}

#messagestack .alert-warning,
.ui.alert.boxwarning {
    background-color: #2d2200 !important;
    border-left: 3px solid #f59e0b !important;
}

#messagestack .alert-success,
.ui.alert.boxconfirmation {
    background-color: #0a2d12 !important;
    border-left: 3px solid #22c55e !important;
}

#messagestack .loading {
    background-color: var(--ct-bg-hover) !important;
}

.ui.alert {
    color: var(--ct-font) !important;
}

.ui.alert a:not(.btn) {
    color: var(--ct-font) !important;
    text-decoration: underline !important;
}

.ui.alert i.icon:before {
    color: var(--ct-font) !important;
}

/* =====================================================================
   JQUERY UI DIALOGS
   ===================================================================== */
.ui-dialog,
.ui-widget-content,
.ui-widget-header {
    background-color: var(--ct-bg-panel) !important;
    border-color: var(--ct-border) !important;
    color: var(--ct-font) !important;
}

.ui-dialog-titlebar {
    background-color: var(--ct-bg-panel) !important;
    border-bottom-color: var(--ct-border) !important;
}

.ui-dialog-title,
.ui-dialog-titlebar-close {
    color: var(--ct-font) !important;
    background-color: transparent !important;
}

.ui-dialog-buttonpane {
    background-color: var(--ct-bg-hover) !important;
    border-top-color: var(--ct-border) !important;
}

.ui-dialog-buttonpane a.btn-link {
    color: var(--ct-font) !important;
}

.ui-widget-overlay {
    background-color: rgba(0,0,0,0.75) !important;
    opacity: 1 !important;
}

/* Datepicker */
.ui-datepicker-header {
    border-bottom-color: var(--ct-border) !important;
    background-color: var(--ct-bg-hover) !important;
}

.ui-datepicker th {
    color: var(--ct-font-muted) !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    color: var(--ct-font) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
    color: var(--ct-red-bright) !important;
    background-color: var(--ct-red-muted) !important;
}

.ui-datepicker-days-cell-over a {
    background-color: var(--ct-bg-hover) !important;
}

/* jQuery UI menus */
.ui-menu {
    background-color: var(--ct-bg-panel) !important;
    border-color: var(--ct-border) !important;
    box-shadow: var(--ct-shadow) !important;
}

.ui-menu .ui-menu-item {
    border-bottom-color: var(--ct-border) !important;
}

.ui-state-active,
.ui-menu .ui-state-active {
    background-color: var(--ct-red-muted) !important;
    border-color: transparent !important;
    color: var(--ct-red-bright) !important;
}

/* =====================================================================
   TABS
   ===================================================================== */
.nav-tabs {
    border-bottom-color: var(--ct-border) !important;
}

.nav-tabs .nav-link {
    color: var(--ct-font-muted) !important;
    border-color: transparent !important;
    border-bottom-color: var(--ct-border) !important;
}

.nav-tabs .nav-link:hover {
    color: var(--ct-font) !important;
    border-color: var(--ct-border) !important;
    background-color: var(--ct-bg-hover) !important;
}

.nav-tabs .nav-link.active {
    color: var(--ct-red-bright) !important;
    background-color: var(--ct-bg-panel) !important;
    border-color: var(--ct-border) !important;
    border-bottom-color: transparent !important;
}

/* =====================================================================
   TABLES
   ===================================================================== */
.table {
    color: var(--ct-font) !important;
}

.table td,
.table th,
.table thead th {
    border-color: var(--ct-border) !important;
}

.table-widget {
    border-color: var(--ct-border) !important;
}

.table-widget > .footer {
    background-color: var(--ct-bg-panel) !important;
    border-top-color: var(--ct-border) !important;
    color: var(--ct-font-muted) !important;
}

.table-widget table.options-table tr.selected td {
    background-color: var(--ct-red-muted2) !important;
    color: var(--ct-font) !important;
}

/* =====================================================================
   MESSAGE VIEW
   ===================================================================== */
#message-header {
    border-bottom-color: var(--ct-border) !important;
}

#message-header .header-headers .header-title {
    color: var(--ct-font) !important;
    font-weight: normal !important;
}

.message-partheaders {
    background-color: var(--ct-bg-hover) !important;
    border-color: transparent !important;
}

.message-partheaders table.headers-table,
.message-partheaders table.headers-table * {
    color: var(--ct-font) !important;
    font-weight: normal !important;
}

.message-part {
    border-color: var(--ct-border) !important;
}

.message-part blockquote {
    border-left-color: var(--ct-red) !important;
    background-color: var(--ct-bg-hover) !important;
    color: var(--ct-font-muted) !important;
}

.message-part blockquote blockquote {
    border-left-color: var(--ct-red-dark) !important;
}

.message-part span.sig {
    color: var(--ct-font-muted) !important;
}

span.blockquote-link {
    color: var(--ct-font-muted) !important;
    border-color: var(--ct-font-muted) !important;
}

.attachmentslist {
    background-color: var(--ct-bg-hover) !important;
    border-color: transparent !important;
}

.attachmentslist a,
.attachmentslist .attachment-name {
    color: var(--ct-font) !important;
}

.attachmentslist .attachment-size {
    color: var(--ct-font-muted) !important;
}

/* =====================================================================
   COMPOSE — TinyMCE
   ===================================================================== */
.tox.tox-tinymce {
    border-color: var(--ct-border) !important;
}

.tox .tox-toolbar,
.tox .tox-toolbar-overlord > div {
    background-color: var(--ct-bg-hover) !important;
    border-bottom-color: var(--ct-border) !important;
}

.tox .tox-toolbar__group:not(:last-of-type) {
    border-right-color: var(--ct-border) !important;
}

.tox .tox-tbtn,
.tox .tox-split-button,
.tox .tox-swatches__picker-btn {
    color: var(--ct-font) !important;
}

.tox .tox-tbtn svg,
.tox .tox-split-button svg {
    fill: var(--ct-font) !important;
}

.tox .tox-tbtn:hover,
.tox .tox-split-button:hover {
    background-color: var(--ct-red-muted) !important;
}

.tox .tox-tbtn--enabled {
    background-color: var(--ct-red-muted2) !important;
}

.tox .tox-dialog,
.tox .tox-dialog__header,
.tox .tox-dialog__body,
.tox .tox-dialog__footer,
.tox .tox-dialog__title {
    background-color: var(--ct-bg-panel) !important;
    border-color: var(--ct-border) !important;
    color: var(--ct-font) !important;
}

.tox .tox-textfield,
.tox .tox-label,
.tox .tox-button--naked {
    color: var(--ct-font) !important;
}

.tox .tox-dialog__footer .tox-button {
    background-color: var(--ct-red) !important;
    color: #fff !important;
    border-color: var(--ct-red-dark) !important;
}

.tox .tox-dialog__footer .tox-button.tox-button--secondary {
    background-color: var(--ct-bg-hover) !important;
    color: var(--ct-font) !important;
    border-color: var(--ct-border) !important;
}

.tox .tox-menu {
    background-color: var(--ct-bg-panel) !important;
    border-color: var(--ct-border) !important;
    box-shadow: var(--ct-shadow) !important;
}

.tox .tox-collection__item {
    color: var(--ct-font) !important;
    border-bottom-color: var(--ct-border) !important;
}

.tox .tox-collection__item--active {
    background-color: var(--ct-red-muted) !important;
    color: var(--ct-font) !important;
}

.tox .tox-dialog-wrap__backdrop {
    background-color: rgba(0,0,0,0.75) !important;
}

/* =====================================================================
   LOGIN PAGE — style the form card, not the layout
   ===================================================================== */
body.task-login {
    background-color: var(--ct-bg-base) !important;
    /* Subtle radial gradient for depth — no layout changes */
    background-image: radial-gradient(ellipse at 50% 40%, #1a0808 0%, #0d1117 70%) !important;
}

/* The login content panel */
.task-login #layout-content {
    background-color: transparent !important;
}

/* Style the login form as a card */
#login-form {
    background-color: var(--ct-bg-panel) !important;
    border: 1px solid var(--ct-border-red) !important;
    border-radius: 10px !important;
    padding: 28px 28px 20px !important;
    box-shadow: 0 0 40px rgba(192,57,43,0.2), var(--ct-shadow) !important;
}

/* Logo area */
.task-login #logo {
    filter: drop-shadow(0 0 8px rgba(192,57,43,0.4)) !important;
}

/* Form labels */
#login-form .title label,
#login-form td.title label {
    color: var(--ct-font-muted) !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* Submit button */
#rcmloginsubmit {
    background: linear-gradient(135deg, var(--ct-red-dark), var(--ct-red)) !important;
    border-color: var(--ct-red-dark) !important;
    color: #fff !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 14px rgba(192,57,43,0.4) !important;
}

#rcmloginsubmit:hover {
    background: linear-gradient(135deg, var(--ct-red), var(--ct-red-bright)) !important;
    box-shadow: 0 6px 18px rgba(192,57,43,0.55) !important;
}

#login-footer {
    color: var(--ct-font-muted) !important;
}

#login-footer a.support-link {
    color: var(--ct-red-bright) !important;
}

/* =====================================================================
   LINKS
   ===================================================================== */
a {
    color: var(--ct-red-bright) !important;
}

a:hover {
    color: var(--ct-red-glow) !important;
}

/* Undo red for links that should stay neutral */
.listing li a,
.listing tbody td a,
.menu a,
.nav-tabs .nav-link,
.btn,
#taskmenu a,
.toolbar a.button,
.header a.button {
    color: inherit !important;
}

/* =====================================================================
   HINTS / SECONDARY TEXT
   ===================================================================== */
.hint,
.file-upload .hint,
.contactlist span.email,
.formcontent .hint,
pre {
    color: var(--ct-font-muted) !important;
}

/* =====================================================================
   CONTACTS
   ===================================================================== */
img.contactphoto,
#contactpic {
    background-color: var(--ct-bg-hover) !important;
}

/* =====================================================================
   SKIN SELECTION
   ===================================================================== */
.skinselection .skinthumbnail {
    border-color: var(--ct-border) !important;
    background-color: var(--ct-bg-hover) !important;
}

.skinselection .skinthumbnail.selected {
    border-color: var(--ct-red) !important;
    box-shadow: 0 0 0 2px var(--ct-red) !important;
}

/* =====================================================================
   DRAG LAYER
   ===================================================================== */
#rcmdraglayer {
    background-color: var(--ct-bg-panel) !important;
    border-color: var(--ct-border-red) !important;
    box-shadow: var(--ct-shadow) !important;
    color: var(--ct-font) !important;
}

/* =====================================================================
   QUOTA
   ===================================================================== */
.quota-widget .bar {
    background-color: var(--ct-bg-hover) !important;
    border-color: var(--ct-border) !important;
}

.quota-widget .bar > div {
    background: linear-gradient(90deg, var(--ct-red-dark), var(--ct-red)) !important;
}

.quota-info .root {
    color: var(--ct-font-muted) !important;
    background-color: transparent !important;
}

/* =====================================================================
   FILE UPLOAD
   ===================================================================== */
.file-upload {
    background-color: var(--ct-bg-hover) !important;
    border-color: var(--ct-border) !important;
}

.file-upload.droptarget.hover {
    border-color: var(--ct-red) !important;
    background-color: var(--ct-red-muted) !important;
}

/* =====================================================================
   LOADING SPINNER
   ===================================================================== */
.iframe-loader {
    background-color: rgba(13,17,23,0.9) !important;
}

.iframe-loader .spinner-border {
    color: var(--ct-red) !important;
    border-color: var(--ct-red) transparent var(--ct-red) var(--ct-red) !important;
}

/* =====================================================================
   MOBILE / POPOVER MENU
   ===================================================================== */
.layout-phone #layout-menu,
.layout-small #layout-menu {
    background-color: var(--ct-bg-panel) !important;
}

/* =====================================================================
   MISCELLANEOUS
   ===================================================================== */
.minicolors-panel {
    background-color: var(--ct-bg-panel) !important;
    border-color: var(--ct-border) !important;
    box-shadow: var(--ct-shadow) !important;
}

.image-upload {
    background-color: var(--ct-bg-hover) !important;
}

p.image-attachment {
    background-color: var(--ct-bg-hover) !important;
    border-color: var(--ct-border) !important;
}

p.image-attachment span {
    color: var(--ct-font-muted) !important;
}

fieldset.image-attachment legend {
    color: var(--ct-font-muted) !important;
    border-color: var(--ct-border) !important;
}

.pagenav a,
.menu.pagenav .pagenav-text {
    color: var(--ct-font) !important;
}

.menu li.separator {
    background-color: transparent !important;
    color: var(--ct-font-muted) !important;
}

.pgp-status .pull-right {
    color: var(--ct-font-muted) !important;
}