/**
 * Lilacrose.dev theme for Roundcube Webmail
 * Matches the styling of lilacrose.dev
 * Extends the Elastic skin (dark mode always on)
 */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* =========================================
   Global: Typography & Base
   ========================================= */

html.dark-mode body,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode button,
html.dark-mode .btn,
html.dark-mode .form-control,
html.dark-mode .input-group-text,
html.dark-mode .listing li a,
html.dark-mode .listing tbody td,
html.dark-mode #taskmenu a,
html.dark-mode .menu a,
html.dark-mode .popover,
html.dark-mode .ui-widget,
html.dark-mode .ui-dialog,
html.dark-mode pre {
    font-family: 'Share Tech Mono', monospace;
}

/* =========================================
   Global: Colors - Body & Background
   ========================================= */

html.dark-mode body {
    background-color: #0a0a14 !important;
    color: #f0e6ff !important;
}

html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar {
    background-color: transparent !important;
    border-color: rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
    background-color: rgba(10, 10, 20, 0.9) !important;
    border-color: rgba(0, 152, 205, 0.2) !important;
    color: #f0e6ff !important;
}

html.dark-mode #layout > div > .header a.button,
html.dark-mode #layout > div > .footer a.button {
    color: #f0e6ff !important;
}

/* =========================================
   Task Menu (Sidebar Navigation)
   ========================================= */

html.dark-mode #layout-menu {
    background: #06060f !important;
    border-right-color: rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode #layout-menu .popover-header,
html.dark-mode #layout-menu .special-buttons {
    background: transparent !important;
}

html.dark-mode #layout-menu .special-buttons a:not(:focus) {
    background: #06060f !important;
}

html.dark-mode #taskmenu a {
    color: rgba(240, 230, 255, 0.8) !important;
    font-family: 'Share Tech Mono', monospace;
}

html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a:focus {
    background-color: rgba(0, 152, 205, 0.1) !important;
    color: #f0e6ff !important;
}

html.dark-mode #taskmenu a.selected {
    background-color: rgba(0, 152, 205, 0.15) !important;
    color: #f0e6ff !important;
}

html.dark-mode #taskmenu .action-buttons a {
    color: #0098cd !important;
}

html.dark-mode #taskmenu .action-buttons a:hover {
    color: #0098cd !important;
    background-color: rgba(0, 152, 205, 0.1) !important;
}

/* =========================================
   Scrollbar
   ========================================= */

html.dark-mode {
    scrollbar-color: rgba(0, 152, 205, 0.3) rgba(0, 0, 0, 0.2);
}

html.dark-mode:not(.touch) ::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 152, 205, 0.3) !important;
}

/* =========================================
   Searchbar
   ========================================= */

