/* colors */
.form-control {
    color: black;
}
.critical {
    color: #b00000;
}

.color-white {
    color: white;
}
.color-gray {
    color: gray;
}
.color-black {
    color: #000;
}
.color-dark-gray {
    color: #333;
}
.color-blue {
    color: #1f419a;
}
.color-dark-blue {
    color: #003399;
}

/* backgrounds - colors */
.bg-white {
    background: white;
}
.bg-off-white {
    background: #f7f7f7 !important;
}
.bg-dark-blue {
    background: #233064 !important;
}
.bg-legend-pink {
    background: #ff81ff !important;
}
.bg-legend-yellow {
    background: #ffff00 !important;
}
.bg-legend-green {
    background: #99ff99 !important;
}
.bg-legend-blue {
    background: #9999ff !important;
}
.bg-legend-orange {
    background: #ffa500 !important;
}
.bg-inherit {
    background: inherit !important;
}

/* z-index utilities */
.z-1000 {
    z-index: 1000 !important;
}

/* flex utilities */
.flex_ai-center {
    display: flex;
    align-items: center;
}
.flex_ai_jc-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex_aic_jcb {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flex_ais_jcb {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.flex_ais_jcb h1 {
    max-width: 850px;
}

/* cursor utilities */
.pointable {
    cursor: pointer;
}

/* other */
.underline {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.underline-hover:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* display */
.bh_d-none {
    display: none;
}

.overflow-visible {
    overflow: visible;
}
/*** Scalable utilities ***/

/** Non-scaled **/

/* text utilities */
.break-word {
    overflow-wrap: break-word;
    overflow: hidden;
    word-break: break-word;
    word-wrap: break-word;
}

/* font sizes */
.fs-1rem {
    font-size: 1rem !important;
}

.fs-12px {
    font-size: 12px !important;
}
.fs-13px {
    font-size: 13px !important;
}
.fs-14px {
    font-size: 14px !important;
}
.fs-15px {
    font-size: 15px !important;
}
.fs-16px {
    font-size: 16px !important;
}
.fs-17px {
    font-size: 17px;
}
.fs-18px {
    font-size: 18px !important;
}
.fs-20px {
    font-size: 20px !important;
}
.fs-24px {
    font-size: 24px !important;
}

/* font weights */
.fw-400 {
    font-weight: 400;
}
.fw-500 {
    font-weight: 500 !important;
}

/* spacing utilities */
/* margin */
.mt-0_1em {
    margin-top: 0.1em !important;
}
.mt-1em {
    margin-top: 1em !important;
}
.mt-6em {
    margin-top: 96px !important;
}
.mr-0_3em {
    margin-right: 0.3em !important;
}
.mb-0_5em {
    margin-bottom: 0.5em !important;
}
.mb-0_6em {
    margin-bottom: 0.6em !important;
}
.mb-0_8em {
    margin-bottom: 0.8em !important;
}
.mb-1em {
    margin-bottom: 1em !important;
}
.mb-1_25em {
    margin-bottom: 1.25em !important;
}
.mb-2em {
    margin-bottom: 2em !important;
}
.mb-2_5em {
    margin-bottom: 2.5em !important;
}
.mb-5em {
    margin-bottom: 5em !important;
}
.ml-0_5em {
    margin-left: 0.5em !important;
}

.my-0_5rem {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}
.mt-0_4rem {
    margin-top: 0.4rem !important;
}
.mt-0_3rem {
    margin-top: 0.3rem !important;
}
.mb-0_5rem {
    margin-bottom: 0.5rem !important;
}
.mb-1rem {
    margin-bottom: 1rem !important;
}

.mt-2px {
    margin-top: 2px !important;
}
.mt-4px {
    margin-top: 4px !important;
}
.mt-8px {
    margin-top: 8px !important;
}
.mt-10px {
    margin-top: 10px;
}
.mt-16px {
    margin-top: 16px !important;
}
.mr-4px {
    margin-right: 4px !important;
}
.mr-6px {
    margin-right: 6px !important;
}
.mr-8px {
    margin-right: 8px !important;
}
.mr-24px {
    margin-right: 24px !important;
}
.mb-4px {
    margin-bottom: 4px !important;
}
.mb-16px {
    margin-bottom: 16px !important;
}
.mb-24px {
    margin-bottom: 24px !important;
}
.ml-5px {
    margin-left: 5px !important;
}
.ml-8px {
    margin-left: 8px !important;
}
.ml-16px {
    margin-left: 16px !important;
}

/* padding */
.pt-0_5em {
    padding-top: 0.5em !important;
}
.pt-1_0em {
    padding-top: 1em !important;
}
.py-0_75em {
    padding-top: 0.75em !important;
    padding-bottom: 0.75em !important;
}
.pb-1_5em {
    padding-bottom: 1.5em !important;
}
.pt-0_75rem {
    padding-top: 0.75rem !important;
}
.px-0_75rem {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.pt-3px {
    padding-top: 3px !important;
}
.pl-15px {
    padding-left: 15px !important;
}
.px-16px {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* components */
.accessibleCheckbox {
    /* checkbox */
    margin-top: 1px;
    margin-right: 6px;
    height: 17px;
    width: 17px;
    cursor: pointer;
}

.accessibleRadio {
    /* radio */
    margin-top: 1px;
    margin-right: 6px;
    height: 20px;
    width: 20px;
    cursor: pointer;
}

/* Sections */

/* map info window component - should be in locatorPage.css, but print can't use that file - until print gets merged with main app the css for the new changes stays here */

.mapInfoWindowHead {
    margin-top: -7px; /* to align label with 'x' button */
    margin-left: 2px; /* small margin for focus ring */
    margin-bottom: 2px; /* small margin for focus ring */
}

.mapInfoWindowBody {
    padding: 2px; /* small padding to give space for focus ring */
}

/* x button container and icon on map info modal */
.scaled button.gm-ui-hover-effect {
    width: 70px !important;
    height: 70px !important;
}
.scaled button.gm-ui-hover-effect span {
    width: 36px !important;
    height: 36px !important;
    margin: 16px !important;
}

@media (max-width: 600px) {
    .scaled #details .mapInfoWindowHead {
        font-size: 26px !important;
    }
    .scaled #details .mapInfoWindowBody div {
        font-size: 20px !important;
        margin-top: 10px !important;
    }
}

/** Global Action Buttons - Zoom/Print **/

/* printSVG */
#globalPrintSVG path,
#globalPrintSVG polygon,
#globalPrintSVG rect {
    fill: #fff;
}
#globalPrintSVG line {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 0.75px;
}

/* zoomSVG*/
#globalZoomSVG polyline,
#globalZoomSVG line,
#globalZoomSVG polygon {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
}
#globalZoomSVG polyline,
#globalZoomSVG .l0 {
    stroke-width: 2.36px;
}
#globalZoomSVG .l1,
#globalZoomSVG .l2 {
    stroke-width: 1.34px;
}
#globalZoomSVG polyline,
#globalZoomSVG .l1 {
    stroke-linecap: round;
}
#globalZoomSVG polygon {
    fill: #fff;
}

