@tailwind base;
@tailwind components;
@tailwind utilities;

: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);
  --progressBarColor: #0096fe;
}

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

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

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

.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);
}

.vf-100vh {
  min-height: 100vh;
}

.pb-patient-pages {
  padding-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-large {
  font-size: 1.25rem;
  font-weight: 700;
}

.vf-font-extra-large {
  font-size: 1.5rem;
  font-weight: 700;
}

.landing-page-buttons {
  font-size: 0.85rem;
}

@media screen and (min-width: 824px) {
  .landing-page-buttons {
    font-size: 1rem;
  }
}

@media screen and (min-width: 992px) and (max-width: 1073px) {
  .landing-page-buttons {
    font-size: 0.85rem;
  }
}

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

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

/* Width */
.w-min-content {
  width: min-content;
}

/* 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;
}

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

#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);
}

.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; */
}

#login-form-submit {
  min-height: 48px;
}

/* Navbar */
@media (max-width: 991.98px) {
  .vf-header-icon {
    padding: 0;
    width: 0;
  }
}

.vf-navbar-logo {
  height: 40px;
}

/* Sidebar */

@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;
}

#side-nav-closed-logo {
  height: 31px;
  width: 31px;
}

#side-nav-open-logo {
  height: 33px;
  width: 113px;
}

.vf-spinner {
  border: 4px solid rgba(0, 0, 0, 0.3);
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

.vf-action-btn {
  background-color: #fff;
  color: var(--blue500);
  margin: 15px 20px 0 20px;
  border-radius: 4px;
  border-color: var(--blue500);
  min-width: 100px;
  font-weight: 500;
}

.vf-action-btn:hover {
  background-color: var(--grey50);
  color: var(--blue500);
}

.radio-label {
  font-weight: bold;
}

.radio-input {
  margin-right: 10px;
}

/* 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.5rem;
  vertical-align: middle;
  border-top: 1px solid #eeeef1;
}

.compact-table-cells {
  padding: 0.1rem !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;
}

.reports-modal-th {
  border-bottom: 1px solid var(--grey300) !important;
  background-color: var(--grey50);
}

.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-headers-title {
  padding: 0.68rem 0;
}

.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-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;
  text-transform: uppercase;
  font-size: 1.25rem;
}

.vf-modal-header {
  background-color: var(--blue700);
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.5rem;
  padding: 1.5rem;
}

.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: 3%;
  right: 10%;
}

#session-grade-info-icon {
  position: absolute;
  top: 3%;
  right: 10%;
}

#session-grade-info-icon + img {
  display: none;
}

#session-grade-info-icon:hover + img {
  display: block;
  position: absolute;
  width: 720px;
  height: auto;
  bottom: 100%;
  right: -50%;
  z-index: 9999;
}

@media screen and (max-width: 1200px) {
  #session-grade-info-icon:hover + img {
    width: 600px;
    right: -150%;
  }
}

@media screen and (max-width: 767.98px) {
  #session-grade-info-icon:hover + img {
    width: 480px;
    right: -200%;
  }
}

#lung-age-info-icon {
  position: absolute;
  top: 3%;
  right: 10%;
}

#lung-age-source-info-icon {
  position: absolute;
  bottom: 3%;
  right: 10%;
}

#session-grade-source-info-icon {
  position: absolute;
  bottom: 3%;
  right: 10%;
}

.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;
}

/* Date Picker */

.flatpickr-calendar {
  margin: auto;
}

@media (min-width: 2400px) {
  #date-picker {
    width: 539px;
  }
  .flatpickr-calendar {
    width: 539px;
  }
  .dayContainer {
    width: 539px;
    min-width: 539px;
    max-width: 539px;
  }
  .flatpickr-days {
    width: 539px;
  }
  .flatpickr-day {
    max-width: 77px;
    height: 24px;
    line-height: 24px;
  }
}
@media (max-width: 2399.98px) {
  #date-picker {
    width: 539px;
  }
  .flatpickr-calendar {
    width: 539px;
  }
  .dayContainer {
    width: 539px;
    min-width: 539px;
    max-width: 539px;
  }
  .flatpickr-days {
    width: 539px;
  }
  .flatpickr-day {
    max-width: 77px;
    height: 24px;
    line-height: 24px;
  }
}

@media (max-width: 1999.98px) {
  #date-picker {
    width: 420px;
  }
  .flatpickr-calendar {
    width: 420px;
  }
  .dayContainer {
    width: 420px;
    min-width: 420px;
    max-width: 420px;
  }
  .flatpickr-days {
    width: 420px;
  }
  .flatpickr-day {
    max-width: 60px;
    height: 24px;
    line-height: 24px;
  }
}

