/* *****************************************************

    ServWise dark theme

    Loaded last (after custom.css). Everything here only applies when
    <html> has data-theme="dark", which the script in includes/head.tpl sets
    from the visitor's choice (the sun/moon button) or their device setting.
    Remove the <link> to this file in head.tpl to switch dark mode off.

    The colours themselves are not here: they are the --sw-* variables in
    sw-fluid.css (section 1a). This file maps the older Bootstrap 3 parts of
    the theme (all.css) onto those variables, so retuning the palette means
    changing values in sw-fluid.css only.

    1. Page, text and links
    2. Header, menus and footer
    3. Home page bands
    4. Bootstrap parts: panels, forms, tables, menus, tabs, alerts
    5. Images and logo
    6. Theme button

***************************************************** */

@media screen {

/* -----------------------------------------------------
   1. Page, text and links
   ----------------------------------------------------- */
/* The background is set on body only (custom.css does that from --sw-bg):
   with a colour on html as well, body would paint over the home page's
   Lottie skyline, which sits behind it (z-index: -1). */
html[data-theme="dark"] body {
    color: var(--sw-text);
}
html:where([data-theme="dark"]) h1,
html:where([data-theme="dark"]) h2,
html:where([data-theme="dark"]) h3,
html:where([data-theme="dark"]) h4,
html:where([data-theme="dark"]) h5,
html:where([data-theme="dark"]) h6,
html:where([data-theme="dark"]) .h1,
html:where([data-theme="dark"]) .h2,
html:where([data-theme="dark"]) .h3,
html:where([data-theme="dark"]) .h4 {
    color: var(--sw-heading);
}
html:where([data-theme="dark"]) h1 small,
html:where([data-theme="dark"]) h2 small,
html:where([data-theme="dark"]) h3 small,
html:where([data-theme="dark"]) small,
html:where([data-theme="dark"]) .small,
html:where([data-theme="dark"]) .text-muted {
    color: var(--sw-text-muted);
}
html:where([data-theme="dark"]) a {
    color: var(--sw-link);
}
html:where([data-theme="dark"]) a:hover,
html:where([data-theme="dark"]) a:focus {
    color: var(--sw-heading);
}
html:where([data-theme="dark"]) hr {
    border-top-color: var(--sw-border);
}
html:where([data-theme="dark"]) code {
    background-color: var(--sw-surface-sunk);
    color: var(--sw-accent);
}
html:where([data-theme="dark"]) pre {
    border-color: var(--sw-border);
    background-color: var(--sw-surface);
    color: var(--sw-text);
}
html:where([data-theme="dark"]) ::selection {
    background: var(--sw-blue);
    color: #fff;
}

/* -----------------------------------------------------
   2. Header, menus and footer
   ----------------------------------------------------- */
html[data-theme="dark"] .navbar-primary,
html[data-theme="dark"] section#header {
    background-color: var(--sw-surface);
}
html[data-theme="dark"] ul.top-nav > li > a {
    color: var(--sw-text-soft);
}
html[data-theme="dark"] ul.top-nav > li.primary-action > a.btn,
html[data-theme="dark"] ul.top-nav > li > a.btn {
    color: #fff;
}
html[data-theme="dark"] .localeChange a,
html[data-theme="dark"] .currencyChange a {
    border-color: var(--sw-border-strong);
    color: var(--sw-link);
}
html[data-theme="dark"] .localeChange a:hover,
html[data-theme="dark"] .currencyChange a:hover,
html[data-theme="dark"] .localeChange a.localeChangeSelected,
html[data-theme="dark"] .currencyChange a.currencyChangeSelected {
    color: #fff;
}
html[data-theme="dark"] .localeChange,
html[data-theme="dark"] .currencyChange {
    color: var(--sw-text-soft);
}
html[data-theme="dark"] section#footer,
html[data-theme="dark"] section#footer section#footer-menu {
    background-color: var(--sw-nav);
    color: var(--sw-nav-text);
}
html[data-theme="dark"] section#footer a,
html[data-theme="dark"] section#footer p {
    color: var(--sw-nav-text);
}
html[data-theme="dark"] section#footer a:hover {
    color: #fff;
}

