/*
Theme Name: Enfold Child
Description: CLICKSPORTS Enfold Child Theme.
Version: 1.0
Author: CLICKSPORTS
Author URI: https://www.clicksports.de
Template: enfold
*/

/********************************************************************************************************
 * ELEMENTS
 *******************************************************************************************************/

/* Removes Enfold link color from strong text. */
.main_color strong, .alternate_color strong { color: inherit; }

/* Disables Enfold special ampersand character. */
.special_amp { color: inherit!important; font-family: inherit; font-size: inherit; }

/* Contact Form - consent checkbox text. */
#top .avia_ajax_form .input_checkbox_label {
    font-size: 14px;
    font-weight: normal;
    line-height: 1.6em;
    color: #999999;
}

/* Contact Form - consent checkbox. */
#top .avia_ajax_form input[type="checkbox"] {
    top: 0;
}

/* Contact Form: Checkbox Label. */
#top .avia_ajax_form .input_checkbox_label {
    color: #868686;
}

/**
 * Container wrapper.
 *
 * Elements that break out of the container wrapper have a bottom and top border by default.
 * E.g.: Masonry gallery.
 *
 * This removes that border.
 */
.container_wrap {
    border: none;
}

#scroll-top-link { display: none; }

/********************************************************************************************************
 * HEADER
 *******************************************************************************************************/

/**
 * Header menu and logo.
 *
 * Default and transparency header settings differ in font size.
 * We smooth out the transitions as well.
 */
/* Default. */
.avia-menu-text {
    font-size: 14px;
    text-shadow: none;
    transition: font-size ease-in 0.2s;
}

/* Transparency. */
.av_header_transparency .avia-menu-text {
    font-size: 18px;
    text-shadow: 1px 1px 4px #333;
    transition: font-size ease-in 0.2s;
}

/* Logo. */
#header_main .logo,
#header_main.av_header_transparency .logo {
    transition: margin-top ease-in 0.4s;
}

.av_header_transparency .logo {
    margin-top: 0;
}

.sub_menu {
    font-size: 13px;
    text-shadow: 1px 1px 2px #333;
}

/* Removes bullets from mega menu items. */
#top #header .avia-bullet {
    display: none;
}

/* Mega menu. */
#top #header .avia_mega_div > .sub-menu > li > ul > li a {
    padding: 6px 0 6px 10px;
}
#top #header .avia_mega_div a {
    line-height: 18px !important;
}
#top #header .avia_mega_div>.sub-menu{
    padding: 10px 30px 10px;
}
#top #header .avia_mega_div>.sub-menu.avia_mega_hr{
    padding-top: 10px;
}

#top #header .mega_menu_title a {
    font-size: 18px;
    border-bottom: 1px solid #58585a;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
#top #header .avia_mega_div > .sub-menu > li > ul > li a {
    padding: 8px 0;
    transition: ease-in 0.2s;
}
#top #header .avia_mega_div > .sub-menu > li > ul > li a:hover {
    text-decoration: underline;
    transition: ease-in 0.2s;
}

#searchsubmit {
    background-color: #cf1a1a;
}

/**
 * Logo SVG fix.
 * Introduced with Enfold 4.8.6.4.
 */
.logo.avia-img-svg-logo > a > img {
    height: 20px;
    margin-top: 10px;
}
.page-template-haendlersuche .logo.avia-img-svg-logo > a > img {
    margin-top: 30px;
}

/********************************************************************************************************
 * FOOTER
 *******************************************************************************************************/

/* Footer: Menu link font size. */
footer .menu a {
    font-size: 16px;
}

#socket .sub_menu_socket li {
    padding: 10px;
}

/********************************************************************************************************
 * ENFOLD ELEMENTS.
 *******************************************************************************************************/

/* Special Heading: modern left. */
.modern-quote .av-special-heading-tag {
    font-weight: 600;
}

/**
 * Button - Large.
 */
.avia-button.avia-size-large {
    font-size: 16px;
}

/* Masonry Gallery element.
 *
 * Fixes wobbly images on scroll.
 * The styles are set at runtime as inline styles.
 */
.av-masonry-entry.isotope-item {
    transform: none !important;
    transition: none !important;
}
/**
 * Masonry Gallery container.
 *
 * Fixes ugly visible borders on hover.
 * The image is actually a background image of the container.
 */
.av-fixed-size .av-masonry-image-container,
.av-fixed-size .av-masonry-outerimage-container {
    background-repeat: no-repeat;
}