.globalAction-btn-desktop {
    position: fixed;
    right: 0;
    width: 48px;
    height: 48px;
    border: none;
    outline: none;
    transition: width 0.15s ease-in-out, scale 0.15s ease-in-out, top 0.15s ease-in-out, margin 0.15s ease-in-out;
    border: 1px solid white;
    border-right: 0;
    padding: 0;
    z-index: 2;
}
.globalAction-btn-desktop svg {
    height: 48px;
}
.globalAction-btn-desktop:hover {
    width: 64px;
}
.globalAction-btn-desktop:focus {
    outline: none;
}
.globalAction-btn-desktop:first-child {
    border-top-left-radius: 8px;
}
.globalAction-btn-desktop:last-child {
    border-bottom-left-radius: 8px;
}

.scaled .globalAction-btn-desktop {
    scale: 1.5;
    margin-right: 12px;
}
.scaled .globalAction-btn-desktop svg {
    width: unset !important;
    height: 48px !important;
}

#globalPrint-btn {
    top: calc(50%);
    background-color: #758a8d;
    padding: 0;
    display: block;
}
.gmap-fullscreen #globalPrint-btn {
    display: none;
}

#globalZoom-btn-desktop {
    top: calc(50% - 47px);
    background-color: #1e384b;
    z-index: 1000;
}
.scaled #globalZoom-btn-desktop {
    scale: 1.5;
    top: calc(50% - 71px);
    background-color: #f59e0b;
}

#globalZoom-btn-mobile {
    position: fixed;
    bottom: 17px;
    right: 17px;
    background-color: #1e384b;
    width: 48px;
    height: 48px;
    padding: 0;
    cursor: pointer;
    border: 1px solid white;
    border-radius: 50%;
    z-index: 1000;
    transition: scale 0.15s ease-in-out, right 0.15s ease-in-out, bottom 0.15s ease-in-out;
}
#globalZoom-btn-mobile:focus {
    outline: unset;
}
#globalZoom-btn-mobile:hover {
    scale: calc(1.1);
}

.scaled #globalZoom-btn-mobile {
    scale: 1.5;
    right: 40px;
    bottom: 40px;
    background-color: #f59e0b;
}
.scaled #globalZoom-btn-mobile svg {
    width: unset !important;
    height: unset !important;
}

/*** Scaled ***/

