:root {
  --blue50: #E6F5FF;
  --blue100: #CCEAFF;
  --blue200: #99D5FF;
  --blue300: #5CBCFF;
  --blue400: #33ABFE;
  --blue500: #0096FE;
  --blue600: #0078CB;
  --blue700: #005A98;
  --blue800: #003C66;
  --blue900: #001E33;
  --teal50: #E6FAF8;
  --teal100: #CCF4F0;
  --teal200: #99E9E1;
  --teal300: #66DFD3;
  --teal400: #33D4C4;
  --teal500: #00C9B5;
  --teal600: #00A191;
  --teal700: #00796D;
  --teal800: #005048;
  --teal900: #002824;
  --orange50: #FFF8F4;
  --orange100: #FFEADB;
  --orange200: #FFDAC1;
  --orange300: #FFC8A3;
  --orange400: #FFB380;
  --orange500: #FE9A57;
  --orange600: #FE7A21;
  --orange700: #E85D00;
  --orange800: #B84A00;
  --orange900: #6D2C00;
  --violet50: #FBF8FF;
  --violet100: #F2EAFF;
  --violet200: #E9DBFF;
  --violet300: #DFCAFF;
  --violet400: #D4B7FF;
  --violet500: #C7A2FF;
  --violet600: #B888FF;
  --violet700: #A468FE;
  --violet800: #8737FE;
  --violet900: #4A00BA;
  --grey50: #F0F1F2;
  --grey100: #E0E3E5;
  --grey200: #C1C7CB;
  --grey300: #A3ABB2;
  --grey400: #848F98;
  --grey500: #65737E;
  --grey600: #515C65;
  --grey700: #3D454C;
  --grey800: #282E32;
  --grey900: #141719;
  --greenZoneDark: rgba(0, 174, 81, 0.8);
  --greenZoneMedium: rgba(0, 174, 81, 0.5);
  --greenZoneLight: rgba(0, 174, 81, 0.1);
  --yellowZoneDark: rgba(253, 223, 61, 0.8);
  --yellowZoneLight: rgba(253, 223, 61, 0.1);
  --redZoneDark: rgba(255, 66, 56, 0.8);
  --redZoneMedium: rgba(255, 66, 56, 0.5);
  --redZoneLight: rgba(255, 66, 56, 0.1);
  --adherenceZoneDark: rgba(0, 150, 254, 0.8);
  --adherenceZoneMedium: rgba(0, 150, 254, 0.5);
  --adherenceZoneLight: rgba(0, 150, 254, 0.1);
  --noZone: rgba(101, 115, 126, 0.1);
}

.justify-content-evenly {
  justify-content: space-evenly;
}

html {
  font-family: "Lato", Helvetica, Arial, sans-serif;
}

body {
  font-family: "Lato", Helvetica, Arial, sans-serif;
}

a {
  color: var(--grey700);
}

.hidden {
  visibility: hidden !important;
}

.tooltip {
  pointer-events: none;
}

.ml-3q {
  margin-left: 0.75rem;
}

.vf-footer-right {
  bottom: 0;
  right: 0;
}

.vf-footer-left {
  bottom: 0;
  left: 0;
}

.vf-full-height {
  min-height: calc(100vh - 65px);
}

.mb-patient-pages {
  margin-bottom: 8.5rem;
}

/* Backgrounds */

.vf-bg {
  background-color: #0096fe;
}

.vf-bg-light {
  background-color: rgba(240, 240, 255, 0.4);
}

/* Cards */

.vf-card {
  border: 1px solid var(--grey100);
  border-radius: 12px;
}

.vf-card-bg {
  background-color: #fff;
  border-radius: 16px;
}

.vf-card-header {
  background-color: rgba(240, 240, 255, 0.4);
  border-bottom: 1px solid var(--grey100) !important;
  padding: 0.5rem;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
}

.vf-card-header-text {
  text-transform: uppercase;
  font-size: 0.9rem;
}

.vf-card-body {
  padding: 0.5rem;
}

/* Font */

