html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.overlay-parent {
    height: 282px;
    fill: #dadada;
    overflow: hidden;
    background: url("../images/osp_vehicle.jpg") no-repeat 0 50%;
    background-size: cover;
}

#form-container {
    min-height: 100vh;
    display: flex;
}

#create-account-container {
    /*
    this is duplicating py-5 a bit. But without extra padding on the bottom, there's just random whitespace that takes up
    around 100px. I cannot, for the life of me, figure out why. It's not in the html element, it's not in the body element,
    and it's seemingly outside of the entire page. But adding padding seems to expand this correctly, and the page looks
    acceptable on different resolutions. Whatever.
     */
    padding-bottom: 9rem;
    padding-top: 3rem;
}

/* login page fix for tooltip to be included in the form-control border */

i.orportal-tooltip {
    position: absolute;
    right: 0;
    top: .55rem;
    z-index: 5;
}

i.orportal-tooltip .orportal-tooltipbox {
    max-width: none;
}

/* TODO: hacky - IE 10+ only */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    i.orportal-tooltip {
        transform: translate(-30%, 25%);
        z-index: 10;
    }
    .orportal-tooltipbox {
        max-width: none !important;
    }
}