/***************************************/
/**  OABS Standardized CSS Variables  **/
/**     Version v0.9.5 - 11.01.2021   **/
/***************************************/

/**   See reference for instructions on how to change the variables to customize OABS.   **/

/*** ADD OR REPLACE FONT EMBED CODES HERE: ***/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');


/*** VARIABLES ***/
:root {
  /* FONT FAMILIES */
  --heading-font: 'Open Sans', Helvetica, Arial, sans-serif;
  --body-font: 'Open Sans', Helvetica, Arial, sans-serif;
  --title-font: 'Open Sans', Helvetica, Arial, sans-serif;
  --subtitle-font: 'Open Sans', Helvetica, Arial, sans-serif;
  --button-font: 'Open Sans', Helvetica, Arial, sans-serif;
  /* GLOBAL */
  --site-color1: rgba(36,47,62,1.0); /* Darkest */
  --site-color2: #6c7689; /* Lightest */
  --site-color3: #455062; /* Mid */
  --site-color4: rgba(36,47,62,0.0); /* Dark Transparent */
  --page-bgcolor: linear-gradient(#657594, #2F3C50); /* ORIGINAL COLOR SCHEME */
  --page-bgimage: linear-gradient(#6c7689, #242f3e 80%);
  --page-bgsize: cover;
  --page-bgposition: center bottom;
  --page-width: 100vw;
  --content-bgcolor: transparent;
  --content-color: #ffffff;
  --content-width: 50rem;
  --content-padding: .9375rem;
  --content-top-padding: 1rem;
  --content-shadow: none;
  --link-color: #14558f;
  --link-color-hover: #3475bf;
  --link-weight: 700;
  --heading-font-weight: 500;
  --heading-color: #ffffff;
  --h1-size: 1.125rem;
  --h2-size: 1.125rem;
  --h3-size: 1.125rem;
  --h4-size: 1.125rem;
  --h5-size: 1.125rem;
  --h6-size: 1.125rem;
  --body-font-weight: normal;
  --error-color: #a50000;
  /* HEADER */
  --header-background: #242f3e;
  --header-width: 50rem;
  --header-layout: row;
  --banner-layout: row;
  --banner-padding: 0.125rem;
  --logo-width: 0%;
  --logo-max-width: 0px;
  --logo-height-mobile: 70px;
  --header-text-align: center;
  --title-color: #ffffff;
  --title-size: 1.125rem;
  --title-weight: 500;
  --title-spacing: 0;
  --subtitle-color: #ffffff;
  --subtitle-size: 1.125rem;
  --subtitle-weight: 500;
  --subtitle-spacing: .02em;
  /* FOOTER */
  --footer-bgcolor: linear-gradient(90deg, #005d80, #00805d);
  --footer-color: #ffffff;
  --footer-logo-width: 18rem;
  /* MENU */
  --icon-color: #ffffff;
  --icon-color-open: #ffffff;
  --menu-bgcolor: transparent;
  --menu-width: 54px;
  --menu-padding: .625rem;
  --menu-text-align: center;
  --menu-border-top: 0px solid #000;
  --menu-border-bottom: 0px solid #000;
  --nav-text-size: 1.125rem;
  --nav-text-weight: 500;
  --nav-bgcolor-normal: transparent;
  --nav-color-normal: #ffffff;
  --nav-color-hover: #eeeeff;
  --nav-style-hover: underline;
  /* DISPLAY DATA */
  --progress-bar-color: linear-gradient(90deg, #005d80, #00805d);
  --progress-bar-bgcolor: #ffffff;
  --progress-label-size: .9375rem;
  --display-bgcolor: #f5f7f9;
  --display-color: #323538;
  /* PRIMARY BUTTONS */
  --button-padding: 1.25rem; /** TOP AND BOTTOM BUTTON PADDING **/
  --button-text-weight: 600;
  --button-text-size: 1.125rem;
  --button-subtext-weight: 500;
  --button-subtext-size: .9375rem;
  --button-radius: 1.5rem;
  --button-bgcolor-normal: linear-gradient(#f1f2f5, #C4C8D5);
  --button-bgcolor-disabled: #ffffff4d;
  --button-bgcolor-hover: linear-gradient(#ffffff, #f1f2f5);
  --button-bgcolor-active: linear-gradient(#ffffff, #f1f2f5);
  --button-color-normal: #202834;
  --button-color-disabled: #c4c9d0;
  --button-color-hover: #1F2C40;
  --button-color-active: #1F2C40;
  --button-border-width: .0625rem;
  --button-bordercolor-normal: linear-gradient(#ffffff, #797979);
  --button-bordercolor-hover: transparent;
  --button-bordercolor-active: transparent;
  --button-shadow: none;
  --button-shadow-hover: none;
  /* ALTERNATE BUTTON COLORS */
  --altbutton-bgcolor-normal: transparent;
  --altbutton-bgcolor-hover: rgba(255,255,255,0.12);
  --altbutton-bgcolor-active: rgba(255,255,255,0.12);
  --altbutton-color-normal: #e3e4e9;
  --altbutton-color-hover: #ffffff;
  --altbutton-color-active: #ffffff;
  --altbutton-bordercolor-normal: #d3d4d9;
  --altbutton-bordercolor-hover: #ffffff;
  --altbutton-bordercolor-active: #ffffff;
  --altbutton-shadow: none;
  --altbutton-shadow-hover: none;
  /* SELECTION BUTTONS */
  --select-bgcolor-normal: #f4f8fa;
  --select-bgcolor-hover: #00ad9d;
  --select-bgcolor-active: #007ea4;
  --select-color-normal: #333537;
  --select-color-hover: #ffffff;
  --select-color-active: #ffffff;
  --select-bordercolor-normal: rgba(0,0,0,0.5);
  --select-bordercolor-hover: rgba(0,0,0,0.7);
  --select-bordercolor-active: rgba(0,0,0,0.7);
  /* DATE/TIME PAGINATION */
  --paginate-color-normal: #333;
  --paginate-color-hover: #ffffff;
  --paginate-color-active: #ffffff;
  --paginate-bgcolor-normal: #f4f8fa;
  --paginate-bgcolor-hover: #00ad9d;
  --paginate-bgcolor-active: #007ea4;
  --paginate-text-size: 1.25rem;
  --paginate-border: 1px solid rgba(0,0,0,0.2);
  --paginate-bordercolor-hover: rgba(0,0,0,0.2);
  --paginate-bordercolor-active: rgba(0,0,0,0.2);
  --paginate-button-size: 1.75rem;
  --paginate-button-padding: .25rem;
  /* INPUT FORM FIELDS */
  --input-field-color: #ffffff;
  --input-text-color: #39475D;
  --input-border-color: rgba(0,5,10,0.5);
  --input-focus-color: #ffc112;
  --input-radius: 5px;
  --input-field-color-active: white;
  /* TEXT SIZE OFFSETS (DO NOT CHANGE) */
  --heading-scale: 1;
  --content-scale: 1;
  --button-scale: 1;
  --title-scale: 1;
  --subtitle-scale: 1;
}
/* MOBILE VARIABLES ONLY */
@media all and (max-width: 768px) {
  :root {
    --content-padding: .4375rem;
    /* Nav Menu Variables */
    --nav-text-size: 1.0625rem;
    --nav-text-weight: 500;
    --nav-color-normal: #ffffff;
    --nav-color-hover: #ffffff;
    /* Text Size Adjustment */
    --heading-scale: 1;
    --content-scale: 1;
    --button-scale: 1;
    --title-scale: 1;
    --subtitle-scale: 1;
  }
}
/* NARROW DEVICE VARIABLES ONLY */
@media all and (max-width: 399px) {
  :root {
    /* Text Size Adjustment */
    --heading-scale: 1;
    --content-scale: 1;
    --button-scale: 1;
    --title-scale: 1;
    --subtitle-scale: 1;
  }
}

/***
The following styles set the width for form elements on the customer info page.
If you want two side-by-side fields, set two adjacent fields to 50% each, like
.FirstName and .LastName are shown below. All form fields will default to 100%
for mobile width.
***/


/*** HIDE STATS IN THE TOP LEFT ***/
.mp-results {display:none;}

.ui-selectable {
  touch-action: pan-y;
}


div.logo-inline > img {
  max-width: 120px;
  margin-bottom: 2rem;
  image-rendering: -webkit-optimize-contrast;
}
div[data-stepcontrolkey="DODENTRY"], 
div[data-stepcontrolkey="CAPTCHA"] {
  justify-content: center;
}
div[data-stepcontrolkey="DODENTRY"] {
  margin-top: 1rem;
}
div[data-stepcontrolkey="DODENTRY"] > div {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}
div[data-stepcontrolkey="DODENTRY"] .dod-entry-container {
  text-align:center;
}
div[data-stepcontrolkey="DODENTRY"] button.add-id {
  line-height: 1.375rem;
  padding:.5rem 1.75rem;
  margin: 0 0 0 10px;
  width:100px;
}
div[data-stepcontrolkey="DODENTRY"] div.id-list {
  flex-basis:100%;
  margin-top: 40px;
  min-height: 16vh;
  font-variant: tabular-nums;
}
div[data-stepcontrolkey="DODENTRY"] div.id-display {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 7px 0;
}
div[data-stepcontrolkey="DODENTRY"] div.remove-id {
  height:16px;
}
div[data-stepcontrolkey="DODENTRY"] div.masked-id {
  font-size:1.125rem;
  letter-spacing: .5px;
}
div[data-stepcontrolkey="DODENTRY"] svg.close-icon {
  fill: none;
  stroke: #ff8888;
  height: 100%;
  margin-right:15px;
  stroke-width: 7;
  stroke-miterlimit: 10;
  margin-top: 1px;
  display:block;
}
div[data-stepcontrolkey="DODENTRY"] .remove-id-confirm {
    background-color: #db4f4f;
    font-size: 12px;
    line-height: 12px;
    padding: 4px 5px;
    font-weight: 500;
    border-radius: 5px;
    margin-right: 12px;
    letter-spacing: .6px;
}

.Consent.step-control-container {
  position:relative;
  /* height: calc(100vh - 320px); */
  overflow-y: auto;
  margin-top:1rem;
  padding-bottom: 160px;
}
.Consent p {
  font-size:.9375rem;
}
.progress-buttons > div > * {
  box-sizing: border-box;
}
#BackButton {
  border-width:2px;
}
svg.home-icon {
  fill: #f1f2f5;
  height:24px;
  display:block;
}
div.banner div.logo {
  display:none;
}
div.banner-text {
  margin-left: var(--menu-width);
}
.dod-entry-container span.field-validation-error,
div[data-stepcontrolkey="PHONE"] span.field-validation-error {
  margin-top: 10px;
  line-height: 20px;
  background-color: #db4f4f;
  border-radius: 7px;
  padding: 2px 0;
  color: #ffffff;
  font-size: 14px;
}

html, body {
  min-height: unset !important;
  height: 100% !important;
}
div {box-sizing: border-box;}

.consent-step div.progress-buttons {
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  z-index: 1000;
  margin: 0 auto;
  padding: 0 var(--content-padding);
}
.consent-step div.progress-buttons > div {
  padding: 1.0625rem .625rem;
}
div.progress-background {
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  z-index: 900;
  height:80px;
  background-color: var(--site-color1);
}
div.progress-background:before {
  content: " ";
  position:absolute;
  bottom:100%;
  left:0;
  right:0;
  height:80px;
  background: linear-gradient(var(--site-color4), var(--site-color1));
}

@media all and (max-width: 768px) {
  div.banner-text {
    margin-left: 0;
  }
  div.banner-text h1 {
    text-align:left;
  }
}

@media all and (max-width: 450px) {
  div[data-stepcontrolkey="DODENTRY"] button.add-id {
    margin: 10px 10px;
  }
  div[data-stepcontrolkey="DODENTRY"] > div {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}
div[data-stepcontrolkey="PHONE"] {
    justify-content: center;
    flex-direction: column;
    align-items: center;
	display: flex;
}
div[data-stepcontrolkey="PHONE"] label {
    justify-content: center;
    display: block;
    text-align: center;
}
div[data-stepcontrolkey="NOTES"] textarea {
    width: 100%;
    min-height: 70px;
    background-color: #ffffff;
    color: #000000;
	box-sizing: border-box;
    display: block;
}

/*** GLOBAL ***/
html {
  font-size:16px;
}
body {
  max-width: var(--page-width);
  margin:0 auto;
  padding:0;
  font-size: calc(1rem * var(--content-scale));
  background: var(--page-bgcolor);
  box-shadow: var(--content-shadow);
  background-image: var(--page-bgimage);
  background-attachment: fixed;
  background-size: var(--page-bgsize);
  background-position: var(--page-bgposition);
  display:flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  min-height:100vh;
}
html, body, input, select, button, textarea {
  font-family:var(--body-font);
  color: var(--content-color);
  /*font-variant-numeric: tabular-nums;*/
}
/* REMOVES DEFAULT STYLING FROM MOBILE DEVICES */
input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
h1, h2, h3, h4, h5, h6 {
  font-family:var(--heading-font);
  font-weight:var(--heading-font-weight);
  border-bottom:0 solid #ddd;
  text-align:left;
  padding-top:.75rem;
  line-height:1.25em;
  color: var(--heading-color);
  /* MODIFIED - KS */
  text-align:center;
}
h4, h5, h6 {
  margin-bottom: .625rem;
}
h1 {font-size: calc(var(--h1-size) * var(--heading-scale));}
h2 {font-size: calc(var(--h2-size) * var(--heading-scale));}
h3 {font-size: calc(var(--h3-size) * var(--heading-scale));}
h4 {font-size: calc(var(--h4-size) * var(--heading-scale));}
h5 {font-size: calc(var(--h5-size) * var(--heading-scale));}
h6 {font-size: calc(var(--h6-size) * var(--heading-scale));}

hr {
  margin: 2.25rem .75rem 1.875rem;
  padding: 0.3125rem;
  max-width: calc(100% - 1.5rem);
  border-style: solid;
  border-color: #d2d4d6;
}
a button, button, input[type="submit"], input[type="tel"], input[type="reset"],
input[type="button"], textarea, select, input {
  border-radius:0;
  margin-bottom:0;
  line-height: 1.5rem;
  font-size: calc(1rem * var(--content-scale));
  padding:.5rem 1rem;
}
select option:before,
select option:after {
  content:' ';
  line-height:10px;
  height:10px;
}
a, a:visited {
  color: var(--link-color);
  font-weight: var(--link-weight);
  text-decoration: none;
}
p a:hover {
  text-decoration: underline;
}
a:hover, a:active {
  color: var(--link-color-hover);
}
textarea, select, input {
  border:1px solid var(--input-border-color);
}
select option[selection="selected"] {
  -webkit-tap-highlight-color: #f00;
}
select option:hover {
  background: var(--button-bgcolor-normal);
  color: var(--button-color-normal);
}
input:focus-visible, select:focus-visible,
input.input-validation-error:focus-visible,
select.input-validation-error:focus-visible {
  box-shadow: 0 0 6px 3px var(--input-focus-color);
  transition: .2s ease-in-out;
}
input:focus-visible, select:focus-visible {
  outline: none;
}
fieldset {
  border-radius:0;
}
label {
  font-size: calc(.875rem * var(--content-scale));
}
li {
  list-style-position: inside;
  padding-left:.625rem;
}
dl {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  letter-spacing:-.015rem;
  max-width: auto;
}
div.patient-info dl,
div.appointment-info dl,
div.ticket-info dl,
div.QueueReview dl,
div.AppointmentReview dl {
  flex-wrap: wrap;
  flex-direction: row;
  max-width: 32rem;
}
div.QueueReview dt,
div.AppointmentReview dt,
dt {
  font-size: calc(.9375rem * var(--content-scale));
  font-weight:normal;
  line-height:1.25rem;
  max-width: 12rem;
  min-width: 9rem;
  flex-grow: 1;
  border-top: 0px solid #e4e4e4;
  padding: .375rem 0;
}
dd {
  font-weight:600;
  line-height:1.25;
  min-height:1.25em;
  width: calc(100% - 12rem);
  max-width:100%;
  border-top: 0px solid #e4e4e4;
  padding: .375rem 0;
}
dt:after {
  content:':';
}
dd::before {
  content:'';
  display:none;
}
dt:last-of-type, dd:last-of-type {
  border-bottom: 0px solid #e4e4e4;
}
.progress-bar-wrap {
  width:100%;
  background: var(--display-bgcolor);
  padding: 0 calc(.625rem + var(--content-padding)) .625rem;
  box-sizing: border-box;
  max-width: var(--header-width);
  margin:0 auto;
}
.progress-bar {
  height: 8px;
  max-width: calc(var(--content-width) - 1.25rem);
  width:100%;
  padding: 0;
  margin:1.375rem auto 1.5625rem;
  overflow: visible;
  background: var(--progress-bar-bgcolor);
  border-radius: 0;
  -webkit-box-shadow: inset 0 .8px 1.5px rgb(0 0 0 / 35%);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 35%);
}
.progress-bar > div {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background: var(--progress-bar-color);
  -webkit-box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
  -webkit-transition: width .6s ease;
  -o-transition: width .6s ease;
  transition: width .6s ease;
  animation: progbar .8s linear 2;
}
.progress-bar p {
  font-size: var(--progress-label-size);
  font-weight:400;
  color: var(--display-color);
  margin-top:15px;
  text-align:left;
  width:80vw;
}
@keyframes progbar {
   0% { opacity:1.0; }
   50% { opacity:0.4; }
   100% { opacity:1.0; }
}

/*** SKIP LINK ***/
.skip-link {
  background: #d2d2d2;
  height: auto;
  width: 200px;
  left: calc(50% - 120px);
  padding: 0 20px;
  line-height: 3rem;
  position: absolute;
  transform: translateY(-100%);
  text-align: center;
}
.skip-link:focus {
  transform: translateY(0%);
  transition: transform 0.3s;
}

/*** HEADER ***/

header, .header-wrap {
  width: 100%;
  margin: 0 auto;
  display:flex;
  flex-basis:unset;
  flex-wrap: nowrap;
}
header {
  background: var(--header-background);
  max-width: var(--page-width);
  padding: 0;
  border-width:0;
  flex-direction:column;
}
.header-wrap {
  background: transparent;
  max-width: var(--header-width);
  flex-direction: var(--header-layout);
}
header h1, header h2, header h3 {
  margin:0;
  padding:0;
  line-height:1.25;
  text-align: var(--header-text-align);
}
header h1 {
  font-family: var(--title-font);
  font-size: calc(var(--title-size) * var(--title-scale));
  color: var(--title-color);
  letter-spacing: var(--title-spacing);
  font-weight: var(--title-weight);
}
header h2 {
  font-family: var(--subtitle-font);
  color: var(--subtitle-color);
  font-size: calc(var(--subtitle-size) * var(--subtitle-scale));
  letter-spacing: var(--subtitle-spacing);
  font-weight: var(--subtitle-weight);
}
div.banner {
  display: flex;
  flex-direction:  var(--banner-layout);
  flex-wrap: nowrap;
  flex-basis: calc(100% - var(--menu-width));
  margin: 0 auto;
  padding: var(--banner-padding) var(--content-padding);
  box-sizing: border-box;
  max-width: var(--content-width);
  width:100%;
}
.banner .banner-text, .banner .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding:.625rem;
}
.banner .banner-text {
  flex-direction: column;
  flex-wrap: nowrap;
  flex-basis:calc(100% - var(--logo-width));
  flex-grow:1;
  align-items: stretch;
}
.banner .logo {
  flex-basis: var(--logo-width);
  flex-grow: 1;
}
.banner .logo img {
  display: block;
  height: auto;
  width: 100%;
  margin:0;
  padding:0;
  max-width: var(--logo-max-width);
}

/*** NAVIGATION MENU ***/
nav.main-menu, nav.main-menu ul {
  display: flex;
  max-width: var(--content-width);
  margin:0;
  padding:0;
  max-width:100%;
  align-items: center;
}
nav.main-menu {
  flex-direction: column;
  flex-wrap: nowrap;
  background: var(--menu-bgcolor);
  width: 100%;
  justify-content: center;
  flex-basis: var(--menu-width);
  border-top: var(--menu-border-top);
  border-bottom: var(--menu-border-bottom);
  padding: var(--menu-padding) 0;
}
nav.main-menu ul {
  max-width: calc(var(--content-width) - 1.25rem);
  width:100%;
  flex-direction: row;
  justify-content: var(--menu-text-align);
  flex-wrap: wrap;
  font-size: var(--nav-text-size);
}
nav.main-menu ul li {
  display:inline-block;
  background: var(--nav-bgcolor-normal);
  margin:0;
  padding:.625rem 1.25rem;
  text-align:center;
}
nav.main-menu ul li:nth-of-type(1) {
  padding-left:0;
}
nav.main-menu ul li:last-of-type {
  padding-right:0;
}
nav.main-menu ul li a, nav.main-menu ul li a:visited {
  text-decoration: none;
  font-weight: var(--nav-text-weight);
  color: var(--nav-color-normal);
  -webkit-transition: color .25s ease-in;
  -moz-transition: color .25s ease-in;
  -o-transition: color .25s ease-in;
  transition: color .25s ease-in;
}
/* Nav: hover state */
nav.main-menu ul li a:hover, nav.main-menu ul li a:active {
  color: var(--nav-color-hover);
  text-decoration: var(--nav-style-hover);
}

/*** MOBILE MENU BUTTON ANIMATION ***/
#menu-icon {
  position: relative;
  margin: .625rem auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  cursor: pointer;
  width: 26px;
  height: 20px;
  /* Hide for Desktop Width */
  display:none;
}
#menu-icon span {
  display: block;
  position: absolute;
  width: 100%;
  border-radius: 0;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  height: 20%;
}
nav.main-menu #menu-icon span {
  background: var(--icon-color);
}
nav.main-menu.open #menu-icon span {
  background: var(--icon-color-open);
}
#menu-icon span:nth-child(1) {top: 0px;}
#menu-icon span:nth-child(2),
#menu-icon span:nth-child(3) {top: 40%;}
#menu-icon span:nth-child(4) {top: 80%;}
nav.open #menu-icon span:nth-child(1) {
  width: 0%;
  left: 50%;
  top: 20%;
}
nav.open #menu-icon span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
nav.open #menu-icon span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
nav.open #menu-icon span:nth-child(4) {
  width: 0%;
  left: 50%;
  top: 20%;
}