.vf-font {
  color: var(--grey700);
}

.vf-font-blue {
  color: var(--blue500);
}

.vf-font-err {
  color: var(--redZoneDark);
}

.vf-font-small {
  font-size: 0.8rem;
  font-weight: 400;
}

.vf-font-subscript {
  font-size: 0.75rem;
}

@media (min-width: 1200px) {
  .vf-font-size-md {
    font-size: 0.8rem;
  }
}

/* Underline */
.vf-underline {
  border-bottom: 1px solid var(--blue400);
}

/* Input */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.vf-input-box {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--grey200);
  border-radius: 4px;
  transition: 100ms box-shadow ease-in-out;
}

.vf-input-box:focus {
  border-color: var(--blue500);
  box-shadow: 0 0 0 3px rgba(0, 150, 254, 0.5);
}

.vf-input-read-only:focus {
  border: 1px solid var(--grey200);
}

.vf-input-date {
  padding-left: 0.25rem;
  border: 1px solid var(--grey200);
  border-radius: 8px;
  transition: 100ms box-shadow ease-in-out;
  min-width: 160px;
}

.vf-input-date:focus {
  border-color: var(--blue500);
  box-shadow: 0 0 0 3px rgba(0, 150, 254, 0.5);
}

.vf-input-date-error {
  padding-left: 0.25rem;
  border: 1px solid var(--grey200);
  border-radius: 8px;
  transition: 100ms box-shadow ease-in-out;
  min-width: 160px;
  border-color: var(--redZoneDark);
  box-shadow: 0 0 0 3px rgba(255, 66, 56, 0.5);
}

.vf-input-time {
  padding-left: 0.25rem;
  border: 1px solid var(--grey200);
  border-radius: 8px;
  transition: 100ms box-shadow ease-in-out;
  max-width: 100px;
}

.vf-input-time:focus {
  border-color: var(--blue500);
  box-shadow: 0 0 0 3px rgba(0, 150, 254, 0.5);
}

/* Select */

.vf-select {
  border: 1px solid var(--grey200);
  border-radius: 4px;
}

.vf-select:focus {
  border-color: var(--blue500);
  box-shadow: 0 0 0 3px rgba(0, 150, 254, 0.5);
}

.vf-select-billing {
  border: 1px solid var(--grey200);
  border-radius: 8px;
}

.vf-select-billing:focus {
  border-color: var(--blue500);
  box-shadow: 0 0 0 3px rgba(0, 150, 254, 0.5);
}

.vf-form-error {
  border: 1px solid var(--redZoneDark) !important;
}

.vf-form-error:focus {
  box-shadow: 0 0 0 3px rgba(255, 66, 56, 0.5) !important;
}

.billing-reports-select {
  border-radius: 8px;
  padding-left: 0.25rem;
}

/* Modals */

#session-modal {
  z-index: 9999;
}

#session-modal-border {
  border: 1px solid var(--grey100);
  border-radius: 8px;
}

/* Buttons */

.vf-btn {
  border-radius: 4px;
  background-color: var(--blue500);
  color: #fff;
  box-shadow: 0px 1px 2px var(--grey100);
}

.vf-btn:hover {
  background-color: var(--blue400);
  color: #fff
}

.vf-btn-outline {
  background-color: #fff;
  color: var(--blue500);
  border: 2px solid var(--blue500);
  border-radius: 4px;
  box-shadow: 0px 1px 2px var(--grey100);
}

.vf-btn-outline:hover {
  color: var(--blue400);
  border: 2px solid var(--blue400);
}

.vf-btn-rounded {
  border-radius: 24px;
  background-color: var(--blue500);
  color: #fff;
  box-shadow: 0px 1px 2px var(--grey100);
}

.vf-btn-rounded:hover {
  background-color: var(--blue400);
  color: #fff
}

.vf-btn-transparent {
  background-color: transparent;
  border: none;
}

.vf-btn-dark {
  border-radius: 4px;
  background-color: var(--blue700);
  color: #fff;
  box-shadow: 0px 1px 2px var(--grey100);
}

