/* Dark mode.
   Every rule starts with "html.dark", so nothing here does anything until the page has <html class="dark">
   (the only exception is the look of the toggle button itself, at the top).
   - Views/Shared/_LayoutHead.cshtml adds the class while the page loads when the Theme cookie is "dark" (no white flash).
   - toggleTheme() in Scripts/main.js switches it and saves the cookie (button in Views/Shared/_LoginPartial.cshtml).
   Only pages using _LayoutHead load this file, so the customer checkout never turns dark.
   Only colours change here: no sizes, spacing, rounding or positions.

   File parts:
   1. Toggle button
   2. GENERATED from Site.css: every grey text colour, background and border in Site.css, mapped to its dark version
   3. Hand-written fixes (they come after part 2, so they win when both match the same element)
   4. GENERATED from the views: the most common colours written directly on page elements (style="...")

   Colours: page #15141B, panels #1E1D26, fields/menus #26252F, hover #2D2C38, borders #33323E
            text #E9E8F0, body text #CFCDDB, secondary text #A9A6B8, purple text #A99CF5, teal text #5ED3C5 */


/* 1. Toggle button (top bar, next to the account menu): the moon shows in light mode, the sun in dark mode */

.navbar-nav > li > a.themeToggle {
    display: flex;
    align-items: center;
    height: 54px;
    padding: 0 12px;
    color: #6F6B80;
}

    .navbar-nav > li > a.themeToggle .themeToggle-sun {
        display: none;
    }

html.dark .navbar-nav > li > a.themeToggle {
    color: #E8B91B;
}

    html.dark .navbar-nav > li > a.themeToggle .themeToggle-moon {
        display: none;
    }

    html.dark .navbar-nav > li > a.themeToggle .themeToggle-sun {
        display: inline-block;
    }


/* 2. GENERATED from Site.css (grey shades only; teal/orange/red stay, purples and dark teal get lighter versions).
      Text: dark grey -> #E9E8F0, mid grey -> #A9A6B8. Backgrounds: white -> #1E1D26, very light grey -> #22212B,
      light grey -> #33323E. Light borders -> #33323E. */

html.dark body {
    background-color: #1E1D26;
    color: #A9A6B8;
}

html.dark .grayPanel {
    border-color: #33323E;
    background-color: #22212B;
}

html.dark .companyTable {
    border-top-color: #33323E;
    border-bottom-color: #33323E;
}

html.dark .usersTable > thead > tr > th {
    border-bottom-color: #33323E;
}

html.dark .usersTable > tbody > tr > td:nth-child(2) {
    color: #A9A6B8;
}

html.dark .checkoutPagesTable > thead > tr > th {
    color: #A9A6B8;
    border-bottom-color: #33323E;
}

html.dark .checkoutPagesTable > tbody > tr:hover {
    background-color: #22212B;
}

html.dark .checkoutPagesTable > tbody > tr > td {
    color: #E9E8F0;
}

html.dark .navBack,
html.dark .navNext {
    border-color: #33323E;
}

html.dark .navPage:hover,
html.dark .navPage.active {
    background-color: #22212B;
}

html.dark .popupLoading {
    background-color: #1E1D26;
}

html.dark #popupLoading .title {
    color: #E9E8F0;
}

html.dark #popupLoading .text {
    color: #A9A6B8;
}

html.dark .paymentProvider {
    border-color: #33323E;
}

html.dark a.dropdown-toggle,
html.dark .md-select-value .md-select-icon {
    color: #A9A6B8;
}

html.dark .caret {
    color: #E9E8F0;
}

html.dark .btn .caret,
html.dark .nav .caret,
html.dark .md-button > div > span {
    border-bottom-color: #33323E;
}

html.dark .navbar.navbar-fixed-top {
    background-color: #1E1D26;
}

html.dark .dropdown-menu > li > a:hover,
html.dark .dropdown-menu > li > a:focus {
    background-color: #22212B;
}

html.dark .dropdown-menu.buttons > li > a {
    color: #E9E8F0;
}

html.dark .dropdown-menu.buttons > li > a:after {
    background-color: #33323E;
}

html.dark .dropdown-menu.buttons > li > a:hover,
html.dark .dropdown-menu.buttons > li > a:focus {
    background-color: #33323E;
}

html.dark .dropdown-menu.buttons:before {
    border-bottom-color: #33323E;
}

html.dark .dropdown-menu.buttons1 > a {
    color: #E9E8F0;
}

html.dark .dropdown-menu.buttons1 > a:after {
    background-color: #33323E;
}

html.dark .form-control,
html.dark .input-group-addon,
html.dark .form-control:focus {
    border-color: #33323E;
}

html.dark .md-dropdown-menu {
    background-color: #1E1D26;
}

html.dark .md-dropdown-menu-item {
    color: #A9A6B8;
}

html.dark .md-dropdown-menu-item:hover,
html.dark .md-dropdown-menu-item:focus {
    background-color: #22212B;
}

html.dark .md-dropdown-menu-item.selected {
    background-color: #22212B;
}

html.dark md-select-menu .material-checkbox {
    color: #E9E8F0;
}

html.dark .nav-pills > li.active > a,
html.dark .nav-pills > li.active > a:hover,
html.dark .nav-pills > li.active > a:focus {
    color: #A9A6B8;
    background-color: #1E1D26;
}

html.dark .nav-pills > li > a {
    color: #A9A6B8;
}

