/**
 * Fonts
 */
@font-face {
  font-family: "SF Text Regular";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/SF-UI-Text-Regular.otf");
  font-display: swap;
}
@font-face {
  font-family: "SF Text Bold";
  font-weight: 600;
  font-style: normal;
  src: url("fonts/SF-UI-Text-Bold.otf");
  font-display: swap;
}
@font-face {
  font-family: "SF Text Heavy";
  font-weight: 800;
  font-style: normal;
  src: url("fonts/SF-UI-Text-Heavy.otf");
  font-display: swap;
}

/**
 * Framework
 */
html, .root--light {
  min-width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
  background: rgba(9,9,121,1);
  background: linear-gradient(145deg, rgba(9,9,121,1) 0%, rgba(38,111,180,1) 30%, rgba(117,27,161,1) 65%, rgba(177,39,101,1) 100%);
  background-attachment: fixed;
  scroll-behavior: smooth;
  font-size: 16px;
  outline: none;
  overscroll-behavior-x: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: "SF Text Regular", Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: -0.05px;
  margin: 0;
  padding: 1.1em;
  width: 100%;
  min-height: 100vh;
  background-color: transparent;
  background-image: url('../images/grid.png');
  background-size: 30px 30px;
  background-position: top center;
  background-attachment: fixed;
  line-height: 1.397;
  color: #000;
  overscroll-behavior-x: none;
}
h1,h2,h3,h4,h5,h6 {
  letter-spacing: -0.3px;
}
h1,
h2,
h3,
h4,
h5,
h6,
input[type="submit"],
.u-h4,
.u-h5,
strong,
.button,
.pill-button,
.big-button,
.badge,
.u-fw-bold,
.rx-card__value,
.drug .drug__name,
.medx .medx__facility {
  font-family: "SF Text Bold", Arial, Helvetica, sans-serif;
}
.title,
.subtitle,
.medx .medx__year-label,
.timeline .timeline__year-label {
  font-family: "SF Text Heavy", Arial, Helvetica, sans-serif;
  letter-spacing: -0.5px;
}
.processing {
  position: fixed;
  z-index: 9999999;
  background: rgba(0,0,0,0.35);
  background: radial-gradient(circle closest-side at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.05) 85%, rgba(0,0,0,0) 100%);
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.loader {
  margin: auto;
  background: transparent;
  border: 4px solid transparent;
  border-top-color: #3498db;
  border-radius: 50%;
  display: block;
  width: 120px;
  height: 120px;
  position: relative;
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  -ms-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.loader:before {
  border: 4px solid transparent;
  border-top-color: #e74c3c;
  border-radius: 50%;
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  -webkit-animation: spin 3s linear infinite;
  -moz-animation: spin 3s linear infinite;
  -o-animation: spin 3s linear infinite;
  -ms-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}
.loader:after {
  border: 4px solid transparent;
  border-top-color: #f9c922;
  border-radius: 50%;
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  bottom: 15px;
  right: 15px;
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  -o-animation: spin 1.5s linear infinite;
  -ms-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/**
 * Typoghraphy
 */
a,
a:visited {
  color: blue;
  text-decoration: none;
  cursor: pointer !important;
}
a:hover,
a:active {
  color: darkblue;
  text-decoration: none;
}
.title {
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.2;
  margin-bottom: 15px;
}
.subtitle {
  font-weight: 600;
  color: #111;
  font-size: 1.5rem;
  line-height: 1.3;
}
.mintitle {
  font-weight: 600;
  color: #222;
  font-size: 1.1rem;
  line-height: 1.1;
}
.badge, strong, .u-fw-bold {
  font-weight: 600 !important;
}
.logo {
  text-align: center;
  margin-bottom: 20px;
}
.big-logo {
  text-align: center;
  margin-bottom: 20px;
}
.big-logo .big-logo__image {
  max-width: 85%;
}
.empty-icon {
  font-size: 5em;
  color: purple;
}

/**
 * Icons: <i class="icon"> written by icon() (helpers.php) and MyUbatUI.icon()
 * (ui.js) on every page. The glyph is an outline from assets/icons/icons.svg,
 * drawn in the text colour and sized in em, so it follows the surrounding font
 * size and the patient's font-size setting. The <i> takes the height of a
 * line of text (line-height 1) and 1em of width. The 24-unit drawing keeps a
 * 2-unit margin, so the glyph box is 1.2em with -0.1em side margins, and its
 * vertical margins cancel its height: it adds nothing to the line and is
 * centred 0.375em above the baseline, so the drawing spans 1em from 0.125em
 * below it.
 */
.icon {
  display: inline-block;
  line-height: 1;
  font-style: normal;
}
.icon .icon__glyph {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin: -0.6em -0.1em;
  vertical-align: 0.375em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* For narrow drawings (chevrons) where width matters, as beside the dashboard cards. */
.icon--narrow .icon__glyph {
  width: 0.625em;
  margin-left: 0;
  margin-right: 0;
}
.icon--lg {
  font-size: 1.25em;
  line-height: 0.05em;
  vertical-align: -0.075em;
}
.icon--2xl {
  font-size: 2em;
  line-height: 0.0625em;
  vertical-align: -0.1875em;
}
/* Loading indicators turn; the notification bell beats while there are unread notices. */
.icon--spin {
  animation: icon-spin 2s linear infinite;
}
.icon--pulse {
  animation: icon-spin 1s steps(8) infinite;
}
.icon--beat {
  animation: icon-beat 1s ease-in-out infinite;
}
@keyframes icon-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes icon-beat {
  0%, 90% { transform: scale(1); }
  45% { transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .icon--spin,
  .icon--pulse,
  .icon--beat {
    animation: none;
  }
}

/**
 * Forms element
 */
form {
  position: relative;
  z-index: 1;
}
.form-item {
  margin: 1.2em 0;
}
.form-item--action {
  margin-top: 1.8em;
}
.form-desc {
  font-size: 0.85rem;
  line-height: 1.3;
  margin-top: 5px;
  display: block;
}
.form-control {
  font-size: 1rem;
}
.form-control:disabled,
.form-control:read-only:not(input[type="file"], select) {
  background-color: #e9ecef;
  opacity: 1;
  pointer-events: none;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="file"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  padding: 0.465em 0.654em;
  border-radius: 5px;
  border: 1px solid #aaa !important;
  outline: none;
  transition: all 0.25s ease-out;
  color: #222;
}
input[type="submit"] {
  transition: all 0.25s ease-out; 
}
input[type="text"]:hover,
input[type="text"]:active,
input[type="text"]:focus,
input[type="password"]:hover,
input[type="password"]:active,
input[type="password"]:focus,
input[type="date"]:hover,
input[type="date"]:active,
input[type="date"]:focus,
input[type="file"]:hover,
input[type="file"]:active,
input[type="file"]:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus,
input[type="email"]:hover,
input[type="email"]:active,
input[type="email"]:focus,
input[type="tel"]:hover,
input[type="tel"]:active,
input[type="tel"]:focus,
textarea:hover,
textarea:active,
textarea:focus,
select:hover,
select:active,
select:focus {
  border-color: rgba(128,0,128,1) !important;
  box-shadow: 0 1px 9px rgba(128,0,128,0.5) !important;
  outline: 1px solid rgba(128,0,128,0.2) !important;
}
.form-floating {
  z-index: 1;
}
.form-floating .form-floating__label {
  right: 0;
  transition: all 0.25s ease-in-out;
}
.form-floating .form-floating__input:focus ~ .form-floating__label {
  right: -15%;
}
.form-floating .form-floating__label,
.form-floating .form-floating__input:focus ~ .form-floating__label::after,
.form-floating .form-floating__input:not(:placeholder-shown) ~ .form-floating__label::after,
.form-floating .form-floating__select ~ .form-floating__label::after {
  background: transparent;
}
.word-counter {
  color: #333;
}
input[type="submit"],
.pill-button {
  font-weight: 600;
  display: block;
  background: rgb(106,0,106);
  background: linear-gradient(60deg, rgba(106,0,106,1) 0%, rgba(128,0,128,1) 50%, rgba(106,0,106,1) 100%);
  color: #fff !important;
  padding: 8px 1.4em;
  border-radius: 2.0em;
  text-align: center;
  width: 100%;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,0.2),
              inset 0px -1px 1px 0px rgba(0,0,0,0.1),
              0px 1px 2px 1px rgba(0,0,0,0.1);
}
.front-actions .front-actions__item {
  margin-bottom: 10px;
  vertical-align: top;
}
.front-actions .front-actions__button {
  border-radius: 0.58em !important;  
}
.pill-button--guardian {
  font-weight: 600;
  background: linear-gradient(60deg, rgba(0,32,164,1) 0%, rgba(50,58,212,1) 50%, rgba(0,32,164,1) 100%);
}
.pill-button--mydigitalid {
  font-weight: 600;
  background: linear-gradient(60deg, rgba(140,140,140,1) 0%, rgba(200,200,200,1) 50%, rgba(140,140,140,1) 100%);
  text-shadow: 0px 0.5px 2px #000;
}
.icon-mydid {
  background-image: url('../images/mydid.jpeg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 110%;
  width: 35px;
  height: 35px;
  display: inline-flex;
  line-height: 1;
  vertical-align: middle;
  border-radius: 100%;
  margin: -3px 10px -3px 0;
  border: 1px solid rgba(255,255,255,0.3);
}
.big-button--link {
  font-weight: 600;
  padding: 0.6em 1.8em !important;
}
/* Two classes, to keep white text over the a:visited and a:hover colours above. */
.button.button--link {
  font-weight: 600;
  color: #fff;
}
.form-wrapper {
  border: 1px solid #aaa;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
  background: rgba(255,255,255,0.65);
}
.select-filter {
  display: inline-block;
}
.select-filter__select {
  -webkit-appearance: none;
  margin-bottom: 15px;
  border: 1px solid #ccc !important;
  background: white;
  padding: 5px 12px;
  width: initial;
  border-radius: 40px;
  outline: none;
  font-size: 0.95rem;
  scroll-behavior: smooth;
}
.select-subtitle {
  margin-bottom: 1rem;
  border: 1px solid #ccc !important;
  background: #fff;
  border-radius: 40px;
  padding: 5px 12px;
}
.code-entry .code-entry__digit {
  text-align: center;
  font-size: 1.5rem;
  color: royalblue;
  font-weight: 600;
}
.preview {
  background-image: url('../images/picture.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}
.language-button {
  border: none;
  padding: 0;
  margin: 0;
  background: none;
  color: #777;
}
.upload-desc {
  border: 1px solid #999;
  background: #eee;
  color: blueviolet;
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 5px;
  font-size: 0.8rem;
}
.button,
.big-button,
.badge--link {
  position: relative;
}
.button:hover,
.big-button:hover,
.badge--link:hover {
  transition-duration: 0.1s;
}
.button:after,
.big-button:after,
.badge--link:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 8px;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 10px 40px rgba(221,0,255,0.6);
  z-index: -1;
}
.button:active:after,
.big-button:active:after,
.badge--link:active:after {
  box-shadow: 0 0 0 0 rgba(221,0,255,0.6);
  position: absolute;
  border-radius: 8px;
  left: 0;
  top:0;
  opacity: 1;
  transition: 0s;
  z-index: -1;
}
.button:active,
.big-button:active,
.badge--link:active {
  top: 1px;
}
table.table--borderless tr td {
  background-color: transparent;
}
.u-text-green {
  color: rgb(0, 173, 87);
}

/**
 * Designation
 */
.capsule {
  background: rgba(255,255,255,0.93);
  width: 100%;
  max-width: 1000px;
  margin: 1.3em auto;
  border-radius: 0.8em;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.32),inset 0px 1px 0px rgba(255,255,255,0.32);
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
  z-index: 1;
}
.capsule__body {
  max-width: 500px;
  margin: 1.5em auto;
  padding: 2.5em 1.2em;
  position: relative;
  z-index: 25;
}
.banner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 1;
  opacity: 0.6;
}
.content {
  position: relative;
  z-index: 5;
}
.back-link {
  float: left;
  margin: 15px;
  z-index: 10;
  color: blue;
  position: relative;
  z-index: 50;
}
.capsule--split {
  display: flex;
}
.capsule__nav {
  max-width: 270px;
  padding: 2.5em 1.5em 4.5em;
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
  flex: 1;
  z-index: 10;
  position: relative;
}
.capsule__main {
  position: relative;
  width: 100%;
  padding: 2.5em 1.5em;
  flex: 1;
}
.headline {
  color: #fff;
  font-size: 0.95rem;
  line-height: 30px;
  padding: 5px 25px;
  height: 40px;
  background-image: linear-gradient(0deg, rgba(84,33,135,0.9) 0%, rgba(96,23,152,1) 80%, rgba(96,23,152,1) 100%);
  box-shadow: 0px 0px 5px rgb(0 0 0 / 52%);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  max-width: 1000px;
  margin: 0 auto -16px;
  border-radius: 0 0 0.8em 0.8em;
  z-index: 20;
  border-bottom: 1px solid rgba(255,255,255,15%);
  display: none;
}
.u-text-tiny {
  display: block;
  line-height: 1;
  font-size: 9px;
  padding-top: 2px;
}
.bottom-nav {
  display: none;
}
body.page--app .bottom-nav {
  display: initial;
}
.bottom-nav.is-scrolled {
  transform: translateY(80px);
}
.account-menu {
  position: relative;
  clear: both;
  vertical-align: middle;
  display: table;
  width: 100%;
  border-radius: 4px;
  padding: 3px 5px;
  cursor: pointer;
}
.account-menu.is-open,
.account-menu:hover {
  background-color: #fff;
}
.small-avatar,
.headline__avatar {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: linear-gradient(0deg, rgba(116,116,116,1) 0%, rgba(195,195,195,1) 100%);
  float: left;
  margin-right: 8px;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  font-size: 1.1rem;
  color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
}
.headline__avatar {
  margin-bottom: -20px;
  transition: all 0.3s ease-out;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  position: relative;
  z-index: 10;
}
.headline.is-scrolled .headline__avatar {
  transform: scale(0.75) translateY(-15px);
}
.account-menu__name {
  line-height: 1.1;
  font-size: 0.9rem;
  color: #333;
  vertical-align: middle;
  display: table-cell;
  width: 100%;
}
.account-switcher {
  position: absolute;
  top: 0;
  right: -250px;
  border: 1px solid #ccc;
  border-radius: 0.8em;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1),
              0 2px 4px rgba(0,0,0,0.2),
              0 3px 6px rgba(0,0,0,0.3);
  width: 240px;
  display: none;
  will-change: all;
  overflow: hidden;
}
.account-switcher__list {
  padding: 5px 2px;
  margin: 0;
  font-size: 0.9rem;
  max-height: 60vh;
  overflow: scroll;
}
.account-switcher .account-switcher__item {
  list-style: none;
}
.account-switcher .account-switcher__item--divider {
  border-top: 1px solid #ccc;
  padding-top: 5px;
  margin-top: 5px;
}
.account-switcher .account-switcher__link {
  padding: 7px 15px;
  display: block;
  line-height: 1.2;
  color: #000;
  border-radius: 4px;
  transition: background-color 0.25s cubic-bezier(.53,.53,.27,1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-switcher .account-switcher__link:hover {
  background-color: rgba(222,189,255,0.8);
}
.account-switcher .account-switcher__icon {
  font-size: 1.3rem;
  display: inline-block;
  vertical-align: middle;
  width: 35px;
  padding: 4px 0;
}
.account-switcher .account-switcher__id {
  display: block;
  color: #444;
  margin-left: 35px;
}
.side-nav {
  margin-top: 1em;
  border-top: 1px solid #ccc;
  padding-top: 1em;
}
.subnav {
  margin-bottom: 20px;
  border: 1px solid #bbb;
  border-radius: 30px;
  padding: 2px;
  background: rgba(255,255,255,0.5);
}
.subnav .subnav__list {
  padding: 0;
  margin: 0;
  display: flex;
  gap: 5px;
}
.subnav .subnav__item {
  list-style: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  align-self: center;
  overflow: hidden;
}
.subnav .subnav__item.is-active {
  overflow: visible;
}
.subnav .subnav__link {
  color: #0d6efd;
  display: block;
  padding: 0.4em 0.8em;
  width: 100%;
  text-align: center;
  border-radius: 30px;
  line-height: 1.1;
  height: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.subnav .subnav__item.is-active .subnav__link {
  background: #0d6efd;
  color: #fff;
}
.button-group.button-group--small .button-group__button {
  font-size: 0.8rem !important;
  font-weight: normal;
  line-height: 1.2;
}
.button-group.button-group--small .button-group__button.is-active .button-group__label {
  display: inline !important;
}
.side-nav__item {
  padding: 3px 5px;
  margin: 3px 0;
  border-radius: 4px;
}
.side-nav__item:hover,
.side-nav__item.is-active {
  background-color: #fff
}
.side-nav .side-nav__link {
  font-weight: 500;
  color: #333;
  text-decoration: none;
  display: block;
  font-size: 0.95rem
}
.side-nav .side-nav__icon {
  width: 30px;
  text-align: center;
  background: linear-gradient(0deg, rgba(116,116,116,0.25) 0%, rgba(195,195,195,0.25) 100%);
  padding: 7px 0;
  font-size: 16px;
  border-radius: 5px;
  margin-right: 5px;
}
.side-nav .side-nav__badge {
  margin-top: 5px;
}
.credit {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 20px;
  border-top: 1px solid #cdcdcd;
  font-size: 12px;
  background: rgba(255,255,255,0.2);
  box-shadow: 0 -1px 3px rgba(100,100,100,0.1);
  color: #666;
}
.credit .credit__link {
  color: #666;
}
.services-list {
  margin-top: 1em;
}
.services-list .services-list__badge,
.appointment-card .appointment-card__badge {
  white-space: normal;
  text-wrap: balance;
}
.services-list__info,
.service-info {
  color: #800080;
}
/* Section headings in the facility information popup (ajax/_facility.php). */
.card .card__heading {
  color: #800080;
}
.services-list__rate {
  font-size: 85%;
  color: #ff8c00;
  margin-bottom: 5px;
}
.submission {
  padding: 10px 20px;
  border: 1px solid #bbb;
  border-radius: 10px;
  background: #efefef;
  margin-bottom: 25px;
  box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
}
.appointment-card {
  border: 1px solid #ccc;
  background: #fafafa;
  border-radius: 7px;
  overflow: hidden;
}
.appointment-card__aside {
  border-right: 1px solid #ccc;
  padding: 15px;
  text-align: center;
}
.appointment-card .appointment-card__icon {
  max-width: 100%;
}
.appointment-card__details {
  padding: 15px;
}
.appointment-card__cycle {
  margin: -15px -15px 10px -15px;
  padding: 10px 15px;
  border-bottom: 1px solid #ccc;
  font-size: 0.9rem;
}
.vas-change {
  border-top: 1px solid #ccc;
}
.vas-change .vas-change__badge {
  white-space: normal;
}
.gps__image {
  height: 45vh;
  margin: -4em -1.5em 10px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.gps__title {
  font-weight: 600;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 5px 10px 50px;
  font-size: 1.1rem;
}
.gps__queue {
  font-weight: 700;
  position: relative;
  z-index: 10;
  margin: -50px auto 0;
  width: 2em;
  height: 2em;
  line-height: 2em;
  border-radius: 100%;
  background: #eee;
  text-align: center;
  font-size: 3em;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}
.gps__confirm {
  margin-top: 20px;
}

.timeline__row {
  margin-bottom: 5px;
}

.timeline {
  margin: 50px auto;
  padding: 0 20px;
  position: relative;
}
.timeline .timeline__line {
  position: absolute;
  height: 100%;
  width: 4px;
  background: #fff;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
}
.timeline .timeline__year {
  text-align: center;
  position: relative;
  z-index: 5;
}
.timeline .timeline__year-label {
  display: inline-block;
  background: #fff;
  border-radius: 4px;
  padding: 4px 6px;
  font-weight: 700;
  font-size: 1.3rem;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
.timeline .timeline__row {
  display: flex;
}
.timeline .timeline__row--start {
  justify-content: flex-start;
}
.timeline .timeline__row--end {
  justify-content: flex-end;
}
.timeline .timeline__entry {
  background: #fff;
  border-radius: 5px;
  width: calc(50% - 40px);
  padding: 20px;
  position: relative;
}
.timeline .timeline__entry::before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  background: #fff;
  top: 28px;
  z-index: -1;
  transform: rotate(45deg);
}
.timeline__row--start .timeline__entry::before {
  right: -7px;
}
.timeline__row--end .timeline__entry::before {
  left: -7px;
}
.timeline .timeline__icon,
.timeline .timeline__scroll {
  position: absolute;
  background: #f2f2f2;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #3ea0e2;
  font-size: 17px;
  box-shadow: 0 0 0 4px #fff, inset 0 2px 0 rgba(0,0,0,0.08), 0 3px 0 4px rgba(0,0,0,0.05);
}
/* Three classes, to keep the colour over the dark theme's a:visited and a:hover. */
.timeline .timeline__line .timeline__scroll {
  color: #3ea0e2;
  bottom: 0px;
  left: 50%;
  font-size: 25px;
  transform: translateX(-50%);
}
.timeline__row--start .timeline__icon {
  top: 15px;
  right: -60px;
}
.timeline__row--end .timeline__icon {
  top: 15px;
  left: -60px;
}
.timeline .timeline__date {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.timeline .timeline__date {
  font-size: 90%;
  color: purple;
}
.timeline .timeline__text {
  font-size: 0.9rem;
  line-height: 1.2;
  margin: 5px 0 10px 0;
}

.profile-wrapper {
  background: #663399;
  margin: -2.5em -1.5em 0;
  padding: 2.5em 1.5em 0;
  color: #fff;
}
.animate-banner {
  margin: -1.3em -1.5em 0;
}
.animate-banner__edge {
  height: 55px;
  border-radius: 0 0 40% 40%;
  background: rgb(153,0,239);
  background: linear-gradient(0deg, rgba(153,0,239,1) 5%, rgba(102,51,153,1) 95%); 
}
.profile-wrapper__avatar {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  float: right;
  margin-left: 10px;
  background-image: url('../images/myubat_icon.png');
  background-repeat: no-repeat;
  background-size: contain;
  border: 0.3em solid white;
}
.avatar-preview {
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 100%;
  height: auto;
  max-width: 150px !important;
  max-height: 150px !important;
}
.box-info {
  background: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
  height: 100%;
  display: block;
  color: #222 !important;
  cursor: pointer;
  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.05),
              0px 1px 1px 0px rgba(0,0,0,0.05),
              0px 2px 2px 0px rgba(0,0,0,0.05),
              0px 4px 4px 0px rgba(0,0,0,0.05);
/*  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.05),
              0px 1px 1px 0px rgba(0,0,0,0.05),`
              0px 2px 2px 0px rgba(0,0,0,0.05),
              0px 4px 4px 0px rgba(0,0,0,0.05),
              inset 0px -1px 1px 1px rgba(0,0,0,0.05),
              inset 0px 0px 2px 1px rgba(0,0,0,0.025);*/
  transition: 0.2s all;
}
.box-info:active {
  transform: translateY(3px);
}
.box-info .box-info__icon {
  float: right;
  font-size: 1.6rem;
  opacity: 0.65;
}
.box-info .box-info__label {
  display: block;
  color: #333;
  font-size: 0.9rem;
  line-height: 1.1;
}
.box-info .box-info__value {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
}
.nav-action .nav-action__button {
  border: none;
  background: #fff;
  padding: 5px 10px;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  display: block;
  width: 100%;
  cursor: pointer;
  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.05),
              0px 1px 1px 0px rgba(0,0,0,0.05),
              0px 2px 2px 0px rgba(0,0,0,0.05),
              0px 4px 4px 0px rgba(0,0,0,0.05),
              inset 0px 1px 2px 1px rgba(255,255,255,0.15),
              inset 0px 0px 2px 1px rgba(0,0,0,0.025);
  transition: 0.2s all;
  font-size: 75%;
  line-height: 1;
  white-space: nowrap;
  color: #000;
}
.nav-action .nav-action__icon {
  font-size: 110%;
  display: block;
  margin-bottom: 4px;
}

/**
 * Notifications (notification/_list.php): a bulletin banner for everyone,
 * then the patient's own notifications as cards grouped by day. Each card's
 * kind modifier (NotificationFeed::kind()) colours its icon; unread cards
 * carry a dot and a bold title.
 */
.notice-carousel .notice-carousel__track {
  margin: 0;
  padding: 0;
  list-style: none;
}
.notice-bulletin {
  display: flex;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 16px;
  color: #4a3410;
  background: #fff4e0;
  border: 1px solid #f5dcb0;
}
.notice-bulletin .notice-bulletin__icon {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-right: 12px;
  border-radius: 50%;
  font-size: 1.2rem;
  color: #fff;
  background: #e8900c;
}
.notice-bulletin .notice-bulletin__main {
  flex: 1 1 auto;
  min-width: 0;
}
.notice-bulletin .notice-bulletin__date {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a26100;
}
.notice-bulletin .notice-bulletin__title {
  font-family: "SF Text Bold", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.3;
}
.notice-bulletin .notice-bulletin__body {
  margin-top: 2px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.notice-feed .notice-feed__day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 6px 8px;
}
.notice-feed .notice-feed__day:first-child {
  margin-top: 4px;
}
.notice-feed .notice-feed__day-label {
  font-family: "SF Text Bold", Arial, Helvetica, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6a1b9a;
}
.notice-feed .notice-feed__new {
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  color: #fff;
  background: #6a1b9a;
}
.notice-feed .notice-feed__list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #ece5f1;
}

.notice-card {
  display: flex;
  align-items: flex-start;
  padding: 14px 14px 14px 16px;
}
.notice-card + .notice-card {
  border-top: 1px solid #f0eaf4;
}
.notice-card .notice-card__icon {
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  margin-right: 12px;
  border-radius: 13px;
  font-size: 1.25rem;
  color: #5c6577;
  background: #f1edf5;
}
.notice-card--success .notice-card__icon { color: #12805c; background: #e2f5eb; }
.notice-card--delivery .notice-card__icon { color: #6a1b9a; background: #f3e8fa; }
.notice-card--danger .notice-card__icon { color: #c62828; background: #fde8e8; }
.notice-card--payment .notice-card__icon { color: #b26a00; background: #fff1dc; }
.notice-card--appointment .notice-card__icon { color: #1d5fd1; background: #e6efff; }
.notice-card--ready .notice-card__icon { color: #00796b; background: #dff5f2; }
.notice-card--info .notice-card__icon { color: #5c6577; background: #eef0f4; }
.notice-card.notice-card--read .notice-card__icon {
  opacity: 0.75;
}
.notice-card .notice-card__main {
  flex: 1 1 auto;
  min-width: 0;
}
.notice-card .notice-card__meta {
  font-size: 0.75rem;
  color: #8a7f93;
}
.notice-card .notice-card__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
  background: #6a1b9a;
}
.notice-card .notice-card__title {
  margin-top: 1px;
  font-size: 1rem;
  line-height: 1.3;
  color: #3a3340;
}
.notice-card.notice-card--unread .notice-card__title {
  font-family: "SF Text Bold", Arial, Helvetica, sans-serif;
  color: #241b2b;
}
.notice-card .notice-card__body {
  margin-top: 3px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #6b6472;
}
.notice-card .notice-card__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.notice-card .notice-card__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  border-radius: 50%;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.notice-card .notice-card__action--read {
  color: #1d5fd1;
  background: #e8f0ff;
}
.notice-card .notice-card__action--read:hover {
  color: #fff;
  background: #1d5fd1;
}
.notice-card .notice-card__action--delete {
  color: #c62828;
  background: #fdecec;
}
.notice-card .notice-card__action--delete:hover {
  color: #fff;
  background: #c62828;
}
.thumbnail {
  aspect-ratio: 16/9;
  object-fit: cover;
}

.password-strength__meter {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  border-radius: 0 0 3px 3px;
}

.password-strength__meter::before {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  transition: 0.5s;
}

.password-strength--weak .password-strength__meter::before {
  width: 10%;
  background: rgb(240, 0, 0);
  filter: drop-shadow(0 0 5px rgba(240, 0, 0, 0.5))
    drop-shadow(0 0 8px rgba(240, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(240, 0, 0, 0.5));
}

.password-strength--medium .password-strength__meter::before {
  width: 66.66%;
  background: #ffac11;
  filter: drop-shadow(0 0 5px #ffac11) drop-shadow(0 0 10px #ffac11)
    drop-shadow(0 0 20px #ffac11);
}
.password-strength--strong .password-strength__meter::before {
  width: 100%;
  background: rgb(16, 255, 16);
  filter: drop-shadow(0 0 5px rgb(16, 255, 16))
    drop-shadow(0 0 10px rgb(16, 255, 16))
    drop-shadow(0 0 20px rgb(16, 255, 16));
}
.password-strength__meter::after {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
  transition: 0.5s;
  font-size: 14px;
}

.rx-card {
  padding: 15px;
  border: 1px solid #ccc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.rx-card .rx-card__header {
  margin: -15px -15px 15px;
}
.rx-card .rx-card__fields {
  border-bottom: 1px solid #ccc;
  background: linear-gradient(0deg, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 100%);
}
.rx-card .rx-card__field {
  font-size: 90%;
  color: #333;
  padding: 8px 15px;
}
.rx-card .rx-card__value {
  font-weight: 600;
  display: block;
  font-size: initial;
}
.rx-card .rx-card__field + .rx-card__field {
  border-left: 1px solid #ddd;
}
.rx-drug {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
  margin-bottom: 2px;
}
.rx-drug .rx-drug__name {
  font-weight: 500;
  letter-spacing: -0.05px;
  padding: 0.5em 0.7em;
  border-bottom: 1px solid #eee;
}
.rx-drug .rx-drug__detail + .rx-drug__detail {
  border-left: 1px solid #eee;
}
.rx-drug .rx-drug__detail {
  padding: 0.5em 0.7em;
  text-align: center;
  font-size: 90%;
  color: #555;
}
.rx-drug .rx-drug__value {
  display: block;
  color: #000;
  font-weight: 500;
}

/* A subsidiary prescription's heading in a prescription's medicine list
   (prescription/_drugs) and in an appointment's medicine table
   (supply/appointment): its medicines are supplied with the same
   appointments. */
.rx-card .rx-card__group {
  margin: 12px 0 4px;
  padding: 8px 10px;
  border-left: 4px solid #601798;
  border-radius: 5px;
  background: #f3eefa;
  font-size: 90%;
}
.rx-card .rx-card__group-dates,
.rx-card .rx-card__group-note {
  color: #555;
  font-size: 90%;
}
.appointment-card .appointment-card__group {
  border-left: 4px solid #601798;
  background: #f3eefa;
}
.appointment-card .appointment-card__group-note {
  color: #555;
  font-size: 90%;
}

.faq-art {
  position: relative;
}
.faq-art .faq-art__image--illustration {
  position: absolute;
  top: -50px;
  left: -30px;
  right: 0;
  z-index: -1;
}
.faq-art__image {
  display: block;
  margin: 0 auto;
}
.accordion.accordion--faq {
  background-color: transparent;
}
.accordion--faq .accordion__item {
  background-color: transparent;
  border-bottom: 1px solid rgba(147,112,216,0.5);
}
.accordion--faq .accordion__item .accordion__header {
  background-color: transparent;
  outline: none;
}
.accordion--faq .accordion__item .accordion__button {
  font-size: 0.95rem;
  padding: 0.8em 1em;
  box-shadow: none;
  border-radius: 4px;
  margin-top: 3px;
}
.accordion--faq .accordion__item .accordion__button.is-collapsed {
  background-color: transparent;
}
.accordion--faq .accordion__item .accordion__body {
  font-size: 0.9rem;
  padding: 0.6em 1em;
  color: #333;
  background-color: rgba(255, 255, 255, 0.65);
  border-radius: 4px;
  margin-bottom: 3px;
}
.search-box {
  position: relative;
}
.search-box .search-box__icon {
  position: absolute;
  right: 20px;
  bottom: 12px;
  color: #555;
  pointer-events: none;
}
.search-box .search-box__input {
  display: block;
  margin: 10px auto;
  width: 100%;
  padding: 7px 15px;
  border: 1px solid #ccc;
  border-radius: 25px;
  outline: 0;
}

.hold-button {
  --color: #F6F8FF;
  --background: #1E2235;
  --shadow: rgba(0, 9, 61, 0.2);
  --progress: #275EFE;
  --outer-border: #A6ACCD;
  --fill: rgb(102,51,153);
  font-size: 1.1rem;
  line-height: 1;
  padding: 12px 1em;
  border: 0;
  border-radius: 24px;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  position: relative;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-appearance: none;
  transition: box-shadow 0.3s, transform 0.3s;
  box-shadow: 0 var(--shadow-y, 4px) var(--shadow-blur, 12px) var(--shadow);
  color: var(--color);
  background: var(--b, var(--background));
  transform: scale(var(--scale, 1));
  min-width: 50%;
}
.hold-button .hold-button__steps {
  margin: 0;
  padding: 0;
  text-align: center;
  pointer-events: none;
  list-style: none;
  position: relative;
  z-index: 3;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.hold-button .hold-button__step {
  top: var(--t, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateY(var(--ul-y)) translateZ(0);
  transition: transform 0.3s, opacity 0.2s;
}
.hold-button .hold-button__step:not(:first-child) {
  --o: 0;
  position: absolute;
  left: 0;
  right: 0;
}
.hold-button .hold-button__step:nth-child(1) {
  opacity: var(--ul-o-1, 1);
}
.hold-button .hold-button__step:nth-child(2) {
  --t: 100%;
  opacity: var(--ul-o-2, 0);
}
.hold-button .hold-button__step:nth-child(3) {
  --t: 200%;
  opacity: var(--ul-o-3, 0);
}
.hold-button:focus:not(.is-processing):not(.is-success), .hold-button:hover:not(.is-processing):not(.is-success) {
  --shadow-y: 8px;
  --shadow-blur: 16px;
}
.hold-button:active:not(.is-success) {
  --shadow-y: 4px;
  --shadow-blur: 8px;
}
.hold-button.is-processing {
  --ul-y: -100%;
  --ul-o-1: 0;
  --ul-o-2: 1;
  --ul-o-3: 0;
}
.hold-button.is-success {
  --ul-y: -200%;
  --ul-o-1: 0;
  --ul-o-2: 0;
  --ul-o-3: 1;
}
.hold-button.hold-button--fill {
  --b: linear-gradient(90deg, var(--progress) 0%, var(--progress) 33.33%, var(--fill) 33.33%, var(--fill) 66.66%, var(--background) 66.66%, var(--background) 100%) left var(--p, 100%) top 0;
  background-position-x: var(--p, 100%);
  background-size: 300% 100%;
  transition: background-position var(--duration) linear, box-shadow 0.3s, transform 0.3s;
}
.hold-button.hold-button--fill:active:not(.is-success) {
  --scale: .94;
}
.hold-button.hold-button--fill.is-processing, .hold-button.hold-button--fill.is-success {
  --p: 50%;
}
.hold-button.hold-button--fill.is-success {
  --p: 0;
  transition: background 0.5s, box-shadow 0.3s, transform 0.3s;
}

.ticket__title {
  cursor: pointer;
}
.ticket__title:hover {
  color: #f90;
}
.list-group__item:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.ticket__body {
  font-size: 90%;
  color: #333;
  display: none;
}
.ticket__article {
  font-size: 85%;
  color: #444;
  line-height: 1.25;
  display: none;
  border: 1px solid #ddd;
  padding: 10px 15px;
  border-radius: 4px;
  margin: 10px 0;
  overflow: hidden;
}
.ticket__article-header {
  color: #000;
  border-bottom: 1px solid #ddd;
  margin: -10px -15px 10px;
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 15px 10px;
  background: #f1f1f1
}
.quick-reply {
  display: none;
}
.quick-reply__field {
  margin-bottom: 8px;
}
.quick-reply .quick-reply__message {
  font-size: 85%;
  color: #000;
  line-height: 1.25;
}
.required {
  color: red;
}

.timeline__today {
  text-align: center;
  z-index: 10;
  position: relative;
  color: crimson;
  padding: 10px 5px;
  margin: 10px auto;
}
.timeline__today-label {
  display: inline-block;
  background: #fff;
  padding: 5px 6px;
  border-radius: 5px;
  line-height: 1;
}
.timeline__today:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  border-bottom: 2px dotted crimson;
  left: 0;
  top: 23px;
  z-index: -1;
}
.medx {
  margin: 20px auto;
  position: relative;
  padding-left: 20px;
}
.medx .medx__row {
  margin-bottom: 8px;
}
.medx .medx__line {
  position: absolute;
  height: 100%;
  width: 4px;
  background: #fff;
  top: 20px;
}
.medx .medx__year {
  position: relative;
  z-index: 5;
  margin-left: -20px;
}
.medx .medx__year-label {
  display: inline-block;
  background: #fff;
  border-radius: 4px;
  padding: 4px 6px;
  font-weight: 700;
  font-size: 1.3rem;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
.medx .medx__facility {
  display: inline-block;
  background: #fff;
  border-radius: 20px;
  padding: 4px 15px;
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  margin-left: -20px;
  z-index: 10;
  position: relative;
}
.medx .medx__row {
  display: flex;
  justify-content: flex-start;
  margin-left: 18px;
}
.medx .medx__entry {
  background: #fff;
  border-radius: 5px;
  width: 100%;
  padding: 12px 15px;
  position: relative;
}
.medx .medx__entry::before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  background: #fff;
  top: 16px;
  z-index: -1;
  transform: rotate(45deg);
  left: -7px;
}
.medx .medx__icon,
.medx .medx__scroll {
  position: absolute;
  background: #f2f2f2;
  height: 24px;
  width: 24px;
  text-align: center;
  line-height: 24px;
  border-radius: 50%;
  color: #3ea0e2;
  font-size: 14px;
  box-shadow: 0 0 0 1px #fff, inset 0 2px 0 rgba(0,0,0,0.08), 0 1px 0 2px rgba(0,0,0,0.05);
}
/* Three classes, to keep the colour over the dark theme's a:visited and a:hover. */
.medx .medx__line .medx__scroll {
  color: #3ea0e2;
  bottom: -18px;
  left: 50%;
  font-size: 25px;
  transform: translateX(-50%);
}
.medx .medx__icon {
  top: 10px;
  left: -30px;
}
.medx .medx__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 90%;
  color: purple;
  cursor: pointer;
}
.medx .medx__drugs {
  display: none;
  overflow: visible;
}
.medx .medx__lines {
  line-height: 1.2;
  margin: 8px 0 0 0;
}
.drug-list {
  padding: 5px 15px 0;
  margin: 0 -15px 0;
  list-style: none;
  border-top: 1px solid #8162df;
}
.drug-list .drug-list__item {
  padding-bottom: 5px;
}
.drug-list .drug-list__item + .drug-list__item {
  border-top: 1px dotted #bbb;
  padding-top: 5px;
}
.drug .drug__name {
  font-size: 0.85rem;
  margin-bottom: 3px;
  font-weight: 600;
}
.drug .drug__dosage {
  color: #555;
  font-size: 0.8rem;
}
.drug .drug__separator {
  color: green;
  font-size: 110%;
}
.medx .medx__status {
  padding-top: 5px;
  color: #444;
  font-size: 80%;
}
.medx .medx__status-icon {
  width: 24px;
  text-align: center;
  color: #777;
}

/* A record's facility, supply status and cost, with Semak on the right. */
.medx .medx__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.medx .medx__summary .medx__status {
  min-width: 0;
}

/**
 * Semak: a prescription record's review in Rekod Saya (ajax/_rx_review.php,
 * KPI DPS6), compact beside the record's status lines — the Semak button,
 * then a badge: Disahkan (confirmed correct), Dalam semakan (reported
 * incorrect, being reviewed) or Selesai (resolved). .rx-review-form is the
 * Tidak Betul form shown in a dialog.
 */
.rx-review {
  flex: none;
  padding-top: 5px;
}
.rx-review .rx-review__button,
.rx-review .rx-review__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.rx-review .rx-review__badge--confirmed,
.rx-review .rx-review__badge--resolved {
  background: #157347;
  color: #fff;
}
.rx-review .rx-review__badge--review {
  background: #ffc107;
  color: #222;
}
.rx-review .rx-review__icon {
  width: 14px;
  height: 14px;
}
.rx-review-form .rx-review-form__lead {
  margin: 0 0 8px;
}
.rx-review-form .rx-review-form__scroll {
  overflow-x: auto;
}
.rx-review-form .rx-review-form__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.rx-review-form .rx-review-form__table th {
  padding: 8px 10px;
  text-align: left;
  background: #212529;
  color: #fff;
}
.rx-review-form .rx-review-form__table td {
  padding: 8px 10px;
  border: 1px solid #ddd;
  vertical-align: top;
}
.rx-review-form .rx-review-form__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}
.rx-review-form .rx-review-form__box {
  flex: none;
  margin-top: 3px;
}
.rx-review-form .rx-review-form__error {
  margin: 8px 0 0;
  color: #b02a37;
  font-size: 0.85rem;
}
.rx-review-form .rx-review-form__label {
  display: block;
  margin: 14px 0 6px;
}
.rx-review-form .rx-review-form__note {
  width: 100%;
}
.rx-review-form .rx-review-form__required {
  color: #b02a37;
}

/**
 * Tracking: the parcel journey in the shared popup (supply/_tracking.php),
 * opened from a tracking number on supply/active and supply/appointment.
 * A hero card with the current stage, a five-step progress line, then the
 * events on a rail grouped by day. The root modifier sets the colours:
 * tracking--moving (purple), --delivered (green), --issue (orange).
 */
.tracking {
  --tracking-accent: #6a1b9a;
  --tracking-accent-2: #a23cc8;
  --tracking-soft: #f3e9f9;
  --tracking-line: #e6dcee;
  color: #2b2233;
}
.tracking--delivered {
  --tracking-accent: #12805c;
  --tracking-accent-2: #2fbf71;
  --tracking-soft: #e5f7ee;
}
.tracking--issue {
  --tracking-accent: #c0570b;
  --tracking-accent-2: #f39c12;
  --tracking-soft: #fdf0e1;
}

/* Hero: the stage reached and the latest event. */
.tracking .tracking__hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 18px 20px 26px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--tracking-accent) 0%, var(--tracking-accent-2) 100%);
  box-shadow: 0 10px 24px -12px var(--tracking-accent);
}
.tracking .tracking__hero::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 70%);
}
.tracking .tracking__badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-right: 16px;
  border-radius: 50%;
  font-size: 1.8rem;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.tracking--delivered .tracking__badge {
  animation: tracking-pop 0.6s ease-out both;
}
.tracking .tracking__summary {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.tracking .tracking__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}
.tracking .tracking__headline {
  font-family: "SF Text Heavy", Arial, Helvetica, sans-serif;
  font-size: 1.45rem;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.tracking .tracking__latest {
  margin-top: 4px;
  font-size: 0.9rem;
  line-height: 1.35;
  opacity: 0.95;
}
.tracking .tracking__when {
  margin-top: 6px;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: rgba(0, 0, 0, 0.16);
}

/* A dashed road along the bottom of the hero, with the truck driving on it. */
.tracking .tracking__road {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 9px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.55) 10px, rgba(255, 255, 255, 0) 10px, rgba(255, 255, 255, 0) 18px);
}
.tracking .tracking__vehicle {
  position: absolute;
  bottom: -2px;
  left: 0;
  font-size: 1rem;
  animation: tracking-drive 7s ease-in-out infinite;
}

/* Five steps from order to doorstep, joined by a line. */
.tracking .tracking__steps {
  display: flex;
  margin: 22px 0 6px;
  padding: 0;
  list-style: none;
}
.tracking .tracking__step {
  position: relative;
  flex: 1 1 0;
  text-align: center;
}
.tracking .tracking__step + .tracking__step::before {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(-50% + 20px);
  right: calc(50% + 20px);
  height: 3px;
  border-radius: 3px;
  background: var(--tracking-line);
}
.tracking .tracking__step + .tracking__step--done::before,
.tracking .tracking__step + .tracking__step--current::before {
  background: linear-gradient(90deg, var(--tracking-accent), var(--tracking-accent-2));
}
.tracking .tracking__node {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.05rem;
  color: #b7a8c4;
  background: #faf7fc;
  box-shadow: inset 0 0 0 2px var(--tracking-line);
}
.tracking .tracking__step--done .tracking__node {
  color: #fff;
  background: var(--tracking-accent);
  box-shadow: none;
}
.tracking .tracking__step--current .tracking__node {
  color: #fff;
  background: linear-gradient(135deg, var(--tracking-accent), var(--tracking-accent-2));
  box-shadow: 0 0 0 4px var(--tracking-soft);
}
.tracking--moving .tracking__step--current .tracking__node {
  animation: tracking-ring 2s ease-out infinite;
}
.tracking .tracking__step-label {
  display: block;
  margin-top: 6px;
  padding: 0 2px;
  font-size: 0.7rem;
  line-height: 1.2;
  color: #8a7f93;
}
.tracking .tracking__step--current .tracking__step-label {
  font-family: "SF Text Bold", Arial, Helvetica, sans-serif;
  color: var(--tracking-accent);
}

/* Events, newest first, on a rail; the list scrolls inside the popup. */
.tracking .tracking__journey {
  max-height: 46vh;
  margin: 14px -16px -16px;
  padding: 4px 16px 16px;
  overflow-y: auto;
  border-top: 1px solid #f0eaf4;
  -webkit-overflow-scrolling: touch;
}
.tracking .tracking__days {
  position: relative;
}
.tracking .tracking__days::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 83px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--tracking-accent-2) 0%, var(--tracking-line) 35%);
}
.tracking .tracking__day {
  position: relative;
  margin: 14px 0 6px 96px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a7f93;
}
.tracking .tracking__day::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -17px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 2px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--tracking-line);
  transform: rotate(45deg);
}
.tracking .tracking__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tracking .tracking__item {
  display: flex;
  align-items: flex-start;
  padding: 7px 0;
}
.tracking .tracking__time {
  flex: 0 0 72px;
  padding-top: 2px;
  text-align: right;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #8a7f93;
}
.tracking .tracking__marker {
  position: relative;
  flex: 0 0 24px;
  height: 20px;
}
.tracking .tracking__dot {
  position: absolute;
  top: 5px;
  left: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px #cbbcd8;
}
.tracking .tracking__detail {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 8px;
}
.tracking .tracking__process {
  font-size: 0.95rem;
  line-height: 1.3;
}
.tracking .tracking__place {
  margin-top: 2px;
  font-size: 0.8rem;
  line-height: 1.3;
  color: #8a7f93;
}
.tracking .tracking__item--latest .tracking__time {
  color: var(--tracking-accent);
}
.tracking .tracking__item--latest .tracking__dot {
  top: 2px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--tracking-accent);
  box-shadow: 0 0 0 4px var(--tracking-soft);
}
.tracking--moving .tracking__item--latest .tracking__dot {
  animation: tracking-ring 2s ease-out infinite;
}
.tracking .tracking__item--latest .tracking__process {
  font-family: "SF Text Bold", Arial, Helvetica, sans-serif;
  color: var(--tracking-accent);
}
.tracking .tracking__item--issue .tracking__dot {
  box-shadow: inset 0 0 0 3px #f39c12;
}
@keyframes tracking-drive {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: calc(100% - 1em); opacity: 0; }
}
@keyframes tracking-ring {
  0% { box-shadow: 0 0 0 0 var(--tracking-soft), 0 0 0 0 rgba(162, 60, 200, 0.45); }
  70% { box-shadow: 0 0 0 4px var(--tracking-soft), 0 0 0 12px rgba(162, 60, 200, 0); }
  100% { box-shadow: 0 0 0 4px var(--tracking-soft), 0 0 0 12px rgba(162, 60, 200, 0); }
}
@keyframes tracking-pop {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tracking .tracking__badge,
  .tracking .tracking__node,
  .tracking .tracking__dot,
  .tracking .tracking__vehicle {
    animation: none;
  }
}