/* Masonry Gallery.  */
.main_color .av-masonry,
.alternate_color .av-masonry {
    background: transparent;
}
#top .av-caption-style-overlay a.av-masonry-item-with-image .av-inner-masonry-content {
    background: rgba(0, 0, 0, 0.6);
}

/* Content Slider - Blog images. */
.avia-content-slider .slide-image {
    display: none;
}

/* Easyslider. */
.avia-caption-title, .avia-caption-content, .avia-slideshow-button {
    -webkit-animation: 0s ease 0s normal none 1 running none !important;
    animation: 0s ease 0s normal none 1 running none !important;
    visibility: visible !important;
    text-shadow: 1px 1px 6px #333 !important;
}

/* Tabs. */
.tab_titles .tab:active,
.tab_titles .tab:focus {
    outline: 0;
    border-left: 2px solid #cf1a1a;
    transition: ease-in 0.1s;
}
.tab_titles .tab.active_tab {
    border-left: 2px solid #cf1a1a;
}

/* Toggles. */
.single_toggle {
	margin-bottom: 0;
}
.av-minimal-toggle .single_toggle {
    border-radius: 3px;
    border-color: transparent;
}
.single_toggle .toggle_icon .vert_icon,
.single_toggle .toggle_icon .hor_icon {
    border-color: #cf1a1a !important;
}
.av_toggle_section .toggler {
    border-color: #fff !important;
}
.av-minimal-toggle .single_toggle {
    padding-bottom: 1px;
}
.av_toggle_section .toggler:active,
.av_toggle_section .toggler:focus {
    outline: 0;
    border-color: #c3512f !important;
}
.av_toggle_section .toggler.activeTitle {
    border-color: #cf1a1a !important;
}

/* Accordion Gallery. */
#top .aviaccordion-preview-title-wrap {
    margin-left: 14px;
    padding-right: 14px;
}

.main_color .avia-timeline .av-milestone-date {
	color: #767676;	
}

/********************************************************************************************************
 * LAYER SLIDER - use for LayerSlider elements.
 *******************************************************************************************************/

/**
 * Text/Heading - use for white text to generate text shadow.
 */
.held-text-shadow {
    text-shadow: 1px 1px 6px #333;
}

/**
 * Buttons.
 */
.held-button-slider {
    border: 2px solid #000 !important;
    font-weight: normal !important;
}

.held-button-slider:hover {
    opacity: 1 !important;
    border-color: #999 !important;
    color: #999 !important;
}

.held-button-slider-complete {
    font-size: 16px !important;
    border: 2px solid #000 !important;
    font-weight: bold !important;
    color: #000 !important;
    padding: 15px 60px !important;
    border-radius: 2px !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
}

.held-button-slider-complete:hover {
    opacity: 1 !important;
    border-color: #999 !important;
    color: #999 !important;
}

/********************************************************************************************************
 * CUSTOM CLASSES - use for Enfold elements.
 *******************************************************************************************************/

/**
 * Claim heading.
 *
 * Use in: Special Heading (H2).
 */
.held-claim h2 {
    font-weight: 400 !important;
    text-transform: none !important;
}

/**
 * Buttons.
 *
 * Use in: Button.
 */
.held-button a {
    border: 2px solid #000 !important;
    color: #000 !important;
}
.held-button a:hover,
.held-button a:focus-visible {
    opacity: 1 !important;
    border-color: #cf1a1a !important;
    color: #cf1a1a !important;
}

/**
 * Footer social media icons, badges, phone.
 *
 * Use in:
 * Icon shortcode's custom class.
 * Phone number text field.
 */
.held-footer-icon {
    margin-right: 40px;
}
.held-footer-icon a {
    transition: ease-in 0.2s;
}
.held-footer-icon a:hover {
    color: #999 !important;
    transition: ease-in 0.2s;
}
.held-footer-badge-container {
    display: block;
    float: left;
    clear: both;
    margin-top: 20px;
    width: 100%;
}
.held-footer-badge {
    display: inline-block;
}
.held-footer-badge img {
    height: 50px;
}
.held-footer-phone-text a {
    transition: ease-in 0.2s;
	text-decoration: none !important;
}
.held-footer-phone-text a:hover,
.held-footer-phone-text a:focus-visitle{
    color: #cf1a1a !important;
    transition: ease-in 0.2s;
	text-decoration: underline !important;
}

/********************************************************************************************************
 * NEWSLETTER2GO
 *******************************************************************************************************/