html.dark .nav-pills > li > a:hover,
html.dark .nav-pills > li > a:focus {
    background-color: #33323E;
}

html.dark .customerNote {
    background-color: #22212B;
    border-color: #33323E;
}

html.dark .infoTitle {
    color: #A9A6B8;
}

html.dark .infoTitle1 {
    color: #A9A6B8;
}

html.dark .infoContent {
    color: #A99CF5;
}

html.dark .infoRow {
    background-color: #1E1D26;
    border-color: #33323E;
}

html.dark .infoRow1 {
    background-color: #1E1D26;
    border-color: #33323E;
}

html.dark .sideNote {
    background-color: #22212B;
    color: #A9A6B8;
}

html.dark .popupWindow > .popupContainer {
    background-color: #1E1D26;
}

html.dark .popupWindow1 {
    background-color: #1E1D26;
}

html.dark .infoTileTitle {
    color: #E9E8F0;
}

html.dark .notifications {
    color: #A9A6B8;
}

html.dark md-nav-bar li.md-gray a.md-button._md-nav-button > span {
    color: #E9E8F0;
}

html.dark md-nav-bar li .md-button._md-nav-button > span {
    color: #E9E8F0;
}

html.dark md-checkbox > div.md-label {
    color: #E9E8F0;
}

html.dark .hint {
    color: #E9E8F0;
}

html.dark .md-select-value > span:not(.md-select-icon) {
    color: #E9E8F0;
}

html.dark md-input-container .md-input,
html.dark md-select .md-select-value {
    border-color: #33323E;
}

html.dark md-input-container label:not(.md-no-float):not(.md-container-ignore),
html.dark md-input-container:not([md-no-float]) .md-select-placeholder span:first-child {
    color: #A9A6B8;
}

html.dark md-input-container textarea {
    background-color: #22212B !important;
}

html.dark md-input-container .md-char-counter {
    color: #A9A6B8;
}

html.dark .md-primary.md-red:not(.md-raised) {
    border-color: #33323E;
}

html.dark .md-primary.md-white3 {
    background-color: #1E1D26;
    color: #E9E8F0;
}

html.dark .md-primary.md-white3:not([disabled]):hover {
    background-color: #22212B;
}

html.dark .md-primary.md-white {
    background-color: #22212B;
    color: #A9A6B8;
}

html.dark .md-primary.md-white:not([disabled]):hover {
    background-color: #33323E;
}

html.dark .md-raised.md-primary.md-white,
html.dark .md-raised.md-primary.md-white.md-focused {
    color: #A99CF5 !important;
    background-color: #1E1D26 !important;
}

html.dark .md-raised.md-primary.md-white:not([disabled]):hover {
    background-color: #33323E;
}

html.dark .md-raised.md-primary.md-white2 {
    color: #E9E8F0;
    background-color: #1E1D26;
    border-color: #33323E;
}

html.dark .md-raised.md-primary.md-white2:not([disabled]):hover {
    background-color: #1E1D26;
}

html.dark .md-button.md-primary.md-white4 {
    background-color: #1E1D26;
}

html.dark .md-button.md-primary.md-white4:not([disabled]):hover {
    background-color: #22212B;
}

html.dark .md-button.md-primary.md-white5 {
    border-color: #33323E;
    color: #E9E8F0;
    background-color: #1E1D26;
}

html.dark .md-button.md-primary.md-white5:not([disabled]):hover {
    background-color: #33323E;
}

html.dark .md-button.md-primary.md-white6 {
    border-color: #33323E;
    background-color: #1E1D26;
}

html.dark .md-button.md-primary.md-white6:not([disabled]):hover {
    background-color: #33323E;
}

html.dark .md-raised.md-primary.md-lightgray {
    background-color: #22212B;
}

html.dark .md-raised.md-primary.md-lightgray:not([disabled]):hover {
    background-color: #33323E;
}

html.dark .md-raised.md-primary.md-lightgray1 {
    background-color: #33323E;
    color: #A9A6B8;
}

html.dark .md-raised.md-primary.md-lightgray1:not([disabled]):hover {
    background-color: #33323E;
}

html.dark .md-raised.md-primary.md-gray {
    background-color: #33323E;
}

html.dark .md-raised.md-primary.md-gray1 {
    color: #A9A6B8;
    background-color: #33323E;
}

html.dark .md-raised.md-primary.md-gray1:not([disabled]):hover {
    background-color: #33323E;
}

html.dark .material-checkbox > .material-checkbox-ripple-container:disabled + .material-checkbox-title {
    color: #A9A6B8;
}

html.dark .material-checkbox > .material-checkbox-ripple-container.checked + span::after {
    border-color: #33323E;
}

html.dark .register-navbar {
    border-bottom-color: #33323E;
}

html.dark .topbar-top {
    background-color: #1E1D26;
    border-bottom-color: #33323E;
}

html.dark .topbar-top-separator {
    background-color: #33323E;
}

html.dark .topbar-top-left-toggle:hover {
    background-color: #22212B;
}

html.dark .paddingBoxTitle {
    color: #A9A6B8;
}

html.dark .paddingBoxTitle > div {
    color: #E9E8F0;
}

html.dark .separator {
    background-color: #33323E;
}

html.dark .checkoutPageStep {
    border-color: #33323E;
}

html.dark .checkoutPageStep > div:nth-child(1) {
    color: #E9E8F0;
}

