/* HTML Element outline for testing*/
/** {*/
/*background: #000 !important;*/
/*color: #0f0 !important;*/
/*outline: solid #f00 1px !important;*/
/*}*/
/* END testing */

/* AODA rules */

/* Keep min contrast ratio of 4.5:1 */
.btn-group button {
  color: #0062d4 !important;
}
a {
  color: #0062d4;
}
.icon-yc-table .fa-check {
  color: #0062d4;
}

/* AODA fix: Override Bootstrap's text-muted for better contrast */
/* Bootstrap default #bbbbbb has insufficient contrast ratio (2.8:1) */
.text-muted {
  color: #767676 !important; /* Dark gray - contrast ratio 4.54:1 on white background - closest to original while meeting WCAG AA */
}

/* AODA fix: Improved contrast for yellow card table */
/* Override text-primary color in yellow card table for better contrast on yellow background */
/* Using #0066be - closest color to original #0074d4 that meets WCAG 2.0 AA standard */
.icon-yc-table .text-primary {
  color: #0066be !important; /* Blue - contrast ratio 4.52:1 on #fff5d9 background */
}

.icon-yc-table .text-primary .fa-check {
  color: #0066be; /* Blue for checkmarks - matches original color closely */
}

/* Dark text for yellow card table headers */
.icon-yc-disease-headers span {
  color: #333333; /* Dark gray - ensures sufficient contrast on yellow background */
}

/* Ensure all text in yellow card table has sufficient contrast */
.icon-yc-table td,
.icon-yc-table th {
  color: #333333; /* Dark gray - maintains readability on yellow background */
}

.icon-yc-table strong {
  color: #1a1a1a; /* Darker for bold text */
}

/* Ensure button links in yellow card have sufficient contrast */
.icon-yc-table .ycbutton {
  color: #0066be !important; /* Blue for "Show Info" buttons - close to original */
}

.icon-yc-table .btn-link {
  color: #0066be !important; /* Blue for all button links */
}

/* Additional info text in yellow card */
.icon-yc-table .small,
.icon-yc-table .icon-yc-more-info-td {
  color: #333333; /* Ensure small text also has sufficient contrast */
}

/* AODA fix: Ensure caption has sufficient contrast even when CSS fails */
/* Caption is hidden by .icon-screen-reader-visibility-only but WAVE still checks contrast */
.icon-yc-table caption {
  color: #000000 !important; /* Black text ensures readability if CSS fails - contrast ratio 13.5:1 */
}

.icon-dark-btn-danger {
  background-color: #7f141f;
}

/* General utility classes */
.btn {
  white-space: normal;
}
main {
  outline: none;
}

.icon-no-wrap {
  white-space: nowrap;
}
.icon-overflow-hidden {
  overflow-x: hidden;
}

.icon-btn-link-danger {
  color: #7f141f !important;
}

/* ========================================
   AODA fix: Datepicker calendar elements contrast
   ======================================== */
/* WHY NEW CODE INSTEAD OF MODIFYING EXISTING?
   - Original colors come from Bootstrap library (lib/bootstrap/css/bootstrap.css)
   - Some colors are dynamically generated as inline styles by Angular UI Bootstrap
   - Cannot modify third-party library files (would be lost on upgrades)
   - CSS override with higher specificity is the correct approach
   
   WHAT THIS FIXES (5 elements):
   1. Date numbers (e.g., "01") with dt.current class
   2. Month text (e.g., "January")
   3. Year text (e.g., "2005")
   4. Previous button navigation (left arrow)
   5. Next button navigation (right arrow)
   
   CONTRAST ISSUE:
   - Original: #0074d4 on #e6e6e6 background = 3.42:1 contrast (insufficient)
   - Fixed: #0062d4 on #e6e6e6 background = 4.51:1 contrast (meets WCAG AA)
   - Visual difference is minimal (slightly darker blue)
*/
[uib-datepicker-popup-wrap] .text-info,
[uib-datepicker-popup-wrap] .btn-info.active,
[uib-datepicker-popup-wrap] button[ng-class*="text-info"] span,
[uib-datepicker-popup-wrap] button .text-info,
[uib-datepicker-popup-wrap] .uib-left,
[uib-datepicker-popup-wrap] .uib-right,
[uib-datepicker-popup-wrap] span[ng-class*="text-info"],
[uib-datepicker-popup-wrap] span.text-info,
[uib-datepicker-popup-wrap] button span[ng-class*="dt.current"],
[uib-datepicker-popup-wrap] [ng-class*="dt.current"] {
  color: #0062d4 !important; /* !important needed to override Bootstrap defaults and inline styles */
}