/*** FOOTER ***/
footer {
  background: var(--footer-bgcolor);
  color: var(--footer-color);
  padding:0 calc(.625rem + var(--content-padding));
}
footer a, footer a:visited, footer a:active, footer a:hover {
  color: var(--footer-color);
  text-decoration:none;
  font-weight:500;
}
.footer-content {
  display:flex;
  flex:1;
  margin:0 auto;
  padding:.5rem 0;
  max-width: calc(var(--content-width) - 1.25rem);
  width:100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: space-around;
  justify-content: space-between;
}
.footer-content > div {
  padding: .625rem 0;
  margin: 0 auto;
  text-align:center;
}
.footer-content img {
  display: block;
  margin: 0;
  padding: 0;
  height: auto;
  width: var(--footer-logo-width);
}


/*** MAIN CONTENT ***/
div.Content {
  background: var(--content-bgcolor);
  flex:1;
  padding-top: var(--content-top-padding);
}
#step {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.step-form {
  padding-top:1.5rem;
}
main.step-form-inner#maincontent form:last-of-type {
  margin-bottom:0;
}
.step-title {
  max-width: calc(var(--content-width) - 1.25rem);
  margin: .4375rem auto 0;
  padding: 0 calc(.625rem + var(--content-padding));
}
.step-controls {
  display:flex;
  flex-direction: row;
  align-content: space-around;
  flex-wrap: wrap;
  align-items: stretch;
}
h1.step-control-label, h2.step-control-label, h3.step-control-label {
  margin-bottom: 1.25rem;
  padding-top:0;
}
h3.step-control-label, h4.step-control-label, h5.step-control-label,
h6.step-control-label, *.step-control-label {
  font-family: var(--body-font);
  font-weight: 500;
}
h1.step-control-label, h2.step-control-label {
  font-family: var(--heading-font);
}
.step-controls-container {
  max-width: var(--content-width);
  padding: .625rem var(--content-padding);
  margin:0 auto;
  border:0px solid #ddd;
  border-radius:.4375rem;
}
fieldset.step-controls-container {
  margin-left: auto;
  margin-right: auto;
}
.step-controls-container h1, .step-controls-container h2,
.step-controls-container h3, .step-controls-container h4,
.step-controls-container h5, .step-controls-container h6,
.step-controls-container p, .step-controls-container label,
.step-controls-container ul, .step-controls-container dl  {
  padding-left: .625rem;
  padding-right: .625rem;
}
div[class*="step-control-item"] {
  margin:0;
  display:block;
  flex:1;
  flex-basis:100%;
}
select.form-control, input.form-control {
  border-width:1px;
  margin-bottom:1.25rem;
}
option {
  min-height:1.5rem;
  padding:.5rem 1rem .5rem .5rem;
}
.form-control-input {
  margin-top:.25rem;
}
.form-control-input input,
.form-control-input select,
.form-control-input textarea {
  width: calc(100% - 1.25rem);
  border-radius:var(--input-radius);
  margin: 0px 0.625rem 1.25rem;
  background-color: var(--input-field-color);
  color: var(--input-text-color);
  box-sizing:border-box;
}
/* ADDED - KS */
input[type="text"], input[type="tel"] {
	color: var(--input-text-color);
	border-radius:var(--input-radius);
}
.form-control-input input:focus,
.form-control-input select:focus,
.form-control-input textarea:focus {
  background-color: var(--input-field-color-active);
}
.form-group.NotificationConsent .form-control-input {
  margin-bottom:.25rem;
}
.form-control.half {
  width:50%;
}