html.dark .checkoutPageStep > div:nth-child(2) {
    background-color: #33323E;
}

html.dark .checkoutPageStep > div:nth-child(3) > div {
    background-color: #33323E;
}

html.dark .checkoutDetailsTitle > div:nth-child(2) {
    background-color: #33323E;
}

html.dark .checkoutDetailsSubTitle {
    color: #E9E8F0;
}

html.dark .checkoutLink {
    border-color: #33323E;
}

html.dark .checkoutLink > div:nth-child(1) {
    color: #E9E8F0;
}

html.dark .checkoutLink > div:nth-child(2) {
    color: #A9A6B8;
}

html.dark .checkoutDetailsSpec > div {
    color: #E9E8F0;
}

html.dark .checkoutDetailsSpecHeader {
    border-color: #33323E;
}

html.dark .checkoutDetailsSpecHeader > div {
    color: #E9E8F0;
}

html.dark .checkoutDetailsSpec2 > div {
    color: #A9A6B8;
}

html.dark .paymentType > div {
    color: #E9E8F0;
}

html.dark .tableHeader {
    color: #E9E8F0;
}

html.dark .infiniteScrollTable {
    background-color: #1E1D26;
}

html.dark .infiniteScrollTable .infiniteScrollTable-header > div {
    border-bottom-color: #33323E;
}

html.dark .infiniteScrollTable div[md-virtual-repeat] > div:hover {
    background-color: #33323E;
}

html.dark .infiniteScrollTable .filterContainer {
    background-color: #1E1D26;
    color: #E9E8F0;
}

html.dark .statusIndicator {
    background-color: #33323E;
}

html.dark .statementsTable > thead > tr > th {
    border-bottom-color: #33323E;
}

html.dark .priceTier .priceTierName {
    color: #E9E8F0;
}

html.dark .categoryItem {
    background-color: #22212B;
    color: #E9E8F0;
    border-color: #33323E;
}

html.dark .categoryItem:hover {
    background-color: #22212B;
    border-color: #33323E;
}

html.dark .categoryItem.selected {
    border-color: #33323E;
}

html.dark .whiteBox {
    background-color: #1E1D26;
}

html.dark .invoiceTable > tbody {
    border-bottom-color: #33323E;
}

html.dark .invoiceTable > tbody > tr {
    background-color: #22212B;
}

html.dark .invoiceTotals {
    border-color: #33323E;
    background-color: #22212B;
}

html.dark .orderTable > tbody {
    border-bottom-color: #33323E;
}

html.dark .orderTable > tbody > tr {
    background-color: #22212B;
}

html.dark .chargesTable > tbody > tr {
    border-bottom-color: #33323E;
}

html.dark .chargesTable > tbody > tr:hover {
    background-color: #33323E;
}

html.dark .invoicesTable2 > tbody > tr {
    border-bottom-color: #33323E;
}

html.dark .couponsTable > tbody > tr:hover {
    background-color: #33323E;
}

html.dark .redemptionsTable > tbody > tr:hover {
    background-color: #33323E;
}

html.dark .subInfoContainer {
    color: #A9A6B8;
}

html.dark .subInfoContainer > span:nth-of-type(2) {
    color: #E9E8F0;
}

html.dark .subscribersTable > tbody > tr:hover {
    background-color: #33323E;
}

html.dark .searchContainer {
    border-color: #33323E;
    color: #A9A6B8;
}

html.dark .breadcrumb {
    background-color: #1E1D26;
}

html.dark .breadcrumb a {
    color: #E9E8F0;
    border-bottom-color: #33323E;
}

html.dark .breadcrumb a.active {
    color: #A99CF5;
}

html.dark .HomeTimePeriodNav {
    border-color: #33323E;
}

html.dark .HomeTimePeriodNav li:not(:last-child):after {
    background-color: #33323E;
}

html.dark .HomeTimePeriodNav li a {
    color: #A9A6B8;
}

html.dark .HomeTimePeriodNav li a:hover:not(.selected) {
    background-color: #33323E;
}

html.dark .HomeTimePeriodNav li a.selected {
    background-color: #33323E;
}

html.dark .settingsHeader {
    border-color: #33323E;
    background-color: #22212B;
}

html.dark .settingsHeader > div > div:first-child {
    color: #A9A6B8;
}

html.dark .checkoutSubscriptionsTable {
    border-color: #33323E;
    background-color: #1E1D26;
}

html.dark .checkoutSubscriptionsTable > thead > tr {
    background-color: #22212B;
}

html.dark .checkoutSubscriptionsTable > thead > tr > th {
    color: #A9A6B8;
    border-bottom-color: #33323E;
}

html.dark .checkoutSubscriptionsTable > tbody > tr {
    color: #E9E8F0;
    border-bottom-color: #33323E;
}

html.dark .transactionResultDetail:not(:last-child)::after {
    background-color: #33323E;
}

html.dark .checkoutProduct {
    border-color: #33323E;
}

html.dark .checkoutProduct .productTitle {
    color: #E9E8F0;
}

html.dark .checkoutHeader {
    background-color: #1E1D26;
}

html.dark .checkoutFooter {
    background-color: #22212B;
}

html.dark .checkoutFooter > div:nth-child(1) > a:nth-child(1) {
    color: #A9A6B8;
}

html.dark .checkoutProductsTitle {
    color: #E9E8F0;
}

html.dark .checkoutSearch {
    background-color: #22212B;
}