.vf-btn-dark:hover {
  background-color: var(--blue600);
  color: #fff
}

.vf-btn-dark-outline {
  background-color: #fff;
  color: var(--blue700);
  border: 2px solid var(--blue700);
  border-radius: 4px;
  box-shadow: 0px 1px 2px var(--grey100);
}

.vf-btn-dark-outline:hover {
  color: var(--blue600);
  border: 2px solid var(--blue600);
}

.vf-btn-short {
  border-radius: 4px;
  vertical-align: top;
  border: none;
  line-height: inherit;
  background-color: var(--blue500);
  color: #fff;
  box-shadow: 0px 2px 4px var(--grey200);
  padding: 0.25rem 1rem;
}

.vf-btn-short:hover {
  background-color: var(--blue400);
  color: #fff
}

.vf-btn-short-rounded {
  border-radius: 24px;
  vertical-align: top;
  border: none;
  line-height: inherit;
  background-color: var(--blue500);
  color: #fff;
  box-shadow: 0px 2px 4px var(--grey200);
  padding: 0.25rem 1rem;
}

.vf-btn-short-rounded:hover {
  background-color: var(--blue400);
  color: #fff
}

.vf-btn-orange-short {
  border-radius: 4px;
  vertical-align: top;
  border: none;
  line-height: inherit;
  background-color: var(--orange500);
  color: #fff;
  box-shadow: 0px 2px 4px var(--grey200);
  padding: 0.25rem 1rem;
}

.vf-btn-orange-short:hover {
  background-color: var(--orange400);
  color: #fff
}

.vf-btn-orange-short-rounded {
  border-radius: 24px;
  vertical-align: top;
  border: none;
  line-height: inherit;
  background-color: var(--orange500);
  color: #fff;
  box-shadow: 0px 2px 4px var(--grey200);
  padding: 0.25rem 1rem;
}

.vf-btn-orange-short-rounded:hover {
  background-color: var(--orange400);
  color: #fff
}

#floating-modal-btns {
  position: fixed;
  left: 16.53rem;
  bottom: 16px;
  z-index: 999;
}

#new-activity-btn {
  min-width: 100px;
}

.vf-btn-alt {
  border-radius: 24px;
  background-color: #fff;
  color: var(--blue500);
  border: 1px solid var(--blue500);
  box-shadow: 0px 2px 4px var(--grey200);
}

.vf-btn-alt:hover {
  color: var(--blue500);
}

.vf-btn-orange-rounded {
  border-radius: 24px;
  background-color: var(--orange500);
  color: #fff;
  box-shadow: 0px 2px 4px var(--grey200);
}

.vf-btn-orange-rounded:hover {
  background-color: var(--orange400);
  color: #fff
}

.vf-btn-orange {
  background-color: var(--orange500);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.25rem 1rem;
  border-radius: 4px;
}

.vf-btn-orange:hover {
  background-color: var(--orange400);
  color: #fff;
}

.vf-btn-orange-alt {
  background-color: #fff;
  color: var(--orange500);
  border: 1px solid var(--orange500);
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.25rem 1rem;
  border-radius: 4px;
}

.vf-btn-orange-alt:hover {
  color: var(--orange500);
}

.vf-btn-form {
  border-radius: 4px;
  background-color: var(--blue500);
  color: #fff;
}

.vf-btn-form:hover {
  background-color: var(--blue400);
  color: #fff
}

.vf-btn-form-alt {
  border-radius: 4px;
  background-color: #fff;
  color: var(--blue500);
  border: 1px solid var(--blue500);
}

.vf-btn-form-alt:hover {
  color: var(--blue500);
}

.vf-btn-form-orange {
  border-radius: 4px;
  background-color: var(--orange500);
  color: #fff;
}

.vf-btn-form-orange:hover {
  background-color: var(--orange400);
  color: #fff
}

.vf-btn-form-orange-alt {
  border-radius: 4px;
  background-color: #fff;
  color: var(--orange500);
  border: 1px solid var(--orange500);
}

