/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 16px;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}

@keyframes blinking {
    0% {
        background-color: #b8daff;
    }

    100% {
        background-color: #ffffff;
    }
}

.blink {
    animation: blinking 1s infinite;
}

@keyframes blinking-red {
    0% {
        --background-color: #6c757d;
        background-color: #f5c6cb;
        --color: #ffffff;
    }

    100% {
        --background-color: #dc3545;
        background-color: #ffffff;
        --color: #ffffff;
    }
}

.blink-red {
    animation: blinking-red 1s infinite;
}

.logo {
    max-width: 150px;
}

.img-wrap {
    position: relative;
    display: inline-block;
    font-size: 0;
}
.big-text {
    font-size: 4rem;
}

.medium-text {
    font-size: 2.7rem;
    vertical-align: middle !important;
}

.visible-carousel {
    width: 100vw;
    height: 64vh;
    display: block;
}

.hidden-carousel {
    height: 0vh;
    display: none;
}


/* Mobile layout
--------------------------------------------------
   The data tables are the only things that overflow a phone screen. Left alone, a ~700px wide
   table makes mobile browsers expand the layout viewport to fit it, which renders the whole page
   at roughly half scale instead of just scrolling the table. Below Bootstrap's md breakpoint the
   tables marked .table-stacked turn into one card per row, each cell labelled from its
   data-label attribute.

   The waiting-room display (/PatientQue) is deliberately left out: it targets a fixed kiosk TV
   and is not meant to be used on a phone. */

/* Comfortable touch targets on anything driven by a finger — phones and tablets alike — without
   inflating buttons for a mouse. */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .navbar-toggler,
    select,
    select.form-control,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
    }
}

@media (max-width: 767.98px) {
    .table-stacked thead {
        /* Headings are repeated inside every cell instead. */
        display: none;
    }

    .table-stacked,
    .table-stacked tbody,
    .table-stacked tr,
    .table-stacked td {
        display: block;
        width: auto;
    }

    .table-stacked tr {
        margin-bottom: 1rem;
        padding: .25rem .5rem;
        border: 1px solid #dee2e6;
        border-radius: .25rem;
    }

    .table-stacked td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .5rem .25rem;
        border: 0;
        border-bottom: 1px solid #f1f1f1;
        text-align: right;
        word-break: break-word;
    }

    .table-stacked td:last-child {
        border-bottom: 0;
    }

    .table-stacked td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        padding-right: .75rem;
        color: #495057;
        font-weight: 600;
        text-align: left;
    }

    /* Action cells carry an empty label; give the control the full width instead. */
    .table-stacked td[data-label=""]::before {
        content: none;
    }

    .table-stacked td[data-label=""] .btn,
    .table-stacked td[data-label=""] input[type="button"],
    .table-stacked td[data-label=""] input[type="submit"],
    .table-stacked td[data-label=""] > a {
        display: block;
        width: 100%;
    }
}