html.dark .cartPopupContainer {
    background-color: #22212B;
}

html.dark .cartPopupHeader {
    background-color: #1E1D26;
    border-bottom-color: #33323E;
}

html.dark .cartPopupHeader .cartPopupTitle {
    color: #A9A6B8;
}

html.dark .cartProduct {
    background-color: #1E1D26;
    border-color: #33323E;
}

html.dark .cartBillableAddon {
    background-color: #1E1D26;
    border-color: #33323E;
}

html.dark .cartButton {
    border-color: #33323E;
}

html.dark .cartButton:hover {
    background-color: #22212B;
}

html.dark .cartQuantityText {
    color: #E9E8F0;
    border-left-color: #33323E;
    border-right-color: #33323E;
}

html.dark .cartQuantitySliderText {
    color: #E9E8F0;
    border-bottom-color: #33323E;
}

html.dark .cartCustDetail > div:nth-child(2) {
    color: #A9A6B8;
}

html.dark .productMorePopupContainer {
    background-color: #1E1D26;
}

html.dark .productMorePopupContainer .productMorePopupHeader {
    background-color: #1E1D26;
    border-bottom-color: #33323E;
}

html.dark .productMorePopupContainer .productMorePopupHeader > div {
    color: #E9E8F0;
}

html.dark .productMorePopupContainer .productMoreTitle {
    color: #E9E8F0;
}

html.dark .productMorePopupContainer .productMoreDescription {
    color: #E9E8F0;
}

html.dark .cartCertification {
    color: #A9A6B8;
}

html.dark #creditCardDataHelper {
    border-color: #33323E;
}

html.dark #creditCardDataHelper .creditCardDataHelperHeader {
    background-color: #1E1D26;
}

html.dark .transactionDetails {
    border-color: #33323E;
}

html.dark .multipleFiles .multipleFilesDescription {
    color: #A9A6B8;
}

html.dark .multipleFiles.dropBox {
    background-color: #1E1D26;
}

html.dark .multipleFiles.dropBox::after {
    background-color: #1E1D26;
}

html.dark .multipleFiles.is-dragover::after {
    background-color: #33323E;
}

html.dark .checkoutBodyContainer {
    background-color: #1E1D26;
}

html.dark .checkoutSummaryContainer {
    border-color: #33323E;
    background-color: #22212B;
}

html.dark .checkoutSummaryTitle {
    color: #E9E8F0;
}

html.dark .checkoutTotal {
    color: #E9E8F0;
}

html.dark .checkoutAmountPartial {
    color: #A9A6B8;
}

html.dark .paymentDetailsTitle {
    color: #E9E8F0;
}

html.dark .customerDetailsTitle {
    color: #E9E8F0;
}

html.dark .checkoutResultMessage {
    color: #E9E8F0;
}

html.dark .transactionResultTotal {
    color: #E9E8F0;
}

html.dark .paymentInProcessPopupText {
    color: #E9E8F0;
}

html.dark .paymentInProcessPopupSubText {
    color: #A9A6B8;
}

html.dark .customerPanelFooterContainer {
    background-color: #22212B;
}

html.dark .cHeader {
    background-color: #1E1D26;
}

html.dark .cFooterOuter {
    background-color: #22212B;
}

html.dark .popup1 .popup1Container {
    background-color: #1E1D26;
}

html.dark .md-button.live-step {
    background-color: #1E1D26 !important;
}

html.dark .md-button.live-step > div > div:nth-child(1) {
    color: #E9E8F0;
}

html.dark .md-button.live-step > div > div:nth-child(2) {
    color: #E9E8F0;
}

html.dark .liveProgress .md-container {
    background-color: #33323E;
}

html.dark .business {
    border-color: #33323E;
}

html.dark .checkoutFooterRight a {
    color: #A9A6B8;
}

html.dark .popupWindow > .popupContainer {
    background-color: #1E1D26;
}

html.dark .productMorePopupContainer .productMoreDescription {
    color: #E9E8F0;
}

html.dark .productMorePopupContainer {
    background-color: #1E1D26;
}

html.dark .productMorePopupContainer .productMorePopupHeader {
    background-color: #1E1D26;
    border-bottom-color: #33323E;
}

html.dark .productMorePopupContainer .productMorePopupHeader > div {
    color: #E9E8F0;
}

html.dark .checkoutHeader {
    background-color: #1E1D26;
}

html.dark .checkoutSearchMobile {
    background-color: #22212B;
}

html.dark .checkoutProduct {
    border-color: #33323E;
}

html.dark .checkoutProduct .productTitle {
    color: #E9E8F0;
}

html.dark .cartProduct {
    background-color: #1E1D26;
    border-color: #33323E;
}

html.dark .cartBillableAddon {
    background-color: #1E1D26;
    border-color: #33323E;
}

html.dark .cartQuantityText {
    color: #E9E8F0;
    border-left-color: #33323E;
    border-right-color: #33323E;
}

html.dark .cartQuantitySliderText {
    color: #E9E8F0;
    border-bottom-color: #33323E;
}

html.dark .cartCustDetail > div:nth-child(2) {
    color: #A9A6B8;
}


/* 3. Hand-written fixes */

/* Tells the browser the page is dark, so it draws its own parts (scrollbars and their arrows, native inputs) dark */
html.dark {
    color-scheme: dark;
}

