﻿@media all {
    /* for off screen HTML that still needs to be read as part of the flow */
    .off_screen { position:absolute !important; height:1px; width: 1px; overflow:hidden; clip:rect(1px 1px 1px 1px); clip:rect(1px, 1px, 1px, 1px); }

    /*-- general WCAG --*/
    /*:focus { box-shadow:0 0 10px 0 var(--color-orange); }*/

    input:focus,
    select:focus,
    textarea:focus { border:4px var(--color-blue) solid !important; }

    /*
    a:not(.link_as_button):focus { background-color:#0888ca !important; color:#FFFFFF !important; text-decoration:underline !important; padding:4px 10px; }
    a.link_as_button:focus { background-color:#0888ca !important; color:#FFFFFF !important; text-decoration:underline !important; border-radius:0px; }
    */

    /*-- on-demand links --*/
    a.link_on_focus_only { top:0px; left:-999px; position:absolute; overflow:hidden; z-index:-999; }
    a.link_on_focus_only:focus,
    a.link_on_focus_only:active { color:var(--color-white); background-color:var(--color-blue); top:50px; left:0px; margin:0px; padding:14px 20px; text-align:center;  z-index:99999; text-decoration:underline; line-height:1; }  

    /* for off screen HTML that still needs to be read as part of the flow */
    .off_screen { position:absolute !important; height:1px; width: 1px; overflow:hidden; clip:rect(1px 1px 1px 1px); clip:rect(1px, 1px, 1px, 1px); }

    /* start accessibility */
    .back_link { padding-left:var(--spacing-1L); font-weight:var(--font-weight-bold);text-transform:uppercase; letter-spacing:1px; background-size:var(--font-size-1S); background-repeat:no-repeat; background-position:left center; background-image:url(https://eu2allwebext.blob.core.windows.net/shopkimco/www/resources/images/common/icons/i_back_arrow_black.png); }

    #accessibility h2 { font-size:1.4rem; }
    #accessibility ul.wcag_list { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; align-items:center; }
    #accessibility ul.wcag_list li { text-align:center; border:1px var(--color-gray) solid; background-color:var(--color-white); border-radius:50px; }
    #accessibility ul.wcag_list li a { display:block; padding:20px 2px; border-radius:50px; }

    #accessibility .color_box { margin-top:40px; }

    #font_list li a { color:#111111 !important; }

    #font_list li:nth-child(1) a { font-size:var(--wcag-font-size-100) !important; }        /* 100% */
    #font_list li:nth-child(2) a { font-size:var(--wcag-font-size-125) !important; }        /* 125% */
    #font_list li:nth-child(3) a { font-size:var(--wcag-font-size-150) !important; }        /* 150% */
    #font_list li:nth-child(4) a { font-size:var(--wcag-font-size-175) !important; }        /* 175% */

    #color_list .default_style { color:black !important; background-color:white !important; }

    #color_list .yellow_style_1 { color:yellow !important; background-color:blue !important; border-color:blue !important; }
    #color_list .yellow_style_2 { color:yellow !important; background-color:black !important; border-color:black !important; }

    #color_list .green_style_1 { color:green !important; background-color:white !important; }

    #color_list .white_style_1 { color:white !important; background-color:black !important; border-color:black !important; }
    #color_list .white_style_2 { color:white !important; background-color:gray !important; border-color:gray !important; }
    #color_list .white_style_3 { color:white !important; background-color:darkred !important; border-color:darkred !important; }

    #font_list a:hover,
    #font_list a:focus,
    #font_list a.selected,
    #color_list a:hover,
    #color_list a:focus,
    #color_list a.selected
    {
        text-decoration:underline;

        background-image:url(https://eu2allwebext.blob.core.windows.net/shopkimco/www/resources/images/common/icons/i_circle_checkmark_black.png);
        background-repeat:no-repeat;
        background-position:right 20px top 20px;
        background-size:20px;
    }

        #color_list a.dark_bg:hover,
        #color_list a.dark_bg:focus,
        #color_list a.dark_bg.selected {
            background-image:url(https://eu2allwebext.blob.core.windows.net/shopkimco/www/resources/images/common/icons/i_circle_checkmark_white.png);
        }


    /* end side accessibility */
}

@media (max-width:1000px ){
    #accessibility ul.option_list { grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:500px ){
    #accessibility { text-align:center; }
    #accessibility ul.option_list { display:block; }
    #accessibility ul.option_list li { margin-bottom:20px; }
}