/*** VALIDATION FIELDS ***/
div#validation-summary-container {
  max-width: calc(var(--content-width) - 1.25rem);
  margin: 0 auto;
  padding: 0 calc(.625rem + var(--content-padding)); /* Padding Variable */
  border-color: var(--error-color);
}
div.validation-message-container {
  border-color: var(--error-color);
  padding:.625rem;
  flex-basis:100%;
}
div.validation-summary-errors ul {
  max-height: 0px;
  overflow: hidden;
  transition: .25s ease-in-out;
}
div.validation-summary-errors.open ul {
  max-height: 400px;
}
div.validation-summary-errors ul {
  padding-left:0;
}
div.validation-summary-errors li {
  list-style-type: none;
  padding: 0 .3125rem 0 1.9375rem;
  margin:0;
  position: relative;
}
div.validation-summary-errors li a, .validation-summary-header,
.validation-summary-header:before, span.field-validation-error,
#ErrorMessages {
  color: var(--error-color);
}
div.validation-summary-errors li a {
  position:relative;
  text-decoration: none;
  font-weight: 500;
  font-size: calc(.9375rem * var(--content-scale));
}
.validation-summary-header {
  padding:.3125rem;
  padding-left: 1.9375rem;
  margin:0;
  position: relative;
  font-family: var(--body-font);
  font-size: calc(.9375rem * var(--content-scale));
  font-weight:600;
}
.validation-summary-header:before {
  content: '!';
  font-weight: 700;
  font-size: calc(1.125rem * var(--content-scale));
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 100px;
  border: 2px solid var(--error-color);
  width: 1.125rem;
  height: 1.125rem;
  text-align: center;
  line-height: 1.25rem;
  position: absolute;
  left: .125rem;
  top: 50%;
  margin-top: -.6875rem;
  letter-spacing: -.03rem;
}
span.field-validation-error {
  font-size: calc(.875rem * var(--content-scale));
  letter-spacing: 0;
  font-weight: 500;
  padding-left: .625rem;
  margin: 0;
  margin-top: -1.0rem;
  margin-bottom: 1.25rem;
  position: relative;
  display: block;
}
input.form-control-error,
input.input-validation-error,
select.input-validation-error {
  box-shadow: 0 0 4px 0px var(--error-color);
}
.ValidationContainer {
  background: transparent;
  border-radius:0;
  height: 0; /* Hidden for now */
  overflow: hidden;
  padding: 0;
}
#ErrorMessages {
  padding: .625rem;
  font-size: calc(.875rem * var(--content-scale));
}


