@font-face {
    font-family: 'VAGRoundedLt_cmh';
    src: url('../fonts/vagroundedstd_light-webfont.eot');
    src: url('../fonts/vagroundedstd_light-webfont.eot?#iefix') format('embedded-opentype'), 
         url('../fonts/vagroundedstd_light-webfont.woff') format('woff'), 
         url('../fonts/vagroundedstd_light-webfont.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

body {
    background-color: #e9f2fb;
    font-family: "VAGRoundedLt_cmh", Verdana, Geneva, sans-serif;
}


.container {
    width: 95%;
}

::selection {
    background: none;
}

.cmh-logo {
    height: 55px;
}

.arabic {
    direction: rtl;
}

.footer-container {
    direction: ltr !important;
}

.kiosk .footer-container {
    position: sticky;
    bottom: 0;
    margin-top: 0;
}

.kiosk .h-min-100vh {
    max-height: 100vh;
    overflow: hidden;
}

.display-none {
    display: none;
}

.h-100 {
    height: 100%;
}

.h-min-100vh {
    min-height: 100vh; /* fallback for Electron browser since svh isn't accepted */
    min-height: 100svh;
}

.w-auto {
    width: auto;
}

.w-fit-content {
    width: fit-content !important;
}

.w-100 {
    width: 100%;
}

.w-90,
.w-75,
.w-50,
.w-40,
.w-20,
.w-15 {
    width: 95%;
}

.btn-primary.text-nowrap {
    white-space: nowrap !important;
}

.upside-down {
    transform: rotateY(-180deg);
}

.arrow-icon {
    font-size: 2em;
    line-height: 100%;
    margin-top: -0.1em;
}

.align-self-center .arrow-icon {
    font-size: 2.5em;
    line-height: 100%;
}

/* loading mask */
#loading-mask {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #fff;
    opacity: 0;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
    transition: opacity 0.5s linear;
}

    #loading-mask.visible {
        opacity: 0.4;
        z-index: 9999;
    }

    #loading-mask svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        fill: #fff;
        width: 20rem;
        height: 20rem;
    }

.spinner {
    text-align: center;
    color: #0061a6;
}

    .spinner svg {
        fill: #0061a6;
        width: 10rem;
        height: 10rem;
    }

/* end loading mask */

.page-text {
    color: #0061A6;
    font-size: calc(14px + 1.75vw);
}

.page-text-xl {
    color: #0061A6;
    font-size: calc(18px + 4vw);
}

.page-text-lg {
    color: #0061A6;
    font-size: calc(18px + 2vw);
}

.page-text-md {
    color: #0061A6;
    font-size: calc(14px + 1.5vw);
}

.page-text-sm {
    color: #0061A6;
    font-size: calc(12px + 1.25vw);
}

.page-text-xs {
    color: #0061A6;
    font-size: calc(10px + 1.25vw);
}