/* -----------------------------------------------------
   3. Home page bands
   ----------------------------------------------------- */
html[data-theme="dark"] section#home-banner {
    background-color: var(--sw-nav);
}
html[data-theme="dark"] section#home-banner-title {
    background-color: transparent;
}
html[data-theme="dark"] section#home-banner-title h1 {
    color: var(--sw-heading);
}
html[data-theme="dark"] #lottieanim {
    /* The skyline is light grey on white; this turns it into a slightly
       lighter-than-background silhouette. Raise brightness() to show more. */
    filter: invert(1) hue-rotate(180deg) brightness(1.4);
}
html[data-theme="dark"] section#home-banner h2 {
    color: var(--sw-heading);
}
html[data-theme="dark"] section#home-banner .form-control {
    border-color: var(--sw-border-strong);
}
html[data-theme="dark"] input#btnTransfer.btn,
html[data-theme="dark"] .btn.transfer {
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text);
}
html[data-theme="dark"] .back-to-top i,
html[data-theme="dark"] .panel-minimise {
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text-soft);
}

/* -----------------------------------------------------
   4. Bootstrap parts
   ----------------------------------------------------- */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-default,
html[data-theme="dark"] .well,
html[data-theme="dark"] .jumbotron,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .thumbnail,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .dropdown-menu {
    border-color: var(--sw-border);
    background-color: var(--sw-surface);
    color: var(--sw-text);
}
html[data-theme="dark"] .panel > .panel-heading,
html[data-theme="dark"] .panel-default > .panel-heading,
html[data-theme="dark"] .panel-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .popover-title {
    border-color: var(--sw-border);
    background-color: var(--sw-surface-sunk);
    color: var(--sw-heading);
}
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .panel-title a {
    color: var(--sw-heading);
}
html[data-theme="dark"] .list-group-item:hover,
html[data-theme="dark"] a.list-group-item:hover,
html[data-theme="dark"] a.list-group-item:focus,
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus {
    background-color: var(--sw-surface-sunk);
    color: var(--sw-heading);
}
html[data-theme="dark"] .dropdown-menu > li > a {
    color: var(--sw-text);
}
html[data-theme="dark"] .dropdown-menu .divider,
html[data-theme="dark"] .nav-divider {
    background-color: var(--sw-border);
}
html[data-theme="dark"] .modal-backdrop {
    background-color: #000;
}

/* Forms */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    border-color: var(--sw-border-strong);
    background-color: var(--sw-surface-alt);
    color: var(--sw-text);
    box-shadow: none;
}
html[data-theme="dark"] .form-control:focus {
    border-color: var(--sw-link);
    box-shadow: 0 0 0 2px rgba(92, 192, 228, 0.25);
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--sw-text-muted);
    opacity: 1;
}
html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] fieldset[disabled] .form-control {
    background-color: var(--sw-surface-sunk);
}
html[data-theme="dark"] .input-group-addon {
    border-color: var(--sw-border-strong);
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text-soft);
}
html[data-theme="dark"] label,
html[data-theme="dark"] .control-label,
html[data-theme="dark"] legend {
    color: var(--sw-text);
}
html[data-theme="dark"] legend {
    border-bottom-color: var(--sw-border);
}
html[data-theme="dark"] .help-block {
    color: var(--sw-text-muted);
}
html[data-theme="dark"] .btn-default {
    border-color: var(--sw-border-strong);
    background-color: var(--sw-surface);
    color: var(--sw-text);
}
html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:focus,
html[data-theme="dark"] .btn-default.active {
    border-color: var(--sw-link);
    background-color: var(--sw-surface-sunk);
    color: var(--sw-heading);
}
html[data-theme="dark"] .btn-link {
    color: var(--sw-link);
}