.buttons-list-container {
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  text-align:center;
  margin:.9375rem 0;
  flex-basis:100%;
  align-items: stretch;
}


/*** BUTTONS ***/
div[role="button"] {
  padding: .625rem;
  flex:1;
}
form button,
.buttons-list-container button,
div[role="button"] > div,
input[type="submit"],
input[type="button"] {
  padding: .5rem 1rem; /* BUTTON PADDING */
  line-height: 1.3125rem;
  border-radius: var(--button-radius);
}
div[role="button"] > div > div {
  text-align:center;
}
form button {
  margin-right:.625rem;
}
/* General Button Style - Normal State */
form button,
.buttons-list-container button,
input[type="button"],
.case-buttons input[type="button"], /* Attempt to fix mobile styling */
input[type="submit"], /* Attempt to fix mobile styling */
div[role="button"] > div,
.QflowObjectItem.form-control,
.progress-buttons > div > *,
.progress-buttons > div > input[type="submit"],
.progress-buttons > div > input[type="button"] {
  background: var(--button-bgcolor-normal);
  color: var(--button-color-normal);
  cursor: pointer;
  font-family: var(--button-font);
  font-weight: var(--button-text-weight);
  font-size: calc(var(--button-text-size) * var(--button-scale));
  border-style: solid;
  border-width: var(--button-border-width);
  border-color: var(--button-bordercolor-normal);
  box-shadow: var(--button-shadow);
  /* MODIFIED BORDER COLOR - KS */
  border-color: #C4C8D5;
  border-top-color: #ffffff;
  border-bottom-color: rgba(47, 60, 80, .4);
  border-left-color: rgba(47, 60, 80, .1);
  border-right-color: rgba(47, 60, 80, .1);
  margin-bottom: 15px;
}
form button:disabled,
.buttons-list-container button:disabled,
input[type="button"]:disabled,
.case-buttons input[type="button"]:disabled, /* Attempt to fix mobile styling */
input[type="submit"]:disabled, /* Attempt to fix mobile styling */
div[role="button"]:disabled > div,
.QflowObjectItem.form-control:disabled,
.progress-buttons > div > input[type="submit"]:disabled,
.progress-buttons > div > input[type="button"]:disabled {
  background: var(--button-bgcolor-disabled)!important;
  color: var(--button-color-disabled)!important;
  cursor: default!important;
  border:none!important;
}
/* Button Subtitle Sizing */
input[type="button"] .subtitle, div[role="button"] > div .subtitle,
.QflowObjectItem.form-control .subtitle, .progress-buttons > div > * .subtitle,
.progress-buttons > div > input[type="submit"] .subtitle {
  font-size: calc(var(--button-subtext-size) * var(--button-scale));
  font-weight: var(--button-subtext-weight);
}
/* General Button Style - Hover State */
form button:hover,
.buttons-list-container button:hover,
input[type="button"]:hover,
input[type="button"]:enabled:hover,
div[role="button"] > div:hover,
.QflowObjectItem.form-control:hover,
.QflowObjectItem.form-control.form-control-selected:active,
.progress-buttons > div > *:hover,
.progress-buttons > div > input[type="submit"]:hover,
.progress-buttons > div > input[type="button"]:hover {
  background: var(--button-bgcolor-hover);
  color: var(--button-color-hover);
  border-color: var(--button-bordercolor-hover);
  box-shadow: var(--button-shadow-hover);
}
/* ...and again for Focus State. They're separate because there are a lot of classes and we might need to vary them in the future. */
form button:focus,
.buttons-list-container button:focus,
input[type="button"]:focus,
div[role="button"] > div:focus,
.QflowObjectItem.form-control:focus,
.QflowObjectItem.form-control.form-control-selected:focus,
.progress-buttons > div > *:focus,
.progress-buttons > div > input[type="submit"]:focus {
  background: var(--button-bgcolor-hover);
  color: var(--button-color-hover);
  border-color: var(--button-bordercolor-hover);
  box-shadow: var(--button-shadow-hover);
}
/* General Button Style - Active (Clicked) State */
form button:active,
.buttons-list-container button:active,
input[type="button"]:active,
div[role="button"] > div:active,
.case-buttons input[type="button"]:active, /* Attempt to fix mobile styling */
input[type="submit"]:active, /* Attempt to fix mobile styling */
.QflowObjectItem.form-control:active,
.QflowObjectItem.form-control.form-control-selected,
.progress-buttons > div > *:active,
.progress-buttons > div > input[type="submit"]:active {
  background: var(--button-bgcolor-active);
  color: var(--button-color-active);
  border-color: var(--button-bordercolor-active);
}