/**
 * Picker: a searchable list over a native select (MyUbatUI.Picker in
 * ui.js), for the facility pickers on supply/new, supply/medication and
 * home/helpdesk. The toggle also carries form-select, so it looks like the
 * page's other selects; picker--plain (the supply pages) shows it as a
 * heading. The open list keeps the app's purple.
 */
.picker {
  position: relative;
}
.picker .picker__select {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.picker .picker__toggle {
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picker .picker__toggle.is-placeholder {
  color: #6c757d;
}
.picker .picker__panel {
  display: none;
  position: absolute;
  z-index: 1060;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  padding: 6px;
  border-radius: 6px;
  background: linear-gradient(180deg, #484C7A 0%, #36395A 100%);
  box-shadow: 0px 8px 16px rgba(0,0,0,0.32), inset 0px 1px 0px rgba(255,255,255,0.32);
  color: #fff;
  text-shadow: none;
}
.picker.is-open .picker__panel {
  display: block;
}
.picker .picker__search {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #000;
  font-size: 16px;
}
.picker .picker__list {
  margin: 6px 0 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  list-style: none;
}
.picker .picker__group {
  padding: 8px 8px 2px;
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.8;
}
.picker .picker__option {
  padding: 8px 8px 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
.picker .picker__option.is-highlighted {
  background: rgba(255,255,255,0.15);
}
.picker .picker__option.is-selected {
  background: rgba(117,27,161,1);
}
.picker .picker__empty {
  padding: 8px;
  opacity: 0.7;
}
.picker .picker__toggle {
  font-family: "SF Text Bold", Arial, Helvetica, sans-serif;
}
.picker--plain .picker__toggle {
  background-color: transparent;
  border: none;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  line-height: 28px;
  font-weight: 600;
  font-size: 1.1rem;
  color: #333;
}

/**
 * Dialogs: alerts and confirmations opened by MyUbatUI.dialog() (ui.js), on
 * every page that asks the patient something or reports a result. The type
 * colours the top edge and the title icon.
 */
.dialog {
  border-top: 5px solid #601798;
  text-align: left;
}
.dialog .dialog__title {
  font-size: 1.15rem;
}
.dialog .dialog__icon {
  margin-right: 0.4em;
}
.dialog--red { border-top-color: #e74c3c; }
.dialog--green { border-top-color: #2ecc71; }
.dialog--blue { border-top-color: #3498db; }
.dialog--orange { border-top-color: #f39c12; }
.dialog--red .dialog__icon { color: #e74c3c; }
.dialog--green .dialog__icon { color: #2ecc71; }
.dialog--blue .dialog__icon { color: #3498db; }
.dialog--orange .dialog__icon { color: #f39c12; }
.dialog .dialog__body {
  line-height: 1.4;
}
/* Above the .processing overlay, which stays up behind a result dialog until it is closed. */
.modal.modal--dialog {
  --bs-modal-zindex: 10000001;
}
.modal-backdrop.modal-backdrop--dialog {
  --bs-backdrop-zindex: 10000000;
}

/**
 * Animation
 */
@keyframes zoomOut {
  0% {
    opacity: 1;
  }
  98% {
    opacity: 0;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(80px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.u-animate-slideup {
  opacity: 0;
  will-change: transform, opacity;
  animation: slideUp 0.35s cubic-bezier(.53,.53,.27,1) forwards;
}
.u-delay-1 { transition-delay: 0.1s; animation-delay: 0.1s }
.u-delay-2 { transition-delay: 0.2s; animation-delay: 0.2s }
.u-delay-3 { transition-delay: 0.3s; animation-delay: 0.3s }
.u-delay-4 { transition-delay: 0.4s; animation-delay: 0.4s }
.u-delay-5 { transition-delay: 0.5s; animation-delay: 0.5s }
.u-delay-6 { transition-delay: 0.6s; animation-delay: 0.6s }
.new {
  position: absolute;
  top: 0;
  left: 0;
  color: red;
  text-shadow: 0 0 4px yellow;
  font-size: 11px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  transform: rotate(-40deg);
  font-weight: 600;
}
.tip {
  opacity: 0;
  height: 0;
  transition: all 0.5s ease;
  position: relative;
  will-change: auto;
}
.tip.is-open {
  will-change: auto;
  animation: dynamicTips 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  border: 1px solid rgba(0, 0, 0, 0.175);
  margin: auto;
  background: rgb(255, 243, 205);
  color: rgb(102, 77, 3);
  font-size: 0.875rem;
  opacity: 0;
  padding: 1rem;
  height: auto !important;
  display: inherit !important;
}
.tip .tip__star {
  transition: all 0.5s ease;
}
.tip__star.is-turned {
  transform: scale(2) rotateZ(175deg);
  margin: -20px 0 0 -20px;
  position: absolute;
}
@keyframes dynamicTips {
  0% {
    height: 0;
    width: 0;
    opacity: 0;
    border-radius: 40px;
    margin-bottom: 0;
    text-align: center;
  }
  60% {
    opacity: 0.8;
    height: auto;
    width: 50px;
    border-radius: 40px;
    text-align: center;
  }
  100% {
    width: 100%;
    opacity: 1;
    border-radius: 0.5rem;
    margin-bottom: 16px;
    text-align: left;
  }
}
.island {
  animation: dynamicIsland 0.75s ease-in forwards;
  background: black;
  border-radius: 30px;
  box-shadow: 0px 3px 10px rgba(0,0,0,0.5),
              0px 2px 5px rgba(0,0,0,0.2);
  color: #00ff44;
  font-size: 12px;
  left: 50%;
  right: -46%;
  line-height: 1.2;
  max-width: fit-content;
  opacity: 0;
  overflow: hidden;
  padding: 8px 15px;
  position: fixed;
  text-align: center;
  text-overflow: ellipsis;
  top: 60px;
  transform: translate(-50%, 0);
  white-space: break-spaces;
  width: 0;
  will-change: auto;
  z-index: 99999999999999;
  max-height: 55px;
}
@keyframes dynamicIsland {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 90%;
    opacity: 1;
  }
}
.placement {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 1000px 104px;
  position: relative;
  overflow: hidden;
}
@keyframes placeHolderShimmer {
  0%{
    background-position: -468px 0
  }
  100%{
    background-position: 468px 0
  }
}