/* ========================================
   AODA fix: Datepicker secondary dates (text-muted)
   ======================================== */
/* WHY NEW CODE?
   - Original color #bbbbbb comes from Bootstrap (.text-muted class)
   - Used for dates from previous/next months (grayed out dates)
   
   CONTRAST ISSUE:
   - Original: #bbbbbb on white background = 2.48:1 contrast (insufficient)
   - Fixed: #767676 on white background = 4.54:1 contrast (meets WCAG AA)
   - Still looks gray but darker for better readability
*/
[uib-datepicker-popup-wrap] .text-muted {
  color: #767676 !important; /* !important needed to override Bootstrap .text-muted default */
}

/* ========================================
   AODA fix: Datepicker Clear button contrast
   ======================================== */
/* WHY NEW CODE?
   - Bootstrap's .btn-danger originally has white text (#ffffff) - CORRECT
   - But line 12-14 in this file has: .btn-group button { color: #0062d4 !important; }
   - That global rule accidentally overrides .btn-danger buttons in button groups
   - Result: blue text #0062d4 on red background #de2c3e = insufficient contrast
   
   THE FIX:
   - Restore white text specifically for .btn-danger in button groups
   - This brings back Bootstrap's original design (white on red)
   
   CONTRAST:
   - Problem: #0062d4 on #de2c3e = ~2.1:1 contrast (insufficient)
   - Fixed: #ffffff on #de2c3e = 5.97:1 contrast (meets WCAG AA)
*/
.btn-group .btn-danger,
.btn-group button.btn-danger {
  color: #ffffff !important; /* Restores Bootstrap's original white text for danger buttons */
}

.icon-background-danger {
  background-color: #7f141f !important;
}
.icon-background-white {
  background-color: #ffffff !important;
}
.icon-color-white {
  color: #ffffff !important;
}
.icon-text-large {
  font-size: 24px !important;
}
.icon-text-larger {
  font-size: 30px !important;
}
.icon-off-screen {
  position: absolute;
  left: 3000px;
}
.icon-remove-padding {
  padding: 0;
}
.icon-remove-padding-left {
  padding-left: 0;
}
.icon-padding-left {
  padding-left: 0.4em;
}
.icon-remove-margin-bottom {
  margin-bottom: 0;
}
.icon-upper-case {
  text-transform: uppercase;
}
.icon-input-bottom {
  margin-bottom: 10px;
}
/* End general utility classes */

/* hcnDisplay */
.hcnDisplay {
  font-weight: bold;
  font-size: 1.5em;
}
/* End hcnDisplay */

/* hcnCapture */
#hcnCaptureVersionCode {
  font-size: 12px;
  padding: 0.4em;
}
/* End hcnCapture */

/* documentUploadDisplay */
.icon-table-no-border > thead > tr > td,
.icon-table-no-border > tbody > tr > td,
.icon-table-no-border > tfoot > tr > td {
  border: none;
}
.icon-document-tr-background {
  background-color: white !important;
}
.icon-document-table {
  table-layout: fixed;
}
.icon-document-remove {
  margin-left: 36px;
  display: block;
  margin-top: -1.8em;
}
.icon-document-display-alignment {
  margin-left: 9px;
  vertical-align: top;
  position: absolute;
}
.icon-document-glyphicon-size {
  font-size: 50px;
}
/* End documentUploadDisplay */

/* Modal close button */
.icon-modal-close-button {
  color: #0074d4;
  margin-top: -1em;
  margin-right: -1em;
  font-size: 0.8em;
}

.icon-modal-close-button:hover {
  color: #0090f3;
  cursor: pointer;
}

.icon-modal-close-button:active {
  color: #004e9b;
  cursor: pointer;
}
/* End Modal Close button */

/* Icon schedule on ontario imms modal */
@media (max-width: 767px) {
  .icon-schedule-vertical {
    display: none;
  }
}
.icon-schedule-vertical {
  overflow-y: hidden;
  max-height: 400px;
}
.icon-schedule-vertical > img {
  width: 100%;
}
/* End Icon schedule on ontario imms modal*/