/* BS Overrides */
.scaled .form-control {
    font-size: 24px;
    padding: 9px 18px; /* 0.375rem 0.75rem; */
}
.scaled input.form-control {
    height: 57px; /* height: unset; calc(54px + 0.75rem + 2px); */
}
.scaled textarea.form-control {
    height: 91.5px; /* height: auto; */
}

.scaled hr {
    margin-top: 24px; /* 16px */
    margin-bottom: 24px; /* 16px */
    border: 0;
    border-top: 1.5px solid rgba(0, 0, 0, 0.1); /* 1px */
}

/* Scale helper class */
.scaled .form-control.scale {
    font-size: 1.5rem;
}
.scaled .card-header.scale {
    padding: 1.125rem 1.875rem;
}
.scaled .card-body.scale {
    padding: 1.6875rem !important;
}
.scaled .dropdown-item.scale {
    font-size: 1.5rem;
}
.scaled .btn-secondary.scale {
    padding: 15px;
}
.scaled .modal-body.scale {
    padding: 24px;
}

/* Scaled font sizes */
.scaled .fs-1rem {
    font-size: 1.5rem !important;
}

.scaled .fs-12px {
    font-size: 18px !important;
}
.scaled .fs-13px {
    font-size: 19.5px !important;
}
.scaled .fs-14px {
    font-size: 21px !important;
}
.scaled .fs-15px {
    font-size: 22.6px !important;
}
.scaled .fs-16px {
    font-size: 24px !important;
}
.scaled .fs-17px {
    font-size: 25.5px;
}
.scaled .fs-18px {
    font-size: 27px !important;
}
.scaled .fs-20px {
    font-size: 30px !important;
}
.scaled .fs-24px {
    font-size: 36px !important;
}

/* scaled spacing utilities */
.scaled .mt-2px {
    margin-top: 3px !important;
}
.scaled .mt-4px {
    margin-top: 6px !important;
}
.scaled .mt-8px {
    margin-top: 8px !important;
}
.scaled .mt-10px {
    margin-top: 15px !important;
}
.scaled .mt-16px {
    margin-top: 24px !important;
}
.scaled .mr-4px {
    margin-right: 6px !important;
}
.scaled .mr-6px {
    margin-right: 9px !important;
}
.scaled .mr-8px {
    margin-right: 12px !important;
}
.scaled .mr-24px {
    margin-right: 36px !important;
}
.scaled .mb-4px {
    margin-bottom: 6px !important;
}
.scaled .mb-16px {
    margin-bottom: 24px !important;
}
.scaled .mb-24px {
    margin-bottom: 36px !important;
}
.scaled .ml-5px {
    margin-left: 7.5px !important;
}
.scaled .ml-8px {
    margin-left: 12px !important;
}
.scaled .ml-16px {
    margin-left: 24px !important;
}

/* padding */
.scaled .pt-3px {
    padding-top: 4.5px !important;
}
.scaled .pl-15px {
    padding-left: 22.5px !important;
}
.scaled .px-16px {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* components */
.scaled .accessibleCheckbox {
    /* checkbox */
    margin-right: 9px; /* 6px */
    height: 24px; /* 17px */
    width: 24px; /* 17px */
}

.scaled .accessibleRadio {
    /* radio */
    margin-right: 9px; /* 6px */
    height: 24px; /* 17px */
    width: 24px; /* 17px */
}

/* Sections */

/*** ***/
/** Global Action Buttons - Zoom/Print **/

/* printSVG */
.scaled #globalPrintSVG line {
    stroke-width: 0.75px; /* ? */
}

/* zoomSVG*/
.scaled #globalZoomSVG polyline,
.scaled #globalZoomSVG .l0 {
    stroke-width: 2.36px; /* ? */
}
.scaled #globalZoomSVG .l1,
.scaled #globalZoomSVG .l2 {
    stroke-width: 1.34px; /* ? */
}

.scaled .globalAction-btn-desktop {
    scale: 1.5;
    margin-right: 12px;
}
.scaled .globalAction-btn-desktop svg {
    width: unset !important;
    height: 48px !important;
}
.scaled .globalAction-btn-desktop:first-child {
    border-top-left-radius: 12px; /* 8px */
}
.scaled .globalAction-btn-desktop:last-child {
    border-bottom-left-radius: 12px; /* 8px */
}
.scaled #globalZoom-btn-desktop {
    scale: 1.5;
    top: calc(50% - 71px);
    background-color: #f59e0b;
}
.scaled #globalZoom-btn-mobile {
    scale: 1.5;
    right: 40px;
    bottom: 40px;
    background-color: #f59e0b;
    padding: 0;
}
.scaled #globalZoom-btn-mobile svg {
    width: unset !important;
    height: unset !important;
}