/* Page (body[style]: the layouts set the grey background inline) */
html.dark body,
html.dark body[style] {
    background-color: #15141B !important;
    color: #CFCDDB;
}

/* backoffice settings pages make these white (inline <style> in its _TopbarPartial.cshtml) */
html.dark .main-body,
html.dark .main-body-content {
    background-color: transparent;
}

html.dark hr {
    border-top-color: #33323E;
}


/* Top bar of the root pages (login, Companies...: Views/Shared/_Layout.cshtml) */

/* The default logo is a black picture: show it white, like the official logo-white.png the sidebar uses */
html.dark img[src$="/Content/Images/logo-black.png"] {
    filter: brightness(0) invert(1);
}

/* The light line under that top bar is 3 one-pixel strips with these inline colours: give them the top bar colour,
   so the bar simply ends where the darker page starts (this also hides the button that overlaps the strips) */
html.dark [style*="background-color: #F6F5FA"],
html.dark [style*="background-color: #F3F4F8"],
html.dark [style*="background-color: #F8F8FA"] {
    background-color: #1E1D26 !important;
}


/* Top bar and sidebar */

html.dark .topbar-top {
    background: #1E1D26;
    border-bottom-color: #2A2933;
}

html.dark .topbar-top-separator {
    background-color: #33323E;
}

/* The collapse arrow is a dark image, so it is inverted. The filter also inverts the hover background:
   #ECECEC here shows on screen as dark grey (#2D2D2D). */
html.dark .topbar-top-left-toggle {
    filter: invert(0.88) hue-rotate(180deg);
}

    html.dark .topbar-top-left-toggle:hover {
        background-color: #ECECEC;
    }

html.dark .nav > li > a:hover,
html.dark .nav > li > a:focus,
html.dark .nav .open > a,
html.dark .nav .open > a:hover,
html.dark .nav .open > a:focus {
    background-color: #2D2C38;
}

/* A <style> in EditorTemplates/String.cshtml gives EVERY .dropdown-toggle a light background (meant for the
   "Regions" drop-down of the country picker). It also hits the account menu, which must stay part of the top bar. */
html.dark .dropdown-toggle,
html.dark .dropdown-panel {
    background-color: #26252F;
    border-color: #45445A;
    color: #E9E8F0;
}

html.dark #accountDropdown {
    background-color: transparent;
    border-color: transparent;
}

html.dark .sidebar {
    background: #1C1B24;
}

html.dark .sidebar-nav {
    background: #22212B;
}


/* Panels and popups */

html.dark .whiteBox,
html.dark .infoRow,
html.dark .infoRow1,
html.dark .infiniteScrollTable,
html.dark .popupLoading,
html.dark .popupWindow > .popupContainer,
html.dark .popupWindow1,
html.dark .breadcrumb,
html.dark .modal-content,
html.dark .popover,
html.dark .well,
html.dark .panel,
html.dark md-card,
html.dark md-dialog {
    background-color: #1E1D26;
    border-color: #33323E;
    color: #CFCDDB;
}

html.dark .grayPanel,
html.dark .settingsHeader,
html.dark .panel-heading,
html.dark .modal-header,
html.dark .modal-footer {
    background-color: #1A1922;
    border-color: #33323E;
}

html.dark md-content {
    background-color: transparent;
    color: inherit;
}

/* Loading circles: the dashboard page gives them a white background in its own <style> */
html.dark md-progress-circular {
    background: rgba(30, 29, 38, 0.7);
}


/* Text */

html.dark h1,
html.dark h6,
html.dark .paddingBoxTitle > div,
html.dark .infoTileTitle,
html.dark #popupLoading .title,
html.dark .hint,
html.dark md-checkbox > div.md-label,
html.dark .md-select-value > span:not(.md-select-icon),
html.dark .HomeTimePeriodNav li a.selected {
    color: #E9E8F0;
}

html.dark h2, html.dark h3, html.dark h4, html.dark h5,
html.dark .notes,
html.dark .paddingBoxTitle,
html.dark .infoTitle,
html.dark .infoTitle1,
html.dark .infoTileDescription,
html.dark .settingsHeader > div > div:first-child,
html.dark #popupLoading .text,
html.dark .langSelector:not(.selected),
html.dark a.md-button.md-primary.md-gray:not(.md-raised),
html.dark .companyTable > tbody > tr > td:nth-child(1),
html.dark .usersTable > thead > tr > th,
html.dark .statementsTable > thead > tr > th,
html.dark .statementsTable > tbody > tr > td:nth-child(1),
html.dark .invoicesTable2 > tbody > tr > td:first-child,
html.dark .customersTable .customersTable-item > a > div:nth-of-type(1),
html.dark .transactionsTable .transactionsTable-item > a > div:nth-of-type(1),
html.dark .invoicesTable .invoicesTable-item > div:nth-of-type(1),
html.dark .transactionResultDetail > div:nth-child(1),
html.dark .caret,
html.dark a.dropdown-toggle {
    color: #A9A6B8;
}

/* Tabs (md-nav-bar): unselected light grey, the selected one keeps its teal */
html.dark md-nav-bar li:not([aria-selected=true]) .md-button._md-nav-button > span {
    color: #A9A6B8;
}

html.dark md-nav-bar li[aria-selected=true] .md-button._md-nav-button > span {
    color: #5ec4ba;
}


/* Tables */

html.dark .infiniteScrollTable .infiniteScrollTable-header {
    background-color: #2A2836;
}

    html.dark .infiniteScrollTable .infiniteScrollTable-header > div {
        border-bottom-color: #33323E;
    }

