/**
 * Divi Theme Builder chrome: pin the footer to the bottom of the viewport
 * when the page is shorter than the screen, without capping a tall page at
 * 100vh (that put the footer over the overflowing content).
 *
 * Divi 5 wraps the layout as body > #page-container > #et-boc > header +
 * #et-main-area > #main-content + footer.
 */
html,
body,
#page-container {
    height: auto;
    min-height: 100%;
}

#page-container,
#et-boc,
#et-main-area,
#main-content {
    overflow: visible;
}

#et-boc {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    display: flex;
    flex-direction: column;
}

#et-main-area {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    height: auto;
}

#main-content {
    flex: 1 0 auto;
    height: auto;
}

footer.et-l--footer {
    flex-shrink: 0;
    margin-top: auto;
}

.admin-bar #et-boc {
    min-height: calc(100vh - 32px);
    min-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
    .admin-bar #et-boc {
        min-height: calc(100vh - 46px);
        min-height: calc(100dvh - 46px);
    }
}