@media (max-width: 1599.98px) {
  #date-picker {
    width: 336px;
  }
  .flatpickr-calendar {
    width: 336px;
  }
  .dayContainer {
    width: 336px;
    min-width: 336px;
    max-width: 336px;
  }
  .flatpickr-days {
    width: 336px;
  }
  .flatpickr-day {
    max-width: 49px;
    height: 24px;
    line-height: 24px;
  }
}

@media (max-width: 1399.98px) {
  #date-picker {
    width: 210px;
  }
  .flatpickr-calendar {
    width: 210px;
  }
  .dayContainer {
    width: 210px;
    min-width: 210px;
    max-width: 210px;
  }
  .flatpickr-days {
    width: 210px;
  }
  .flatpickr-day {
    max-width: 30px;
    height: 24px;
    line-height: 24px;
  }
}

@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%;
  }
  .flatpickr-calendar {
    width: 497px;
  }
  .dayContainer {
    width: 497px;
    min-width: 497px;
    max-width: 497px;
  }
  .flatpickr-days {
    width: 497px;
  }
  .flatpickr-day {
    max-width: 71px;
    height: 24px;
    line-height: 24px;
  }
}

@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%;
  }
  .flatpickr-calendar {
    width: 497px;
  }
  .dayContainer {
    width: 497px;
    min-width: 497px;
    max-width: 497px;
  }
  .flatpickr-days {
    width: 497px;
  }
  .flatpickr-day {
    max-width: 71px;
    height: 24px;
    line-height: 24px;
  }
}

@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;
  }
  .flatpickr-calendar {
    width: 427px;
  }
  .dayContainer {
    width: 427px;
    min-width: 427px;
    max-width: 427px;
  }
  .flatpickr-days {
    width: 427px;
  }
  .flatpickr-day {
    max-width: 61px;
    height: 24px;
    line-height: 24px;
  }
}

@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%;
  }
  .flatpickr-calendar {
    width: 301px;
  }
  .dayContainer {
    width: 301px;
    min-width: 301px;
    max-width: 301px;
  }
  .flatpickr-days {
    width: 301px;
  }
  .flatpickr-day {
    max-width: 43px;
    height: 24px;
    line-height: 24px;
  }
}

@media (max-width: 500.98px) {
}

@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;
  }
}

/* Notifications */

#notifications-reports-buttons {
  overflow-y: auto;
}

progress[value] {
  -webkit-appearance: none;
  appearance: none;

  width: 100%;
  height: 8px;
  border-radius: 8px;
}

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) inset;
}

progress::-webkit-progress-value {
  background-color: var(--progress-color, #0096fe);
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

progress::-moz-progress-bar {
  background-color: var(--progressBarColor, #0096fe);
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.notifications-divider {
  border-bottom: 1px solid var(--grey200);
  margin: 0.5rem 0;
  width: 100%;
}

.notifications-text {
  font-size: 0.8rem;
  color: var(--grey700);
}

.notifications-text-error {
  font-size: 0.8rem;
  color: var(--redZoneDark);
}

.notifications-download-error {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--redZoneDark);
}

.notifications-link {
  font-size: 0.8rem;
  color: var(--blue500);
}

.notifications-link:hover {
  color: var(--blue400);
}

.notifications-card {
  margin: 0 0 0.5rem 0;
  padding: 0.5rem;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #eef;
  min-height: 66px;
}

.notifications-card:hover {
  background-color: var(--grey50);
}

.notifications-card:hover .notifications-link {
  text-decoration: underline;
}

.notifications-cancel-btn {
  background-color: #ef5b5b;
  border-color: #ef5b5b;
  color: #fff;
  padding: 0.15rem 0.5rem;
  font-size: 0.8rem;
  border-radius: 0.125rem;
}

.notifications-cancel-btn:hover {
  background-color: #e03c3c;
  color: #fff;
}

/* Font Awesome Icon Overrides */
.vf-fa-2xs {
  font-size: 0.625rem;
}

/* Pre/Post Bronchodilator */
#test-type-select {
  flex: 2;
}

#test-type-label {
  flex: 1;
}

/* Dialog */
dialog::backdrop {
  backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.5);
}

/* Forgot password */
#forgot-password-link {
  color: var(--grey500);
  font-size: 0.9rem;
}

#forgot-password-link:hover {
  color: var(--grey400);
}

#passwords-dont-match-warning {
  min-height: 1.5rem;
  color: var(--redZoneDark);
  font-size: 0.8rem;
}

.htmx-indicator {
  display: none;
  position: relative;
}

.htmx-indicator.htmx-request {
  display: block;
}