html.dark .infiniteScrollTable div[md-virtual-repeat] > div:hover {
    background: #2D2C38;
}

html.dark .infiniteScrollTable .filterContainer {
    background-color: #26252F;
    color: #E9E8F0;
}

html.dark .table > thead > tr > th,
html.dark .table > tbody > tr > th,
html.dark .table > tbody > tr > td,
html.dark .table > tfoot > tr > td {
    border-color: #33323E;
}

html.dark .table > thead > tr > th {
    color: #E9E8F0;
}

html.dark .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #22212B;
}

html.dark .table-hover > tbody > tr:hover,
html.dark .table > tbody > tr:hover > td {
    background-color: #2D2C38;
}


/* Form fields (Angular Material and Bootstrap) */

html.dark md-input-container .md-input,
html.dark md-select .md-select-value {
    color: #E9E8F0;
    border-color: #45445A;
}

/* The backoffice dashboard gives select boxes a light background in its own <style> */
html.dark .md-select-value {
    background-color: transparent;
}

/* Site.css gives text boxes a light grey background with !important */
html.dark md-input-container textarea {
    background-color: #26252F !important;
}

html.dark md-input-container label:not(.md-no-float):not(.md-container-ignore),
html.dark md-input-container:not([md-no-float]) .md-select-placeholder span:first-child,
html.dark md-input-container .md-placeholder,
html.dark md-input-container .md-char-counter {
    color: #A9A6B8;
}

html.dark md-checkbox:not(.md-checked) .md-icon,
html.dark md-radio-button .md-off {
    border-color: #8A8799;
}

html.dark md-checkbox[disabled] > div.md-label,
html.dark .md-input[disabled],
html.dark md-select[disabled] .md-select-value {
    color: #7E7B8E;
}

html.dark .md-datepicker-input {
    color: #E9E8F0;
}

html.dark .md-datepicker-input-container {
    border-bottom-color: #45445A;
}

html.dark .md-datepicker-calendar-pane,
html.dark .md-datepicker-calendar,
html.dark .md-calendar {
    background: #26252F;
    color: #E9E8F0;
}

html.dark .md-calendar .md-calendar-day-header {
    background: #2D2C38;
    color: #A9A6B8;
}

/* Plain inputs (not Angular Material ones), e.g. the HH:MM boxes on Exports: the browser draws them white */
html.dark input[type="text"]:not(.md-input),
html.dark input[type="number"]:not(.md-input),
html.dark input[type="email"]:not(.md-input),
html.dark input[type="password"]:not(.md-input),
html.dark input[type="search"]:not(.md-input),
html.dark input[type="tel"]:not(.md-input),
html.dark input:not([type]):not(.md-input),
html.dark select,
html.dark textarea:not(.md-input),
html.dark .form-control,
html.dark .input-group-addon,
html.dark .btn-default {
    background-color: #26252F;
    border-color: #45445A;
    color: #E9E8F0;
}

    html.dark .btn-default:hover,
    html.dark .btn-default:focus {
        background-color: #2D2C38;
        color: white;
    }

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #7E7B8E;
}


/* Menus and drop-downs (most of them are added at the end of <body>) */

html.dark md-select-menu,
html.dark md-select-menu md-content,
html.dark md-menu-content,
html.dark .md-dropdown-menu,
html.dark .dropdown-menu,
html.dark .md-multipleSelect-header,
html.dark .md-multipleSelect-header input {
    background-color: #26252F !important;
    border-color: #33323E;
    color: #E9E8F0;
}

html.dark md-option,
html.dark md-menu-item > .md-button,
html.dark .md-dropdown-menu-item,
html.dark .dropdown-menu > li > a,
html.dark md-select-menu .material-checkbox,
html.dark .material-checkbox-title {
    color: #E9E8F0 !important;
}

html.dark md-option:hover,
html.dark md-option:focus,
html.dark md-option[selected],
html.dark md-menu-item > .md-button:hover,
html.dark .md-dropdown-menu-item:hover,
html.dark .md-dropdown-menu-item:focus,
html.dark .dropdown-menu > li > a:hover,
html.dark .dropdown-menu > li > a:focus {
    background-color: #2D2C38 !important;
}

html.dark .dropdown-menu .divider {
    background-color: #33323E;
}

/* Tick boxes inside multi-select lists (e.g. countries): Angular Material draws them near-black.
   Same light grey as the "Select All" box above them (Site.css .material-checkbox-title::before) */
html.dark md-option.md-checkbox-enabled:not([selected]) .md-icon {
    border-color: #c2c7cc;
}


/* White buttons (Site.css md-white*) */

html.dark .md-button.md-primary.md-white,
html.dark .md-button.md-primary.md-white3,
html.dark .md-button.md-primary.md-white4,
html.dark .md-button.md-primary.md-white5,
html.dark .md-button.md-primary.md-white6 {
    background-color: #1E1D26;
    border-color: #33323E;
}

html.dark .md-button.md-primary.md-white,
html.dark .md-button.md-primary.md-white3,
html.dark .md-button.md-primary.md-white5 {
    color: #E9E8F0;
}

    html.dark .md-button.md-primary.md-white:not([disabled]):hover,
    html.dark .md-button.md-primary.md-white3:not([disabled]):hover,
    html.dark .md-button.md-primary.md-white4:not([disabled]):hover,
    html.dark .md-button.md-primary.md-white5:not([disabled]):hover,
    html.dark .md-button.md-primary.md-white6:not([disabled]):hover {
        background-color: #2D2C38;
    }

