/* Color mode (light default / dark via html[data-color-mode="dark"]). */

.ch-color-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    border: 0;
    background: transparent !important;
    cursor: pointer;
    line-height: 1;
    color: #660000;
}

/* Login/Register bar: keep toggle at the far end of the row */
nav ul li:first-child {
    position: relative;
    padding-right: 28px;
    box-sizing: border-box;
}

.ch-color-mode-toggle svg {
    width: 16px;
    height: 16px;
    display: block;
}

.ch-color-mode-toggle .ch-icon-sun {
    display: none;
}

.ch-color-mode-toggle .ch-icon-moon {
    display: block;
}

html[data-color-mode="dark"] .ch-color-mode-toggle .ch-icon-sun {
    display: block;
}

html[data-color-mode="dark"] .ch-color-mode-toggle .ch-icon-moon {
    display: none;
}

html[data-color-mode="dark"] .ch-color-mode-toggle {
    color: var(--ch-nav-link);
    background: transparent !important;
}

html[data-color-mode="dark"] {
    color-scheme: dark;
    /* Business navy / slate — not pure black */
    --ch-body: #1a2b45;
    --ch-header: #13233c;
    --ch-nav: #2a4570;
    --ch-nav-first: #13233c;
    --ch-left: #1c3150;
    --ch-right: #17304f;
    --ch-text: #e8eef6;
    --ch-muted: #9aadc4;
    --ch-link: #8ec5ff;
    --ch-nav-link: #f0c48a;
    --ch-border: #3d5680;
    --ch-input-bg: #0f1c30;
    --ch-input-text: #e8eef6;
    --ch-input-border: #4a668f;
    --ch-panel: #1e3558;
    --ch-table-head: #2f4f7a;
    --ch-alert-ok-bg: #1a3d32;
    --ch-alert-ok-fg: #a8e0c0;
    --ch-alert-err-bg: #4a2430;
    --ch-alert-err-fg: #f0b8c0;
    --ch-chip: #243a5c;
    --ch-accent: #5c758b;
}

