// 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;
    .container-fluid {
        max-width: 576px; //Remove once desktop app is complete
        &.container-shadow {
            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15); //Use instead of Bootstrap's helper
        }
        &.make-tall {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .prevent-squish {
            overflow-x: unset;
        }
    }
    .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;
    }

    .page-container-grouped-styles {
        @extend .container-fluid, .shadow, .rounded-3, .p-2, .position-relative, .make-tall, .px-5;
    }

    //Footer modal backdrop adjustments for positioning
    .modal-backdrop {
        left: 50%;
        transform: translateX(-50%);
        max-width: 576px;
        height: calc(100% - 72px);
    }
}
//Disable scroll of main container when modal is open
.modal-open {
    .page-container-grouped-styles {
        overflow: hidden;
    }
}