html[data-layout-font-size="small"] {
    font: normal 400 12px/1.2 "Lato", sans-serif;
}

html[data-layout-font-size="normal"] {
    font: normal 400 14px/1.4 "Lato", sans-serif;
}

html[data-layout-font-size="big"] {
    font: normal 400 16px/1.8 "Lato", sans-serif;
}

/* kontrast zółto czarny */
html[data-layout-contrast="black-yellow"] {
    color: yellow;
    background-color: black;
}

    html[data-layout-contrast="black-yellow"] * {
        color: yellow !important; 
        background: black !important;
    }

    html[data-layout-contrast="black-yellow"] #wcag svg {
        fill: yellow;
    }

    html[data-layout-contrast="black-yellow"] img {
        display: initial;
        filter: sepia(100%);
    }

    html[data-layout-contrast="black-yellow"] input,
    html[data-layout-contrast="black-yellow"] button {
        border: 1px solid #888888;
    }

    html[data-layout-contrast="black-yellow"] a[data-layout-font-size] {
        color: yellow;
    }

    html[data-layout-contrast="black-yellow"] a ,
    html[data-layout-contrast="black-yellow"] a:visited {
        color: yellow;
    }

    html[data-layout-contrast="black-yellow"] .WKFieldSet,
    html[data-layout-contrast="black-yellow"] .WKFieldSet a,
    html[data-layout-contrast="black-yellow"] .WKFieldSet a img {
        background: white !important;
    }

    html[data-layout-contrast="black-yellow"] .WK svg,
    html[data-layout-contrast="black-yellow"] .WK .st0,
    html[data-layout-contrast="black-yellow"] .WK .st1 {
        fill: yellow;
    }

/* kontrast biało czarny */
html[data-layout-contrast="black-white"] {
    color: white;
    background-color: black;
}

    html[data-layout-contrast="black-white"] * {
        color: white !important;
        background: black !important;
    }


    html[data-layout-contrast="black-white"] #wcag svg {
        fill: white;
    }

    html[data-layout-contrast="black-white"] img {
        display: initial;
        filter: grayscale(100%);
    }

    html[data-layout-contrast="black-white"] input,
    html[data-layout-contrast="black-white"] button {
        border: 1px solid #888888;
    }

    html[data-layout-contrast="black-white"] a[data-layout-font-size] {
        color: white;
    }

    html[data-layout-contrast="black-white"] a,
    html[data-layout-contrast="black-white"] a:visited {
        color: white;
    }

    html[data-layout-contrast="black-white"] .WKFieldSet,
    html[data-layout-contrast="black-white"] .WKFieldSet a,
    html[data-layout-contrast="black-white"] .WKFieldSet a img {
        background: white !important;
    }

    html[data-layout-contrast="black-white"] .WK svg, 
    html[data-layout-contrast="black-white"] .WK .st0, 
    html[data-layout-contrast="black-white"] .WK .st1 {
        fill: white;
    }

/*wspólne dla wysokiego kontrastu*/
    html[data-layout-contrast="black-yellow"] .help-content,
    html[data-layout-contrast="black-white"] .help-content {
        display: block;
        text-align: right;
    }

    html[data-layout-contrast="black-yellow"] i[title=foobar],
    html[data-layout-contrast="black-white"]  i[title=foobar]  {
        display: none;
    }

    html[data-layout-contrast="black-yellow"] .box-with-help,
    html[data-layout-contrast="black-yellow"] .box-with-two-helps,
    html[data-layout-contrast="black-white"] .box-with-help,
    html[data-layout-contrast="black-white"] .box-with-two-helps {
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
    }
    @media screen and (max-width : 850px) {
        html {
    }

    body {
        max-width: 100%;
    }

    .content {
        padding-top: 0;
        padding-bottom: 0;
        background-image: none !important;
    }

    .panel {
        width: 100%;
    }

    .header, .header img {
        width: 100%;
    }

    .label {
        margin-left: 0;
        display: none;
    }

    .box {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .box-h, .box-p {
        padding-left: 10px;
        padding-right: 10px;
    }

    .footer, .footer img {
        width: 100%;
    }