/* Regular (white). */
.held-newsletter-container {
    width: 100%;
    background: transparent !important;
}
.held-newsletter-button {
    color: #fff;
    border: 2px solid #fff;
    border-radius: 3px;
    background: transparent;
    min-width: 139px;
    font-size: 16px;
    padding: 15px 30px 13px;
}
.held-newsletter-button:hover {
    opacity: 1 !important;
    border-color: #999 !important;
    color: #999 !important;
    cursor: pointer !important;
}
.held-newsletter-button:focus {
    outline: 0 !important;
}

.held-newsletter-input {
    color: #fff !important;
    border-color: #fff !important;
    border-width: 2px !important;
    background-color: transparent !important;
    border-radius: 3px !important;
    padding: 13px !important;
    margin-bottom: 0 !important;
}
.held-newsletter-input::placeholder {
    color: #fff !important;
}

.held-newsletter-checkbox {
    margin-right: 6px;
    vertical-align: middle;
}

.held-newsletter-label {
    display: inline-block;
    color: #fff;
    font-size: 12px !important;
    font-weight: normal !important;
    margin-bottom: 20px;
}

.nl2go-widget h2 {
    color: #fff;
    text-align: left !important;
}

/* Black. */
.newsletter-black .held-newsletter-container {
    width: 100%;
    background: transparent !important;
}
.newsletter-black .held-newsletter-button {
    color: #333;
    border: 2px solid #333;
    border-radius: 3px;
    background: transparent;
    min-width: 139px;
    font-size: 16px;
    padding: 15px 30px 13px;
}
.newsletter-black .held-newsletter-button:hover {
    opacity: 1 !important;
    border-color: #999 !important;
    color: #999 !important;
    cursor: pointer !important;
}
.newsletter-black .held-newsletter-button:focus {
    outline: 0 !important;
}

.newsletter-black .held-newsletter-input {
    color: #333 !important;
    border-color: #333 !important;
    border-width: 2px !important;
    background-color: transparent !important;
    border-radius: 3px !important;
    padding: 13px !important;
    margin-bottom: 0 !important;
}
.newsletter-black .held-newsletter-input::placeholder {
    color: #333 !important;
}

.newsletter-black .held-newsletter-checkbox {
    margin-right: 6px;
    vertical-align: middle;
}

.newsletter-black .held-newsletter-label {
    display: inline-block;
    color: #333;
    font-size: 12px !important;
    font-weight: normal !important;
    margin-bottom: 20px;
}

.newsletter-black .nl2go-widget h2 {
    color: #333;
    text-align: left !important;
}

/********************************************************************************************************
 * DEALER SEARCH MAP
 *******************************************************************************************************/

.csmaps-ctrl-top-right {
    bottom: 40px;
    top: auto;
}

/********************************************************************************************************
 * RESPONSIVE
 *******************************************************************************************************/

@media only screen and (max-width: 1168px) {

    /**
     * Accordion Slider.
     *
     * Use Enfold element settings for responsive font sizes first!
     */
    #top .aviaccordion-slide .aviaccordion-excerpt {
        font-size: 16px !important;
    }

}

@media only screen and (max-width: 989px) {

    /* Accordion font size. */
    .togglecontainer .single_toggle p.toggler {
        font-size: 17px !important;
    }
    .togglecontainer .single_toggle .toggle_wrap .toggle_content {
        font-size: 17px !important;
    }
    .togglecontainer .single_toggle .toggle_wrap .toggle_content h3 {
        font-size: 20px !important;
    }

    /* Tab font size. */
    .tabcontainer .tab_content {
        font-size: 17px !important;
    }
    .tabcontainer .tab_content h2 {
        font-size: 20px !important;
    }

}

@media only screen and (max-width: 767px) {

    /* Accordion font size. */
    .togglecontainer .single_toggle p.toggler {
        font-size: 15px !important;
    }
    .togglecontainer .single_toggle .toggle_wrap .toggle_content {
        font-size: 15px !important;
    }
    .togglecontainer .single_toggle .toggle_wrap .toggle_content h3 {
        font-size: 18px !important;
    }

    /* Tab font size. */
    .tabcontainer .tab_content {
        font-size: 15px !important;
    }
    .tabcontainer .tab_content h2 {
        font-size: 18px !important;
    }

}

@media only screen and (max-width: 479px) {

    /* Accordion font size. */
    .togglecontainer .single_toggle p.toggler {
        font-size: 14px !important;
    }
    .togglecontainer .single_toggle .toggle_wrap .toggle_content {
        font-size: 14px !important;
    }
    .togglecontainer .single_toggle .toggle_wrap .toggle_content h3 {
        font-size: 18px !important;
    }

    /* Tab font size. */
    .tabcontainer .tab_content {
        font-size: 14px !important;
    }
    .tabcontainer .tab_content h2 {
        font-size: 18px !important;
    }

}

