﻿*, *::before, *::after {
    box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #000; 
}

.field-validation-error {
  color: red;
  font-weight: bold; 
}

header {
    display: block;
    background-color: #E7E7E9;
    text-align: center;
    border-bottom: 2px solid #ccc;
    margin-bottom: 1em;
}

.fixed-header {
    position: sticky;
    top: 0px;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.95);
}

.instructions {
    font-size: 16px;
    margin-bottom: 1.5em;
}

.login {
    font-size:1.1em;
    font-weight:bold;
    margin-right:15px;
    cursor:pointer;
}

.login:hover{
    font-size:larger;
}

h1 {
  margin-bottom: 1em; }

footer {
  display: block;
  background-color: white;
  text-align: center;
  border-top: 2px solid #ccc;
  margin-bottom: .5em; 
  margin-top: 1em; }

.container {
    background: #efefef;
    font-family: 'DINNextLTPro-Regular', sans-serif;
}

.hero-image {
  background-image: url("/CareLink/images/background.jpg");
  background-color: #cccccc;
  min-height: 550px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.middle-of-screen {
    text-align: center;
    vertical-align: middle;
    margin-bottom: 50%;
    width: 100%;
}

.default {
    border: solid 1px black;
}

.disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

#btn-prev-date {
    cursor: pointer;
}
#btn-next-date {
    cursor: pointer;
}

.cc-btn {
    font-family: "adobe-garamond-pro",Garamond,'Segoe UI', Tahoma, Geneva, Verdana, serif;
    font-size: 1.2em;
    cursor: pointer;
}
.cc-btn:hover {
    filter: brightness(110%);
    border-bottom: solid 2px green;
}

.hvhs-btn {
    vertical-align: middle;
    text-decoration: none;
    font-family: Helvetica;
    font-weight: bold;
    padding-top: .3em;
    padding-left: .6em;
    padding-right: .6em;
    padding-bottom: .3em;
    margin-bottom: .2em;
    margin-top: .2em;
    border-radius: .8em;
    -moz-border-radius: .8em;
    -webkit-border-radius: .8em;
    border-width: 0px;
    cursor: pointer;
}
.hvhs-btn:hover {
    filter: brightness(110%);
    border-bottom: solid 2px black;
    border-right: solid 2px black;
}
.hvhs-btn-large {
    font-size: 1.2em;
    text-decoration: none;
    font-family: Helvetica;
    font-weight: bold;
    padding-top: .3em;
    padding-bottom: .3em;
    padding-left: .6em;
    padding-right: .6em;
    margin-bottom: .2em;
    margin-top: .2em;
    -moz-border-radius: .8em;
    -webkit-border-radius: .8em;
    border-width: 0px;
    cursor: pointer;
}
    .hvhs-btn-large:hover {
        filter: brightness(110%);
        border-bottom: solid 2px black;
        border-right: solid 2px black;
    }
.hvhs-btn-reset {
    font-size: 1.0em;
    font-family: Helvetica;
    font-weight: bold;
    text-decoration: none;
    color: black;
    background-color: red;
    padding-top: .4em;
    padding-bottom: .4em;
    padding-left: .6em;
    padding-right: .6em;
    margin-bottom: .2em;
    margin-top: .2em;
    margin-left: .5em;
    margin-right: .5em;
    -moz-border-radius: .8em;
    -webkit-border-radius: .8em;
    border-width: 0px;
    cursor: pointer;
}
.hvhs-btn-reset:hover {
    filter: brightness(110%);
    border-bottom: solid 2px black;
    border-right: solid 2px black;
}
.hvhs-confirm {
    margin: 2em;
    padding: .5em;
    border: 1px solid;
    border-radius: .8em;
    background-color: red;
    color: white;
    min-width: 6em;
    display: inline-block;
}
.hvhs-confirm:hover {
    cursor: pointer;
    font-weight: bold;
    text-shadow: 2px 2px #000000;
    border: 1px solid black;
}

.hvhs-btn-menu {
    vertical-align: middle;
    text-decoration: none;
    font-family: Helvetica;
    font-weight: bold;
    padding-top: .3em;
    padding-left: .6em;
    padding-right: .6em;
    padding-bottom: .3em;
    margin-bottom: .2em;
    margin-top: .2em;
    margin-left: .5em;
    margin-right: .2em;
    border-radius: .8em;
    -moz-border-radius: .8em;
    -webkit-border-radius: .8em;
    border-width: 0px;
    cursor: pointer;
}

    .hvhs-btn-menu:hover {
        filter: brightness(110%);
        border-bottom: solid 2px black;
        border-right: solid 2px black;
    }