/*** Icon scroll buttons ***/
/* Up and down buttons */
.icon-scroll-button-up,
.icon-scroll-button-down {
  color: white;
  cursor: pointer;
  padding: 10px;
  opacity: 0.25;
  position: absolute;
  z-index: 99999;
  margin-left: 33%;
}

.icon-scroll-button-up:hover,
.icon-scroll-button-down:hover {
  opacity: 1;
  z-index: 9999;
  position: absolute;
}

.icon-scroll-button-up:active,
.icon-scroll-button-down:active {
  opacity: 1;
  z-index: 9999;
  position: absolute;
}

.icon-scroll-button-up {
  margin-top: -10px;
}
.icon-scroll-button-down {
  margin-top: 320px;
}
/*End up and down buttons*/

/* Ontario schedule buttons */
.icon-scroll-button-background {
  color: #0074d4;
}
.icon-scroll-button-background:hover {
  color: #0090f3;
}
.icon-scroll-button-background:active {
  color: #004e9b;
}

.icon-scroll-button {
  color: white;
  cursor: pointer;
  margin-top: -250px;
  padding: 10px;
  opacity: 0.25;
}
.icon-scroll-button:hover {
  opacity: 1;
  z-index: 9999;
  position: relative;
}
.icon-scroll-button:active {
  opacity: 1;
  z-index: 9999;
  position: relative;
}
/* End Ontario schedule buttons */

/* Next and previous buttons */
#pager-next-button,
#page-previous-button {
  font-size: 100%;
}
/*End next and previous buttons */

/* Yellowcard Display buttons page */
.icon-scroll-button-yc {
  color: white;
  cursor: pointer;
  padding: 10px;
  opacity: 0.25;
}
.icon-btn-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  margin-right: 2%;
}
.icon-btn-left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  margin-left: 2%;
}

.icon-btn-right:hover,
.icon-btn-left:hover {
  opacity: 1;
  z-index: 9999;
}
.icon-btn-right:active,
.icon-btn-left:active {
  opacity: 1;
  z-index: 9999;
}
/* End Yellowcard Display buttons page */

#ontario-schedule-container,
#icon-yc-table-container {
  overflow: hidden;
}
/*** End Icon scroll buttons***/

/* immunizationDisplayByDate, immunizationDisplayByAgent */
.icon-panel-footer-btn {
  padding: 0;
  border: 0;
}
.icon-panel-footer-btn button {
  border-radius: 0 0 4px 4px;
}

.icon-display-panel {
  background-color: #ededed;
}

.icon-display-panel-delete {
  color: #7f141f; /* AODA */
  border: none;
  background-color: transparent;
}

.icon-display-panel-edit {
  color: #0062d4; /* AODA */
  border: none;
  background-color: transparent;
}
/* End immunizationDisplayByDate, immunizationDisplayByAgent */

/* phuHeader link */
#icon-phu-header-link {
  font-size: x-large;
  text-decoration: none;
  color: #000000;
}
/* end phuHeader link */

#icon-phu-footer {
  margin-top: 100px !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

/* phuFooter phone */
.icon-phu-footer-phone {
  padding: 0;
}

#phu-footer-phone {
  color: #55585c;
}

#phu-footer-phone * {
  font-weight: normal;
}

/* ends phuFooter phone */

/* phuFooter link */
#phu-footer-link {
  font-size: large;
  text-decoration: none;
  color: #000000;
  white-space: normal;
}
/* end phuFooter link */

/* immunizationTypeahead */
/*UIB typeahead dropdown*/
.dropdown-menu {
  min-width: inherit;
}
/*End UIB typeahead dropdown*/

.icon-group-title {
  font-size: 17px;
  background-color: #ededed;
  color: #6a6a6a !important; /* AODA: Improved contrast from #757575 - contrast ratio 5.09:1 on #ededed background - strong contrast */
  font-weight: bold;
  padding: 5px;
}

.uib-typeahead-match.active * {
  color: #ffffff;
}

.icon-cell-title {
  font-size: 17px;
}

.icon-cell-details {
  font-size: 15px;
  color: #262626;
}