html.dark .md-raised.md-primary.md-white,
html.dark .md-raised.md-primary.md-white.md-focused {
    background-color: #26252F !important;
    color: #A99CF5 !important;
}

html.dark .md-raised.md-primary.md-white2 {
    background-color: #26252F;
    border-color: #33323E;
    color: #E9E8F0;
}

html.dark .md-raised.md-primary.md-lightgray {
    background-color: #2D2C38;
    color: #A9A6B8;
}


/* Date range picker (bootstrap-daterangepicker) */

html.dark .daterangepicker,
html.dark .daterangepicker .calendar-table {
    background-color: #26252F;
    border-color: #33323E;
    color: #E9E8F0;
}

    html.dark .daterangepicker:after {
        border-bottom-color: #26252F;
    }

    html.dark .daterangepicker:before {
        border-bottom-color: #33323E;
    }

    html.dark .daterangepicker td.off,
    html.dark .daterangepicker td.off.in-range,
    html.dark .daterangepicker td.off.start-date,
    html.dark .daterangepicker td.off.end-date {
        background-color: #26252F;
        color: #6C6A7A;
    }

    html.dark .daterangepicker td.available:hover,
    html.dark .daterangepicker th.available:hover {
        background-color: #2D2C38;
    }

    html.dark .daterangepicker td.in-range {
        background-color: #2E2B4A;
        color: #E9E8F0;
    }

    html.dark .daterangepicker td.active,
    html.dark .daterangepicker td.active:hover {
        background-color: #357EBD;
        color: white;
    }

    html.dark .daterangepicker .drp-buttons,
    html.dark .daterangepicker .ranges {
        border-color: #33323E;
    }

    html.dark .daterangepicker .ranges li:hover {
        background-color: #2D2C38;
    }


/* jQuery UI widgets (date picker, autocomplete, dialogs) */

html.dark .ui-widget-content {
    background: #26252F;
    border-color: #33323E;
    color: #E9E8F0;
}

html.dark .ui-widget-header {
    background: #2D2C38;
    border-color: #33323E;
    color: #E9E8F0;
}

html.dark .ui-widget-content .ui-state-default {
    background: #2D2C38;
    border-color: #33323E;
    color: #E9E8F0;
}


/* Summernote text editor (its toolbar is a .panel-heading and its buttons are .btn-default, see above) */

html.dark .note-editor.note-frame {
    border-color: #33323E;
}

html.dark .note-editor .note-statusbar {
    background-color: #26252F;
}

html.dark .note-editor .note-editing-area .note-editable {
    background-color: #1E1D26;
    color: #E9E8F0;
}


/* jquery-confirm popups */

html.dark .jconfirm .jconfirm-box {
    background: #1E1D26;
}

    html.dark .jconfirm .jconfirm-box .jconfirm-title-c,
    html.dark .jconfirm .jconfirm-box .jconfirm-content {
        color: #E9E8F0;
    }


/* Icons: images in /Content/Icons are mostly dark grey, so they are lightened.
   Icons that contain white parts (white versions, status icons, Getting Started icons) stay as they are. */

html.dark img[src*="/Content/Icons/"] {
    filter: invert(0.88) hue-rotate(180deg);
}

html.dark .sidebar img,
html.dark img[src*="white"],
html.dark img[src*="/Content/Icons/live-"],
html.dark img[src$="/back_arrow.svg"],
html.dark img[src$="/default-avatar.svg"],
html.dark img[src$="/draft.svg"],
html.dark img[src$="/expan.svg"],
html.dark img[src$="/facebook.svg"],
html.dark img[src$="/failed.svg"],
html.dark img[src$="/help.svg"],
html.dark img[src$="/in-proccess.svg"],
html.dark img[src$="/log-out-icon.svg"],
html.dark img[src$="/next-arrow.svg"],
html.dark img[src$="/paid.svg"],
html.dark img[src$="/past-due.svg"] {
    filter: none;
}

/* Logos of payment providers, card brands and wallets are made for a light background, so they get a soft light grey one
   (less glare than white). Only these 3 folders: other pictures (e.g. the coloured project dots) keep no background. */
html.dark img[src*="/Content/Images/Payment-logos/"],
html.dark img[src*="/Content/Images/Credit-Cards/"],
html.dark img[src*="/Content/Images/Payment-Types/"] {
    background-color: #E9E8F0;
}


/* 4. GENERATED from the views: colours written directly on page elements (style="...").
      Text colours only match "color:" at the start of the style or right after ";",
      so "background-color:" is never mistaken for a text colour. */

/* dark text -> light text */
html.dark [style^="color: #1a1a1a"],
html.dark [style*=";color: #1a1a1a"],
html.dark [style*="; color: #1a1a1a"],
html.dark [style^="color: #3B384E"],
html.dark [style*=";color: #3B384E"],
html.dark [style*="; color: #3B384E"],
html.dark [style^="color: #3b384e"],
html.dark [style*=";color: #3b384e"],
html.dark [style*="; color: #3b384e"],
html.dark [style^="color: #48465A"],
html.dark [style*=";color: #48465A"],
html.dark [style*="; color: #48465A"],
html.dark [style^="color: #55526a"],
html.dark [style*=";color: #55526a"],
html.dark [style*="; color: #55526a"],
html.dark [style^="color:#3B384E"],
html.dark [style*=";color:#3B384E"],
html.dark [style*="; color:#3B384E"],
html.dark [style^="color:#414c6d"],
html.dark [style*=";color:#414c6d"],
html.dark [style*="; color:#414c6d"] {
    color: #E9E8F0 !important;
}