.hvhs-btn-vertical-menu {
    vertical-align: middle;
    text-decoration: none;
    font-family: Helvetica;
    font-weight: bold;
    padding-top: .3em;
    padding-left: .6em;
    padding-right: .6em;
    padding-bottom: .3em;
    margin-bottom: .2em;
    margin-top: .2em;
    border-radius: .8em;
    -moz-border-radius: .8em;
    -webkit-border-radius: .8em;
    border-width: 0px;
    cursor: pointer;
}


.hvhs-size-30 {
    width: 30%;
}
.hvhs-size-40 {
    width: 40%;
}
.hvhs-size-50 {
    width: 50%;
}
.hvhs-size-75 {
    width: 75%;
}
.hvhs-size-80 {
    width: 80%;
}
.hvhs-size-100 {
    width: 100%;
}

.hvhs-btn-space {
    margin-left: .5em;
    margin-right: .5em;
}

.padded {
    padding-left: 1em;
    padding-right: 1em;
}

.universe {
    text-align: center;
    margin-top: 2em;
    margin-bottom: 1em;
}

.account_primary {
    font-size: 1.1em;
    background-color: lightgreen;
    padding: 10px;
    margin: 2px;
    cursor: pointer;
    border-radius: .9em;
    border-width: 0px;
}
.account_primary:hover {
    font-size: 1.2em;
    border-width:2px;
    border-color:ActiveBorder;
}

.account_secondary {
    font-size: 1.1em;
    background-color: beige;
    padding: 10px;
    margin: 2px;
    cursor: pointer;
    border-radius: .9em;
    border-width: 0px;
}
.account_secondary:hover {
    font-size: 1.2em;
    border-width: 2px;
    border-color: ActiveBorder;
}

    .account_secondary.left {
        text-align: left;
        padding-left: 3em;
    }

    .account_secondary.center {
        text-align: center;
    }

    .account_secondary.right {
        text-align: right;
        padding-right: 3em;
    }

.no-schedule-avail {
    text-align: center;
    width: 100%;
    margin: .8em;
    font-size: 1.2em;
    padding: .25em .25em 1em .25em;
}

.not-scheduling {
    text-align: center;
    font-size: 1.2em;
    padding: .25em .25em 1em .25em;
}

.schedule-header {
    border-bottom: 1px solid black;
}

.schedule-scroller {
    position: absolute;
    height: -webkit-fill-available;
    width: 100%;
    overflow: auto;
    padding-bottom: 7em;
    padding-left: .5em;
}

.reserve_panel {
    position: absolute;
    top: 10%;
    height: 50%;
    left: 10%;
    right: 10%;
    background-color: white;
    margin: 10px;
    padding: 4px;
    z-index: 600;
    -webkit-border-radius: .9em;
    border: 1px solid #999999;
}

.reserve_form 
{
	position: absolute;
	top: 0px;
	bottom:0px;
	left:0px;
	right:0px;
	background: rgba(0, 0, 0, 0.5); 
	margin: 0px;
	padding: 0px;
	z-index:500;
    overflow:hidden;
}

.add-patient_form {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #9AFF9A;
    margin: auto;
    border: 1px solid silver;
    border-radius: 1em;
    padding: 1em 1em .5em 1em;
    overflow: auto;
}

.user-profile {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #9AFF9A;
    margin: auto;
    border: 1px solid silver;
    border-radius: 1em;
    padding: 1em 1em .5em 1em;
    overflow: auto;
}

#content {
	-webkit-box-flex:1;
	position: absolute;
	left:10px;
    top:6px;
    bottom:6px;
    right:10px;
	background: none;
	overflow:hidden;
	background-repeat: no-repeat;
	background-position:center center;

    /* Prevent native touch events on Windows */
	-ms-touch-action: none;

	/* Prevent the callout on tap-hold and text selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Prevent text resize on orientation change, useful for web-apps */
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}

#contentScroller {
    top:0px; bottom:0; left:0; right:0;
	-webkit-box-sizing:border-box;
	background: white;
	background-repeat: no-repeat;
	background-position:top left;
	height:auto;
	overflow:auto;
	padding-bottom: 48px;

    /* Prevent elements to be highlighted on tap */
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	/* Put the scroller into the HW Compositing layer right from the start */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}