html[data-color-mode="dark"] body {
    background: var(--ch-body) !important;
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] header {
    background: linear-gradient(180deg, #1a3358 0%, var(--ch-header) 100%) !important;
    border-bottom-color: var(--ch-accent);
}

html[data-color-mode="dark"] header h1 {
    color: #f2f6fc;
}

html[data-color-mode="dark"] .container {
    background-color: var(--ch-body) !important;
}

html[data-color-mode="dark"] .left_container {
    background-color: var(--ch-left) !important;
    color: var(--ch-text);
    box-shadow: inset -1px 0 0 rgba(142, 197, 255, 0.08);
}

html[data-color-mode="dark"] .right_container {
    background-color: var(--ch-right) !important;
    color: var(--ch-text);
}

html[data-color-mode="dark"] nav ul li {
    background-color: var(--ch-nav) !important;
    border-bottom-color: var(--ch-border);
    color: var(--ch-text);
}

html[data-color-mode="dark"] nav ul li:first-child,
html[data-color-mode="dark"] nav ul li:last-child {
    background-color: var(--ch-nav-first) !important;
}

html[data-color-mode="dark"] .nav_li {
    background: linear-gradient(180deg, #355985 0%, var(--ch-nav) 100%) !important;
}

html[data-color-mode="dark"] a,
html[data-color-mode="dark"] a:visited,
html[data-color-mode="dark"] .left_container a,
html[data-color-mode="dark"] .left_container a:visited,
html[data-color-mode="dark"] .treeview a,
html[data-color-mode="dark"] .treeview a:visited,
html[data-color-mode="dark"] .right_container a,
html[data-color-mode="dark"] .right_container a:visited,
html[data-color-mode="dark"] footer a,
html[data-color-mode="dark"] footer a:visited {
    color: var(--ch-link) !important;
}

/* Nav tabs keep warm menulink tone (must follow general `a` !important above) */
html[data-color-mode="dark"] nav ul li a,
html[data-color-mode="dark"] .nav_li a,
html[data-color-mode="dark"] nav ul li a:visited,
html[data-color-mode="dark"] .nav_li a:visited {
    color: var(--ch-nav-link) !important;
}

html[data-color-mode="dark"] .home_blocks div,
html[data-color-mode="dark"] .education_block .educ_inst_block,
html[data-color-mode="dark"] .library_block .libr_ever {
    border-color: var(--ch-border) !important;
    color: var(--ch-text);
    background: rgba(30, 53, 88, 0.55);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-color-mode="dark"] .home_blocks div ul,
html[data-color-mode="dark"] .home_blocks div h3 {
    border-color: var(--ch-border) !important;
    color: var(--ch-text);
}

html[data-color-mode="dark"] .home_blocks div h3 {
    background: rgba(47, 79, 122, 0.45);
}

html[data-color-mode="dark"] footer {
    color: var(--ch-text);
    background: linear-gradient(180deg, #1a2b45 0%, #13233c 100%);
}

html[data-color-mode="dark"] footer a {
    color: var(--ch-link);
}

html[data-color-mode="dark"] input,
html[data-color-mode="dark"] select,
html[data-color-mode="dark"] textarea,
html[data-color-mode="dark"] button:not(.ch-color-mode-toggle) {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border-color: var(--ch-input-border) !important;
}

html[data-color-mode="dark"] input[type="image"],
html[data-color-mode="dark"] input[type="checkbox"],
html[data-color-mode="dark"] input[type="radio"],
html[data-color-mode="dark"] input[type="submit"],
html[data-color-mode="dark"] input[type="button"],
html[data-color-mode="dark"] button[type="submit"] {
    background-color: var(--ch-table-head) !important;
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] option {
    background-color: var(--ch-input-bg);
    color: var(--ch-input-text);
}

/* Multi-select selected rows: light highlight + dark text (browser focus
   paint otherwise leaves pale text on mid-blue = unreadable in dark mode). */
html[data-color-mode="dark"] select[multiple],
html[data-color-mode="dark"] .recruitment_compose select[multiple],
html[data-color-mode="dark"] #AllactivityID {
    accent-color: #6ba3d6;
}
html[data-color-mode="dark"] select[multiple] option:checked,
html[data-color-mode="dark"] select[multiple] option:checked:hover,
html[data-color-mode="dark"] select[multiple] option:checked:focus,
html[data-color-mode="dark"] .recruitment_compose select[multiple] option:checked,
html[data-color-mode="dark"] .recruitment_compose select[multiple] option:checked:hover,
html[data-color-mode="dark"] .recruitment_compose select[multiple] option:checked:focus,
html[data-color-mode="dark"] #AllactivityID option:checked,
html[data-color-mode="dark"] #AllactivityID option:checked:hover,
html[data-color-mode="dark"] #AllactivityID option:checked:focus {
    background-color: #6ba3d6 !important;
    background-image: linear-gradient(#6ba3d6, #6ba3d6) !important;
    color: #0b1a2e !important;
    -webkit-text-fill-color: #0b1a2e !important;
}

html[data-color-mode="dark"] .panel,
html[data-color-mode="dark"] .legacy-filter-panel,
html[data-color-mode="dark"] .chip {
    background: var(--ch-panel) !important;
    border-color: var(--ch-border) !important;
    color: var(--ch-text);
}

html[data-color-mode="dark"] .chip.ok,
html[data-color-mode="dark"] .alert-success,
html[data-color-mode="dark"] .ch-alert.ok {
    background: var(--ch-alert-ok-bg) !important;
    color: var(--ch-alert-ok-fg) !important;
    border-color: var(--ch-border);
}

html[data-color-mode="dark"] .alert-error,
html[data-color-mode="dark"] .ch-alert.error {
    background: var(--ch-alert-err-bg) !important;
    color: var(--ch-alert-err-fg) !important;
    border-color: var(--ch-border);
}

html[data-color-mode="dark"] .legacy-ann-row {
    border-bottom-color: var(--ch-border);
}

html[data-color-mode="dark"] .legacy-ann-title,
html[data-color-mode="dark"] .legacy-ann-title:visited {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] .legacy-kv-table th,
html[data-color-mode="dark"] .legacy-kv-table td,
html[data-color-mode="dark"] .table th,
html[data-color-mode="dark"] .table td,
html[data-color-mode="dark"] .table thead td,
html[data-color-mode="dark"] .table tbody td {
    border-color: var(--ch-border) !important;
    color: var(--ch-text);
}

html[data-color-mode="dark"] #result select,
html[data-color-mode="dark"] .announcement select,
html[data-color-mode="dark"] #result #ann_search,
html[data-color-mode="dark"] .announcement #ann_search {
    background: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border-color: var(--ch-input-border) !important;
}

html[data-color-mode="dark"] .left_container .last_update,
html[data-color-mode="dark"] .avl_td ul,
html[data-color-mode="dark"] .avl_td ul li a {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] .legacy-muted,
html[data-color-mode="dark"] .user_name {
    color: var(--ch-muted);
}

/* Override common light inline backgrounds used across legacy views. */
html[data-color-mode="dark"] [style*="background: #F9FBD7"],
html[data-color-mode="dark"] [style*="background:#F9FBD7"],
html[data-color-mode="dark"] [style*="background-color: #F9FBD7"],
html[data-color-mode="dark"] [style*="background-color:#F9FBD7"],
html[data-color-mode="dark"] [style*="background: #f9fbd7"],
html[data-color-mode="dark"] [style*="background:#f9fbd7"],
html[data-color-mode="dark"] [style*="background-color: #f9fbd7"],
html[data-color-mode="dark"] [style*="background-color:#f9fbd7"] {
    background: var(--ch-right) !important;
    background-color: var(--ch-right) !important;
}

html[data-color-mode="dark"] [style*="background: #FFFFCC"],
html[data-color-mode="dark"] [style*="background:#FFFFCC"],
html[data-color-mode="dark"] [style*="background-color: #FFFFCC"],
html[data-color-mode="dark"] [style*="background-color:#FFFFCC"],
html[data-color-mode="dark"] [style*="background: #ffffcc"],
html[data-color-mode="dark"] [style*="background:#ffffcc"],
html[data-color-mode="dark"] [style*="background-color: #ffffcc"],
html[data-color-mode="dark"] [style*="background-color:#ffffcc"] {
    background: var(--ch-left) !important;
    background-color: var(--ch-left) !important;
}

html[data-color-mode="dark"] [style*="background: #FFCC66"],
html[data-color-mode="dark"] [style*="background:#FFCC66"],
html[data-color-mode="dark"] [style*="background-color: #FFCC66"],
html[data-color-mode="dark"] [style*="background-color:#FFCC66"],
html[data-color-mode="dark"] [style*="background: #ffcc66"],
html[data-color-mode="dark"] [style*="background:#ffcc66"],
html[data-color-mode="dark"] [style*="background-color: #ffcc66"],
html[data-color-mode="dark"] [style*="background-color:#ffcc66"] {
    background: var(--ch-table-head) !important;
    background-color: var(--ch-table-head) !important;
}

html[data-color-mode="dark"] [style*="background: #ffffff"],
html[data-color-mode="dark"] [style*="background:#ffffff"],
html[data-color-mode="dark"] [style*="background: #FFFFFF"],
html[data-color-mode="dark"] [style*="background:#FFFFFF"],
html[data-color-mode="dark"] [style*="background: white"],
html[data-color-mode="dark"] [style*="background:white"],
html[data-color-mode="dark"] [style*="background-color: white"],
html[data-color-mode="dark"] [style*="background-color:white"],
html[data-color-mode="dark"] [style*="background-color: #ffffff"],
html[data-color-mode="dark"] [style*="background-color:#ffffff"],
html[data-color-mode="dark"] [style*="background-color: #FFFFFF"],
html[data-color-mode="dark"] [style*="background-color:#FFFFFF"],
html[data-color-mode="dark"] [style*="background: #f1f2f4"],
html[data-color-mode="dark"] [style*="background:#f1f2f4"],
html[data-color-mode="dark"] [style*="background: #f3f4f6"],
html[data-color-mode="dark"] [style*="background:#f3f4f6"],
html[data-color-mode="dark"] [style*="background: #f0f2f7"],
html[data-color-mode="dark"] [style*="background:#f0f2f7"] {
    background: var(--ch-panel) !important;
    background-color: var(--ch-panel) !important;
}

html[data-color-mode="dark"] [bgcolor="#FFCC66"],
html[data-color-mode="dark"] [bgcolor="#ffcc66"],
html[data-color-mode="dark"] [bgcolor="#F9FBD7"],
html[data-color-mode="dark"] [bgcolor="#f9fbd7"],
html[data-color-mode="dark"] [bgcolor="#FFFFCC"],
html[data-color-mode="dark"] [bgcolor="#ffffcc"],
html[data-color-mode="dark"] [bgcolor="#ffffff"],
html[data-color-mode="dark"] [bgcolor="#FFFFFF"],
html[data-color-mode="dark"] [bgcolor="#f1f2f4"] {
    background-color: var(--ch-panel) !important;
}

html[data-color-mode="dark"] [bgcolor="#FFCC66"],
html[data-color-mode="dark"] [bgcolor="#ffcc66"] {
    background-color: var(--ch-table-head) !important;
}

html[data-color-mode="dark"] [bgcolor="#F9FBD7"],
html[data-color-mode="dark"] [bgcolor="#f9fbd7"] {
    background-color: var(--ch-right) !important;
}

html[data-color-mode="dark"] [bgcolor="#FFFFCC"],
html[data-color-mode="dark"] [bgcolor="#ffffcc"] {
    background-color: var(--ch-left) !important;
}

html[data-color-mode="dark"] [style*="color:#0000CC"],
html[data-color-mode="dark"] [style*="color: #0000CC"],
html[data-color-mode="dark"] [style*="color:#0000cc"],
html[data-color-mode="dark"] [style*="color: #0000cc"] {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] [style*="color:#660000"],
html[data-color-mode="dark"] [style*="color: #660000"] {
    color: var(--ch-nav-link) !important;
}

html[data-color-mode="dark"] [style*="color:#999999"],
html[data-color-mode="dark"] [style*="color: #999999"],
html[data-color-mode="dark"] [style*="color:#b9b9b9"],
html[data-color-mode="dark"] [style*="color: #b9b9b9"] {
    color: var(--ch-muted) !important;
}

html[data-color-mode="dark"] [style*="border: 1px solid black"],
html[data-color-mode="dark"] [style*="border:1px solid black"],
html[data-color-mode="dark"] [style*="border:1px solid #000000"],
html[data-color-mode="dark"] [style*="border: 1px solid #000000"] {
    border-color: var(--ch-border) !important;
}

html[data-color-mode="dark"] td[style*="border: 1px solid black"],
html[data-color-mode="dark"] td[style*="border:1px solid black"] {
    border-color: var(--ch-border) !important;
}

/* jQuery UI / dialogs that appear over the shell */
html[data-color-mode="dark"] .ui-widget-content {
    background: var(--ch-panel) !important;
    color: var(--ch-text) !important;
    border-color: var(--ch-border) !important;
}

html[data-color-mode="dark"] .ui-widget-header {
    background: var(--ch-table-head) !important;
    color: var(--ch-text) !important;
    border-color: var(--ch-border) !important;
}

html[data-color-mode="dark"] .ui-state-default,
html[data-color-mode="dark"] .ui-widget-content .ui-state-default {
    background: var(--ch-nav) !important;
    color: var(--ch-text) !important;
    border-color: var(--ch-border) !important;
}

/*
 * Legacy bullet JPGs bake in a light rectangular backdrop, so on dark navy they
 * read as red squares. Use crisp CSS triangles (and a transparent SVG for <img>).
 */
html[data-color-mode="dark"] .home_blocks div ul,
html[data-color-mode="dark"] .avl_td ul.triangular,
html[data-color-mode="dark"] ul.announc2,
html[data-color-mode="dark"] .education_block .educ_inst_block ul,
html[data-color-mode="dark"] .library_block .libr_ever ul,
html[data-color-mode="dark"] .left_container ul.triangular {
    list-style: none !important;
    list-style-image: none !important;
}

html[data-color-mode="dark"] .avl_td ul,
html[data-color-mode="dark"] ul.announc1 {
    list-style: none !important;
    list-style-image: none !important;
}

/* Light-mode count is #000; make it readable on navy */
html[data-color-mode="dark"] ul.announc1 li a + span,
html[data-color-mode="dark"] ul.announc1 li span {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .home_blocks div ul > li,
html[data-color-mode="dark"] .avl_td ul.triangular > li,
html[data-color-mode="dark"] ul.announc2 > li,
html[data-color-mode="dark"] .education_block .educ_inst_block ul > li,
html[data-color-mode="dark"] .library_block .libr_ever ul > li,
html[data-color-mode="dark"] .left_container ul.triangular > li {
    position: relative;
    padding-left: 0.15em;
}

html[data-color-mode="dark"] .home_blocks div ul > li::before,
html[data-color-mode="dark"] .avl_td ul.triangular > li::before,
html[data-color-mode="dark"] .education_block .educ_inst_block ul > li::before,
html[data-color-mode="dark"] .library_block .libr_ever ul > li::before,
html[data-color-mode="dark"] .left_container ul.triangular > li::before {
    content: '';
    position: absolute;
    left: -12px;
    /* Match original 6x6 JPG; center on the first line box */
    top: 4px;
    top: calc(0.5lh - 3px);
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border-style: solid !important;
    border-width: 3px 0 3px 6px !important;
    border-color: transparent transparent transparent #ef5350 !important;
}

/* Left sidebar job list: one step larger than home bullets */
html[data-color-mode="dark"] ul.announc2 > li {
    position: relative;
    padding-left: 0.15em;
}

html[data-color-mode="dark"] ul.announc2 > li::before {
    content: '';
    position: absolute;
    left: -13px;
    top: 5px;
    top: calc(0.5lh - 4px);
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border-style: solid !important;
    border-width: 4px 0 4px 7px !important;
    border-color: transparent transparent transparent #ef5350 !important;
}

/* Square / slash-style bullets → small solid square without light backdrop.
 * Do not match ul.announc2 (triangle lists also live under .avl_td). */
html[data-color-mode="dark"] .avl_td ul:not(.triangular):not(.announc2) > li,
html[data-color-mode="dark"] ul.announc1 > li {
    position: relative;
}

html[data-color-mode="dark"] .avl_td ul:not(.triangular):not(.announc2) > li::before,
html[data-color-mode="dark"] ul.announc1 > li::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 4px;
    top: calc(0.5lh - 3px);
    width: 6px;
    height: 6px;
    background: #ef5350;
    border: 0;
}

/* Default img bullets (forms, etc.) stay near original 6x6 — right-pointing */
html[data-color-mode="dark"] img[src*="bullet_fs.jpg"] {
    display: inline-block;
    width: 0 !important;
    height: 0 !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    border-style: solid !important;
    border-width: 3px 0 3px 6px !important;
    border-color: transparent transparent transparent #ef5350 !important;
    background: transparent !important;
    vertical-align: text-top;
    position: relative;
    top: 0.35em;
    overflow: hidden;
    box-sizing: content-box;
    content: none;
}

/* Billing / sort headers: up & down triangles (not right-pointing bullets) */
html[data-color-mode="dark"] img[src*="bullet_fs_up"] {
    display: inline-block;
    width: 0 !important;
    height: 0 !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    border-style: solid !important;
    border-width: 0 3px 6px 3px !important;
    border-color: transparent transparent #ef5350 transparent !important;
    background: transparent !important;
    vertical-align: text-top;
    position: relative;
    top: 0.2em;
    overflow: hidden;
    box-sizing: content-box;
    content: none;
}

html[data-color-mode="dark"] img[src*="bullet_fs_down"] {
    display: inline-block;
    width: 0 !important;
    height: 0 !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    border-style: solid !important;
    border-width: 6px 3px 0 3px !important;
    border-color: #ef5350 transparent transparent transparent !important;
    background: transparent !important;
    vertical-align: text-top;
    position: relative;
    top: 0.35em;
    overflow: hidden;
    box-sizing: content-box;
    content: none;
}

/* Announcements list rows: slightly larger than left-panel triangles.
 * Flex title row centers the bullet — do not nudge with top. */
html[data-color-mode="dark"] #result table.text img[src*="bullet_fs.jpg"],
html[data-color-mode="dark"] .announcement #result table.text img[src*="bullet_fs.jpg"],
html[data-color-mode="dark"] #result table.text .ann-list-bullet-img {
    border-width: 5px 0 5px 9px !important;
    margin: 0 !important;
    top: 0 !important;
    position: relative !important;
    vertical-align: middle;
}