/* grey text -> light grey text */
html.dark [style^="color: #66627b"],
html.dark [style*=";color: #66627b"],
html.dark [style*="; color: #66627b"],
html.dark [style^="color: #6F6B80"],
html.dark [style*=";color: #6F6B80"],
html.dark [style*="; color: #6F6B80"],
html.dark [style^="color: #7f7f7f"],
html.dark [style*=";color: #7f7f7f"],
html.dark [style*="; color: #7f7f7f"],
html.dark [style^="color: #818181"],
html.dark [style*=";color: #818181"],
html.dark [style*="; color: #818181"],
html.dark [style^="color: #a8a8ad"],
html.dark [style*=";color: #a8a8ad"],
html.dark [style*="; color: #a8a8ad"],
html.dark [style^="color: #adadb0"],
html.dark [style*=";color: #adadb0"],
html.dark [style*="; color: #adadb0"],
html.dark [style^="color:#636363"],
html.dark [style*=";color:#636363"],
html.dark [style*="; color:#636363"],
html.dark [style^="color:#66627b"],
html.dark [style*=";color:#66627b"],
html.dark [style*="; color:#66627b"],
html.dark [style^="color:#6F6B80"],
html.dark [style*=";color:#6F6B80"],
html.dark [style*="; color:#6F6B80"],
html.dark [style^="color:#758199"],
html.dark [style*=";color:#758199"],
html.dark [style*="; color:#758199"],
html.dark [style^="color:#7f7f7f"],
html.dark [style*=";color:#7f7f7f"],
html.dark [style*="; color:#7f7f7f"],
html.dark [style^="color:#adadb0"],
html.dark [style*=";color:#adadb0"],
html.dark [style*="; color:#adadb0"] {
    color: #A9A6B8 !important;
}

/* very light grey text (disabled look) -> dim grey */
html.dark [style^="color: #c1c3c6"],
html.dark [style*=";color: #c1c3c6"],
html.dark [style*="; color: #c1c3c6"],
html.dark [style^="color:#c1c3c6"],
html.dark [style*=";color:#c1c3c6"],
html.dark [style*="; color:#c1c3c6"] {
    color: #7E7B8E !important;
}

/* purple text -> lighter purple */
html.dark [style^="color: #594e9a"],
html.dark [style*=";color: #594e9a"],
html.dark [style*="; color: #594e9a"],
html.dark [style^="color:#4d4095"],
html.dark [style*=";color:#4d4095"],
html.dark [style*="; color:#4d4095"],
html.dark [style^="color:#594e9a"],
html.dark [style*=";color:#594e9a"],
html.dark [style*="; color:#594e9a"] {
    color: #A99CF5 !important;
}

/* dark teal text (dashboard numbers) -> light teal */
html.dark [style^="color: #274745"],
html.dark [style*=";color: #274745"],
html.dark [style*="; color: #274745"] {
    color: #5ED3C5 !important;
}

/* white backgrounds -> panel colour */
html.dark [style*="background-color: #ffffff"],
html.dark [style*="background-color: white"],
html.dark [style*="background-color:white"],
html.dark [style*="background: white"],
html.dark [style*="background:white"] {
    background-color: #1E1D26 !important;
}

/* very light grey backgrounds -> slightly lighter than the page */
html.dark [style*="background-color: #F5F5F5"],
html.dark [style*="background-color: #f4f7fb"],
html.dark [style*="background-color: #f5f5f5"],
html.dark [style*="background-color: #f7f7f7"],
html.dark [style*="background-color: #f9f9f9"],
html.dark [style*="background-color:#F3F3F3"],
html.dark [style*="background-color:#F8F8F8"],
html.dark [style*="background:#FAFAFA"],
html.dark [style*="background:#ebeff2"],
html.dark [style*="background:#f1f1f1"],
html.dark [style*="background:#f3f3f3"],
html.dark [style*="background:#f4f7fb"],
html.dark [style*="background:#f9f9f9"] {
    background-color: #22212B !important;
}

/* light grey fills (lines, bars, chips) -> dark grey */
html.dark [style*="background-color: #cfd3d7"],
html.dark [style*="background-color: #ddd"],
html.dark [style*="background-color: #e2e2e2"],
html.dark [style*="background-color:#c6c6c6"],
html.dark [style*="background-color:#dadadb"],
html.dark [style*="background-color:rgb(223, 223, 223)"],
html.dark [style*="background: #ddd"],
html.dark [style*="background:#dadadb"],
html.dark [style*="background:#eaeaea"],
html.dark [style*="background:rgb(233, 233, 233)"] {
    background-color: #33323E !important;
}

/* light borders -> dark borders */
html.dark [style*="#DDDDDD"],
html.dark [style*="#EEEEEE"],
html.dark [style*="#adadb0"],
html.dark [style*="#e0e6ee"],
html.dark [style*="#e2e2e2"],
html.dark [style*="#e3e3e3"],
html.dark [style*="#ebebeb"] {
    border-color: #33323E !important;
}