/* Tables */
html[data-theme="dark"] .table,
html[data-theme="dark"] table {
    color: var(--sw-text);
}
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tfoot > tr > th,
html[data-theme="dark"] .table > thead > tr > td,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tfoot > tr > td,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > td {
    border-color: var(--sw-border);
}
html[data-theme="dark"] .table > thead > tr > th {
    background-color: var(--sw-surface-sunk);
    color: var(--sw-heading);
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--sw-surface-alt);
}
html[data-theme="dark"] .table-hover > tbody > tr:hover {
    background-color: var(--sw-surface-sunk);
}

/* Tabs, pagination, breadcrumb */
html[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--sw-border);
}
html[data-theme="dark"] .nav-tabs > li > a:hover {
    border-color: var(--sw-border) var(--sw-border) var(--sw-border);
    background-color: var(--sw-surface-sunk);
}
html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus {
    border-color: var(--sw-border);
    border-bottom-color: transparent;
    background-color: var(--sw-surface);
    color: var(--sw-heading);
}
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span,
html[data-theme="dark"] .pager li > a {
    border-color: var(--sw-border);
    background-color: var(--sw-surface);
    color: var(--sw-link);
}
html[data-theme="dark"] .pagination > .disabled > a,
html[data-theme="dark"] .pagination > .disabled > span {
    background-color: var(--sw-surface-alt);
    color: var(--sw-text-muted);
}
html[data-theme="dark"] .breadcrumb {
    background-color: transparent;
}
html[data-theme="dark"] .breadcrumb > li + li::before,
html[data-theme="dark"] .breadcrumb > .active {
    color: var(--sw-text-muted);
}
html[data-theme="dark"] .header-lined {
    border-bottom-color: var(--sw-border);
}
html[data-theme="dark"] .header-lined h1 small {
    color: var(--sw-text-muted);
}

/* Alerts and labels keep their colour hints, on dark tints */
html[data-theme="dark"] .alert-info {
    border-color: #1f4a5a;
    background-color: #12303b;
    color: #b6e3f3;
}
html[data-theme="dark"] .alert-success {
    border-color: #2f5a1f;
    background-color: #1c2f15;
    color: #c4e8a0;
}
html[data-theme="dark"] .alert-warning {
    border-color: #6a5416;
    background-color: #33290f;
    color: #f0dc9a;
}
html[data-theme="dark"] .alert-danger {
    border-color: #6b2a24;
    background-color: #38191a;
    color: #f4b9b2;
}

/* -----------------------------------------------------
   5. Images and logo
   ----------------------------------------------------- */
html[data-theme="dark"] .navbar-primary .logo img {
    content: url("/home/templates/servwise/img/logo-dark.svg?v=20261110a");
}
@media (max-width: 768px) {
    html[data-theme="dark"] .navbar-primary .logo img {
        content: url("/home/templates/servwise/img/logo-emblem-dark.svg?v=20261110a");
    }
}
/* Pictures stay as they are, just a little less glaring */
html[data-theme="dark"] img {
    opacity: 0.92;
}
html[data-theme="dark"] .logo img,
html[data-theme="dark"] .sw-pf-desktop img,
html[data-theme="dark"] .sw-pf-mobile img {
    opacity: 1;
}

/* -----------------------------------------------------
   5b. More parts of the theme and the product pages
   ----------------------------------------------------- */
html[data-theme="dark"] .header-lined h1,
html[data-theme="dark"] .kb-article-title h1,
html[data-theme="dark"] .main-content h1 {
    color: var(--sw-heading);
}
html[data-theme="dark"] section#footer .back-to-top i,
html[data-theme="dark"] .panel-minimise {
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text-soft);
}
html[data-theme="dark"] #share-bar,
html[data-theme="dark"] #share-bar.right {
    background-color: var(--sw-surface);
}
html[data-theme="dark"] .label-warning {
    background-color: #8a5a10;
    color: #fff;
}
html[data-theme="dark"] .badge {
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text-soft);
}