.wrap-text {
    white-space: normal;
    line-height: 1;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

.red {
    color: red;
}

.dark-blue {
    color: #003865;
}

.light-blue {
    color: #79a5d5;
}

hr {
    background-color: #0061A6;
    height: 2px;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.float-right {
    float: right;
}

.dropdownlist {
    font-size: 20px;
    padding: 5px;
    width: 100%;
    border-radius: 5px;
}

.text-input {
    width: 100%;
    padding: 0px 5px;
    font-size: 20px;
}

.col-3,
.col-xs-8,
.col-xs-6,
.col-sm-4,
.col-sm-6,
.col-md-6,
.col-lg-6 {
    padding-bottom: 15px;
}

.flexbox-container {
    display: flex;
    width: 100%;
}

.flexbox-one-col {
    margin:0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flexbox-two-col {
    width: 50%;
    padding:1%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flexbox-three-col {
    width: 33.3%;
    padding:1%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.d-grid {
    display: grid;
}
    .d-grid.four-col,
    .d-grid.three-col,
    .d-grid.two-col,
    .d-grid.one-col {
        grid-auto-rows: 1fr;
    }

    .d-grid.two-col.col-no-resize {
        grid-template-columns: repeat(2, 1fr);
    }
    .d-grid.three-col.col-no-resize {
        grid-template-columns: repeat(3, 1fr);
    }
    .d-grid.four-col.col-no-resize {
            grid-template-columns: repeat(4, 1fr);
        }

.d-inline {
    display: inline;
}

.d-flex {
    display: flex;
}

.d-flex-row {
    display: flex;
    flex-direction: row;
}
    .d-flex-row div {
        padding: 1% 2%;
    }

.d-flex-col {
    display: flex;
    flex-direction: column;
}

.flex-3 {
    flex: 3;
}

.flex-2 {
    flex: 2;
}

.flex-1 {
    flex: 1;
}

.flex-1-half {
    flex: 1.5;
}

.flex-col {
    padding: 1%;
}

.align-self-center {
    align-self: center;
}

.align-content-center {
    align-content: center;
}

.align-items-center {
    align-items: center;
}

.justify-content-center {
    justify-content: center;
}

.box-shadow {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.btn {
    position: relative;
    z-index: 10;
}

.btn-primary {
    background-color: #0061A6;
    color: #ffffff;
    font-size: calc(18px + 2vw);
    line-height: 1.1;
    padding: 3vh 3vw;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    white-space: normal;
}
    .btn-primary.selected {
        border: 4px solid #003865;
    }
        .btn-primary.selected::after {
            content: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 448 512' fill='%23003865' xmlns='http://www.w3.org/2000/svg'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l320 0c8.8 0 16-7.2 16-16l0-320c0-8.8-7.2-16-16-16L64 80zM0 96C0 60.7 28.7 32 64 32l320 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
            position: absolute;
            width: 0.75em;
            line-height: 1em;
            top: 8px;
            right: 10px;
        }
    .btn-primary.not-selected {
        opacity: 0.85;
    }

    .btn-primary .btn-subtext {
        display: block;
        font-size: calc(14px + 1vw);
    }

        .btn-primary .btn-subtext.smaller {
            font-size: calc(12px + 1vw);
        }

    .btn-primary.padding-sm {
        padding: 2vh 2vw;
    }
    .btn-primary.padding-xs {
        padding: 1vh 2vw;
    }

.btn-sm {
    font-size: calc(14px + 1.5vw);
    padding: 1.5vh 2.5vw;
}

.btn-xs {
    font-size: calc(14px + 1vw);
    padding: 1vh 1.5vw;
}

.btn-external-link {
    font-size: 15px;
    padding: 10px 15px;
}

.btn-external-link-larger {
    font-size: 25px;
    padding: 15px 20px;
}

.btn-go:disabled {
    background-color: #dedede;
    border-color: #dedede;
}

.flexbox-one-col,
.flexbox-two-col,
.flexbox-three-col {
    margin-top: 20px;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 1vh 1vw !important;
}

.pt-1 {
    padding-top: 1vh !important;
}

.pt-2 {
    padding-top: 2vh !important;
}

.pb-4 {
    padding-bottom: 4vh !important;
}

.pl-1 {
    padding-left: 1vw;
}

.pl-2 {
    padding-left: 2vw;
}

.pr-1 {
    padding-right: 1vw;
}

.pr-2 {
    padding-right: 2vw;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.m-1 {
    margin: 1vh 1vw;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my-1 {
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.mx-2 {
    margin-left: 2vw;
    margin-right: 2vw;
}

.mt-neg {
    margin-top: -2vh !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 1vh !important;
}

.mt-2 {
    margin-top: 2vh !important;
}

.mt-3 {
    margin-top: 3vh !important;
}

.mt-4 {
    margin-top: 4vh !important;
}

.ml-1 {
    margin-left: 1vw !important;
}

.ml-2 {
    margin-left: 2vw !important;
}

.mr-1 {
    margin-right: 1vw !important;
}

.mr-2 {
    margin-right: 2vw !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 1vh !important;
}

.mb-2 {
    margin-bottom: 2vh !important;
}

.mb-3 {
    margin-bottom: 3vh !important;
}

.mb-4 {
    margin-bottom: 4vh !important;
}

.mb-6 {
    margin-bottom: 6vh !important;
}

.mb-8 {
    margin-bottom: 8vh !important;
}

.back-button {
    transform: rotateY(-180deg);
}

.inline-buttons-container {
    width: 1280px;
}

.inline-buttons-container input {
    margin: 10px;
}
.inline-buttons-container .btn-row .btn:first-child {
    margin-left: 0;
}
.inline-buttons-container .btn-row .btn:last-child {
    margin-right: 0;
}

.inline-buttons-container.cycle-slide {
    text-align:center;
}

.btn-visit-type-selection {
    white-space: normal;
}
    .btn-visit-type-selection div {
        display: inline-block;
    }

.btn-backspace.float-right {
    float: right;
    padding-right: 35px;
}

.btn-backspace {
    display: inline-block;
    padding: 0;
}

    .btn-backspace svg {
        width: 80px;
        height: 75px;
        filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, .2));
    }

.selected-text-container {
    font-size: 80px;
    color: #002D9A;
}

.white-bg {
    background-color: #fff;
    border-radius: 4px;
}

.blue-bg {
    background-color: #c7d6e5;
}

.blue-border {
    border: 3px solid;
    border-radius: 20px;
}

.scroller-container {
    position: relative;
    width: 100%;
    max-height: calc(90vh - 245px);
    max-height: -moz-calc(90vh - 245px);
    max-height: -webkit-calc(90vh - 245px);
    overflow: hidden;
    -ms-touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}
    .scroller-container.max-height {
        height: calc(90vh - 245px);
        height: -moz-calc(90vh - 245px);
        height: -webkit-calc(90vh - 245px);
    }


.scroller {
    position: relative;
    width: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.iScrollVerticalScrollbar {
    position: absolute;
    z-index: 9999;
    width: 16px;
    bottom: 2px;
    top: 2px;
    right: 2px;
    overflow: hidden;
}

    .iScrollVerticalScrollbar.iScrollBothScrollbars {
        bottom: 18px;
    }

.iScrollIndicator {
    position: absolute;
    background: #0061A6;
    border-width: 1px;
    border-style: solid;
    border-color: #2e6da4;
    border-radius: 8px;
}

.iScrollVerticalScrollbar .iScrollIndicator {
    width: 100%;
}

@media (max-width:480px) {
    .col-xs-6 {
        padding-right: 10px;
        padding-left: 10px;
    }

    .col-xs-3 {
        padding-right: 5px;
        padding-left: 5px;
    }
        .col-xs-3 {
            padding: 10px;
        }

    .appointment-list-container td,
    .appointment-list-container th {
        padding: 5px;
    }
}

@media (max-width:350px) {
    .btn-backspace svg {
        width: 60px;
        height: 55px;
    }
}

@media (min-width: 569px) {
    .d-grid.two-col {
        grid-template-columns: repeat(2, 1fr);
    }

    .d-grid.three-col {
        grid-template-columns: repeat(3, 1fr);
    }

    .d-grid.four-col {
        grid-template-columns: repeat(4, 1fr);
    }

    .w-90 {
        width: 90%;
    }

    .w-75 {
        width: 75%;
    }

    .w-50 {
        width: 50%;
    }

    .w-40 {
        width: 40%;
    }

    .w-20 {
        width: 20%;
    }

    .w-15 {
        width: 15%;
    }
}

@media (min-width: 569px) and (min-height: 569px) {
    .cmh-logo {
        height: 75px;
    }

    .scroller-container {
        max-height: calc(90vh - 220px);
        max-height: -moz-calc(90vh - 220px);
        max-height: -webkit-calc(90vh - 220px);
    }
        .scroller-container.max-height {
            height: calc(90vh - 220px);
            height: -moz-calc(90vh - 220px);
            height: -webkit-calc(90vh - 220px);
        }

    .text-input {
        font-size: 30px;
        padding: 0 10px;
    }

    .dropdownlist {
        font-size: 30px;
        padding: 10px;
    }

    .btn-external-link {
        font-size: 30px;
        padding: 18px 36px;
    }

    .btn-external-link-larger {
        font-size: 35px;
        padding: 20px 40px;
    }

    .btn-backspace svg {
        width: 110px;
        height: 110px;
    }
}


@media (min-width: 550px) and (max-height: 720px) {
    .yes-no-button-container {
        bottom: 25px;
    }
}

@media (min-width: 767px) and (min-height: 587px) {
    .scroller-container {
        max-height: calc(90vh - 450px);
        max-height: -moz-calc(90vh - 450px);
        max-height: -webkit-calc(90vh - 450px);
    }
        .scroller-container.max-height {
            height: calc(90vh - 450px);
            height: -moz-calc(90vh - 450px);
            height: -webkit-calc(90vh - 450px);
        }

    .text-input,
    .dropdownlist {
        font-size: 40px;
    }

    hr {
        height: 3px;
        width: 100%;
    }

    .container.message-yes-no ul {
        margin-left: 20px;
    }

    .appointment-list-container table {
        font-size: 25px;
    }

    .appointment-list-container td {
        padding: 7px;
    }
}

@media (min-width: 997px) {
    .container {
        width: 85%;
    }
}

@media (min-height: 1080px) {
    body {
        margin-bottom: 0px;
    }
}

@media (max-height: 350px) {
    .cmh-logo {
        height: 40px;
    }

    .scroller-container {
        max-height: calc(90vh - 220px);
        max-height: -moz-calc(90vh - 220px);
        max-height: -webkit-calc(90vh - 220px);
    }
        .scroller-container.max-height {
            height: calc(90vh - 220px);
            height: -moz-calc(90vh - 220px);
            height: -webkit-calc(90vh - 220px);
        }
}