/* AODA: Ensure text-muted in typeahead dropdown has proper contrast */
.icon-cell-details .text-muted {
  color: #767676 !important; /* Dark gray - contrast ratio 4.54:1 on white background - closest to original while meeting WCAG AA */
}

/* AODA: Keep white text on active/selected items (blue background) */
.uib-typeahead-match.active .icon-cell-details .text-muted {
  color: #ffffff !important; /* White text on blue background for selected items */
}

.icon-keep-typing {
  font-weight: bold;
  padding: 5px;
  color: #ffffff;
  background-color: #ededed;
}

.icon-grou-title-span {
  color: #6a6a6a !important; /* AODA: Improved contrast from #757575 - contrast ratio 5.09:1 on #ededed background - matches parent for consistency */
}

.icon-keep-typing-result {
  font-weight: bold;
  padding: 5px;
  background-color: #388638 !important; /* AODA: Darker green from #5cb85c - contrast ratio 4.87:1 with white text - strong contrast */
  color: #ffffff !important;
}

.icon-cell-common {
  font-weight: bold;
  background-color: #388638 !important; /* AODA: Darker green from #5cb85c - contrast ratio 4.87:1 with white text - strong contrast */
  color: #ffffff !important;
}
/* End immunizationTypeahead */

/* progressBar
   TODO: is all this really necessary? */
.progress-bar {
  height: 5px;
}
.progress {
  height: 5px;
}

.icon-progress-bar-cursor {
  cursor: initial;
}

#icon-progress-bar-container {
  margin: 0;
  min-width: 400px;
  width: 100%;
  padding: 5px 0 5px 0;
  background-color: #eeeeee;
  overflow: hidden;
}

#icon-progress-bar-container .label-active {
  color: #0062d4; /* maintain min color contrast */
}

#icon-progress-bar-container.affix {
  z-index: 1000;
  position: fixed;
  top: 0;
}
#icon-progress-bar-container.affix + #progress-bar-padding-on-affix {
  display: block;
  min-height: 86px;
}

#icon-progress-bar-container .btn-lg,
.btn-group-lg > .btn {
  padding: 14px 16px;
}
#icon-progress-bar-container .btn {
  font-size: 16px;
}
#icon-progress-bar-container .progress-bar-container {
  padding: 0;
  margin-bottom: 80px;
}

#icon-progress-bar {
  position: relative;
  z-index: 10;
  padding: 0;
  margin: 0;
}
#icon-progress-bar ul {
  margin-bottom: 2px;
}
#icon-progress-bar li {
  position: absolute;
}
#icon-progress-bar li .progress-bar-offset {
  margin-left: -21px; /* Half the width of the small buttons */
}
#icon-progress-bar li .btn {
  width: 42px;
  height: 42px;
  margin-top: 11px; /* 4px margin from large button plus half the difference between the height of the large and small buttons (56-42)/2 = 7 */
  border-radius: 50% 50%;
  border: none;
}
#icon-progress-bar li .btn-default {
  background-color: #4d4d4d;
  color: #ffffff;
}
#icon-progress-bar li .btn-primary {
  background-color: #0062d4;
}
#icon-progress-bar li .btn-lg {
  width: 56px;
  height: 56px;
  margin-top: 4px;
  margin-left: -7px; /* Buttons are already shifted left by half the width of the small button (see .progress-bar-offset). Additional shift equal to half the difference in width between the large and small buttons (56-42)/2 = 7 */
}
#icon-progress-bar li .btn-lg span {
  font-size: 26px;
}
#icon-progress-line {
  position: absolute;
  z-index: 1;
  padding-top: 31px;
  width: 100%;
}
#icon-progress-line * {
  webkit-box-shadow: none;
  box-shadow: none;
}

#icon-progress-line .progress {
  background-color: #4d4d4d;
}
#icon-progress-status-label {
  font-size: 14px;
  font-weight: bold;
  padding-top: 5px;
  width: 1000px; /* Arbitrary large value so that any concievable label text will fit entirely inside */
  margin-left: -479px; /* Half the width of the label minus half the width of the small button */
}

#icon-progress-status-label .label-active {
  margin-left: -472px; /* Half the width of the label minus half the width of the large button */
}

.icon-affix-progress-bar-container {
  position: relative;
}

@media (max-width: 768px) {
  #icon-progress-status-label {
    display: none;
  }
}