/* Hosting, servers and other product pages (templates/orderforms/sw*) */
html[data-theme="dark"] #feature-list section {
    background-color: var(--sw-surface);
    box-shadow: 0 0 0 1px var(--sw-border);
    color: var(--sw-text);
}
html[data-theme="dark"] #feature-list section h3,
html[data-theme="dark"] #feature-list h3 {
    color: var(--sw-heading);
}
html[data-theme="dark"] #feature-list .name {
    color: var(--sw-text);
}
html[data-theme="dark"] #feature-list .name::before,
html[data-theme="dark"] #feature-list i {
    color: var(--sw-green-ink);
}

/* Support ticket form: the markdown editor. Its own stylesheet uses
   !important, so these have to as well. */
html[data-theme="dark"] .md-editor,
html[data-theme="dark"] .md-editor > .md-header,
html[data-theme="dark"] .md-editor > .btn-toolbar,
html[data-theme="dark"] .md-editor .md-footer,
html[data-theme="dark"] .md-editor > .md-preview {
    border-color: var(--sw-border-strong) !important;
    background-color: var(--sw-surface-alt) !important;
    color: var(--sw-text) !important;
}
html[data-theme="dark"] .md-editor > textarea,
html[data-theme="dark"] .md-editor > textarea.markdown-editor {
    background-color: var(--sw-surface-alt) !important;
    color: var(--sw-text) !important;
}
html[data-theme="dark"] .md-editor .btn-default {
    background-color: var(--sw-surface);
}
html[data-theme="dark"] .md-editor .small-font,
html[data-theme="dark"] .md-editor .markdown-save {
    color: var(--sw-text-muted) !important;
}
/* Client area lists (services, domains, invoices, tickets: DataTables) */
html[data-theme="dark"] .dataTables_wrapper .dataTables_info {
    border-bottom-color: var(--sw-border);
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_length {
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text-soft);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter label .form-control,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length label .form-control {
    border-color: var(--sw-border-strong);
    background-color: var(--sw-surface-alt);
    color: var(--sw-text);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter label .form-control {
    background-blend-mode: normal;
    background-image: none;
    padding-left: 10px !important;
}
html[data-theme="dark"] table.table-list thead th {
    border-bottom-color: var(--sw-border);
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text);
}
html[data-theme="dark"] .dataTables_wrapper table.table-list thead th.sorting_asc,
html[data-theme="dark"] .dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: var(--sw-surface);
}
html[data-theme="dark"] .table-list > tbody > tr > td {
    border-color: var(--sw-border);
    background-color: var(--sw-surface);
    color: var(--sw-text);
}
html[data-theme="dark"] .table-list > tbody > tr:nth-child(even) > td {
    background-color: var(--sw-surface-alt);
}
html[data-theme="dark"] .table-list > tbody > tr:hover > td {
    background-color: var(--sw-surface-sunk);
}
html[data-theme="dark"] .table-list > tbody > tr > td a.border-left {
    border-left-color: var(--sw-border);
}
html[data-theme="dark"] .table-list .label,
html[data-theme="dark"] .table-list .btn-default {
    color: var(--sw-text);
}
html[data-theme="dark"] .table-container .dataTables_wrapper,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--sw-text);
}

/* Knowledgebase article: "Was this answer helpful?" and related bits */
html[data-theme="dark"] .kb-rate-article {
    background-color: var(--sw-tint);
    color: var(--sw-tint-text);
}
html[data-theme="dark"] h3.kb-alsoread {
    background-color: var(--sw-surface-sunk);
    color: var(--sw-heading);
}
html[data-theme="dark"] .kb-article-details,
html[data-theme="dark"] .kb-article-details li {
    color: var(--sw-text-muted);
}
html[data-theme="dark"] .markdown-content table {
    background-color: var(--sw-surface);
}
html[data-theme="dark"] .markdown-content table > thead > tr > th {
    background-color: var(--sw-surface-sunk);
}
html[data-theme="dark"] .home-kb-search .form-control {
    background-color: var(--sw-surface-alt);
}