.vf-btn-form-orange-alt:hover {
  color: var(--orange500);
}

.vf-btn-form-delete {
  border-radius: 4px;
  background-color: var(--redZoneDark);
  color: #fff;
}

.vf-btn-form-delete:hover {
  background-color: var(--redZoneMedium);
  color: #fff
}

.vf-btn-form-delete-alt {
  border-radius: 4px;
  background-color: #fff;
  color: var(--redZoneDark);
  border: 1px solid var(--redZoneDark);
}

.vf-btn-form-delete-alt:hover {
  color: var(--redZoneDark);
}

.vf-btn-form-acknowledge {
  border-radius: 4px;
  background-color: var(--greenZoneDark);
  color: #fff;
}

.vf-btn-form-acknowledge:hover {
  background-color: var(--greenZoneMedium);
  color: #fff
}

.vf-btn-form-acknowledge-alt {
  border-radius: 4px;
  background-color: #fff;
  color: var(--greenZoneDark);
  border: 1px solid var(--greenZoneDark);
}

.vf-btn-form-acknowledge-alt:hover {
  color: var(--greenZoneDark);
}

.vf-btn-breezometer {
  border-radius: 24px;
  vertical-align: top;
  border: none;
  line-height: inherit;
  background-color: var(--blue500);
  /* background-image: linear-gradient(to right, #005F98, #0A9BB7, #1BE5B7, #1DD971, #25D75A, #1DD971, #F8D742, #F8D742, #FFCB41, #FFB040, #FF9C3E, #E36F27, #CE4018, #AB2203); */
  color: #fff;
  box-shadow: 0px 1px 2px var(--grey200);
  padding: 0.25rem 1rem;
}

.vf-btn-breezometer:hover {
  background-color: var(--blue400);
  color: #fff
}

.close-modal-btn {
  padding: 0;
  background-color: transparent;
  border: 0;
  appearance: none;
  font-size: 1.5rem;
  font-weight: 700;
  opacity: 0.75;
  position: absolute;
  right: 16px;
  top: 4px;
}

.breezometer-logo {
  width: 20px;
  height: auto;
}

.login-right {
  right: 25px;
}

.patient-alerts-form {
  max-width: 250px;
}

.patient-report-btn {
  background-color: var(--blue500);
  color: #fff;
  box-shadow: 0px 2px 4px var(--grey200);
  text-align: center;
  border: none;
  align-items: center;
  border-radius: 24px;
  padding: 0.5rem;
  display: inline-block;
  min-height: 34px;
}

.patient-report-btn:hover {
  background-color: var(--blue400);
}

.patient-alerts-btn {
  background-color: var(--orange500);
  color: #fff;
  box-shadow: 0px 2px 4px var(--grey200);
  text-align: center;
  border: none;
  align-items: center;
  border-radius: 24px;
  padding: 0.5rem;
  min-height: 54px;
  justify-content: center;
}

.patient-alerts-btn:hover {
  background-color: var(--orange400);
}

.patient-alerts-btn a {
  color: #fff;
}

#date-picker {
  margin: auto;
  text-align: center;
  width: 307.875px;
  font-size: 1.5rem;
  color: var(--grey700);
  border-radius: 12px;
}

.timer-container-stopped {
  background-color: var(--redZoneLight);
  color: var(--redZoneDark);
  border-radius: 0.5rem;
}

.timer-container-started {
  background-color: var(--greenZoneLight);
  color: var(--greenZoneDark);
  border-radius: 0.5rem;
}

.timer-width {
  width: 418.02px;
}

.timer-border-radius {
  border-radius: 0.5rem;
}

.start-stop-btn-stopped {
  color: var(--redZoneDark);
  padding: 0;
}

.start-stop-btn-stopped:hover {
  color: var(--redZoneDark);
}

.start-stop-btn-started {
  color: var(--greenZoneDark);
  padding: 0;
}

.start-stop-btn-started:hover {
  color: var(--greenZoneDark);
}