/* User Manager (CI3 #user_manager chrome) — keep page content on-palette in dark mode.
 * Legacy style.css uses #FFCC66 thead, #535353 inputs, #0000CC totals; override with !important. */
html[data-color-mode="dark"] #user_manager {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] #user_manager a,
html[data-color-mode="dark"] #user_manager a:visited {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] #user_manager .us_manager label,
html[data-color-mode="dark"] #user_manager .res_page,
html[data-color-mode="dark"] #user_manager table tr td {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] #user_manager table thead tr td {
    background: var(--ch-table-head) !important;
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] #user_manager #pagination,
html[data-color-mode="dark"] #user_manager #pagination a,
html[data-color-mode="dark"] #user_manager #pagination a:visited {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] #user_manager #pagination + div {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] #user_manager #pagination .current_page {
    color: var(--ch-nav-link) !important;
}

html[data-color-mode="dark"] #user_manager table tr {
    border-top-color: var(--ch-border) !important;
}

html[data-color-mode="dark"] #user_manager .us_manager input,
html[data-color-mode="dark"] #user_manager .us_manager input[type="text"],
html[data-color-mode="dark"] #user_manager .us_manager input[type="submit"],
html[data-color-mode="dark"] #user_manager .res_page select,
html[data-color-mode="dark"] #user_manager table tr td select,
html[data-color-mode="dark"] #user_manager textarea {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border-color: var(--ch-input-border) !important;
}