#vacAppointments {
    background-color: beige;
    right: 10%;
    left: 10%;
    padding: 1em;
    border-radius: 2em;
    padding-top: 0px;
    overflow: auto;
    max-height: 90%;
}

#waiting_desc {
    font-size:1.2em;
    text-align:center;
    margin:.1em;
}

/* HVHS Form Input Decoration  */
.hvhs-input_text {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,.12);
    display: block;
    font-size: 1.5em;
    font-family: "Helvetica","Arial",sans-serif;
    margin: 2px 0px .25em 0px;
    padding: 4px 0 0 4px;
    width: 100%;
    background: 0 0;
    text-align: left;
    color: inherit;
    background-color: white;
}

.hvhs-input_text:focus {
  background-color: seashell;
}

.hvhs-input_number {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,.12);
    display: block;
    font-size:1.5em;
    font-family: "Helvetica","Arial",sans-serif;
    margin: 2px 0px .25em 0px;
    padding: 4px 0 0 4px;
    background: 0 0;
    text-align: left;
    color: inherit;
    background-color: white;
}

.hvhs-input_phone {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,.12);
    display: inline-block;
    font-size: 1.1em;
    font-family: "Helvetica","Arial",sans-serif;
    margin: 2px 0px .25em 0px;
    padding: 4px 0 0 4px;
    background: 0 0;
    text-align: left;
    color: inherit;
    background-color: ghostwhite;
}

.hvhs-input_date {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,.12);
    display: block;
    font-size:1.5em;
    margin: 2px 0px .25em 0px;
    width: auto;
    background: 0 0;
    text-align: left;
    color: inherit;
    background-color: white;
}

.hvhs-select-multi {
    font-size: 1.2em;
    padding-left: .5em;
    padding-right: .5em;
    margin-bottom: .5em;
}

.hvhs-select-option {
    font-size: 1.5em;
    border: none;
    padding: 0.15em;
}

.hvhs-select-radio {
    border: 0px;
    width: 1.25em;
    height: 1.25em;
    margin-right: .25em;
}

.hvhs-select_gender {
    font-size: 1.5em;
    border: none;
    padding: 0.15em;
}

.hvhs-validate_number {
    border: 2px solid rgba(0,0,0,.12);
    width: 5em;
    display: block;
    font-size: 1.2em;
    font-family: "Helvetica","Arial",sans-serif;
    margin: 2px 0px .25em 0px;
    padding: 4px 0 0 4px;
    background: 0 0;
    text-align: center;
    color: inherit;
    background-color: ivory;
}

.hvhs-input_as_label {
    width:100%;
    font-size: .8em;
    text-align: center;
    background-color: beige;
    border: none;
}

.hvhs-panel {
    padding: .5em;
    margin: .5em;
    border: 1px solid silver;
}

.hvhs-scroll {
    position: absolute;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    padding: 1em;
    background-color: #84BD00;
    font-size: 1.2em;
    border-radius: .8em;
    -moz-border-radius: .8em;
    -webkit-border-radius: .8em;
    overflow: auto;
}

.hvhs-bottom-border {
    border-bottom: solid 2px black;
}

.hvhs-petite-text {
    background-color: white;
    font-variant: petite-caps;
    padding-left: 1em;
}

.hvhs-pseudo-text {
    background-color: white;
    padding-left: 1em;
}


.message {
    padding: .5em;
    margin: .5em;
    color: black;
    /*border:1px solid silver;*/
}

.message-title {
    font-family: "adobe-garamond-pro",Garamond,'Segoe UI', Tahoma, Geneva, Verdana, serif;
    padding-bottom: .25em;
    font-size: 1.5em;
    text-align: center;
}

.message-alert-title {
    font-family: "adobe-garamond-pro",Garamond,'Segoe UI', Tahoma, Geneva, Verdana, serif;
    padding: .25em;
    font-size: 1.5em;
    text-align: center;
    background-color: red;
    color: white;
    width:100%;
}

.message-important {
    font-weight: bold;
    font-size: 1.3em;
    padding: .5em;
}

.message-ul-spacing {
    line-height: 1.5em;
    font-size: 1em;
}

.message-phone {
    font-size: 1.2em;
    text-align: center;
    margin: .5em;
}

.hidden {
    display:none;
}


.response {
    font-size: 1.1em;
    padding: .5em;
    margin: .5em;
}