.session-nav-btn {
  background-color: var(--blue500);
  color: #fff;
  box-shadow: none;
  text-align: center;
  border: 1px solid var(--blue500);
  align-items: center;
  padding: 0.25rem 1rem;
  font-size: 0.8rem;
  justify-content: center;
  width: 100%;
}

.session-nav-btn:hover {
  background-color: var(--blue400);
}

.session-nav-btn span {
  color: #fff;
}

.session-nav-btn-outline {
  background-color: var(--grey50);
  color: var(--grey700);
  box-shadow: none;
  text-align: center;
  border: 1px solid var(--grey300);
  align-items: center;
  padding: 0.25rem 1rem;
  font-size: 0.8rem;
  justify-content: center;
  width: 100%;
}

.session-nav-btn-outline:hover {
  background-color: var(--grey100);
}

.session-nav-btn-outline span {
  color: var(--grey700);
}

/* Login */

.vf-login-bg {
  width: 100%;
}

.vf-login-card {
  margin-top: 2rem;
  margin-bottom: auto;
  /* padding-top: 50px;
  padding-bottom: 50px; */
}

/* Sidenav */

@media (max-width: 991.98px) {
  .menu-invoker-clicked {
    padding-left: 200px;
  }

  #floating-modal-btns {
    left: 16px;
  }
}

#sidebar {
  position: fixed;
  background-color: var(--blue500);
  -webkit-box-shadow: 6px 0 6px -6px var(--grey300);
  -moz-box-shadow: 6px 0 6px -6px var(--grey300);
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.2);
}

.sidenav-icon {
  height: 65px;
  border: none;
  background-color: #fff;
}

/* Top bar content */

#activity-select-container {
  border-radius: 0.5rem;
}

#billing-activity-select {
  color: var(--grey700);
  border-radius: 0.5rem;
  text-align: center;
  text-align-last: center;
  line-height: 1.4;
  font-size: 1rem;
  border: 1px solid var(--grey200);
  margin: auto;
  min-width: 95px;
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  display: inline-block;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 1rem center/0.5rem 0.63rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.patients-dropdown {
  color: var(--grey700);
  background-color: #fff;
  text-align: center;
  text-align-last: center;
  line-height: 1.7;
  font-size: 1rem;
  border: none;
  border-radius: 24px;
  box-shadow: 0px 2px 4px var(--grey100);
  height: 40px;
  width: 200px;
  padding: 0.5rem 2.5rem 0.5rem 0.5rem;
  display: inline-block;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.select2-selection {
  line-height: 1.7;
  overflow: hidden;
}

.patient-report-icon {
  color: #fff;
}

/* Card with shadow */

.vf-card-shadow {
  box-shadow: 0px 2px 4px var(--grey100);
  border-radius: 12px;
}

/* Secondary nav */

.secondary-nav-icon {
  font-size: 0.6rem;
  color: var(--blue500);
  justify-content: center;
}

.secondary-nav-active {
  font-weight: 700;
}

.secondary-nav-btn {
  background-color: var(--blue500);
  color: #fff;
  box-shadow: none;
  text-align: center;
  border: 1px solid var(--blue500);
  border-bottom: none;
  align-items: center;
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  justify-content: center;
  width: 100%;
}

.secondary-nav-btn:hover {
  background-color: var(--blue400);
}

.secondary-nav-btn span {
  color: #fff;
}

.secondary-nav-btn-outline {
  background-color: var(--grey50);
  color: var(--grey700);
  box-shadow: none;
  text-align: center;
  border: 1px solid var(--grey300);
  border-bottom: none;
  align-items: center;
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  justify-content: center;
  width: 100%;
}

.secondary-nav-btn-outline:hover {
  background-color: var(--grey100);
}

.secondary-nav-btn-outline span {
  color: var(--grey700);
}

.secondary-nav-border {
  border-bottom: 1px solid var(--grey300);
  margin-bottom: 0;
}

/* Tables */

table.fixed {
  table-layout: fixed;
}

.table {
  margin-bottom: 0;
}

.table th, .table td {
  padding: 0.75rem;
  vertical-align: middle;
}

.compact-table-cells {
  padding: 0.25rem !important;
}

.table th {
  font-weight: 700;
  border-top: none;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #EEF4F7;
}

.th-no-border {
  border: none !important;
}

.td-no-border {
  border: none !important;
}

.blow-table-na {
  background-color: var(--grey50);
  font-size: 0.8rem;
  vertical-align: middle !important;
}

.billing-reports-th {
  border-bottom: 1px solid var(--grey300) !important;
}

.billing-reports-td {
  border-top: 1px solid var(--grey300) !important;
  background-color: var(--grey50);
}

.billing-reports-right-border {
  border-right: 1px solid var(--grey300);
}

#total-spirometry {
  border-top: 1px solid var(--grey400) !important;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  font-weight: 600;
}

