// Common/Global Styles
// Use this file for global styles that don't or won't have their own stylesheet
body {
    font-size: 16px;
    background-color: #fff;
    color: #4d5151;
    #app {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
        form {
            > .container-fluid {
                margin-bottom: -1rem;
                @media screen and (min-width: 1090px) {
                    margin-bottom: -5rem;
                }
            }
        }
    }
    .container-fluid {
        padding: 0 1.5rem;
        .prevent-squish {
            overflow-x: unset;
        }
        &.page-container-grouped-styles {
            display: flex;
            flex-direction: column;
        }
        // Set max-width on columns to prevent overly-wide
        // components on extra wide screens.
        .col-md-6 {
            max-width: 472px;
            @include media-breakpoint-up(xl) {
                max-width: 708px;
            }
            .col {
                max-width: 236px;
                &.one-list-card-width {
                    max-width: 472px;
                    @include media-breakpoint-up(xl) {
                        max-width: 66.6666666%;
                    }
                }
            }
        }
        .col-xl-4 {
            max-width: 472px;
            .col {
                max-width: 100%;
            }
        }
        //Quote page max-width for service packages
        .col-xl-8 {
            max-width: 1200px;
        }
        //END set max-width on columns
    }
    .pointer {
        cursor: pointer;
    }
    .container,
    .container-fluid {
        overflow-x: hidden;
    }

    .sub-container {
        &.make-tall {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
        }
    }

    .sr-only {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    // Fix "iOS viewport scroll bug" issue on iPhone
    // where bottom of page is covered by address bar
    @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
        .page-container-grouped-styles {
            padding-bottom: 3rem;
        }
    }
}
.modal-open:not(.prevent-modal-scroll) {
    .container-fluid {
        &.page-container-grouped-styles {
            overflow: hidden;
            height: auto;
        }
    }
}