.yes {
    margin: 2em;
    padding: .5em;
    border: 1px solid;
    border-radius: .8em;
    background-color: green;
    color: white;
    min-width: 6em;
    display: inline-block;
}
    .yes:hover {
        cursor: pointer;
        font-weight: bold;
        border: 1px solid black;
    }

.no {
    margin: 2em;
    padding: .5em;
    border: 1px solid;
    border-radius: .8em;
    background-color: red;
    color: black;
    min-width: 6em;
    display: inline-block;
}
    .no:hover {
        cursor: pointer;
        font-weight: bold;
        border: 1px solid black;
    }


.neutral {
    margin: 2em;
    padding: .5em;
    border: 1px solid #84BD00;
    border-radius: .9em;
    background-color: #84BD00;
    color: black;
}

.lrg {
    font-size: 2em;
    margin: 1em;
}


.cnScroller {
    position: absolute;
    top: 4px;
    bottom: 10px;
    left: 0px;
    right: 0px;
    background-color: white;
    display: block;
}

.common_notice {
    margin: .5em;
    padding: .5em;
    background-color: #84BD00;
    font-size: 1.4em;
    border-radius: .8em;
    -moz-border-radius: .8em;
    -webkit-border-radius: .8em;
}

.light_notice {
    margin: .5em;
    padding: .3em;
    background-color: #E7E7E9;
    font-size: 1.2em;
    border-radius: .8em;
    -moz-border-radius: .8em;
    -webkit-border-radius: .8em;
}

.light_notice-title {
    text-align: center;
    font-weight: bold;
}
    

.hvhs_notice {
    margin: .5em;
    padding: 1em;
    background-color: #84BD00;
    font-size: 1.2em;
    border-radius: .8em;
    -moz-border-radius: .8em;
    -webkit-border-radius: .8em;
}

.hvhs_instructions {
    padding: 0.5em;
    background-color: aquamarine;
    border-radius: 1em;
    margin: 0.5em;
}

.attention_notice {
    text-align: initial;
    margin: .3em;
    padding: 1em;
    background-color: #ff0000;
    color: black;
    font-size: 1.25em;
    border-radius: .8em;
    -moz-border-radius: .8em;
    -webkit-border-radius: .8em;
}


.common_panel {
    margin: .5em;
    padding: .5em;
    background-color: lightgray;
    border-radius: .8em;
    -moz-border-radius: .8em;
    -webkit-border-radius: .8em;
    max-height: 24em;
    overflow: auto;
}

.common_title {
    font-family: "adobe-garamond-pro",Garamond,'Segoe UI', Tahoma, Geneva, Verdana, serif;
    font-weight: bold;
    border-bottom: double;
}

.common_title_small {
    font-family: "adobe-garamond-pro",Garamond,'Segoe UI', Tahoma, Geneva, Verdana, serif;
    font-size:smaller;
    font-weight: bold;
    border-bottom: double;
}

.common_sub-title_small {
    font-size: smaller;
    font-style: italic;
}

.note_panel {
    font-size: 1em;
    margin: .5em;
    padding: .4em;
}

.notice-me {
    font-size: 1.2em;
    font-variant-caps: titling-caps;
    font-weight: bold;
}

.notice-me-emphasis {
    font-size: 1.5em;
    color: red;
    font-style: italic;
    font-variant: all-small-caps;
    font-weight: 700;
}

.attention {
    background-color: red;
    color: white;
    font-size: 1.7em;
    padding: .5em;
}

.schedule_panel {
    position: absolute;
    background-color: beige;
    top: 1em;
    right: 10%;
    left: 10%;
    padding: 1em;
    border-radius: 20px;
    padding-top: 0px;
    overflow: auto;
}

.patient_info {
    margin: 1em;
    padding-top: .5em;
    padding-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;
    font-size: 1.25em;
}

.tbl-patient {
    width: 100%;
    border: 1px solid black;
    border-spacing: .8em .1em;
    border-collapse: separate;
}

.tbl-patient-cell {
    border-bottom: solid 1px black;
    background-color: ivory;
    padding-left:.25em;
}

.tbl-patient-caption {
    font-size: .75em;
    padding-left: 1em;
}

.tbl-patient-notification {
    width: 100%;
    border: 1px solid black;
    border-spacing: .8em .1em;
    border-collapse: separate;
    border-radius: 1em;
    background-color: lightgreen;
    margin-top: 0.5em;
}

.tbl-patient-notification-input {
    border: none;
    background-color: transparent;
    width:100%
}

