/* Global shading types */
#app.dark .type--white-button-bordered {
    background: var(--gray-20);
    border-color: var(--gray-10);
    color: var(--gray-75);
}
#app.dark .type--white-button-bordered:hover {
    background: var(--gray-25);
}
/* End global shading types */

#app.dark,
#app.dark .bg-image,
#app.dark .scroll-extensions .left,
#app.dark .scroll-extensions .right,
#app.dark .scroll-extensions .bottom {
    background: var(--gray-30);
}

#app.dark .bg-image {
    filter: brightness(0.5);
}

#app.dark .overlay {
    background: var(--blackish-color-darker) !important;
    color: var(--background-color-more-slightly-darker) !important;
}

#app.dark .overlay#login button, #app.dark .overlay#login a.btn {
    background: var(--blackish-color);
    color: inherit;
}

#app.dark .overlay#login button:hover, #app.dark .overlay#login a.btn:hover {
    background: var(--background-color-slightly-darker);
    color: var(--blackish-color);
}

#app.dark header {
    background: var(--gray-20);
}

#app.dark header button.highlight, #app.dark header a.btn.highlight {
    background: transparent;
}

#app.dark header .offline-warning {
    background: var(--important-color-darker);
    color: var(--important-color-lighter-slightly-darker) !important;
}

#app.dark .search {
    background: var(--blackish-color);
    border-color: var(--gray-15);
}

#app.dark .search input {
    color: white;
}

#app.dark .search .fa, #app.dark .search input::placeholder {
    opacity: .5;
    color: white;
}

#app.dark .search-suggestions li {
    background: var(--blackish-color);
    color: white;
}

#app.dark .search-suggestions li:hover,
#app.dark .search-suggestions li.selected {
    background: var(--blackish-color-lighter);
}

#app.dark .board-column {
    background: var(--gray-20);
}

#app.dark .board-column.board-column.minimized.hover-column {
    background: var(--blackish-color-lighter);
}

#app.dark .board-item {
    background: var(--gray-15);
}

#app.dark .board-item,
#app.dark .board-column-header,
#app.dark .side-popup-header.other-column-viewer {
    border-color: var(--gray-25);
}

#app.dark .board-item-content {
    --board-item-content-bg-color: var(--gray-20);
    color: var(--background-color);
}

#app.dark .board-item-sender {
    color: var(--background-color);
}

#app.dark .board-item:hover .board-item-content {
    background: var(--gray-25);
}

#app.dark .board-item:active .board-item-content {
    background: var(--gray-30);
}

#app.dark .board-item.selected .board-item-content {
    background: var(--theme-color) !important;
}

#app.dark .board-item.pinned .board-item-content {
    background: var(--pinned-color-darker) !important;
}

#app.dark .email-symbol.pinned {
    color: var(--pinned-color);
}

#app.dark .email-symbol.flag {
    --symbol-color: var(--flag-color-darker);
}
#app.dark .email-symbol.important {
    --symbol-color: var(--important-color-darker);
}

#app.dark .email-checkbox {
    background: var(--blackish-color-lighter);
    color: var(--blackish-color-lighter);
    box-shadow: 0 0 0 1px var(--blackish-color);
}

#app.dark .board-item:hover .email-checkbox {
    color: var(--background-color-more-slightly-darker);
}

#app.dark .board-item.pinned .email-checkbox {
    background: var(--pinned-color-darker);
    color: var(--pinned-color-darker);
}

#app.dark .board-item.selected .email-checkbox {
    background: var(--theme-color);
    color: var(--background-color);
}

#app.dark .board-item.selected .email-symbol.unread {
    background: var(--background-color);
}

#app.dark .board-item-first-line {
    color: rgba(255, 255, 255, .25);
}

#app.dark .board-column-empty-spacer {
    color: var(--gray-45);
}

#app.dark .incoming-card-spacer {
    background: var(--theme-color);
}

#app.dark .email-popup {
    --email-popup-bg-color: var(--blackish-color);
    --email-popup-text-color: var(--gray-85);
}

#app.dark .email-popup .email-popup-meta .contact-img-default {
    background: var(--blackish-color-darker);
    color: var(--email-popup-text-color);
}

#app.dark .email-popup .email-popup-body:not(iframe), #app.dark .email-composer-action-bar {
    background: var(--blackish-color);
    color: var(--background-color);
}

#app.dark .email-popup iframe.email-popup-body {
    filter: invert(1) hue-rotate(180deg);
    background-color: transparent;
}

#app.dark .email-composer-action-bar a:not(.highlight) {
    background: var(--blackish-color-lighter);
    box-shadow: 0 0 0 2px var(--blackish-color-lighter);
}

#app.dark .email-composer .email-recipient,
#app.dark .email-composer .add-email-recipient,
#app.dark .email-composer input[type="file"]::-webkit-file-upload-button {
    background: var(--blackish-color-lighter);
    color: var(--gray-85);
}

#app.dark .email-composer .field > select {
    background: var(--blackish-color-lighter);
    color: var(--email-popup-text-color);
}

