.mobile-wcag-icon {
    display: none;
}

.wcag-settings {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
}

.wcag-settings li {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.wcag-settings button {
    background: none;
    border: none;
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
}

.wcag-settings .wcag-smaller,
.wcag-settings .wcag-larger {
    font-size: 22px;
}

.wcag-settings .wcag-normal,
.wcag-settings .wcag-night {
    width: 22px;
    height: 18px;
    background-color: #FFF;
    border: 1px solid #e1e6f1;
    vertical-align: middle;
    margin: 0px 5px;
}


#Body .wcag-settings li button.wcag-normal {
    background-color: #FFF !important;
    border-color: #e1e6f1;
}

.wcag-settings .wcag-night {
    background-color: #000;
    border-color: #000;
}

html.html-night .wcag-settings .wcag-night {
    border-color: #FFF;
}

.wcag-settings svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.wcag-settings .label {
    margin-right: 5px;
}

.wcag-settings .sep {
    width: 2px;
    height: 18px;
    background-color: #e1e6f1;
    margin: 0px 10px -2px;
}

.wcag-settings .wcag-readable svg {
    vertical-align: top;
}

.wcag-settings .wcag-reset svg {
    vertical-align: top;
}

html.html-night,
html.html-night body,
html.html-night .dng-main,
html.html-night .content-builder,
html.html-night .is-overlay-bg,
html.html-night .header-bg-box,
html.html-night #Body .floating-active .header-bg-box {
    background-color: #000 !important;
}

html.html-night .header-area a,
html.html-night .header-area p,
html.html-night .header-area li,
html.html-night .header-content-wrap>*:not(.nav-bar) {
    color: #FFF !important;
}

html.html-night .content-builder .row:not(.night-auto) h1,
html.html-night .content-builder .row:not(.night-auto) h2,
html.html-night .content-builder .row:not(.night-auto) h3,
html.html-night .content-builder .row:not(.night-auto) h4,
html.html-night .content-builder .row:not(.night-auto) h5,
html.html-night .content-builder .row:not(.night-auto) h6,
html.html-night .content-builder .row:not(.night-auto) div,
html.html-night .content-builder .row:not(.night-auto) p,
html.html-night .content-builder .row:not(.night-auto) blockquote,
html.html-night .content-builder .row:not(.night-auto) span

/*, 
html.html-night .content-builder .row:not(.night-auto) a */
    {
    color: #FFF;
}

html.html-night .content-builder .row:not(.night-auto) h1[style*="color:"],
html.html-night .content-builder .row:not(.night-auto) h2[style*="color:"],
html.html-night .content-builder .row:not(.night-auto) h3[style*="color:"],
html.html-night .content-builder .row:not(.night-auto) h4[style*="color:"],
html.html-night .content-builder .row:not(.night-auto) h5[style*="color:"],
html.html-night .content-builder .row:not(.night-auto) h6[style*="color:"],
html.html-night .content-builder .row:not(.night-auto) div[style*="color:"],
html.html-night .content-builder .row:not(.night-auto) p[style*="color:"] {
    color: #FFF !important;
}

html.html-night .header-wrap a,
html.html-night .header-wrap p,
html.html-night .header-wrap li,
html.html-night .is-section,
html.html-night .is-box,
html.html-night .is-boxes,
html.html-night .is-container {
    background-color: transparent !important;
}

html.html-night .header-wrap .primary_structure>li>a svg {
    fill: currentColor !important;
}


html.html-night .is-section.is-light-text .is-container>.row>div>i,
/*html.html-night .is-section.is-light-text .is-container >.row > div > a, */
html.html-night .is-section.is-light-text .is-container>.row>div>p,
html.html-night .is-section.is-light-text .is-container>.row>div>h1,
html.html-night .is-section.is-light-text .is-container>.row>div>h2,
html.html-night .is-section.is-light-text .is-container>.row>div>h3,
html.html-night .is-section.is-light-text .is-container>.row>div>h4,
html.html-night .is-section.is-light-text .is-container>.row>div>h5,
html.html-night .is-section.is-light-text .is-container>.row>div>h6 {
    color: #FFF !important;
    background-color: #000 !important;
    box-shadow: 0 0 0 8px #000 !important;
}



html.html-night .dng-main .search-popup-box .popup-content,
html.html-night .dng-main ul.searchSkinObjectPreview {
    background-color: #000 !important;
}

html.html-night .dng-main .search-popup-box * {
    color: #FFF !important;

}

html.html-night .wcag-settings .sep {
    background-color: #FFF !important;
}

html.html-night #Body .is-section a:not([class*="button"]):hover {
    color: var(--accent-color-black) !important;
}


/*
html.html-fontsize[fontsize="1"]{
    font-size: 17px;
}
*/

html.html-readable,
html.html-readable body,
html.html-readable #Body,
html.html-readable p,
html.html-readable h1,
html.html-readable h3,
html.html-readable h4,
html.html-readable h5,
html.html-readable h6 {
    letter-spacing: 0.15rem;
}


@media only screen and (max-width: 992px) {
    .mobile-wcag-icon {
        display: inline-block;
        background: none;
        border: none;
        color: currentColor;
    }

    .mobile-wcag-icon svg {
        width: 1.1em;
        height: 1.1em;
        fill: currentColor;
    }

    .wcag-settings {
        position: fixed;
        left: 0;
        right: 0;
        background: #fff;
        padding: 10px 0;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        top: -50px;
        height: 50px;
        opacity: 0;
        visibility: hidden;
        transition: all ease-in 200ms;
    }

    .wcag-settings.active {
        top: 0;
        opacity: 1;
        visibility: visible;
    }

    .header-mobile {
        transition: margin ease-in 200ms;
    }

    .header-mobile.dispaly-wcag {
        margin-top: 50px;
    }


    html.html-night .dng-main .wcag-settings {
        background-color: #000 !important;
    }

}

.html-night #Body .color-accent:not(.night-auto),
.html-night #Body .color-accent2:not(.night-auto) {
    color: var(--accent-color-black);
}

.html-night #Body .page-title-bg {
    background-color: transparent;
}

.html-night .pagetitle-breadcrumbs-box,
.html-night .pagetitle-breadcrumbs-box a,
.html-night .pagetitle-breadcrumbs-box a:link,
.html-night .pagetitle-breadcrumbs-box a:active {
    color: #FFF !important;
}

.html-night .pagetitle-breadcrumbs-box a:hover {
    color: #FFF !important;
}

html.html-night #Body, 
html.html-night body, 
html.html-night .Normal,
html.html-night h1,
html.html-night h2,
html.html-night h3,
html.html-night h4,
html.html-night h5,
html.html-night h6,
html.html-night p,
html.html-night li,
html.html-night {
    color: #FFF;
}

html.html-night a:not([class*="button"]),
html.html-night a:not([class*="button"]):link,
html.html-night a:not([class*="button"]):active {
    color: var(--accent-color-black);
}

html.html-night a:not([class*="button"]):hover {
    text-decoration: underline;
}