/* Client area: panels, ticket replies, invoices, upgrade, misc */
html[data-theme="dark"] .client-home-panels .panel > .panel-heading {
    background-color: var(--sw-surface-sunk);
    color: var(--sw-heading);
}
html[data-theme="dark"] .ticket-reply,
html[data-theme="dark"] .ticket-reply .message,
html[data-theme="dark"] .upgrade .products .product,
html[data-theme="dark"] .credit-card,
html[data-theme="dark"] div.credit-card {
    border-color: var(--sw-border);
    background-color: var(--sw-surface);
    color: var(--sw-text);
}
html[data-theme="dark"] .ticket-reply .user,
html[data-theme="dark"] .ticket-reply .attachments,
html[data-theme="dark"] .invoice-summary,
html[data-theme="dark"] .twofa-setup .backup-code,
html[data-theme="dark"] .store-promoted-product,
html[data-theme="dark"] div.product-details div.product-icon {
    border-color: var(--sw-border);
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text);
}
html[data-theme="dark"] .invoice-summary-table td.total-row,
html[data-theme="dark"] tr.masspay-total td {
    background-color: var(--sw-surface-sunk);
}
html[data-theme="dark"] .email-verification.success {
    background-color: var(--sw-green-tint);
    color: var(--sw-green-ink);
}
html[data-theme="dark"] .email-verification.failed {
    background-color: var(--sw-orange-tint);
    color: var(--sw-accent);
}
html[data-theme="dark"] .store-order-container .store-domain-tabs li a {
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text-soft);
}
html[data-theme="dark"] .store-order-container .store-domain-tabs li.active a {
    background-color: var(--sw-surface);
    color: var(--sw-heading);
}
html[data-theme="dark"] .pager li > a,
html[data-theme="dark"] .pager li > span,
html[data-theme="dark"] .pager .disabled > a,
html[data-theme="dark"] .pager .disabled > span {
    border-color: var(--sw-border);
    background-color: var(--sw-surface);
    color: var(--sw-link);
}
html[data-theme="dark"] .intl-tel-input .country-list {
    background-color: var(--sw-surface);
    color: var(--sw-text);
}
html[data-theme="dark"] .intl-tel-input .country-list .country.highlight {
    background-color: var(--sw-surface-sunk);
}
html[data-theme="dark"] #registration .sub-heading span,
html[data-theme="dark"] #registration .field,
html[data-theme="dark"] #registration .form-control {
    border-color: var(--sw-border-strong);
    background-color: var(--sw-surface-alt);
    color: var(--sw-text);
}
html[data-theme="dark"] mark,
html[data-theme="dark"] .mark {
    background-color: #5a4a10;
    color: #fff;
}
html[data-theme="dark"] .bg-warning {
    background-color: #33290f;
}
html[data-theme="dark"] .bg-danger {
    background-color: #38191a;
}
html[data-theme="dark"] div.dtr-modal div.dtr-modal-display {
    background-color: var(--sw-surface);
    color: var(--sw-text);
}
html[data-theme="dark"] div.dtr-modal div.dtr-modal-close {
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text);
}