#app.dark .email-composer .field > select:focus {
    background: var(--blackish-color-darker);
}

#app.dark .email-composer #suggestions-box {
    background: var(--gray-20);
    color: var(--gray-95);
}

#app.dark .email-composer #suggestions-box li:hover, #app.dark .email-composer #suggestions-box:not(:hover) li.selected {
    background: var(--gray-30);
}

#app.dark .side-popup {
    background: var(--gray-15);
    border-color: var(--gray-25);
}

#app.dark .side-popup:not(.other-column-viewer) {
    color: var(--background-color-more-slightly-darker);
}

#app.dark .side-popup-header {
    color: var(--gray-70);
}

#app.dark .menu .logout {
    background: var(--blackish-color);
}

#app.dark .menu .logout:hover {
    background: var(--important-color-darker) !important;
    color: white !important;
}

#app.dark .menu .version-num {
    color: var(--blackish-color);
}

#app.dark .menu button#feedback-button {
    color: var(--blackish-color-darker) !important;
}

#app.dark .side-popup-body hr, #app.dark .on-off-couple {
    border-color: var(--blackish-color-lighter);
}

#app.dark .context-menu, #app.dark .context-menu li, #app.dark .context-menu li i.fa {
    background: var(--blackish-color);
}

#app.dark .context-menu li:hover, #app.dark .context-menu li:hover i.fa {
    background: var(--blackish-color-darker);
}

#app.dark .board-column-content:hover::-webkit-scrollbar-thumb {
    background: var(--blackish-color-lighter); 
}

#app.dark .tooltip {
    background: var(--background-color-more-slightly-darker);
    color: var(--blackish-color);
}

#app.dark .tooltip .shortcut-key {
    background: rgba(27, 37, 55, 0.25); /* var(--blackish-color) with 25% opacity */
}

#app.dark .popup-window {
    background: var(--blackish-color-lighter);
    color: white;
}

#app.dark .onboarding-behind {
    background: rgba(50, 69, 103, 0.3); /* var(--blackish-color-lighter) */
}


#app.dark .onboarding {
    background: var(--gray-15);
    color: var(--gray-95);
}

#app.dark .onboarding h1 {
    color: inherit;
}

#app.dark .onboarding a.btn {
    background: var(--gray-25);
    color: var(--gray-80);
    box-shadow: none;
}

#app.dark .onboarding .unsplash-suggestion-grid-overlay {
    background: linear-gradient(/*var(--blackish-color-darker), transparent 2rem, */transparent 18rem, var(--blackish-color-darker));
}

#app.dark .thread-item.current, #app.dark .thread-item:hover {
    background: var(--blackish-color-lighter);
}

#app.dark .sidebar-sender-profile:hover {
    background: var(--gray-20);
}

#app.dark .sidebar-sender-profile:active {
    background: var(--gray-25);
}

#app.dark .email-popup .email-popup-meta,
#app.dark .email-popup-left,
#app.dark .email-popup-sidebar-address-bar {
    border-color: var(--gray-25);
}

#app.dark .email-popup-left {
    background: var(--gray-0);
}

#app.dark .email-popup .email-popup-meta.desktop-only {
    background: black;
}

#app.dark .email-composer {
    background: var(--gray-15);
    color: var(--gray-85);
}

#app.dark .account-profile {
    color: var(--gray-85);
    background: var(--gray-15);
}

#app.dark .account-profile-emails {
    background: var(--gray-20);
}

#app.dark .account-profile-email:hover {
    background: var(--gray-25);
}

#app.dark .event-card {
    background: var(--gray-20);
}

#app.dark .event-card-calendar-btn {
    background: var(--gray-30);
}

#app.dark .email-popup-behind,
#app.dark .popup-window-behind,
#app.dark .onboarding-behind,
#app.dark .account-profile-behind {
    background: var(--gray-80);
}

#app.dark:not(.custom-bg) header,
#app.dark:not(.custom-bg) .board-column {
    box-shadow: 0 0 0 1px var(--gray-15);
}

#app.dark .email-popup .email-popup-actions > *.on {
    background: var(--gray-30);
}

#app.dark .column-name .options {
    background: var(--gray-35);
    border-color: var(--gray-10);
}

#app.dark .column-name .option:hover {
    background: var(--gray-40);
}

#app.dark .label-picker {
    background: var(--gray-15);
}

#app.dark .label-picker-input {
    background: var(--gray-20);
    color: var(--gray-70);
}

#app.dark .label-picker-checkbox {
    background: var(--gray-20);
    color: var(--gray-20);
    border-color: var(--gray-10);
}

#app.dark .label-picker-checkbox.checked {
    background: var(--gray-40);
    border-color: var(--gray-10);
    color: var(--gray-70);
}

#app.dark .label-picker-label:hover {
    background: var(--gray-20);
}

#app.dark .label-picker-label.selected {
    background: var(--gray-25);
}

#app.dark .label-picker-close-btn {
    background: var(--gray-30);
    color: var(--gray-70);
}

#app.dark .label-picker-close-btn:hover {
    background: var(--gray-35);
    color: var(--gray-70);
}