html[data-color-mode="dark"] #user_manager .us_manager input[type="submit"] {
    background-color: var(--ch-table-head) !important;
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] #user_manager .cancelled_reason {
    color: var(--ch-muted) !important;
}

/* Billing (CI3 .user_billing chrome) — keep page content on-palette in dark mode.
 * Legacy style.css uses #000 black text, #F4F4F4/#E4E4E4 rows, #0000CC totals. */
html[data-color-mode="dark"] .user_billing,
html[data-color-mode="dark"] #result.user_billing {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .user_billing a,
html[data-color-mode="dark"] .user_billing a:visited,
html[data-color-mode="dark"] .user_billing .mlink {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] .user_billing .stext,
html[data-color-mode="dark"] .user_billing table tr td,
html[data-color-mode="dark"] .user_billing table tr td strong {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .user_billing .pagination_my span,
html[data-color-mode="dark"] .user_billing .pagination_my a,
html[data-color-mode="dark"] .user_billing .pagination_my a:visited {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] .user_billing #foo .bill_row_odd,
html[data-color-mode="dark"] .user_billing #foo tr.bill_row_odd {
    background: var(--ch-row-alt, rgba(255, 255, 255, 0.04)) !important;
}

html[data-color-mode="dark"] .user_billing #foo .bill_row_even,
html[data-color-mode="dark"] .user_billing #foo tr.bill_row_even {
    background: var(--ch-row, rgba(255, 255, 255, 0.08)) !important;
}

html[data-color-mode="dark"] .user_billing form input,
html[data-color-mode="dark"] .user_billing form select,
html[data-color-mode="dark"] .user_billing form input[type="submit"],
html[data-color-mode="dark"] .user_billing form input.input {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border-color: var(--ch-input-border) !important;
}

html[data-color-mode="dark"] .user_billing form input[type="submit"],
html[data-color-mode="dark"] .user_billing form input.input {
    background-color: var(--ch-table-head) !important;
    color: var(--ch-text) !important;
}