html.dark-mode .searchbar {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode .searchbar input {
    color: #f0e6ff !important;
    background: transparent !important;
}

html.dark-mode .searchbar a.selected {
    color: #2ed573 !important;
}

/* =========================================
   Listings (Folder List, Message List)
   ========================================= */

html.dark-mode .listing li a,
html.dark-mode .listing tbody td,
html.dark-mode .listing tbody td a {
    color: #f0e6ff !important;
}

html.dark-mode .listing li,
html.dark-mode .listing tbody td,
html.dark-mode .listing li ul {
    border-color: rgba(0, 152, 205, 0.12) !important;
}

html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td {
    color: #0098cd !important;
    background-color: rgba(0, 152, 205, 0.12) !important;
}

html.dark-mode .listing li.selected ul {
    background-color: #0a0a14 !important;
}

html.dark-mode .listing li.selected ul div.treetoggle {
    color: #f0e6ff !important;
}

html.dark-mode .listing li.disabled,
html.dark-mode .listing tr.disabled td {
    color: rgba(240, 230, 255, 0.3) !important;
}

html.dark-mode .listing li.droptarget > a,
html.dark-mode .listing tr.droptarget > td {
    background-color: rgba(0, 152, 205, 0.2) !important;
}

/* Unread badge */
html.dark-mode .folderlist li.mailbox .unreadcount {
    background-color: #0098cd !important;
    color: #0a0a14 !important;
    font-weight: bold;
}

/* Message list specifics */
html.dark-mode .messagelist {
    color: #f0e6ff !important;
}

html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.size,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.date,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto {
    color: rgba(240, 230, 255, 0.5) !important;
}

html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status {
    color: #f0e6ff !important;
}

html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status.unread::before {
    color: #ffa502 !important;
}

html.dark-mode .messagelist tr:not(.flagged):not(.deleted) span.flag {
    color: #f0e6ff !important;
}

html.dark-mode .messagelist tr.flagged:not(.deleted) td,
html.dark-mode .messagelist tr.flagged:not(.deleted) span.attachment span {
    color: #ff4757 !important;
}

html.dark-mode .messagelist tr.deleted td span.flag,
html.dark-mode .messagelist tr.deleted td.subject span.subject a,
html.dark-mode .messagelist tr.deleted td.subject span.date,
html.dark-mode .messagelist tr.deleted td.subject span.fromto {
    color: rgba(240, 230, 255, 0.3) !important;
}

html.dark-mode .messagelist span.attachment span {
    color: rgba(240, 230, 255, 0.5) !important;
}

html.dark-mode .listing-info,
html.dark-mode .listing span.secondary {
    color: rgba(240, 230, 255, 0.5) !important;
}

/* =========================================
   Toolbar & Menu Buttons
   ========================================= */

html.dark-mode #taskmenu a:hover,
html.dark-mode .popupmenu .listing li > a:not(.disabled):hover,
html.dark-mode .header a.button.icon:not(.disabled):focus,
html.dark-mode .header a.button.icon:not(.disabled):hover,
html.dark-mode .menu.toolbar .dropbutton:not(.disabled):hover,
html.dark-mode .menu a:not(.disabled):focus,
html.dark-mode .menu a:not(.disabled):hover {
    background-color: rgba(0, 152, 205, 0.1) !important;
}

html.dark-mode .menu.toolbar a.selected {
    color: #2ed573 !important;
    background: transparent !important;
}

html.dark-mode .menu.toolbar .dropbutton a.dropdown:hover {
    background-color: rgba(0, 152, 205, 0.15) !important;
}

html.dark-mode .menu a,
html.dark-mode .menu.toolbar a {
    color: #f0e6ff !important;
}

html.dark-mode .menu.toolbar a.selected {
    color: #2ed573 !important;
}

/* =========================================
   Forms & Inputs
   ========================================= */

html.dark-mode .form-control,
html.dark-mode .custom-file-label {
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: #f0e6ff !important;
    border-color: rgba(0, 152, 205, 0.2) !important;
    border-radius: 4px;
}

html.dark-mode .form-control:focus,
html.dark-mode .form-control:focus:not(.is-invalid) {
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: #f0e6ff !important;
    border-color: #0098cd !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode .input-group-text {
    color: #f0e6ff !important;
    background-color: rgba(0, 152, 205, 0.1) !important;
    border-color: rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode .input-group a:focus {
    border-color: #0098cd !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode ::placeholder,
html.dark-mode ::-webkit-input-placeholder {
    color: rgba(240, 230, 255, 0.35) !important;
}

html.dark-mode .multi-input:not(.is-invalid) > .content {
    border-color: rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode .multi-input:not(.is-invalid) > .content.focused {
    border-color: #0098cd !important;
}

html.dark-mode .recipient-input.focus {
    color: #f0e6ff !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    border-color: #0098cd !important;
}

html.dark-mode .recipient-input a.button.icon,
html.dark-mode .recipient-input input {
    color: #f0e6ff !important;
}

html.dark-mode .recipient-input .recipient {
    background-color: rgba(0, 152, 205, 0.1) !important;
    border-color: rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode .custom-switch .custom-control-label::before {
    background-color: rgba(0, 152, 205, 0.3) !important;
}

html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #0098cd !important;
}

html.dark-mode .form-control-plaintext {
    color: #f0e6ff !important;
}

html.dark-mode .formcontent .hint,
html.dark-mode .file-upload .hint {
    color: rgba(240, 230, 255, 0.5) !important;
}

/* =========================================
   Buttons
   ========================================= */

html.dark-mode .btn {
    color: #f0e6ff !important;
    font-family: 'Share Tech Mono', monospace;
    border-radius: 4px;
}

html.dark-mode .btn:focus,
html.dark-mode .btn:hover {
    color: #f0e6ff !important;
}

html.dark-mode .btn-primary {
    background-color: #0098cd !important;
    border-color: #0098cd !important;
    color: #0a0a14 !important;
}

html.dark-mode .btn-primary:hover:not(:disabled) {
    background-color: #0077b3 !important;
    border-color: #0077b3 !important;
    color: #0a0a14 !important;
    box-shadow: 0 4px 12px rgba(0, 152, 205, 0.4) !important;
}

html.dark-mode .btn-secondary {
    background-color: rgba(0, 152, 205, 0.15) !important;
    border-color: rgba(0, 152, 205, 0.3) !important;
    color: #f0e6ff !important;
}

html.dark-mode .btn-secondary:hover:not(:disabled) {
    background-color: rgba(0, 152, 205, 0.25) !important;
    color: #f0e6ff !important;
}

html.dark-mode .btn-danger {
    background-color: #ff4757 !important;
    border-color: #ff4757 !important;
    color: #f0e6ff !important;
}

html.dark-mode .btn-danger:hover:not(:disabled) {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
}

html.dark-mode .floating-action-buttons a.button {
    background: #0098cd !important;
    box-shadow: 0 0 20px rgba(0, 152, 205, 0.4) !important;
}

/* =========================================
   Popovers & Menus
   ========================================= */

html.dark-mode .popover {
    background-color: #0f0f1f !important;
    border-color: rgba(0, 152, 205, 0.25) !important;
    box-shadow: 0 0 20px rgba(0, 152, 205, 0.1) !important;
    font-family: 'Share Tech Mono', monospace;
}

html.dark-mode .popover-body {
    color: #f0e6ff !important;
}

html.dark-mode .popover .menu li.separator {
    background-color: transparent !important;
    color: rgba(240, 230, 255, 0.4) !important;
}

html.dark-mode .popover .menu ul + li.separator {
    border-top-color: rgba(0, 152, 205, 0.15) !important;
}

html.dark-mode .bs-popover-auto[x-placement^="right"] > .arrow::after,
html.dark-mode .bs-popover-right > .arrow::after {
    border-right-color: rgba(0, 152, 205, 0.25) !important;
}

html.dark-mode .bs-popover-auto[x-placement^="left"] > .arrow::after,
html.dark-mode .bs-popover-left > .arrow::after {
    border-left-color: rgba(0, 152, 205, 0.25) !important;
}

html.dark-mode .bs-popover-auto[x-placement^="top"] > .arrow::after,
html.dark-mode .bs-popover-top > .arrow::after {
    border-top-color: rgba(0, 152, 205, 0.25) !important;
}

html.dark-mode .bs-popover-auto[x-placement^="bottom"] > .arrow::after,
html.dark-mode .bs-popover-bottom > .arrow::after {
    border-bottom-color: rgba(0, 152, 205, 0.25) !important;
}

html.dark-mode .popover-header {
    background: rgba(0, 152, 205, 0.1) !important;
    border-bottom-color: rgba(0, 152, 205, 0.2) !important;
    color: #f0e6ff !important;
}

/* =========================================
   jQuery UI Widgets
   ========================================= */

html.dark-mode .ui-widget {
    border-color: rgba(0, 152, 205, 0.2) !important;
    font-family: 'Share Tech Mono', monospace !important;
}

html.dark-mode .ui-widget-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

html.dark-mode .ui-widget-header,
html.dark-mode .ui-widget-content {
    background-color: #0f0f1f !important;
    color: #f0e6ff !important;
}

html.dark-mode .ui-dialog {
    background-color: #0f0f1f !important;
    border-color: rgba(0, 152, 205, 0.25) !important;
    box-shadow: 0 0 40px rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode .ui-dialog .ui-dialog-titlebar {
    border-color: rgba(0, 152, 205, 0.2) !important;
    background: rgba(0, 152, 205, 0.08) !important;
}

html.dark-mode .ui-dialog .ui-dialog-title,
html.dark-mode .ui-dialog .ui-dialog-titlebar-close {
    color: #f0e6ff !important;
    background: transparent !important;
}

html.dark-mode .ui-dialog .ui-dialog-buttonpane {
    border-top-color: rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link {
    color: #f0e6ff !important;
}

html.dark-mode .ui-menu {
    background-color: #0f0f1f !important;
    border-color: rgba(0, 152, 205, 0.25) !important;
    box-shadow: 0 0 20px rgba(0, 152, 205, 0.1) !important;
}

html.dark-mode .ui-menu .ui-menu-item {
    border-bottom-color: rgba(0, 152, 205, 0.1) !important;
    color: #f0e6ff !important;
}

html.dark-mode .ui-menu .ui-state-active {
    background-color: rgba(0, 152, 205, 0.15) !important;
    color: #f0e6ff !important;
    border-color: transparent !important;
}

html.dark-mode .ui-datepicker {
    background-color: #0f0f1f !important;
    border-color: rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode .ui-datepicker .ui-datepicker-header {
    border-color: rgba(0, 152, 205, 0.2) !important;
    background: rgba(0, 152, 205, 0.08) !important;
    color: #f0e6ff !important;
}

html.dark-mode .ui-datepicker th {
    color: rgba(240, 230, 255, 0.5) !important;
}

html.dark-mode .ui-datepicker .ui-datepicker-prev,
html.dark-mode .ui-datepicker .ui-datepicker-next,
html.dark-mode .ui-datepicker .ui-state-default,
html.dark-mode .ui-datepicker.ui-widget-content .ui-state-default {
    color: #f0e6ff !important;
}

html.dark-mode .ui-datepicker .ui-state-highlight,
html.dark-mode .ui-datepicker.ui-widget-content .ui-state-highlight {
    color: #0098cd !important;
    background-color: rgba(0, 152, 205, 0.15) !important;
}

html.dark-mode .ui-datepicker .ui-datepicker-days-cell-over a {
    background-color: rgba(0, 152, 205, 0.2) !important;
}

/* =========================================
   Alerts & Messages
   ========================================= */

html.dark-mode #messagestack div {
    color: #f0e6ff !important;
    font-family: 'Share Tech Mono', monospace;
}

html.dark-mode #messagestack div i.icon:before {
    color: #f0e6ff !important;
}

html.dark-mode .ui.alert.boxinformation,
html.dark-mode #messagestack .alert-info {
    background-color: rgba(0, 152, 205, 0.25) !important;
    border-color: #0098cd !important;
}

html.dark-mode .ui.alert.boxerror,
html.dark-mode #messagestack .alert-danger {
    background-color: rgba(255, 71, 87, 0.25) !important;
    border-color: #ff4757 !important;
}

html.dark-mode .ui.alert.boxwarning,
html.dark-mode #messagestack .alert-warning {
    background-color: rgba(255, 165, 2, 0.25) !important;
    border-color: #ffa502 !important;
}

html.dark-mode .ui.alert.boxconfirmation,
html.dark-mode #messagestack .alert-success {
    background-color: rgba(46, 213, 115, 0.25) !important;
    border-color: #2ed573 !important;
}

html.dark-mode #messagestack .loading {
    background-color: rgba(15, 15, 31, 0.9) !important;
}