#total-activity {
  border-top: 1px solid var(--grey400) !important;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  font-weight: 600;
}

.vf-border-top-none {
  border-top: none !important;
}

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {
  background: none !important;
}

.pagination {
  justify-content: flex-end;
  margin-bottom: 0;
}

#patients-datatable_paginate {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Patient table */

.patient-table-header {
  margin-bottom: 0.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blue500);
}

.patient-table-key {
  font-weight: 600;
  padding-left: 0.8rem !important;
}

.patient-info-table {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.patient-contact-table {
  height: 90%;
}

.program-details-table {
  height: 90%;
}

.table-top-row {
  border: none !important;
  padding-top: 0.5rem !important;
}

.table-bottom-row {
  padding-bottom: 0.5rem !important;
}

/* Blow table */

.blow-table-headers {
  border-bottom: 1px solid #d3d3dc
}

.blow-table-values {
  text-align: center;
}

.blow-table-key {
  font-weight: 600;
  padding-left: 0.8rem !important;
}

.blow-table-last-row {
  border-radius: 12px;
}

.formula-dropdown {
  color: var(--grey700);
  text-align: center;
  text-align-last: center;
  line-height: 1;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  margin: auto;
  max-width: 200px;
  min-width: 95px;
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  display: inline-block;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 1rem center/0.5rem 0.63rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.table-formula-options {
  font-weight: 700;
}

/* Survey table */

.survey-table-td {
  word-wrap: break-word;
  min-width: 160px;
  max-width: 160px;
  white-space: normal;
}

.survey-table-q {
  padding-left: 0.8rem !important;
}

/* Glossary */

#glossary-modal {
  z-index: 1041;
}

.glossary-dropdown {
  color: var(--grey700);
  text-align: center;
  text-align-last: center;
  line-height: 1.4;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  margin: auto;
  max-width: 150px;
  min-width: 50px;
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  display: inline-block;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 1rem center/0.5rem 0.63rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.vf-section-header {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey700);
  font-size: 1.5rem;
}

.vf-section-header-blue {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blue500);
  font-size: 1.5rem;
}

.vf-section-header-smaller {
  text-align: center;
  font-weight: 600;
  font-size: 1.25rem;
}

.vf-modal-header {
  background-color: var(--blue700);
  color: #fff;
}

.glossary-table td {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Charts */

.canvas-1 {
  padding-top: 5rem;
}

.canvas-2 {
  padding-top: 6.5rem;
}

.doughnut-charts {
  width: 33.33%;
}

.survey-information {
  position: absolute;
  top: 1%;
  right: 72%;
}

.spirometry-information {
  position: absolute;
  top: 3%;
  right: 5%;
}

.adherence-information {
  position: absolute;
  top: 3%;
  right: 5%;
}

#timer-info-icon {
  position: absolute;
  top: 1%;
  right: 5%;
}

#survey-info-icon {
  position: absolute;
  top: 1%;
  right: 8%;
}

.greenZone {
  background-color: var(--greenZoneLight);
}

.yellowZone {
  background-color: var(--yellowZoneLight);
}

.redZone {
  background-color: var(--redZoneLight);
}

.noZone {
  background-color: var(--noZone);
}

