/* stylelint-disable selector-max-type */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    color: $color-black;
    font-size: 62.5%;
}

body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    color: $text-dark;
    font: $font-base;
    font-weight: $font-weight-normal;
    background-color: #ccc;

    > .beekeepers-app {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}

main {
    display: flex;
    flex: 1;
    overflow-y: auto;
}

strong {
    font-weight: $font-weight-bold;
}

button {
    padding: 8px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    background: #008bf4;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
/* stylelint-enable selector-max-type */

/* stylelint-disable selector-max-type */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    color: $color-black;
    font-size: 62.5%;
}

body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    color: $text-dark;
    font: $font-base;
    font-weight: $font-weight-normal;
    background-color: #f8f9fb;

    > .beekeepers-app {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}

main {
    display: flex;
    flex: 1;
    overflow-y: auto;
}

strong {
    font-weight: $font-weight-bold;
}

button {
    padding: 8px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    background: #008bf4;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
/* stylelint-enable selector-max-type */

Use smart background color to mask layout issues
Use smart background color to mask layout issues

Due to the use of flexbox, there are cases where the Survey
page doesn't cover the entire page, only the content shown
in the viewport. The lighter background color was applied
only to this viewport area, so when the user would scroll in
IE or Firefox (and in some few cases, Chrome), they would see
the darker background color show from underneath.

Figuring out a cross-browser solution to these layout issues
could be challenging, so in the interest of expediency we
set the background to be the same lighter color as that of
the Survey page. This ensures that the break is never seen,
and this doesn't affect any other part of the app because
there is always content placed over the body.

Connects #465