/* Status boxes in lists (the white "Active" box on domains and services) */
html[data-theme="dark"] .status,
html[data-theme="dark"] .label.status {
    border-color: var(--sw-border-strong);
    background-color: var(--sw-surface-alt);
}
html[data-theme="dark"] .status-custom {
    border-color: currentColor;
    background-color: transparent;
    color: var(--sw-text);
}
html[data-theme="dark"] .status-active,
html[data-theme="dark"] .status-open,
html[data-theme="dark"] .status-completed {
    color: #7fd17f;
}
html[data-theme="dark"] .status-pending {
    color: #ff8f8a;
}
html[data-theme="dark"] .status-suspended {
    color: #f5c36a;
}
html[data-theme="dark"] .status-expired,
html[data-theme="dark"] .status-transferred.away {
    color: #6bc4e2;
}
html[data-theme="dark"] .status-cancelled {
    color: var(--sw-text-muted);
}
html[data-theme="dark"] .status-fraud,
html[data-theme="dark"] .status-answered {
    color: var(--sw-text);
}
html[data-theme="dark"] .label-success,
html[data-theme="dark"] .btn-success {
    background-color: #3b7d3b;
    border-color: #3b7d3b;
    color: #fff;
}
html[data-theme="dark"] .btn-success:hover {
    background-color: #489548;
}

/* Notifications drop-down (the popover under "Notifications") */
html[data-theme="dark"] .popover-user-notifications {
    border-color: var(--sw-border-strong);
}
html[data-theme="dark"] .popover-user-notifications ul li {
    border-bottom-color: var(--sw-border);
}
html[data-theme="dark"] .popover-user-notifications ul li a {
    color: var(--sw-text);
}
html[data-theme="dark"] .popover-user-notifications ul li a:hover {
    background-color: var(--sw-surface-sunk);
}
html[data-theme="dark"] .popover.bottom > .arrow:after {
    border-bottom-color: var(--sw-surface);
}
html[data-theme="dark"] .popover.top > .arrow:after {
    border-top-color: var(--sw-surface);
}
html[data-theme="dark"] .popover.left > .arrow:after {
    border-left-color: var(--sw-surface);
}
html[data-theme="dark"] .popover.right > .arrow:after {
    border-right-color: var(--sw-surface);
}

/* Account details: mailing-list box and its Yes/No switch */
html[data-theme="dark"] .marketing-email-optin,
html[data-theme="dark"] .well {
    border-color: var(--sw-border);
    background-color: var(--sw-surface);
    color: var(--sw-text);
}
html[data-theme="dark"] .bootstrap-switch {
    border-color: var(--sw-border-strong);
    background-color: var(--sw-surface-alt);
}
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-label {
    background-color: var(--sw-surface-sunk);
}
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-handle-on,
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-handle-off {
    color: var(--sw-text);
}
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-handle-off {
    background-color: var(--sw-surface-sunk);
}
html[data-theme="dark"] .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
    background-color: #3f8f3f;
    color: #fff;
}

/* Server list column headings (orderforms/swservers_vert use black text) */
html[data-theme="dark"] .grid-container.header > div {
    color: var(--sw-text-soft);
}

/* Client area: the row of count tiles (Services, Domains, Tickets...) */
html[data-theme="dark"] .tiles .tile {
    border-color: var(--sw-border);
    background-color: var(--sw-surface);
}
html[data-theme="dark"] .tiles .tile:hover,
html[data-theme="dark"] .tiles .tile:focus-within,
html[data-theme="dark"] .tiles .tile:active,
html[data-theme="dark"] .tiles .tile a:hover,
html[data-theme="dark"] .tiles .tile a:focus {
    background-color: var(--sw-surface-sunk) !important;
    color: var(--sw-link);
}
/* The tile for the page you are on has its light colour set inline in the
   page template, so it needs !important to be overridden. */
html[data-theme="dark"] .tiles .tile[style] {
    background-color: var(--sw-tint) !important;
}
html[data-theme="dark"] .tiles .tile:hover .icon {
    color: var(--sw-text-muted);
}
html[data-theme="dark"] .tile .icon {
    color: var(--sw-border-strong);
}
html[data-theme="dark"] .tile .title {
    color: var(--sw-text-muted);
}
html[data-theme="dark"] .tile .stat {
    color: var(--sw-link);
}

