:root {
}

html, body {
    height: 100%;
}

/*  =========================================
        Layout
    =========================================   */

.ec-page {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.ec-body-container {
    flex: 1 1 auto;
    overflow: hidden;
}

    .ec-body-container > .row {
        height: 100%;
    }

.ec-content-container {
    overflow-x: auto;
    overflow-y: hidden;
}

.ec-scroll-container {
    overflow-y: auto;
}

.ec-content-container > .row {
    min-height: 100%;
    padding-bottom: 3.5rem;
}

.ec-footer-actions {
    margin-top: -3.5rem;
    min-width: 100%;
}

.ec-screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

    .ec-screen-reader-only:active, .ec-screen-reader-only-focusable:focus {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

/*
    This is used for the testing of scrolling within a fixed area.
*/
.area-one {
    float: left;
    height: 100%;
    background: var(--ec-color-gray-100);
    color: white;
}

.area-two {
    height: 100%;
    color: white;
    background: blue;
    flex-direction: column;
}

.area-two-content {
    height: 100%;
    padding: 30px;
    color: white;
    background: green;
    overflow-y: auto;
}

.area-two-subcontent {
    height: 100rem;
    color: white;
    background: black;
}

.area-two-footer {
    background: yellow;
    height: 4rem;
}