/***** ALTERNATE BUTTON STYLES *****/
/* Alternate Button Style - Normal State */
form button.alt,
input[type="button"].alt,
div[role="button"] > div.alt,
.QflowObjectItem.form-control.alt,
.progress-buttons > div > *.alt,
.progress-buttons > div > input[type="submit"].alt {
  background: var(--altbutton-bgcolor-normal);
  color: var(--altbutton-color-normal);
  border-color: var(--altbutton-bordercolor-normal);
  box-shadow: var(--altbutton-shadow);
}
/* Alternate Button Style - Hover State */
form button.alt:hover,
input[type="button"].alt:hover,
div[role="button"] > div.alt:hover,
.QflowObjectItem.form-control.alt:hover,
.QflowObjectItem.form-control.form-control-selected.alt:active,
.progress-buttons > div > *.alt:hover,
.progress-buttons > div > input[type="submit"].alt:hover {
  background: var(--altbutton-bgcolor-hover);
  color: var(--altbutton-color-hover);
  border-color: var(--altbutton-bordercolor-hover);
  box-shadow: var(--altbutton-shadow-hover);
}


/*** NEXT/BACK BUTTONS ***/
.progress-buttons {
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex: 1 1 0;
  margin:0 auto 1.875rem;
  max-width: var(--content-width);
  padding: var(--content-padding);
}
.progress-buttons.center {
  justify-content: center;
}
.progress-buttons > div {
  flex: 1 1 0;
  padding:.625rem;
  max-width: 12.5rem;
}
.progress-buttons > div > * {
  width:100%;
  display:block;
  margin:0 auto;
  padding: 1rem 0;
  line-height: 1.25rem;
  text-align: center;
  border-radius: var(--button-radius);
  text-decoration:none;
  /* MODIFIED - KS */
  padding:.5rem 1rem;
  line-height:1.625rem;
}
.back-btn-container:empty {display:none;}