/********************************************************************************************************
 * HIDDEN ELEMENTS
 *******************************************************************************************************/

@media only screen and (min-width: 990px){

    .av-desktop-hide,
    .av-desktop-font-size-hidden,
    .av-desktop-font-size-title-hidden{display:none;}

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 989px) {

    .av-medium-hide,
    .av-medium-font-size-hidden,
    .av-medium-font-size-title-hidden{display:none;}

}


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .av-small-hide,
    .av-small-font-size-hidden,
    .av-small-font-size-title-hidden{display:none;}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

    .av-mini-hide,
    .av-mini-font-size-hidden,
    .av-mini-font-size-title-hidden{display:none;}

}

/********************************************************************************************************
 * RESPONSIVE HEADER
 *******************************************************************************************************/

@media only screen and (max-width: 989px) {

    /**
     * Responsive header.
     *
     * Make header transparent on mobile devices.
     */
    #top #wrap_all #header {
        background: transparent;
        position: absolute !important;
    }

    .logo {
        margin-top: 0;
    }

    .logo a {
        max-height: 45px !important;
    }

    /**
     * Responsive header.
     *
     * Adjust alternate header size, logo size and spacings.
     */
    .responsive #top #header.av_header_transparency .logo {
        height: 50px !important;
        overflow: hidden;
    }

    #top .av_header_glassy.av_header_transparency #header_main {
        height: 50px;
    }

    .responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a {
        line-height: 50px !important;
        height: 50px !important;
    }

    .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
        height: 50px !important;
        line-height: 50px !important;
    }

    .logo.avia-img-svg-logo > a > img {
        height: 20px;
        margin-top: 16px !important;
    }

    .html_stretched.responsive.html_mobile_menu_tablet #top #wrap_all #header {
        position: fixed !important;
    }

    #header.header-scrolled #header_meta {
        display: none !important;
    }

}

@media only screen and (max-width: 767px) {

    /**
     * Responsive header.
     *
     * Adjust alternate header size, logo size and spacings.
     */
    .responsive #top #header.av_header_transparency .logo {
        overflow: hidden;
    }

    .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img {
        margin-top: 0 !important;
        max-height: 20px !important;
    }

    .logo.avia-img-svg-logo > a > img {
        height: 20px !important;
        margin-top: -25px !important;
    }

}

/********************************************************************************************************
 * FOCUS STATES
 *******************************************************************************************************/

 /**
  * General
  *
  * The CSS pseudo class :focus-visible stands for elements that have been focused via the keyboard.  
  * In contrast to :focus-visible, :focus stands for elements that have been focused with any input device.
  * This can be the keyboard, but also a cursor or a touch input. 
  */
*:focus:not(:focus-visible) {
    outline: none
}
*:focus-visible {
    outline: 2px dashed #cf1a1a;
    outline-offset: 2px;
}

/* Default link styling. */
#top a:where(:not(.wp-element-button)):focus,
#top a:where(:not(.wp-element-button)):focus-visible,
#top a:where(:not(.wp-element-button)):hover {
    text-decoration: underline;
}

/* Prevent menu links text decoration on hover. */
.av-main-nav > li > a:hover {
    text-decoration: none !important;
}

/* Prevent special heading link opacity. */
#top .av-special-heading.av-linked-heading a:hover {
    opacity: 1;
}

/* Submenus. */
#top .av-main-nav ul a:hover,
#top .av-main-nav ul a:focus-visible {
	text-decoration: underline;
}

/* Images with links. */
.avia-image-container .avia-image-overlay-wrap:focus-visible,
.avia-image-overlay-wrap a:focus-visible {
	outline: 2px solid #cf1a1a;
	transition: none;
}

/* Masonry Gallery. */
.av-masonry-entry:focus-visible .av-masonry-entry-content.entry-content {
    text-decoration: underline;
}

/* Accordion Slider. */
.aviaccordion-slide-link:focus-visible h3.aviaccordion-title {
	text-decoration: underline;
}

.avia-slideshow-dots a:focus-visible {
	outline: 2px solid #cf1a1a;
	transition: none;
}

 /**
  * Masonry Gallery
  *
  * Element: Item
  * - Background color.
  * - Animation.
  * - Heading.
  *
  */ 
#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
    background: rgba(0,0,0,0.8);
}

/* Prevents masonry gallery building delay. Needed for correct keyboard control. */
.av-masonry-entry {
    visibility: visible;
    opacity: 1; 
}

/* Prevents visuel effect on each image being ‘thrown’ one after another. */
.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
}

