// 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 { padding: 0 1.5rem; .prevent-squish { overflow-x: unset; } &.page-container-grouped-styles { height: 100dvh; 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; } } }