/*** APPOINTMENT DATE/TIME SELECTION ***/
.datetime-grid {
  display: flex;
  justify-content: center;
  flex-direction: row;
  width:100%;
  order:10;
}
.DateTimeGrid-Column {
  width:100% !important;
  max-width:9rem;
  padding:.25rem;
}
.DateTimeGrid-Day {
  text-align: center;
  padding-bottom: .25rem;
}
.DateTimeGrid-Day p {
  margin:0;
}
.ServiceAppointmentTypeDateTimeModelform {
	flex-wrap:wrap;
}
.ServiceAppointmentDateTime.form-control {
  text-align: center;
  font-weight:600;
  margin:0;
  padding: .625rem .125rem;
  cursor: pointer;
  border-radius: 0;
  border: 1px solid var(--select-bordercolor-normal);
  background: var(--select-bgcolor-normal);
  color: var(--select-color-normal);
}
.ServiceAppointmentDateTime.form-control:hover {
  background: var(--select-bgcolor-hover);
  border: 1px solid var(--select-bordercolor-hover);
  color: var(--select-color-hover);
}
.ServiceAppointmentDateTime.form-control.form-control-selected {
  background: var(--select-bgcolor-active);
  border: 1px solid var(--select-bordercolor-active);
  color: var(--select-color-active);
}
.ServiceAppointmentDateTime.form-control:nth-of-type(n+3) {
  border-top-color: rgba(255,255,255,0.4);
}
/* Pagination Buttons */
div[id$="_Previous)"],
div[id$="Next)"] {
  flex-basis: 50%;
  flex-grow: 2;
  padding: .625rem .25rem;
  box-sizing: border-box;
  font-size: calc(.9375rem * var(--button-scale));
  font-weight:500;
  cursor: pointer;
  position: relative;
  min-height:2.5rem;
  min-height:calc(var(--paginate-button-size) + (var(--paginate-button-padding) * 2));
  font-size:0;
}
div[id$="_Previous)"] {
  order:6;
  text-align: left;
}
div[id$="_Next)"] {
  order:8;
  text-align: right;
}
div[id$="_Previous)"]::before,
div[id$="_Next)"]::after {
  font-weight: 700;
  font-size: var(--paginate-text-size);
  width: var(--paginate-button-size);
  height: var(--paginate-button-size);
  line-height: var(--paginate-button-size);
  padding: var(--paginate-button-padding);
  background-color: var(--paginate-bgcolor-normal);
  color: var(--paginate-color-normal);
  display: block;
  text-align: center;
  border-radius: 100px;
  border: var(--paginate-border);
  position: absolute;
  top:0;
  transition: all .25s ease;
}
div[id$="_Previous)"]::before {
  content:'❮';
  left: 0;
  padding-left: calc(var(--paginate-button-padding) - .04375rem);
  padding-right: calc(var(--paginate-button-padding) + .04375rem);
}
div[id$="_Next)"]::after {
  content:'❯';
  right: 0;
  padding-left: calc(var(--paginate-button-padding) + .04375rem);
  padding-right: calc(var(--paginate-button-padding) - .04375rem);
}
div[id$="_Previous)"]:hover::before,
div[id$="_Next)"]:hover::after {
  background-color: var(--paginate-bgcolor-hover);
  color: var(--paginate-color-hover);
  border-color: var(--paginate-bordercolor-hover);
}
div[id$="_Previous)"]:active::before,
div[id$="_Next)"]:active::after {
  background-color: var(--paginate-bgcolor-active);
  color: var(--paginate-color-active);
  border-color: var(--paginate-bordercolor-active);
}
/* Next Popup */
.next-button-alt-container {
	position:fixed;
	bottom:0;
	opacity:0;
	left:0;
	right:0;
	box-sizing: border-box;
	background-color:white;
	border-top:1px solid #ddd;
	box-shadow:0 -2px 20px rgba(0,0,0,0.2);
  bottom:-150px;
	transition: all 1.5s ease;
}
.next-button-alt-wrap {
	max-width: var(--content-width);
	width:100%;
	margin:0 auto;
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
  justify-content: center;
  align-items: center;
	padding:1.5rem;
	box-sizing: border-box;
}
.next-button-alt-container p {
	margin:0 auto;
	padding:0 1.5rem;
}
button.next-button-alt {
	margin:0 auto;
	padding:1rem 1.5rem;
	min-width:9rem;
	line-height:1.25rem;
}
.next-button-alt-container.time-selected {
	opacity:1.0;
  bottom:0;
	transition: all .5s ease;
}

