/**
 * Uses flexbox to create footer with variable height that stick to the bottom of the page
 * mg-page is the flex container that flexes in horizontal direction
 * mg-page-content takes all the space left
 * footer is put below mg-page-content inside mg-page
 *
 *  ------------------------------------------
 *  | mg-page                                |
 *  |  ------------------------------------  |
 *  |  | mg-page-content                  |  |
 *  |  |                                  |  |
 *  |  |                                  |  |
 *  |  |                                  |  |
 *  |  |                                  |  |
 *  |  |                                  |  |
 *  |  |                                  |  |
 *  |  ------------------------------------  |
 *  |  ------------------------------------  |
 *  |  |footer                            |  |
 *  |  |                                  |  |
 *  |  |                                  |  |
 *  |  ------------------------------------  |
 *  |                                        |
 *  ------------------------------------------
 *
 * 1. Avoid the IE 10-11 `min-height` bug.
 * 2. Set `flex-shrink` to `0` to prevent some browsers from
 *    letting these items shrink to smaller than their content's default
 *    minimum size. See http://bit.ly/1Mn35US for details.
 * 3. Use `%` instead of `vh` since `vh` is buggy in older mobile Safari.
 */
 html, body {
    height: 100%;
}

.mg-page {
    display: flex;
    flex-direction: column;
    height: 100%; /* 1, 3 */
}

.footer {
    flex: none; /* 2 */
    padding-top: 1rem;
}

.mg-page-content {
    flex: 1 0 auto; /* 2 */
}
.mg-page-content::after {
    content: '\00a0'; /*   */
    display: block;
    height: 0px;
    visibility: hidden;
}