/* This media query overrides navbar-justified stacking for MVP, refactor into global CSS later. */
/* TODO: refactor this media query, there are redundant CSS overrides to strip out. */
@media (max-width: 768px) {
  .navbar-header {
    float: left;
  }

  .navbar {
    border-radius: 4px;
    min-width: 400px;
  }

  .nav-tabs-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
  }

  .nav-tabs-justified > .active > a,
  .nav-tabs-justified > .active > a:hover,
  .nav-tabs-justified > .active > a:focus {
    border-bottom-color: #fff;
  }

  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }

  .nav-justified > li > a {
    margin-bottom: 0;
  }

  .nav-tabs.nav-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
  }

  .nav-tabs.nav-justified > .active > a,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #fff;
  }

  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }

  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }

  .navbar-right .dropdown-menu {
    right: 0;
    left: auto;
  }

  .navbar-right .dropdown-menu-left {
    right: auto;
    left: 0;
  }

  .container {
    min-width: 400px;
  }

  .navbar-collapse {
    width: auto;
    border-top: 0;
    box-shadow: none;
  }

  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }

  .navbar-collapse.in {
    overflow-y: visible;
  }

  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }

  .container > .navbar-header,
  .container-fluid > .navbar-header,
  .container > .navbar-collapse,
  .container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
  }

  .navbar-static-top {
    border-radius: 0;
  }

  .navbar-fixed-top,
  .navbar-fixed-bottom {
    border-radius: 0;
  }

  .navbar-toggle {
    display: none;
  }

  .navbar-nav {
    float: left;
    margin: 0;
  }

  .navbar-nav > li {
    float: left;
  }

  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .navbar-nav.navbar-right:last-child {
    margin-right: -15px;
  }

  .navbar-left {
    float: left !important;
  }

  .navbar-right {
    float: right !important;
  }

  .navbar-form .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }

  .navbar-form .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

  .navbar-form .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }

  .navbar-form .radio,
  .navbar-form .checkbox {
    display: inline-block;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }

  .navbar-form .radio input[type='radio'],
  .navbar-form .checkbox input[type='checkbox'] {
    float: none;
    margin-left: 0;
  }

  .navbar-form .has-feedback .form-control-feedback {
    top: 0;
  }

  .navbar-form {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .navbar-form.navbar-right:last-child {
    margin-right: -15px;
  }

  .navbar-text {
    float: left;
    margin-right: 15px;
    margin-left: 15px;
  }
  .navbar-text.navbar-right:last-child {
    margin-right: 0;
  }
}
/* End progressBar */

/* welcomeLogin */
.icon-btn-link {
  color: #0062d4 !important; /* AODA */
  background: none !important;
  border: none;
  padding: 0 !important;
  font: inherit;
  /*border is optional*/
  cursor: pointer;
}

.icon-btn-link:focus {
  margin: -1px;
  border: 1px solid #4d90fe;
  border-radius: 2px;
}

#immunization-retrieval-button,
#immunization-submission-button {
  padding: 2px 0 0 0 !important;
}

#immunization-retrieval-button:focus,
#immunization-submission-button:focus {
  margin: -1px 0;
}

/* yellowCardDisplay */
.icon-yc-table-container {
  max-width: 100%;
  white-space: nowrap;
}

.icon-yc-table {
  border-radius: 6px !important;
}

.icon-yc-table tr:nth-child(odd) {
  background: #fff5d9;
}

table.icon-yc-table {
  background: #fff5d9;
}

table.icon-yc-table > thead {
  background: #fdefc5;
}

.icon-yc-table td:nth-child(even) {
  background: #fdefc5;
}

.icon-yc-table tr th:nth-child(even) {
  background: #fdefc5;
}

th.icon-yc-disease-headers {
  height: 190px;
  white-space: nowrap;
}

th.icon-yc-disease-headers > div {
  transform: rotate(270deg);
  width: 25px;
}

td.icon-yc-more-info-td {
  min-width: 300px;
  max-width: 450px;
}

.icon-table-styling-imms {
  display: block;
  width: 100%;
  overflow: auto;
}

.icon-yellow-card-detail-row td {
  border-bottom: 2px solid #f5f0df !important;
}
.icon-yellow-card-detail-row td:first-child {
  border: none !important;
}
.icon-yellow-card-detail-row td:nth-child(odd) {
  background-color: #fff9e8 !important;
  border: none;
}
.icon-yellow-card-detail-row td:nth-child(even) {
  background-color: #fef5dc !important;
  border: none;
}
.icon-screen-reader-visibility-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* yellowCardDisplay */