.div-containerbutton2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  margin-top: .75rem;
}


/* Mobile Width */
/* Some styles have been hidden because the mobile menu is not used. */
@media all and (max-width: 768px) {

  dt {
    max-width:100%;
    padding:.4375rem 0 0;
  }
  dd {
    max-width: 100%;
    width: 100%;
    border-width: 0;
    padding: 0 0 .4375rem;
  }
  dt:last-of-type {
    border-bottom-width: 0;
  }
  header {
    flex-wrap:wrap;
  }
  /*
  .header-wrap {
    flex-direction:column;
  }
  */
  header h1, header h2, header h3 {
    text-align:center;
  }
  div.banner {
    padding-bottom:0;
    flex-wrap:wrap;
  }
  .banner .logo img {
    height:auto;
    width:auto;
    max-width: var(--logo-max-width);
    margin-left:auto;
    margin-right:auto;
  }
  
  
  .displaydata-item label {
    width:100%;
  }

  /* Appointment Date & Time */
  div.datetime-grid {
    justify-content: space-between;
    flex-direction: column;
  }
  div.DateTimeGrid-Column {
    width:auto !important;
    max-width:100%;
    display:flex !important;
    flex-direction:row;
    flex-wrap:wrap;
    flex-basis:100%;
    position:relative;
    padding:0;
    border-width:0;
    margin-top:6rem;
  }
  .DateTimeGrid-Day {
    flex-basis:100%;
    position:absolute;
    font-size: calc(.9375rem * var(--button-scale));
    text-align: center;
    padding-top:0;
    margin-top:-1.75rem;
    top:0;
  }
  div.DateTimeGrid-Column .ServiceAppointmentDateTime.form-control {
    box-sizing:border-box;
    flex-basis: calc(25% - 4px);
    max-width: calc(25% - 4px);
    margin:2px;
    font-size: calc(.875rem * var(--button-scale));
    padding: .875rem .25rem;
    line-height: .875rem;
    border: 1px solid var(--select-bordercolor-normal);
    border-radius:0;
  }
  .DateTimeGrid-Day p {
    margin:0;
    display:inline-block;
    padding-left:0;
    padding-right:.25rem;
  }
  .DateTimeGrid-Day p:first-of-type::after {
    content:'•';
    margin-left:.25rem;
    font-weight:300;
  }
  .next-button-alt-container p {
		padding:.25rem 0 1.75rem;
		text-align:center;
	}
}