.tbl-patient-notification-title {
    font-family: "adobe-garamond-pro",Garamond,'Segoe UI', Tahoma, Geneva, Verdana, serif;
    text-align: center;
}

.tbl-location {
    width: 100%;
    margin: 0em 0.5em 1em 0em;
    border-spacing: 2px 2px;
    border-collapse: separate;
    border-bottom: 1px solid black;
}

    .tbl-location > thead > tr > th {
        font-family: "adobe-garamond-pro",Garamond,'Segoe UI', Tahoma, Geneva, Verdana, serif;
    }

    .tbl-location > tbody > tr > td > span {
        padding-right:1em;
    }

.tbl-location-stats {
    background-color: aquamarine;
    text-align: center;
    font-size: .95em;
}


.tab-choices {
    width: -webkit-fill-available;
    text-align: center;
    margin-left: 2em;
    margin-right: 2em;
    margin-top: 0em;
    margin-bottom: 0em;
    border-spacing: 4px 2px;
    border-collapse: separate;
}

.top_toolbar {
    position: absolute;
    top: .1em;
    left: 2px;
    right: 2px;
    height: 1.3em;
    text-align: right;
}

.schedule-date {
    border: none;
    padding: 0px;
    width: 1em;
    height: 1em;
    font-size: 1.8em;
    text-align: center;
    color: black;
    background-color:transparent;
}

.schedule-date::-webkit-calendar-picker-indicator {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 0em;
    right: 0em;
    background-image: url('../images/calendar_32.png');
}

#mobile_phone {
    width: 9em;
}

.patient-info-box {
    padding: .2em;
    font-size: 1em;
}

.patient-info-title {
    font-family: "adobe-garamond-pro",Garamond,'Segoe UI', Tahoma, Geneva, Verdana, serif;
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
}

/* COLORS */

.black {
    color: White !important;
    background-color: black !important;
}

.red {
    color: black !important;
    background-color: red !important;
}

.green {
    color: black !important;
    background-color: mediumseagreen !important;
}

.brightpink {
    color: White;
    background-color: deeppink !important;
}

.seagreen {
    color: black !important;
    background-color: lightseagreen !important;
}

.hvhs-green {
    color: White;
    background-color: #006747 !important;
}

    .hvhs-green:hover {
        color: black;
        background-color: #84bd00 !important;
    }

.hvhs-green-secondary {
    color: black !important;
    background-color: #84BD00 !important;
}

    .hvhs-green-secondary:hover {
        color: White;
        background-color: #006747 !important;
    }


.hvhs-green-100 {
    color: black !important;
    background-color: #00E100 !important;
}

.hvhs-green-200 {
    color: black !important;
    background-color: #4CAD4C !important;
}

.hvhs-cool-gray {
    color: White;
    background-color: #65666A !important;
}

.hvhs-light-gray {
    color: White;
    background-color: #BBBBBC !important;
}

.hvhs-womens-health {
    color: White;
    background-color: #E2037D !important;
}

.hvhs-peds {
    color: black !important;
    background-color: #F7CAAC !important;
}

.hvhs-burgandy {
    color: White;
    background-color: #9E0421 !important;
}

.hvhs-default-button-color {
    color: White;
    background-color: #006747;
}

/* Care Link Branding*/
.hvhs-standard-font {
    font-family: "adobe-garamond-pro",Garamond,'Segoe UI', Tahoma, Geneva, Verdana, serif;
    font-size: inherit;
}

.hvhs-big-font {
    font-family: "adobe-garamond-pro",Garamond,'Segoe UI', Tahoma, Geneva, Verdana, serif;
    font-size: larger;
}



.carelink-scroller {
    position: absolute;
    top: .5em !important;
    bottom: .5em !important;
    left: 45% !important;
    right: .5em !important;
    background-color: white;
    display: none;
}

.carelink-choices {
    position: absolute;
    top: .5em;
    bottom: .5em;
    left: .5em;
    right: 55%;
    background-color: white;
    display: none;
}

.carelink-title-pos {
    position: absolute;
    top: .5em;
    left: 2px;
    right: 2px;
    height: 4em;
    text-align: right;
    padding-right: 3em;
    padding-top: 1em;
}

.carelink-title-text {
    font-family: "adobe-garamond-pro",Garamond,'Segoe UI', Tahoma, Geneva, Verdana, serif;
    font-size: 3.5em;
    font-weight: bold;
    margin-right: 2em;
}