/* Cart and checkout (templates/orderforms/swstandard_cart) */
html[data-theme="dark"] #order-standard_cart .summary-container,
html[data-theme="dark"] #order-standard_cart .view-cart-items,
html[data-theme="dark"] #order-standard_cart .view-cart-tabs .tab-content,
html[data-theme="dark"] #order-standard_cart .sub-heading span,
html[data-theme="dark"] #order-standard_cart .order-summary,
html[data-theme="dark"] #order-standard_cart .account-select-container,
html[data-theme="dark"] #order-standard_cart .product,
html[data-theme="dark"] #order-standard_cart .panel {
    border-color: var(--sw-border);
    background-color: var(--sw-surface);
    color: var(--sw-text);
}
html[data-theme="dark"] #order-standard_cart .view-cart-items-header,
html[data-theme="dark"] #order-standard_cart .view-cart-items .item,
html[data-theme="dark"] #order-standard_cart .view-cart-tabs .nav-tabs > li > a {
    border-color: var(--sw-border);
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text);
}
html[data-theme="dark"] #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a {
    background-color: var(--sw-surface);
}
html[data-theme="dark"] #order-standard_cart .summary-container span,
html[data-theme="dark"] #order-standard_cart .summary-container .amt,
html[data-theme="dark"] #order-standard_cart .view-cart-items .item-title,
html[data-theme="dark"] #order-standard_cart .view-cart-items .item-price,
html[data-theme="dark"] #order-standard_cart .view-cart-items .item-price span {
    color: var(--sw-text);
}
html[data-theme="dark"] #order-standard_cart .summary-container a:not(.btn),
html[data-theme="dark"] #order-standard_cart .view-cart-items a:not(.btn) {
    color: var(--sw-link);
}
html[data-theme="dark"] #order-standard_cart .btn-default,
html[data-theme="dark"] #order-standard_cart button.btn-block {
    border-color: var(--sw-border-strong);
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text);
}

/* Order form: domain choice, product choice, config, view cart */
html[data-theme="dark"] #order-standard_cart .domain-selection-options .option,
html[data-theme="dark"] #order-standard_cart .categories-collapsed,
html[data-theme="dark"] #order-standard_cart .products .product,
html[data-theme="dark"] #order-standard_cart .product-info,
html[data-theme="dark"] #order-standard_cart .apply-credit-container,
html[data-theme="dark"] #order-standard_cart .cc-input-container,
html[data-theme="dark"] #order-standard_cart .view-cart-promotion-code,
html[data-theme="dark"] #order-standard_cart .mc-promo .body,
html[data-theme="dark"] #order-standard_cart .default-captcha,
html[data-theme="dark"] .spotlight-tlds,
html[data-theme="dark"] .suggested-domains .domain-lookup-suggestions-loader,
html[data-theme="dark"] .domain-renewals {
    border-color: var(--sw-border);
    background-color: var(--sw-surface);
    color: var(--sw-text);
}
html[data-theme="dark"] #order-standard_cart .domain-selection-options .option label,
html[data-theme="dark"] #order-standard_cart .categories-collapsed select {
    color: var(--sw-text);
}
html[data-theme="dark"] #order-standard_cart .domain-selection-options .option-selected {
    background-color: var(--sw-surface-sunk);
}
html[data-theme="dark"] #order-standard_cart .products .product header,
html[data-theme="dark"] #order-standard_cart .panel-addon .panel-price,
html[data-theme="dark"] #order-standard_cart .view-cart-gateway-checkout,
html[data-theme="dark"] #order-standard_cart .view-cart-items .item:nth-child(even),
html[data-theme="dark"] .domain-renewals .domain-renewal:nth-child(even) {
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text);
}
html[data-theme="dark"] #order-standard_cart .products .product header span,
html[data-theme="dark"] #order-standard_cart .panel-addon .panel-body label,
html[data-theme="dark"] #order-standard_cart .order-summary .btn-continue-shopping,
html[data-theme="dark"] #order-standard_cart .btn-remove-from-cart {
    color: var(--sw-text);
}
html[data-theme="dark"] #order-standard_cart .view-cart-items .item {
    background-color: var(--sw-surface);
    color: var(--sw-text);
}
html[data-theme="dark"] #order-standard_cart .view-cart-items .item-domain {
    color: var(--sw-link);
}
html[data-theme="dark"] #order-standard_cart .view-cart-items-header {
    background-color: var(--sw-blue-dark);
}
html[data-theme="dark"] #order-standard_cart .sub-heading span,
html[data-theme="dark"] #order-standard_cart .sub-heading-borderless span {
    background-color: var(--sw-bg);
    color: var(--sw-link);
}
html[data-theme="dark"] #order-standard_cart .transfer-eligible {
    border-color: #2f5a1f;
    background-color: #1c2f15;
    color: #c4e8a0;
}
html[data-theme="dark"] #order-standard_cart .transfer-not-eligible {
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text-soft);
}
html[data-theme="dark"] .spotlight-tld,
html[data-theme="dark"] .domain-promo-box {
    border-color: var(--sw-border);
    background-color: var(--sw-surface);
    color: var(--sw-text);
}
html[data-theme="dark"] .spotlight-tld .unavailable,
html[data-theme="dark"] .spotlight-tld .invalid {
    border-color: var(--sw-border);
    background-color: var(--sw-surface-sunk);
    color: var(--sw-text-muted);
}
html[data-theme="dark"] #order-standard_cart .panel-addon .panel-price,
html[data-theme="dark"] #order-standard_cart .panel-addon .panel-body,
html[data-theme="dark"] #order-standard_cart .product-info,
html[data-theme="dark"] #order-standard_cart .product-info * {
    color: var(--sw-text);
}
html[data-theme="dark"] #order-standard_cart .panel-addon-selected .panel-price {
    background-color: #3b7d3b;
    color: #fff;
}
html[data-theme="dark"] #order-standard_cart .panel-addon .panel-add {
    background-color: #3b7d3b;
}
html[data-theme="dark"] .alert a,
html[data-theme="dark"] .alert .alert-link {
    color: #fff;
    text-decoration: underline;
}
html[data-theme="dark"] #order-standard_cart .panel-addon-selected .panel-add {
    background-color: #5c2a2a;
    color: #f4b9b2;
}

