/**
 * Element defaults. See dfusionfw/docs/css-conventions.md.
 */
@layer base {
    ul,
    ol {
        margin-left: 0;
        padding-left: 0;
    }
    html,
    body {
        min-width: 320px;
    }
    /* Lets JavaScript read the active CSS breakpoint rather than duplicating
       the pixel values in JS. common.js reads the computed `left` and maps
       1..5 onto small..large. The tiers below must stay in step with
       grid.css and docs/css-conventions.md §7 — a gap here means
       WindowSize resolves to no breakpoint at all. */
    .jsMediaQueries {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 1px;
        height: 1px;
    }
    /* small | <= 640 */
    @media only screen and (max-width: 640px) {
        .jsMediaQueries {
            left: 1px;
        }
    }
    /* smallMedium | 641 - 900 */
    @media only screen and (min-width: 641px) and (max-width: 900px) {
        .jsMediaQueries {
            left: 2px;
        }
    }
    /* medium | 901 - 1279 */
    @media only screen and (min-width: 901px) and (max-width: 1279px) {
        .jsMediaQueries {
            left: 3px;
        }
    }
    /* largeMedium | 1280 - 1919 */
    @media only screen and (min-width: 1280px) and (max-width: 1919px) {
        .jsMediaQueries {
            left: 4px;
        }
    }
    /* large | >= 1920 */
    @media only screen and (min-width: 1920px) {
        .jsMediaQueries {
            left: 5px;
        }
    }
}