.carelink-header-login {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 1.5em;
    text-align: right;
}

.carelink-patient-info {
    padding: .5em;
}

.carelink-confirm-info {
    position: absolute;
    top: 7.6em;
    bottom: .5em;
    left: .5em;
    right: .5em;
    overflow: auto;
}

.patient-info-box {
    padding: .2em;
    font-size: 1em;
    border-bottom: double 4px silver;
}

.patient-info-title {
    font-family: "adobe-garamond-pro",Garamond,'Segoe UI', Tahoma, Geneva, Verdana, serif;
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
}

.office-title {
    font-size: 1.2em;
}

.select_location, .select_location_mini {
    font-size: 1.5em;
    padding-left: .8em;
    padding-right: .8em;
    margin-bottom: .5em;
    max-width: 100%;
    width: -webkit-fill-available;
    background-color: white;
}

.center-on-form_orig {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    background-color: transparent;
}

.center-on-form {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensures it sits on top of text/buttons inside the placeholder */
}

.waiting-image {
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Fancy Box */
.fancybox-content {
    max-width: 80%;
    max-height: 85%;
    margin: 0;
}

/*Eligibility Indicators*/
.indicator-eligible {
    background-color: green;
    color: white;
}

.indicator-scheduled {
    background-color: #cdf76c;
    color: black;
}

.indicator-reserved {
    background-color: #9AFF9A;
    color: black;
}

.indicator-vaccinated {
    background-color: #9AFF9A;
    color: black;
}

.indicator-missing {
    background-color: red;
    color: white;
}

.indicator-pediatric {
    background-color: pink;
    color: black;
}

.indicator-pediatric-under-five {
    background-color: #6F263D;
    color: white;
}

.indicator-pediatric-too-young {
    background-color: #6F263D;
    color: white;
}

.indicator-pediatric-restricted {
    background-color: deeppink;
    color: black;
}

.indicator-covid-test-pending {
    background-color: #9AFF9A;
    color: black;
}

.indicator-not-eligible {
    background-color: red;
    color: white;
}

.indicator-not-peds {
    background-color: lightcoral;
    color: black;
}

.indent {
    padding-left:2em;
}

.under_line {
    border-bottom: solid 1px seagreen;
    margin-bottom: .2em;
}

.button-image {
    cursor: pointer;
    width: 16px;
    margin: 0 .25em 0 .25em;
}

.button-active {
    font-weight: bold;
}

.button-inactive {
    font-weight: normal;
}

.button-distance, .button-time {
    cursor: pointer;
    padding: 0.5em 0 0.5em 0;
    border-top-left-radius: 10px;
}

.button-distance {
    background-color: aquamarine;
}

.button-time {
    background-color: beige;
}

    .button-distance:hover, .button-time:hover {
        font-size: 1.05em;
        padding: 0;
    }

.button-delete {
    margin-right: 1em;
    margin-left: 1em;
    border: none;
    background: transparent;
}

.custom-field {
    font-size: 1em;
    position: relative;
    border-top: 1em solid transparent;
}

.custom-field input {
    border: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #f2f2f2;
    border-radius: 3px;
    font-size: 1.25em;
}

.custom-field .placeholder {
    position: absolute;
    left: .5em;
    top: 1em;
    transform: translateY(-50%);
    width: calc(100% - 1.5em);
    color: #aaa;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease;
}

.custom-field input:focus + .placeholder {
    top: -.9em;
    font-size: .8em;
    color: #222;
}

    .custom-field input.dirty + .placeholder,
    .custom-field input:focus + .placeholder,
    .custom-field input:not(:placeholder-shown) + .placeholder {
        top: -.9em;
        font-size: .8em;
        color: #222;
    }


.database-alert {
    display:none; /* Use this to alert when Production Database is in use for testing */
    font-family: "adobe-garamond-pro",Garamond,'Segoe UI', Tahoma, Geneva, Verdana, serif;
    padding: .25em;
    font-size: 1.5em;
    text-align: center;
    background-color: red;
    color: white;
    width: 100%;
}

.mini-table {
    display:table;
    width:100%;
    margin-bottom:.25em;
}
.mini-table .desc {
    display:table-cell;
    width:25%;
    padding-left:4px;
}
.mini-table .val {
    display:table-cell;
    font-size:1.1em;
    background:white;
    padding:2px;
}

.small-text {
    font-size: .8em;
}