html.dark-mode .ui.alert.boxinformation,
html.dark-mode .ui.alert.boxerror,
html.dark-mode .ui.alert.boxwarning,
html.dark-mode .ui.alert.boxconfirmation {
    color: #f0e6ff !important;
}

html.dark-mode .ui.alert a:not(.btn) {
    color: #0098cd !important;
    text-decoration: underline;
}

/* =========================================
   Navigation Tabs
   ========================================= */

html.dark-mode .nav-tabs {
    border-color: rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode .nav-tabs .nav-link {
    color: rgba(240, 230, 255, 0.7) !important;
    border-color: transparent !important;
    border-bottom-color: rgba(0, 152, 205, 0.2) !important;
    font-family: 'Share Tech Mono', monospace;
}

html.dark-mode .nav-tabs .nav-link:hover {
    background: rgba(0, 152, 205, 0.08) !important;
    border-color: rgba(0, 152, 205, 0.2) !important;
    color: #f0e6ff !important;
}

html.dark-mode .nav-tabs .nav-link.active {
    background: #0a0a14 !important;
    border-color: rgba(0, 152, 205, 0.2) !important;
    border-bottom-color: transparent !important;
    color: #0098cd !important;
}

/* =========================================
   Tables
   ========================================= */

html.dark-mode .table {
    color: #f0e6ff !important;
}

html.dark-mode .table td,
html.dark-mode .table th,
html.dark-mode .table thead th {
    border-color: rgba(0, 152, 205, 0.15) !important;
}

html.dark-mode .table-widget {
    border-color: rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode .table-widget > .footer {
    border-color: rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode .table-widget table.options-table tr:last-child td {
    border-color: rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode .table-widget table.options-table tr.selected td {
    background-color: rgba(0, 152, 205, 0.12) !important;
    color: #f0e6ff !important;
}

/* =========================================
   Drag & Drop
   ========================================= */

html.dark-mode #rcmdraglayer {
    background-color: #0f0f1f !important;
    border-color: rgba(0, 152, 205, 0.3) !important;
    box-shadow: 0 0 20px rgba(0, 152, 205, 0.2) !important;
    color: #f0e6ff !important;
}

/* =========================================
   Mail Message Preview
   ========================================= */

html.dark-mode .message-part,
html.dark-mode .message-htmlpart {
    border-color: rgba(0, 152, 205, 0.15) !important;
}

html.dark-mode .message-part span.sig {
    color: rgba(240, 230, 255, 0.4) !important;
}

html.dark-mode .message-htmlpart {
    background-color: #ffffff;
    color: #222;
}

html.dark-mode #message-header .header-headers .header-title {
    color: rgba(240, 230, 255, 0.7) !important;
}

html.dark-mode .message-partheaders {
    background-color: rgba(0, 152, 205, 0.08) !important;
    border-color: rgba(0, 152, 205, 0.15) !important;
}

html.dark-mode .message-partheaders table.headers-table {
    color: #f0e6ff !important;
}

html.dark-mode .attachmentslist {
    background-color: rgba(0, 152, 205, 0.08) !important;
    border-color: rgba(0, 152, 205, 0.15) !important;
}

html.dark-mode .attachmentslist a,
html.dark-mode .attachmentslist li .attachment-name {
    color: #f0e6ff !important;
}

html.dark-mode .attachmentslist li .attachment-size {
    color: rgba(240, 230, 255, 0.5) !important;
}

/* Blockquotes */
html.dark-mode .message-part blockquote,
html.dark-mode .message-htmlpart blockquote {
    background-color: rgba(0, 152, 205, 0.05) !important;
    border-left-color: #0098cd !important;
    color: rgba(240, 230, 255, 0.8) !important;
}

/* =========================================
   Quota
   ========================================= */

html.dark-mode .quota-widget .bar {
    border-color: rgba(0, 152, 205, 0.2) !important;
    background-color: rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode .quota-info .root {
    color: rgba(240, 230, 255, 0.5) !important;
    background-color: transparent !important;
}

/* =========================================
   Login Page
   ========================================= */

html.dark-mode #login-footer {
    color: rgba(240, 230, 255, 0.4) !important;
    font-family: 'Share Tech Mono', monospace;
}

html.dark-mode #login-footer a {
    color: #0098cd !important;
}

/* =========================================
   Mobile / Small Screen
   ========================================= */

html.dark-mode.layout-small .popover,
html.dark-mode.layout-phone .popover {
    border-left-color: rgba(0, 152, 205, 0.2) !important;
    background-color: #0f0f1f !important;
}

html.dark-mode.layout-small .popover-header,
html.dark-mode.layout-phone .popover-header {
    background: #0f0f1f !important;
    border-bottom-color: rgba(0, 152, 205, 0.2) !important;
    color: #f0e6ff !important;
}

html.dark-mode.layout-small .popover-overlay,
html.dark-mode.layout-phone .popover-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

html.dark-mode.layout-phone #layout-menu {
    background: #06060f !important;
}

