:root {
    --text-color: #ffffff;
    --secondary-text-color: var(--gray);
    --background-color: #191917;
    --byline-color: var(--secondary-text-color);
    --link-color: var(--special-link-color, var(--text-color));
    --link-decoration: underline;
    --link-highlight-color: #444 !important;
    --black: #191917;
    --paper-color: var(--background-color) !important;
    --zone-background: var(--background-color) !important;
    --premium-tc: var(--text-color) !important;
    --premium-bc: var(--background-color) !important;
    --gray: #AAA;
    --darkgray: #444;
    --paper-shadow: none;
    --sans: 'Noto Sans';
    --serif: 'Noto Serif';
    --selection-bg-color: var(--darkgray);
    --selection-color: var(--link-color);
    --section-nav-shadow: transparent;
    --section-nav-border-color: #444;
    --section-nav-text-color: var(--text-color);
    --media-background-color: #444;
}

/* HOT BAR */
#zoneContainer, #zoneContainer > * {
    background-color: var(--paper-color) !important;
}

/* COMMENTING */
.viafoura {
    --background-color: #191917 !important;
    --light-text-on-background-color: var(--secondary-text-color) !important;
    --dark-text-on-background-color: var(--text-color) !important;
}

.vf-dropdown::before,
.vf-dropdown-wrapper {
    --background-color: #191917 !important;
    --light-text-on-background-color: var(--secondary-text-color) !important;
    --dark-text-on-background-color: var(--text-color) !important;
}

.vf3-comments {
    --background-color: #191917 !important;
    --light-text-on-background-color: var(--secondary-text-color) !important;
    --dark-text-on-background-color: var(--text-color) !important;
}

/* ADS */
.zone[data-type=ad] {
    background-color: var(--background-color) !important;
}

/* SELECTION COLORS  */

/*** Works on common browsers ***/
::selection{
    background-color: var(--selection-bg-color);
    color: var(--selection-color);
}
/*** Mozilla based browsers ***/
::-moz-selection{
    background-color: var(--selection-bg-color);
    color: var(--selection-color);
}

/***For Other Browsers ***/
::-o-selection{
    background-color: var(--selection-bg-color);
    color: var(--selection-color);
}

::-ms-selection{
    background-color: var(--selection-bg-color);
    color: var(--selection-color);
}

/*** For Webkit ***/
::-webkit-selection{
    background-color: var(--selection-bg-color);
    color: var(--selection-color);
}

body {
    background-color: var(--paper-color);
}

.flag-logo {
    filter: brightness(0) invert(1);
}

.flag {
    --text-color: var(--white);
}

.masthead {
    --paper-color: var(--background-color) !important;
    --paper-shadow: none !important;
    --link-color: var(--white) !important;
}

#brz_envelope_container {
    background-color: transparent !important;
}

.brz_envelope {
    fill: #ffffff !important;
}

.story-body {
    --link-hover-color: #68B0F2 !important;
}

/* TABOOLA */
.organic-thumbnails-a-category .video-uploader, .organic-thumbnails-a-category .video-title, .organic-thumbnails-a-category .trc_rbox_header, .organic-thumbnails-a-category .logoDiv a span {
    color: var(--text-color) !important;
}

/* Overlay styles */
.overlay.overlay-data {
    background-color: rgba(15, 21, 33, .97) !important;
}

.overlay #backToStory {
    background-color: #0A0F16 !important;
}

.overlay p.summary {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

/* FOOTER */
.footer-logo {
    filter: brightness(0) invert(1);
}

/* CUE GALLERY */
.galleryVueInstance .caption-container {
    background-color: var(--background-color);
    padding: 0 0 15px 0;
}

/* GIFT ICON */
.gift-icon-link { 
    color: var(--secondary-text-color) !important;
}

/* GIFT ARTICLE */
/* Matches var(--secondary-text-color) which for this theme is var(--gray) which is #afb9ca */
/* Change if that var changes, it's a filter to apply to the underlying img which is not SVG */
.gift-icon-link > img {
    filter: brightness(0) invert(100%) brightness(0.65);
}

/* NEWSLETTER */
newsletter-signup-feature {
    color: var(--background-color);
    --gray: #D1D1D1 !important;
}

@container (max-width: 750px) {
    #signInOut a.button::before {
        filter: brightness(0) invert(1);
    }
}