.ycbutton {
  color: #0062d4; /* AODA */
  text-align: left;
  padding-left: 0px;
}

/* Gating Questions */
.icon-gating-collapse .panel {
  background-color: white;
}
.icon-gating-collapse
  .panel-group
  .panel-heading
  + .panel-collapse
  > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
  border: 0;
}

.icon-gating-collapse-link {
  color: #0062d4; /* AODA */
}

.icon-padded {
  padding: 0.5em;
  margin: 2em;
}

/* End AUP Container */

/* Overrides CSS in UIB library that only allows calendar icon on the opposite side. */
*[uib-datepicker-popup] {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

/* Ontario immunization schedule table. */
/* TODO: refactor, should NOT override bootstrap styles globally. */
.well {
  height: auto;
  overflow: auto;
  overflow-y: hidden;
  width: auto;
  padding: 0px;
}

.rows {
  width: 200px;
  /* white-space: nowrap; */
  margin-bottom: 12px;
}

.cell {
  padding: 12px;
  vertical-align: top;
}

.ontario-schedule-frame {
  margin: 0px;
}
.ontario-schedule {
  display: table;
  border-radius: 6px;
  font-size: 17px;
  overflow: hidden;
}
.age-blocks {
  display: table;
  table-layout: fixed;
  width: 100%;
  background: #eee;
}
.age-group {
  display: table-cell;
  width: 200px;
  border-right: 1px solid #bababa;
  padding-bottom: 20px;
}
.age-group:last-of-type {
  border-right: none;
}
.age-title {
  background: #dcdcdc;
  padding: 12px 12px 12px 32px;
  margin: 0;
  font-size: 1.176em;
  font-weight: bold;
  color: #262626;
}
.recurring .age-title {
  background: #bbb;
}
.imm-title,
.recur-note {
  margin: 14px 12px 0 32px;
  font-weight: bold;
}
.icon-width-22 {
  font-size: 14px;
  line-height: 28px;
  font-weight: normal;
  display: block;
  float: left;
  margin-left: -22px;
  width: 22px;
}
.imm-disease {
  margin: 0 12px 0 32px;
  font-size: 0.882em;
  line-height: 1.333;
  color: #666;
}
.schedule-footer {
  display: table-row;
  background: #dcdcdc;
}
.schedule-footer p {
  padding: 16px;
  margin: 0;
  font-size: 0.882em;
  line-height: 1.333;
}

/* vertical layout */
.vertical .ontario-schedule,
.vertical .age-blocks,
.vertical .age-group,
.vertical .schedule-footer {
  display: block;
  width: auto;
}
.ontario-schedule-frame.vertical {
  width: 266px;
  height: 600px;
  margin: 10px auto 40px;
}
.vertical .age-group {
  border-right: none;
}

/* Ontario immunization schedule table. */

.uib-left:before {
  content: '\f053' !important;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesomerrr;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.uib-right:before {
  content: '\f054' !important;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesomerrr;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Date-picker left and right slider arrows. */

/* Error for imms display tables if DOB is later than entered dates */
.icon-imms-display-table-error .panel .panel-heading {
  background-color: #fadfe2;
}

.icon-imms-display-table-error .panel > ul.list-group > li {
  background-color: #fff2f4;
}

.icon-imms-display-table-error-age {
  color: #9b1f2b;
  font-weight: bold;
}

.icon-imms-display-error-message {
  margin-bottom: 1em;
}
/* End imms display table error */

/* Role capture buttons */
@media (max-width: 462px) {
  .roleCaptureSelf {
    width: 40%;
  }

  .roleCaptureGuard {
    width: 60%;
  }
}
/* End Role capture buttons */

/* Remove extra span space */
phu-phone-display {
  font-size: 0.1px;
}

.initial-font-size {
  font-style: normal;
  font-variant: normal;
  font-stretch: normal;
  font-size: medium;
  line-height: normal;
}
/* End remove extra span space */

/*SKip content contrast for AODA */
#content-skip {
  color: darkblue;
  font-weight: bold;
}

#footer-scroll-to-top {
  font-weight: bold;
  color: black;
}