/* Domain search and price list */
html[data-theme="dark"] .input-group-box,
html[data-theme="dark"] .input-group-box .form-control,
html[data-theme="dark"] .domain-promo-box {
    border-color: var(--sw-border-strong);
    background-color: var(--sw-surface);
    color: var(--sw-text);
}
html[data-theme="dark"] .domain-pricing .tld-row {
    border-color: var(--sw-border);
    background-color: var(--sw-surface);
    color: var(--sw-text);
}
html[data-theme="dark"] .domain-pricing .tld-row.highlighted {
    background-color: var(--sw-tint);
}
html[data-theme="dark"] .domain-pricing .tld-row.highlighted strong,
html[data-theme="dark"] .domain-pricing .tld-row.highlighted small {
    color: var(--sw-text-soft);
}
html[data-theme="dark"] .domain-pricing .tld-pricing-header,
html[data-theme="dark"] .domain-pricing .tld-pricing-header div,
html[data-theme="dark"] .domain-pricing .tld-pricing-header .row > div {
    background-color: var(--sw-surface-sunk) !important;
    color: var(--sw-text-soft);
}
html[data-theme="dark"] #order-standard_cart .field,
html[data-theme="dark"] #order-standard_cart .form-control {
    border-color: var(--sw-border-strong);
    background-color: var(--sw-surface-alt);
    color: var(--sw-text);
}
html[data-theme="dark"] .domain-promo-box h3,
html[data-theme="dark"] .domain-promo-box p.small {
    color: var(--sw-text-soft);
}

/* -----------------------------------------------------
   6. Theme button (header.tpl)
   ----------------------------------------------------- */
html[data-theme="dark"] .sw-theme-toggle {
    border-color: var(--sw-border-strong);
    color: var(--sw-text-soft);
}

}