@media (max-width: 479px) and (max-height: 669px) {
   main.consent-step form {
        height: 100%;
        padding-bottom: 15%;//other option 50px the minimun
    }
}


/*** STYLES ONLY FOR IE10, IE11 ***/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  body, header, .header-wrap {
    display:block;
  }
  dd {
    padding:0 0 .375rem;
  }
  div.Content {
    min-height:60vh;
  }
  a button, button, input[type="reset"],
  input[type="button"], textarea, select, input {
    padding:.5rem 1rem .75rem;
  }
  nav.main-menu ul {
    margin:0 auto;
    text-align: var(--menu-text-align);
  }
  form button,
  input[type="button"],
  div[role="button"] > div,
  .QflowObjectItem.form-control,
  .progress-buttons > div > *,
  .progress-buttons > div > input[type="submit"] {
    padding-left:2.5rem;
    padding-right:2.5rem;
  }
  .progress-buttons > div > * {
    width:auto;
  }
  .progress-bar {
    margin-top:0;
    margin-bottom:0;
  }
  .progress-bar-wrap {
    padding-top:2rem;
    padding-bottom:2rem;
  }
  .DisplayData {
    margin-top:0;
  }
  .datetime-grid {
    display:block;
    text-align:center;
  }
  div[id$="_Previous)"]::before,
  div[id$="_Next)"]::after {
    line-height: calc(var(--paginate-button-size) - .0625rem);
  }
}





/* Misc V3 Upgrade changes */

main#maincontent {
    flex-grow: 1;
}
.logo-inline {
    display: flex;
    justify-content: center;
}
.back-button {
	border-width: 2px!important;
}
p.not-open-message {
	text-align: center;
}
.g-recaptcha {
    display: flex;
    justify-content: center;
}

div[data-stepcontrolkey="CFTS"] {
    display: flex;
    justify-content: center;
}
div[data-stepcontrolkey="PICKUP"] div[role="radiogroup"],
div[data-stepcontrolkey="PRIORITY"] div[role="radiogroup"] {
    text-align: center;
}

.tel {
margin-top:20px;
}
.journey-error {
  display: flex;
  align-items: baseline;
  justify-content: center;
  align-self: center;
  max-width: 1000px;
  min-width: 100%;
  width: calc(100% - var(--content-padding) * 2);
  margin: 0;
  padding: var(--content-padding);
  box-shadow: 0px 2px 7px 0 red;
  border-bottom: .6px solid red;
  background-color: #f2e1d1;
  color: #c40000;
  font-weight: bold;
  text-align: center;
}

.journey-error::before {
  content: url('../../../Content/JourneyContent/95e8e251-be23-4738-87f7-e5ee48912ffa/error-icon.svg');
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  vertical-align: baseline;
  align-content: center;
  justify-content: center;
  animation: blink 2s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}