#surveyDoughnut {
  border-radius: 16px;
}

#surveyDoughnutEmpty {
  border-radius: 16px;
}

#spirometryDoughnut {
  border-radius: 16px;
}

#spirometryDoughnutEmpty {
  border-radius: 16px;
}

#patientTimerDoughnut {
  border-radius: 16px;
  background-color: var(--adherenceZoneLight);
}

#spirometryReadingsDoughnut {
  border-radius: 16px;
  background-color: var(--adherenceZoneLight);
}

#adherenceDoughnut {
  border-radius: 16px;
  background-color: var(--adherenceZoneLight);
}

#adherenceDoughnutEmpty {
  border-radius: 16px;
  background-color: var(--noZone);
}

.fev1-flag {
  color: var(--redZoneDark);
}

.fvc-flag {
  color: var(--redZoneDark);
}

.fev1fvc-flag {
  color: var(--redZoneDark);
}

/* Notes */

#notes-modal {
  z-index: 1041;
}

.notes-input-field {
  height: 50px;
  padding: 5px;
}

.notes-link-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--blue700);
  padding: 0;
  vertical-align: baseline !important;
}

.notes-link-btn:hover {
  color: var(--blue600);
}

/* Billing Reports */

.billing-modal-text {
  font-size: 1.1rem;
}

@media (min-width: 2400px) {
  #date-picker {
    width: 539px;
  }
}

@media (max-width: 2399.98px) {
  #date-picker {
    width: 539px;
  }
}

@media (max-width: 1999.98px) {
  #date-picker {
    width: 420px;
  }
}

@media (max-width: 1599.98px) {
  #date-picker {
    width: 336px;
  }
}

@media (max-width: 1399.98px) {
  #date-picker {
    width: 210px;
  }
}

@media (max-width: 1199.98px) {
  #date-picker {
    width: 497px;
  }

  .spirometry-information {
    position: absolute;
    top: 3%;
    right: 16%;
  }

  .adherence-information {
    position: absolute;
    top: 3%;
    right: 16%;
  }
}

@media (max-width: 991.98px) {
  #date-picker {
    width: 497px;
  }

  .spirometry-information {
    position: absolute;
    top: 3%;
    right: 8%;
  }

  .adherence-information {
    position: absolute;
    top: 3%;
    right: 8%;
  }
}

@media (max-width: 767.98px) {
  #date-picker {
    width: 427px;
  }

  .spirometry-information {
    position: absolute;
    top: 3%;
    right: 12%;
  }

  .adherence-information {
    position: absolute;
    top: 3%;
    right: 12%;
  }

  #patient-info-container {
    overflow-x: auto;
  }
}

@media (max-width: 500.98px) {
  #date-picker {
    width: 301px;
  }

  .spirometry-information {
    position: absolute;
    top: 3%;
    right: 22%;
  }

  .adherence-information {
    position: absolute;
    top: 3%;
    right: 22%;
  }
}

@media only screen and (min-width: 1400px) {
  .spirometry-information {
    position: absolute;
    top: 3%;
    right: 9%;
  }

  .adherence-information {
    position: absolute;
    top: 3%;
    right: 9%;
  }
}

@media only screen and (min-width: 1600px) {
  .spirometry-information {
    position: absolute;
    top: 3%;
    right: 13%;
  }

  .adherence-information {
    position: absolute;
    top: 3%;
    right: 13%;
  }
}

@media only screen and (min-width: 1800px) {
  .spirometry-information {
    position: absolute;
    top: 3%;
    right: 17%;
  }

  .adherence-information {
    position: absolute;
    top: 3%;
    right: 17%;
  }
}

@media only screen and (min-width: 2000px) {
  .spirometry-information {
    position: absolute;
    top: 3%;
    right: 21%;
  }

  .adherence-information {
    position: absolute;
    top: 3%;
    right: 21%;
  }
}

@media only screen and (max-width: 500px) {
  .doughnut-charts {
    width: 100%;
    flex-direction: column;
  }
}