/* User Limit Manager — keep CI3 chrome readable in dark mode */
html[data-color-mode="dark"] .wow.limitation form.user_lim,
html[data-color-mode="dark"] .wow.limitation form.user_lim .stext,
html[data-color-mode="dark"] .wow.limitation form.user_lim .text,
html[data-color-mode="dark"] .wow.limitation form.user_lim td {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .wow.limitation form.user_lim a,
html[data-color-mode="dark"] .wow.limitation form.user_lim a:visited,
html[data-color-mode="dark"] .wow.limitation form.user_lim .pagination_my span {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] .wow.limitation form.user_lim table.stext tr td[style*="background"] {
    background: var(--ch-row-alt, rgba(255, 255, 255, 0.06)) !important;
}

html[data-color-mode="dark"] .wow.limitation form.user_lim table.stext tr:first-child td[style*="background"] {
    background: var(--ch-table-head) !important;
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .wow.limitation form.user_lim input,
html[data-color-mode="dark"] .wow.limitation form.user_lim select {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border-color: var(--ch-input-border) !important;
}

html[data-color-mode="dark"] .wow.limitation form.user_lim img.ui-datepicker-trigger {
    filter: none;
    opacity: 1;
}

/* Recruitment status lists (CI3 .recruitment_views) — light gold headers / black text need dark overrides */
html[data-color-mode="dark"] .recruitment_views {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .recruitment_views a,
html[data-color-mode="dark"] .recruitment_views a:visited,
html[data-color-mode="dark"] .recruitment_views table tr td:nth-child(2) a {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] .recruitment_views .recruitment_views_total_rec,
html[data-color-mode="dark"] .recruitment_views .recruitment_views_head span {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] .recruitment_views table tr th {
    background: var(--ch-table-head) !important;
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .recruitment_views table tr td,
html[data-color-mode="dark"] .recruitment_views .pag_over,
html[data-color-mode="dark"] .recruitment_views .pag_over span {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .recruitment_views select {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border-color: var(--ch-input-border) !important;
}

html[data-color-mode="dark"] .new_recruitment,
html[data-color-mode="dark"] .new_recruitment .form_field_block,
html[data-color-mode="dark"] .new_recruitment .lab {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .new_recruitment a,
html[data-color-mode="dark"] .new_recruitment a:visited {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] .new_recruitment hr {
    border-top-color: var(--ch-border) !important;
}

html[data-color-mode="dark"] .new_recruitment input[type="submit"] {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border-color: var(--ch-input-border) !important;
}

/* User privileges + company details (User Manager deep links) */
html[data-color-mode="dark"] .user_privileges,
html[data-color-mode="dark"] .user_privileges table,
html[data-color-mode="dark"] .user_privileges td,
html[data-color-mode="dark"] .user_privileges b {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .user_privileges select,
html[data-color-mode="dark"] .user_privileges input[type="submit"] {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border-color: var(--ch-input-border) !important;
}

html[data-color-mode="dark"] .user_company_details,
html[data-color-mode="dark"] .user_company_details .form_field_block,
html[data-color-mode="dark"] .user_company_details label,
html[data-color-mode="dark"] .user_company_details .lab,
html[data-color-mode="dark"] .user_company_details span {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .user_company_details input[type="text"],
html[data-color-mode="dark"] .user_company_details select,
html[data-color-mode="dark"] .user_company_details input[type="submit"] {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border-color: var(--ch-input-border) !important;
}

/* Resume add / database / search / library — CI3 chrome must stay readable in dark mode */
html[data-color-mode="dark"] .resume_add_views,
html[data-color-mode="dark"] .resume_add_views .text,
html[data-color-mode="dark"] .resume_database_vies,
html[data-color-mode="dark"] .resume_database_vies .stext_resum,
html[data-color-mode="dark"] .resume_database_vies .stext_resum td,
html[data-color-mode="dark"] .res_search_views,
html[data-color-mode="dark"] .res_search_views .stext,
html[data-color-mode="dark"] .res_search_views .stext td,
html[data-color-mode="dark"] .recruitment_views.interview_mod,
html[data-color-mode="dark"] .recruitment_views.interview_mod .stext_save_res td {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .resume_add_views input[type="text"],
html[data-color-mode="dark"] .resume_add_views input[type="submit"],
html[data-color-mode="dark"] .resume_database_vies input[type="text"],
html[data-color-mode="dark"] .resume_database_vies input[type="submit"],
html[data-color-mode="dark"] .resume_database_vies select,
html[data-color-mode="dark"] .res_search_views input,
html[data-color-mode="dark"] .res_search_views select {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border-color: var(--ch-input-border) !important;
}

html[data-color-mode="dark"] .resume_database_vies .stext_resum tr:nth-child(3) td,
html[data-color-mode="dark"] .res_search_views tr.stext_results_head td {
    background: var(--ch-table-head) !important;
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .resume_database_vies a,
html[data-color-mode="dark"] .resume_database_vies a:visited,
html[data-color-mode="dark"] .res_search_views a,
html[data-color-mode="dark"] .res_search_views a:visited,
html[data-color-mode="dark"] .recruitment_views.interview_mod a,
html[data-color-mode="dark"] .recruitment_views.interview_mod a:visited {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] .resume_database_vies .pagination_my span,
html[data-color-mode="dark"] .res_search_views span[style*="0000CC"],
html[data-color-mode="dark"] .recruitment_views.interview_mod .recruitment_views_total_rec span,
html[data-color-mode="dark"] .recruitment_views.interview_mod .recruitment_views_head span {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] .recruitment_views.interview_mod table.stext_save_res tr th {
    background: var(--ch-table-head) !important;
    color: var(--ch-text) !important;
    border-bottom-color: var(--ch-border) !important;
}

html[data-color-mode="dark"] .recruitment_views.interview_mod table.stext_save_res tr td {
    border-bottom-color: var(--ch-border) !important;
}

html[data-color-mode="light"] .resume_database_vies .stext_resum tr:nth-child(3) td {
    background: #FFCC66;
}

/* Website Colors settings page — form chrome follows dark mode (hex values stay DB theme colors) */
html[data-color-mode="dark"] .website_color,
html[data-color-mode="dark"] .website_color form,
html[data-color-mode="dark"] .website_color table,
html[data-color-mode="dark"] .website_color table tbody,
html[data-color-mode="dark"] .website_color table tr,
html[data-color-mode="dark"] .website_color table td {
    color: var(--ch-text) !important;
    background-color: transparent !important;
}

html[data-color-mode="dark"] .website_color table td select,
html[data-color-mode="dark"] .website_color table td input,
html[data-color-mode="dark"] .website_color table td input[type="text"],
html[data-color-mode="dark"] .website_color table td input[type="submit"],
html[data-color-mode="dark"] .website_color input.colorpicker,
html[data-color-mode="dark"] .website_color #skin {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border: 1px solid var(--ch-input-border) !important;
}

html[data-color-mode="dark"] .website_color table td input[type="submit"] {
    background-color: var(--ch-table-head) !important;
    color: var(--ch-text) !important;
    cursor: pointer;
}

/* Formatted Texts — legacy .format_text select/input force #535353 */
html[data-color-mode="dark"] .format_text,
html[data-color-mode="dark"] .format_text .sections,
html[data-color-mode="dark"] .preview,
html[data-color-mode="dark"] .preview .pre_centr,
html[data-color-mode="dark"] .preview .related_questions,
html[data-color-mode="dark"] .preview .question a {
    color: var(--ch-text) !important;
}

/* Website / mailto links in formatted text preview and help content */
html[data-color-mode="dark"] .preview a[href],
html[data-color-mode="dark"] .preview a[href]:visited,
html[data-color-mode="dark"] .preview .pre_centr a,
html[data-color-mode="dark"] .preview .pre_centr a:visited,
html[data-color-mode="dark"] .preview .question_text a,
html[data-color-mode="dark"] .preview .question_text a:visited,
html[data-color-mode="dark"] .format_text a[href],
html[data-color-mode="dark"] .format_text a[href]:visited,
html[data-color-mode="dark"] a[href^="mailto:"],
html[data-color-mode="dark"] a[href^="mailto:"]:visited,
html[data-color-mode="dark"] a[href^="http"],
html[data-color-mode="dark"] a[href^="http"]:visited,
html[data-color-mode="dark"] a[href^="https"],
html[data-color-mode="dark"] a[href^="https"]:visited,
html[data-color-mode="dark"] a[href^="//"],
html[data-color-mode="dark"] a[href^="//"]:visited {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] .preview .question > a.question {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .format_text select,
html[data-color-mode="dark"] .format_text input,
html[data-color-mode="dark"] .format_text input.input,
html[data-color-mode="dark"] .format_text #desc,
html[data-color-mode="dark"] .format_text #subject,
html[data-color-mode="dark"] .format_text textarea,
html[data-color-mode="dark"] .format_text input[type="submit"],
html[data-color-mode="dark"] .preview select,
html[data-color-mode="dark"] .preview input,
html[data-color-mode="dark"] .preview input[type="submit"] {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border-color: var(--ch-input-border) !important;
}

html[data-color-mode="dark"] .format_text input[type="submit"],
html[data-color-mode="dark"] .preview input[type="submit"] {
    background-color: var(--ch-table-head) !important;
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .format_text input::placeholder,
html[data-color-mode="dark"] .format_text #desc::placeholder {
    color: var(--ch-muted) !important;
    opacity: 1;
}

/* TinyMCE chrome on Formatted Texts (remote skin is light) */
html[data-color-mode="dark"] .format_text .mce-tinymce,
html[data-color-mode="dark"] .format_text .mce-panel,
html[data-color-mode="dark"] .format_text .mce-toolbar,
html[data-color-mode="dark"] .format_text .mce-statusbar,
html[data-color-mode="dark"] .format_text .mce-container,
html[data-color-mode="dark"] .format_text .mce-container-body {
    background: var(--ch-panel) !important;
    border-color: var(--ch-border) !important;
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .format_text .mce-btn,
html[data-color-mode="dark"] .format_text .mce-btn button,
html[data-color-mode="dark"] .format_text .mce-menubtn,
html[data-color-mode="dark"] .format_text .mce-listbox,
html[data-color-mode="dark"] .format_text .mce-path-item,
html[data-color-mode="dark"] .format_text .mce-wordcount,
html[data-color-mode="dark"] .format_text .mce-label {
    background: var(--ch-panel) !important;
    color: var(--ch-text) !important;
    text-shadow: none !important;
}

html[data-color-mode="dark"] .format_text .mce-edit-area,
html[data-color-mode="dark"] .format_text .mce-edit-area iframe {
    background: var(--ch-input-bg) !important;
    border-color: var(--ch-border) !important;
}

html[data-color-mode="dark"] .format_text .mce-ico {
    color: var(--ch-text) !important;
    text-shadow: none !important;
}

/* Treeview +/- openers: default GIF is a white box — replace with dark-mode symbols */
html[data-color-mode="dark"] .left_container .treeview .hitarea {
    background-image: none !important;
    background-color: transparent !important;
    color: var(--ch-link) !important;
    font: 700 13px/16px Arial, Helvetica, sans-serif;
    text-align: center;
    text-indent: 0;
}

html[data-color-mode="dark"] .left_container .treeview .expandable-hitarea::before {
    content: '+';
}

html[data-color-mode="dark"] .left_container .treeview .collapsable-hitarea::before {
    content: '\2212';
}

/* last* items draw the +/- from the li sprite — keep line connector only */
html[data-color-mode="dark"] .left_container .treeview li.lastExpandable,
html[data-color-mode="dark"] .left_container .treeview li.lastCollapsable {
    background-image: url(/layout_data/js/plugins/treeview/images/treeview-default-line.gif) !important;
    background-position: 0 -1766px !important;
}

/* Treeview current-page highlight is #eee in jquery.treeview.css */
html[data-color-mode="dark"] .treeview a.selected,
html[data-color-mode="dark"] .left_container .treeview a.selected,
html[data-color-mode="dark"] #tree a.selected {
    background-color: var(--ch-panel) !important;
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] .treeview .hover {
    color: var(--ch-nav-link) !important;
}

/* Notifications — list / detail / inbox content colors */
html[data-color-mode="dark"] .sub_notification,
html[data-color-mode="dark"] .notification_view,
html[data-color-mode="dark"] .not_inbox,
html[data-color-mode="dark"] .not_invoices {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .sub_notification table tr td[style*="background-color"],
html[data-color-mode="dark"] .notification_view table tr td[style*="background-color"],
html[data-color-mode="dark"] .not_inbox table tr.top_tr_bg td,
html[data-color-mode="dark"] .not_inbox td[bgcolor],
html[data-color-mode="dark"] .not_inbox_detail td[style*="background"] {
    background-color: var(--ch-table-head) !important;
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .sub_notification a.wlink,
html[data-color-mode="dark"] .not_inbox a.mlink,
html[data-color-mode="dark"] .notification_view a.slink,
html[data-color-mode="dark"] .not_invoices a,
html[data-color-mode="dark"] .sub_notification .pagination_my span[style*="color:#0000CC"],
html[data-color-mode="dark"] .not_inbox .pagination_my span[style*="color:#0000CC"],
html[data-color-mode="dark"] .sub_notification .pagination_my span[style*="color:#0000CC"] strong,
html[data-color-mode="dark"] .sub_notification span[style*="color:#0000CC"] {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] .sub_notification input,
html[data-color-mode="dark"] .sub_notification select,
html[data-color-mode="dark"] .notification_view textarea,
html[data-color-mode="dark"] .notification_view input,
html[data-color-mode="dark"] .not_inbox input,
html[data-color-mode="dark"] .not_inbox select,
html[data-color-mode="dark"] .sub_notification .not_resubmit_popup textarea {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border-color: var(--ch-input-border) !important;
}

html[data-color-mode="dark"] .sub_notification .not_resubmit_popup {
    background: var(--ch-panel) !important;
    border-color: var(--ch-border) !important;
    color: var(--ch-text) !important;
}

/* Recruitment Compose / Post Announcement (CI3 .recruitment_compose chrome) */
html[data-color-mode="dark"] .recruitment_compose,
html[data-color-mode="dark"] .recruitment_compose h1,
html[data-color-mode="dark"] .recruitment_compose b,
html[data-color-mode="dark"] .recruitment_compose .form_field_block,
html[data-color-mode="dark"] .recruitment_compose label,
html[data-color-mode="dark"] .recruitment_compose label.required,
html[data-color-mode="dark"] .recruitment_compose label.no_required,
html[data-color-mode="dark"] .recruitment_compose .attach,
html[data-color-mode="dark"] .recruitment_compose .asterisk,
html[data-color-mode="dark"] .recruitment_compose .sec_row,
html[data-color-mode="dark"] .recruitment_compose .form_field_block p,
html[data-color-mode="dark"] .recruitment_compose .choos_file_div1 {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .recruitment_compose input[type="text"],
html[data-color-mode="dark"] .recruitment_compose textarea,
html[data-color-mode="dark"] .recruitment_compose select,
html[data-color-mode="dark"] .recruitment_compose input[type="file"] {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border-color: var(--ch-input-border) !important;
}

html[data-color-mode="dark"] .recruitment_compose input[type="submit"],
html[data-color-mode="dark"] .recruitment_compose input[type="reset"],
html[data-color-mode="dark"] .recruitment_compose input[type="button"] {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border-color: var(--ch-input-border) !important;
}

html[data-color-mode="dark"] .recruitment_compose hr {
    border-color: var(--ch-border) !important;
}

html[data-color-mode="dark"] .recruitment_compose .ui-datepicker-trigger {
    filter: brightness(1.25);
}

html[data-color-mode="dark"] .recruitment_compose .announcement_save .ann-autosave {
    color: var(--ch-text) !important;
}
html[data-color-mode="dark"] .recruitment_compose .announcement_save .ann-autosave[data-state="pending"] {
    color: #e0c56a !important;
}
html[data-color-mode="dark"] .recruitment_compose .announcement_save .ann-autosave[data-state="saving"] {
    color: #6db3f2 !important;
}
html[data-color-mode="dark"] .recruitment_compose .announcement_save .ann-autosave[data-state="saved"] {
    color: #7dcea0 !important;
}
html[data-color-mode="dark"] .recruitment_compose .announcement_save .ann-autosave[data-state="error"] {
    color: #f1948a !important;
}

/* Transfer Information / invoice document (.transfer_info / .ctable) */
html[data-color-mode="dark"] #result.transfer_info,
html[data-color-mode="dark"] .transfer_info,
html[data-color-mode="dark"] .transfer_info .text,
html[data-color-mode="dark"] .transfer_info .ctable,
html[data-color-mode="dark"] .transfer_info .stext,
html[data-color-mode="dark"] .transfer_info strong,
html[data-color-mode="dark"] .transfer_info em,
html[data-color-mode="dark"] .transfer_info span,
html[data-color-mode="dark"] .transfer_info td {
    color: var(--ch-text) !important;
}
html[data-color-mode="dark"] .transfer_info table.ctable,
html[data-color-mode="dark"] .transfer_info table.text,
html[data-color-mode="dark"] .transfer_info #myDiv table {
    background: transparent !important;
}
html[data-color-mode="dark"] .transfer_info td[bgcolor="#FFFFFF"],
html[data-color-mode="dark"] .transfer_info td[bgcolor="#ffffff"],
html[data-color-mode="dark"] .transfer_info table[bgcolor="#FFFFFF"],
html[data-color-mode="dark"] .transfer_info table[bgcolor="#ffffff"] {
    background-color: var(--ch-surface) !important;
    color: var(--ch-text) !important;
}
html[data-color-mode="dark"] .transfer_info input[type="text"],
html[data-color-mode="dark"] .transfer_info input[type="submit"],
html[data-color-mode="dark"] .transfer_info textarea,
html[data-color-mode="dark"] .transfer_info select {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-text) !important;
    border-color: var(--ch-input-border) !important;
}
html[data-color-mode="dark"] .transfer_info .asterisk,
html[data-color-mode="dark"] .transfer_info .topvern {
    color: #f1948a !important;
}
html[data-color-mode="dark"] .transfer_info .ctd {
    border-color: var(--ch-input-border) !important;
}

/* Invoice details comment / remaining-payment popups */
html[data-color-mode="dark"] #result.invoice_details #popup,
html[data-color-mode="dark"] #result.invoice_details #popup1 {
    background: var(--ch-surface) !important;
    border-color: var(--ch-input-border) !important;
    color: var(--ch-text) !important;
}
html[data-color-mode="dark"] #result.invoice_details #popup textarea,
html[data-color-mode="dark"] #result.invoice_details #popup1 select,
html[data-color-mode="dark"] #result.invoice_details #popup input,
html[data-color-mode="dark"] #result.invoice_details #popup1 input {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-text) !important;
    border-color: var(--ch-input-border) !important;
}

/* Modern SVG action icons: slate strokes → readable on dark surfaces */
html[data-color-mode="dark"] img[src^="/images/"][src$=".svg"]:not([src*="trash"]):not([src*="ReDelete"]):not([src*="bullet"]) {
    filter: brightness(0) invert(0.88);
}

/* Keep delete icons red-ish in dark mode */
html[data-color-mode="dark"] img[src*="trash.svg"],
html[data-color-mode="dark"] img[src*="ReDelete.svg"] {
    filter: brightness(1.15) saturate(1.1);
}

/* Form action buttons in dark mode */
html[data-color-mode="dark"] button.legacy-btn,
html[data-color-mode="dark"] #result input[type="submit"].input,
html[data-color-mode="dark"] #result input[type="button"].input {
    border-color: var(--ch-input-border) !important;
    background: linear-gradient(180deg, #3a4556 0%, #2c3544 100%) !important;
    color: var(--ch-text) !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

html[data-color-mode="dark"] button.legacy-btn:hover,
html[data-color-mode="dark"] #result input[type="submit"].input:hover,
html[data-color-mode="dark"] #result input[type="button"].input:hover {
    border-color: #7a8aa0 !important;
    background: linear-gradient(180deg, #455166 0%, #354050 100%) !important;
}

/* My Profile pages — legacy style.css forces #000000 / #535353 on wrappers */
html[data-color-mode="dark"] .activities_services,
html[data-color-mode="dark"] .activities_services table,
html[data-color-mode="dark"] .activities_services table tr td,
html[data-color-mode="dark"] .company_details_view,
html[data-color-mode="dark"] .company_details_view .form_field_block,
html[data-color-mode="dark"] .company_details_view .form_field_block span,
html[data-color-mode="dark"] .company_details_view .form_field_block span.lab,
html[data-color-mode="dark"] .company_details_edit,
html[data-color-mode="dark"] .company_details_edit .form_field_block,
html[data-color-mode="dark"] .company_details_edit label,
html[data-color-mode="dark"] .interview_contacts_view,
html[data-color-mode="dark"] .interview_contacts_view .form_field_block,
html[data-color-mode="dark"] .interview_contacts_view .form_field_block span,
html[data-color-mode="dark"] .interview_contacts_view .form_field_block span.lab,
html[data-color-mode="dark"] .interview_contacts_edit,
html[data-color-mode="dark"] .interview_contacts_edit .form_field_block,
html[data-color-mode="dark"] .interview_contacts_edit label,
html[data-color-mode="dark"] .form_block_mail_subscription,
html[data-color-mode="dark"] .form_block_mail_subscription h3,
html[data-color-mode="dark"] .form_block_mail_subscription .form_field_block label,
html[data-color-mode="dark"] .background_info,
html[data-color-mode="dark"] .background_info table,
html[data-color-mode="dark"] .background_info table tr td,
html[data-color-mode="dark"] .background_info .backgr_inf,
html[data-color-mode="dark"] .background_info .backgr_inf_org,
html[data-color-mode="dark"] .backgroundInfoEdit,
html[data-color-mode="dark"] .backgroundInfoEdit table,
html[data-color-mode="dark"] .backgroundInfoEdit table tr td,
html[data-color-mode="dark"] .backgr_ed_inf,
html[data-color-mode="dark"] .backgr_ed_inf tr td,
html[data-color-mode="dark"] .backgr_ed_inf .stext,
html[data-color-mode="dark"] .topvern,
html[data-color-mode="dark"] .cover_letter,
html[data-color-mode="dark"] .cover_letter span,
html[data-color-mode="dark"] .form_block_reg,
html[data-color-mode="dark"] .form_block_reg .form_field_block,
html[data-color-mode="dark"] .form_block_reg .form_field_block label,
html[data-color-mode="dark"] .form_block,
html[data-color-mode="dark"] .form_block table,
html[data-color-mode="dark"] .form_block table tr td,
html[data-color-mode="dark"] .form_block .text,
html[data-color-mode="dark"] .form_block .stext,
html[data-color-mode="dark"] .applied_for,
html[data-color-mode="dark"] .applied_for tr td,
html[data-color-mode="dark"] .applied_for .stext,
html[data-color-mode="dark"] .res_forward,
html[data-color-mode="dark"] .res_forward tr td,
html[data-color-mode="dark"] .myprofile-grid,
html[data-color-mode="dark"] .myprofile-grid .panel-title,
html[data-color-mode="dark"] .myprofile-nav,
html[data-color-mode="dark"] .right_container .panel,
html[data-color-mode="dark"] .right_container .panel-title,
html[data-color-mode="dark"] .right_container .legacy-muted {
    color: var(--ch-text) !important;
}

html[data-color-mode="dark"] .interview_contacts_view .form_field_block span.lab_red {
    color: #f0a0a4 !important;
}

html[data-color-mode="dark"] .activities_services select,
html[data-color-mode="dark"] .form_block_mail_subscription .form_field_block select,
html[data-color-mode="dark"] .form_block_mail_subscription .form_field_block input,
html[data-color-mode="dark"] .company_details_edit input,
html[data-color-mode="dark"] .company_details_edit select,
html[data-color-mode="dark"] .company_details_edit textarea,
html[data-color-mode="dark"] .interview_contacts_edit input,
html[data-color-mode="dark"] .interview_contacts_edit select,
html[data-color-mode="dark"] .interview_contacts_edit textarea,
html[data-color-mode="dark"] .backgroundInfoEdit input,
html[data-color-mode="dark"] .backgroundInfoEdit select,
html[data-color-mode="dark"] .backgroundInfoEdit textarea,
html[data-color-mode="dark"] .backgr_ed_inf input,
html[data-color-mode="dark"] .backgr_ed_inf select,
html[data-color-mode="dark"] .backgr_ed_inf textarea,
html[data-color-mode="dark"] .cover_letter input,
html[data-color-mode="dark"] .cover_letter textarea,
html[data-color-mode="dark"] .form_block_reg input,
html[data-color-mode="dark"] .form_block input,
html[data-color-mode="dark"] .form_block select,
html[data-color-mode="dark"] .form_block textarea,
html[data-color-mode="dark"] .res_forward input,
html[data-color-mode="dark"] .res_forward textarea,
html[data-color-mode="dark"] .res_forward select {
    background-color: var(--ch-input-bg) !important;
    color: var(--ch-input-text) !important;
    border-color: var(--ch-input-border) !important;
}

html[data-color-mode="dark"] .activities_services a,
html[data-color-mode="dark"] .activities_services a:visited,
html[data-color-mode="dark"] .company_details_view a,
html[data-color-mode="dark"] .company_details_view a:visited,
html[data-color-mode="dark"] .interview_contacts_view a,
html[data-color-mode="dark"] .interview_contacts_view a:visited,
html[data-color-mode="dark"] .background_info a,
html[data-color-mode="dark"] .background_info a:visited,
html[data-color-mode="dark"] .backgroundInfoEdit a,
html[data-color-mode="dark"] .backgroundInfoEdit a:visited,
html[data-color-mode="dark"] .form_block a,
html[data-color-mode="dark"] .form_block a:visited,
html[data-color-mode="dark"] .applied_for a,
html[data-color-mode="dark"] .applied_for a:visited,
html[data-color-mode="dark"] .myprofile-nav a,
html[data-color-mode="dark"] .myprofile-nav a:visited {
    color: var(--ch-link) !important;
}

html[data-color-mode="dark"] .form_block table tr td {
    border-color: var(--ch-border) !important;
}

html[data-color-mode="dark"] .company_details_view input[type="submit"],
html[data-color-mode="dark"] .interview_contacts_view input[type="submit"],
html[data-color-mode="dark"] .company_details_edit input[type="submit"],
html[data-color-mode="dark"] .interview_contacts_edit input[type="submit"],
html[data-color-mode="dark"] .interview_contacts_edit #preview,
html[data-color-mode="dark"] .background_info form input[type="submit"],
html[data-color-mode="dark"] .backgroundInfoEdit input[type="submit"],
html[data-color-mode="dark"] .cover_letter input[type="submit"],
html[data-color-mode="dark"] .form_block_reg input[type="submit"],
html[data-color-mode="dark"] .form_block_mail_subscription input[type="submit"],
html[data-color-mode="dark"] .form_block input[type="submit"],
html[data-color-mode="dark"] .form_block input[type="button"],
html[data-color-mode="dark"] .res_forward input[type="submit"] {
    background-color: var(--ch-table-head) !important;
    color: var(--ch-text) !important;
    border-color: var(--ch-input-border) !important;
}