/* Set heading focus state. */
a.av-masonry-entry:focus-visible h3.av-masonry-entry-title.entry-title {
    text-decoration: underline;
}

/* Simple Masonry Gallery. */
.av-masonry-entry:focus-visible .av-masonry-entry-content.entry-content {
    text-decoration: underline;
}

/* Inputs */
#top .main_color .input-text:focus-visible,
#top .main_color input[type='text']:focus-visible,
#top .main_color input[type='input']:focus-visible,
#top .main_color input[type='password']:focus-visible,
#top .main_color input[type='email']:focus-visible,
#top .main_color input[type='number']:focus-visible,
#top .main_color input[type='url']:focus-visible,
#top .main_color input[type='tel']:focus-visible,
#top .main_color input[type='search']:focus-visible,
#top .main_color textarea:focus-visible,
#top .main_color select:focus-visible,
#top .main_color input[type='submit'].button:focus-visible {
    border: 1px solid #cf1a1a;
    outline: 2px dotted #cf1a1a;
    outline-offset: 2px;
    transition: none;
}

/********************************************************************************************************
 * ONE CLICK ACCESSIBILITY
 *******************************************************************************************************/

#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay {
    width: 220px !important;
}

#pojo-a11y-toolbar.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle {
    right: 220px !important;
}

#pojo-a11y-toolbar.pojo-a11y-toolbar-right {
    right: -220px !important;
}

#pojo-a11y-toolbar.pojo-a11y-toolbar-right.pojo-a11y-toolbar-open {
    right: 0 !important;
}

#pojo-a11y-toolbar.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle {
    width: 50px;
}

@media screen and (max-width: 768px) {
    #pojo-a11y-toolbar.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle {
        top: 30px;
    }
}

/* May prevent link "flickering" and margin shiftings. */
.pojo-a11y-toolbar-inner {
    font-weight: 400 !important;
}

#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a {
    text-decoration: none !important;
    font-size: 0.9em !important;
}

#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a:hover {
    text-decoration: underline !important;
    text-underline-offset: 0.35em !important;
}

#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a.active {
    font-weight: 400 !important;
}

#pojo-a11y-toolbar .pojo-a11y-toolbar-title {
    font-size: 0.9em;
}

body.pojo-a11y-resize-font-110 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-120 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-130 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a {
    text-underline-offset: 0.55em !important;
}

body.pojo-a11y-resize-font-140 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-150 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-160 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-170 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-180 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-190 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-200 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a {
    text-underline-offset: 0.6em !important;
}

/* Counter font increase for widget links. */
body.pojo-a11y-resize-font-110 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-120 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-130 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-140 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-150 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-160 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-170 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-180 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a,
body.pojo-a11y-resize-font-190 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a, 
body.pojo-a11y-resize-font-200 #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a {
    font-size: 70% !important;
}

/* Prevent toolbar links being underlined when "Underline Links" scheme is enabled */
body.pojo-a11y-links-underline .pojo-a11y-toolbar-link span {
    text-decoration: none !important;
}

/* Toggle Link: Focus - Keyboard only. */
#pojo-a11y-toolbar .pojo-a11y-toolbar-link.pojo-a11y-toolbar-toggle-link:focus-visible {
    outline: 2px solid #c9016e;
    outline-offset: 2px;
    outline-style: dashed;
}

/* Link Element List Element: Focus. */
#pojo-a11y-toolbar ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a.pojo-a11y-toolbar-link:focus,
#pojo-a11y-toolbar ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a.pojo-a11y-toolbar-link:focus-visible {
    outline-color: #333;
    outline-offset: -4px;
    outline-style: dashed;
    outline-width: 2px;
}

/* Prevents Gutenberg Spacer from having white background color when light background profile is enabled, which basically would make it visible. */
body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .wp-block-spacer {
    background: none !important;
}

/**
 * Fixes grayscale scrolling bug.
 * Check '/assets/js/app.clicksports.js' for more info on this.
 */
body.pojo-a11y-grayscale {   
    filter: none !important;   
    -webkit-filter: none !important;   
    -webkit-filter: none !important;   
    -moz-filter: none !important;   
    -ms-filter: none !important;   
    -o-filter: none !important;   
    filter: none !important;   
}   
 
html.pojo-a11y-grayscale {
    filter: grayscale(100%);   
    -webkit-filter: grayscale(100%);   
    -webkit-filter: grayscale(1);   
    -moz-filter: grayscale(100%);   
    -ms-filter: grayscale(100%);   
    -o-filter: grayscale(100%);   
    filter: gray;   
}