/* Settings (light mode): first column labels/icons in red */
body.task-settings #layout-sidebar #settings-menu li > a:hover,
body.task-settings #layout-sidebar #settings-menu li > a:focus,
body.task-settings #layout-sidebar #settings-menu li.selected > a,
body.task-settings #layout-sidebar #settings-menu li > a.selected,
body.task-settings #layout-sidebar #settings-menu li > a:hover:before,
body.task-settings #layout-sidebar #settings-menu li > a:focus:before,
body.task-settings #layout-sidebar #settings-menu li.selected > a:before,
body.task-settings #layout-sidebar #settings-menu li > a.selected:before {
    color: var(--px-theme-primary) !important;
}

body.task-settings #layout-sidebar #settings-menu li > a:hover,
body.task-settings #layout-sidebar #settings-menu li > a:focus,
body.task-settings #layout-sidebar #settings-menu li.selected > a,
body.task-settings #layout-sidebar #settings-menu li > a.selected {
    background-color: rgba(224, 82, 88, 0.06) !important;
}

/* Settings (dark mode): first column labels/icons in red */
html.dark-mode body.task-settings #layout-sidebar #settings-menu li > a:hover,
html.dark-mode body.task-settings #layout-sidebar #settings-menu li > a:focus,
html.dark-mode body.task-settings #layout-sidebar #settings-menu li.selected > a,
html.dark-mode body.task-settings #layout-sidebar #settings-menu li > a.selected,
html.dark-mode body.task-settings #layout-sidebar #settings-menu li > a:hover:before,
html.dark-mode body.task-settings #layout-sidebar #settings-menu li > a:focus:before,
html.dark-mode body.task-settings #layout-sidebar #settings-menu li.selected > a:before,
html.dark-mode body.task-settings #layout-sidebar #settings-menu li > a.selected:before {
    color: var(--px-theme-primary) !important;
}

html.dark-mode body.task-settings #layout-sidebar #settings-menu li > a:hover,
html.dark-mode body.task-settings #layout-sidebar #settings-menu li > a:focus,
html.dark-mode body.task-settings #layout-sidebar #settings-menu li.selected > a,
html.dark-mode body.task-settings #layout-sidebar #settings-menu li > a.selected {
    background-color: rgba(224, 82, 88, 0.06) !important;
}

/* Settings (light mode): second column labels/icons in red */
body.task-settings #layout-list .listing li.selected,
body.task-settings #layout-list .listing li.selected > a,
body.task-settings #layout-list .listing li.selected > div > a,
body.task-settings #layout-list .listing tr.selected td,
body.task-settings #layout-list #sections-table li.selected,
body.task-settings #layout-list #sections-table li.selected > a {
    background-color: rgba(224, 82, 88, 0.06) !important;
    color: var(--px-theme-primary) !important;
}

body.task-settings #layout-list #sections-table li > a:hover,
body.task-settings #layout-list #sections-table li > a:focus,
body.task-settings #layout-list #sections-table li.selected > a:hover,
body.task-settings #layout-list #sections-table li.selected > a:focus,
body.task-settings #layout-list #sections-table li > a.selected,
body.task-settings #layout-list #sections-table li > a.selected:before,
body.task-settings #layout-list #sections-table li > a:hover:before,
body.task-settings #layout-list #sections-table li > a:focus:before,
body.task-settings #layout-list #sections-table li.selected > a:before {
    color: var(--px-theme-primary) !important;
}

/* Settings (dark mode): second column labels/icons in red */
html.dark-mode body.task-settings #layout-list .listing li.selected,
html.dark-mode body.task-settings #layout-list .listing li.selected > a,
html.dark-mode body.task-settings #layout-list .listing li.selected > div > a,
html.dark-mode body.task-settings #layout-list .listing tr.selected td,
html.dark-mode body.task-settings #layout-list #sections-table li.selected,
html.dark-mode body.task-settings #layout-list #sections-table li.selected > a {
    background-color: rgba(224, 82, 88, 0.06) !important;
    color: var(--px-theme-primary) !important;
}

html.dark-mode body.task-settings #layout-list #sections-table li > a:hover,
html.dark-mode body.task-settings #layout-list #sections-table li > a:focus,
html.dark-mode body.task-settings #layout-list #sections-table li.selected > a:hover,
html.dark-mode body.task-settings #layout-list #sections-table li.selected > a:focus,
html.dark-mode body.task-settings #layout-list #sections-table li > a.selected,
html.dark-mode body.task-settings #layout-list #sections-table li > a.selected:before,
html.dark-mode body.task-settings #layout-list #sections-table li > a:hover:before,
html.dark-mode body.task-settings #layout-list #sections-table li > a:focus:before,
html.dark-mode body.task-settings #layout-list #sections-table li.selected > a:before {
    color: var(--px-theme-primary) !important;
}

/* Settings > User Interface: skin license link and mailto handler in red */
body.task-settings .skinselection .skinlicense a,
body.task-settings #mailtoprotohandler,
body.task-settings a[href^="mailto:"] {
    color: var(--px-theme-primary) !important;
}

body.task-settings .skinselection .skinlicense a:hover,
body.task-settings .skinselection .skinlicense a:focus,
body.task-settings #mailtoprotohandler:hover,
body.task-settings #mailtoprotohandler:focus,
body.task-settings a[href^="mailto:"]:hover,
body.task-settings a[href^="mailto:"]:focus {
    color: var(--px-theme-primary-hover) !important;
}

/* Settings > User Interface: radio buttons in red */
body.task-settings input[type="radio"] {
    accent-color: var(--px-theme-primary);
}

/* Dark mode: PixelMeal Nova skin thumbnail icon white (elastic / legacy elastic-org) */
html.dark-mode body.task-settings .skinselection .skinthumbnail[alt="elastic"],
html.dark-mode body.task-settings .skinselection .skinthumbnail[alt="elastic-org"] {
    filter: brightness(0) invert(1) !important;
}

/* Mailbox View: newmail_notifier test link (red + aligned with switch) */
body.task-settings a[onclick*="newmail_notifier_test_"] {
    color: var(--px-theme-primary) !important;
}

body.task-settings a[onclick*="newmail_notifier_test_"]:hover,
body.task-settings a[onclick*="newmail_notifier_test_"]:focus {
    color: var(--px-theme-primary-hover) !important;
}

body.task-settings tr.form-check.with-link .custom-switch + a[onclick*="newmail_notifier_test_"] {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    line-height: 1;
    vertical-align: top;
    margin-left: .35rem;
}