/* =========================================
   General Contact photo / Images
   ========================================= */

html.dark-mode img.contactphoto,
html.dark-mode #contactpic {
    background-color: rgba(0, 152, 205, 0.1) !important;
}

/* =========================================
   Loader / Spinner
   ========================================= */

html.dark-mode .iframe-loader {
    background-color: rgba(10, 10, 20, 0.9) !important;
}

html.dark-mode .iframe-loader .spinner-border {
    color: rgba(240, 230, 255, 0.4) !important;
    border-color: rgba(240, 230, 255, 0.4) rgba(240, 230, 255, 0.1) rgba(240, 230, 255, 0.4) rgba(240, 230, 255, 0.4) !important;
}

/* =========================================
   File Upload
   ========================================= */

html.dark-mode .file-upload {
    border-color: rgba(0, 152, 205, 0.2) !important;
}

html.dark-mode .file-upload.droptarget.active,
html.dark-mode .file-upload.droptarget.hover {
    border-color: #0098cd !important;
}

html.dark-mode .file-upload.droptarget.hover {
    background-color: rgba(0, 152, 205, 0.1) !important;
}

html.dark-mode .image-upload {
    background-color: rgba(0, 152, 205, 0.08) !important;
}

html.dark-mode .image-upload a.button {
    background-color: rgba(10, 10, 20, 0.6) !important;
}

/* =========================================
   Minicolors
   ========================================= */

html.dark-mode .minicolors-panel {
    box-shadow: 0 0 20px rgba(0, 152, 205, 0.2) !important;
    border-color: rgba(0, 152, 205, 0.25) !important;
    background: #0f0f1f !important;
}

/* =========================================
   Selection skin thumbnail
   ========================================= */

html.dark-mode .skinselection .skinthumbnail {
    border-color: rgba(0, 152, 205, 0.2) !important;
    background: transparent !important;
}

/* =========================================
   Hint / helper text
   ========================================= */

html.dark-mode .contactlist span.email,
html.dark-mode #contacthead.readonly .source.row,
html.dark-mode .mail-signature {
    color: rgba(240, 230, 255, 0.5) !important;
}