/**
 * 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, html.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;
}
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"],
.h4,.h5,.h6,strong,
.btn,
.btn-std,
.btn-big,
.badge,
.fw-bold,
.rx-head span,
.medx-wrapper .drugs-generic,
.medx-wrapper .facility_separator,
.jconfirm-box div.jconfirm-title-c,
.selection .select2-selection__rendered {
  font-family: "SF Text Bold", Arial, Helvetica, sans-serif;
}
.h1,.h2,.h3,
.title,
.subtitle,
.medx-wrapper .year_separator span,
.history-wrapper .year_separator span {
  font-family: "SF Text Heavy", Arial, Helvetica, sans-serif;
  letter-spacing: -0.5px;
}
.processing {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9999999;
  background: rgba(0,0,0,0.35);
  background: radial-gradient(circle, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 85%, rgba(0,0,0,0) 100%);
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  padding: 50px;
}
#loader {
  margin: auto;
  background: transparent;
  border: 4px solid transparent;
  border-top-color: #3498db;
  border-radius: 50%;
  display: block;
  width: 150px;
  height: 150px;
  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, .fw-bolder {
  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, .fw-bold {
  font-weight: 600 !important;
}
.logo {
  text-align: center;
  margin-bottom: 20px;
}
.big-logo {
  text-align: center;
  margin-bottom: 20px;
}
.big-logo img {
  max-width: 85%;
}
.icon-blank {
  font-size: 5em;
  color: purple;
}

/**
 * Forms element
 */
form {
  position: relative;
  z-index: 1;
}
.form-item {
  margin: 1.2em 0;
}
.form-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;
}
#datepicker {
  pointer-events: all !important;
}
.easepick-wrapper {
  z-index: 500 !important;
}
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 > label {
  right: 0;
  transition: all 0.25s ease-in-out;
}
.form-floating > .form-control:focus ~ label {
  right: -15%;
}
.form-floating > label,
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
  background: transparent;
}
input#counter {
  color: #333;
}
input[type="submit"],
.btn-std {
  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: 0.3em;
  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);
}
.btn-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%);
}
a.btn-big {
  font-weight: 600;
  padding: 0.6em 1.8em !important;
}
a.btn {
  font-weight: 600;
  color: #fff;
}
fieldset.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;
}
.select-subtitle .selection .select2-selection {
  background: none;
  border: none;
  display: block;
  outline: none;
  color: #333;
}
.select-subtitle .selection .select2-selection__rendered {
  font-weight: 600;
  color: #333;
  font-size: 1.1rem;
  display: block;
  padding-left: 0;
}
.select2-dropdown {
  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;
}
.select2-results__option--selected {
  background: rgba(117,27,161,1);
  color: #fff;
}
input.code-input {
  text-align: center;
  font-size: 1.5rem;
  color: royalblue;
  font-weight: 600;
}
img.preview {
  background-image: url('../images/picture.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}
button.btn-language {
  border: none;
  padding: 0;
  margin: 0;
  background: none;
  color: #777;
}
.pill-black-outline {
  display: inline-block;
  border: 1px solid #111;
  padding: 2px 10px;
  border-radius: 30px;
  font-size: 0.9rem;
  color: #000;
}
.pill-black-outline span {

}
.upload-desc {
  border: 1px solid #999;
  background: #eee;
  color: blueviolet;
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 5px;
  font-size: 0.8rem;
}
.btn,
.btn-big,
a.badge {
  position: relative;
}
.btn:hover,
.btn-big:hover,
a.badge:hover {
  transition-duration: 0.1s;
}
.btn:after,
.btn-big:after,
a.badge: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;
}
.btn:active:after,
.btn-big:active:after,
a.badge: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;
}
.btn:active,
.btn-big:active,
a.badge:active {
  top: 1px;
}
table.table-borderless tr td {
  background-color: transparent;
}
.i-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;
}
.inside-capsule {
  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;
}
.goback {
  float: left;
  margin: 15px;
  z-index: 10;
  color: blue;
  position: relative;
  z-index: 50;
}
.flex-content {
  display: flex;
}
.inside-capsule-left {
  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;
}
.inside-capsule-right {
  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;
}
.tiny-text {
  display: block;
  line-height: 1;
  font-size: 9px;
  padding-top: 2px;
}
.navbar-float {
  display: none;
}
body.myubat .navbar-float {
  display: initial;
}
.navbar-float.scrolled {
  transform: translateY(80px);
}
.myname {
  position: relative;
  clear: both;
  vertical-align: middle;
  display: table;
  width: 100%;
  border-radius: 4px;
  padding: 3px 5px;
  cursor: pointer;
}
.myname.open,
.myname: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.scrolled .headline-avatar {
  transform: scale(0.75) translateY(-15px);
}
.myname-text {
  line-height: 1.1;
  font-size: 0.9rem;
  color: #333;
  vertical-align: middle;
  display: table-cell;
  width: 100%;
}
.submenu-wrapper {
  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;
}
ul.submenu {
  padding: 5px 2px;
  margin: 0;
  font-size: 0.9rem;
  max-height: 60vh;
  overflow: scroll;
}
ul.submenu li {
  list-style: none;
}
ul.submenu li.divider {
  border-top: 1px solid #ccc;
  padding-top: 5px;
  margin-top: 5px;
}
ul.submenu li a {
  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;
}
ul.submenu li a:hover {
  background-color: rgba(222,189,255,0.8);
}
ul.submenu li a i {
  font-size: 1.3rem;
  display: inline-block;
  vertical-align: middle;
  width: 35px;
  padding: 4px 0;
}
ul.submenu li a span {
  display: block;
  color: #444;
  margin-left: 35px;
}
nav.navbar-menu {
  margin-top: 1em;
  border-top: 1px solid #ccc;
  padding-top: 1em;
}
nav.subnav {
  margin-bottom: 20px;
  border: 1px solid #bbb;
  border-radius: 30px;
  padding: 2px;
  background: rgba(255,255,255,0.5);
}
nav.subnav ul {
  padding: 0;
  margin: 0;
  display: flex;
  gap: 5px;
}
nav.subnav ul li {
  list-style: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  align-self: center;
  overflow: hidden;
}
nav.subnav ul li.active {
  overflow: visible;
}
nav.subnav ul li a {
  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;
}
nav.subnav ul li.active a {
  background: #0d6efd;
  color: #fff;
}
nav.topnav {
  margin-bottom: 20px;
  border: 1px solid #bbb;
  border-bottom: none;
  border-radius: 15px 15px 0 0;
  padding: 2px;
  background: rgba(255,255,255,0.8);
  position: relative;
  box-shadow: 0px -1px 3px rgba(0,0,0,0.1);
}
nav.topnav::after {
  content: "";
  position: absolute;
  border-bottom: 1px solid #bbb;
  bottom: 0;
  left: -20px;
  right: -20px;
  z-index: 1;
}
nav.topnav ul {
  padding: 0;
  margin: 0;
  display: flex;
  gap: 5px;
}
nav.topnav ul li {
  list-style: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  align-self: center;
  overflow: hidden;
}
nav.topnav ul li.active {
  overflow: visible;
}
nav.topnav ul li a {
  color: #0d6efd;
  display: block;
  padding: 0.6em 0.8em;
  width: 100%;
  text-align: center;
  border-radius: 12px 12px 0 0;
  line-height: 1.1;
  height: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: -2px;
}
nav.topnav ul li.active a {
  background: rgb(255,255,255);
  background: linear-gradient(0deg, #9ebd13 0%, #008552 100%);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.btn-group.btn-group-sm button,
.btn-group.btn-group-sm a {
  font-size: 0.8rem !important;
  font-weight: normal;
  line-height: 1.2;
}
.btn-group.btn-group-sm button.active span {
  display: inline !important;
}
nav.dropnav button {
  display: block !important;
  width: 100%;
}
.menu-item {
  padding: 3px 5px;
  margin: 3px 0;
  border-radius: 4px;
}
.menu-item:hover,
.menu-item.active {
  background-color: #fff
}
.menu-item a {
  font-weight: 500;
  color: #333;
  text-decoration: none;
  display: block;
  font-size: 0.95rem
}
.menu-item i {
  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;
}
.menu-item a .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 a {
  color: #666;
}
.services-list {
  margin-top: 1em;
}
.services-list img{
  padding: 5px;
  background: #ffc;
}
.services-list .badge,
.card-appointment .badge {
  white-space: break-spaces;
  text-wrap: balance;
}
.service-info {
  color: #800080;
}
.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%);
}
.card-appointment {
  border: 1px solid #ccc;
  background: #fafafa;
  border-radius: 7px;
  overflow: hidden;
}
.card-left {
  border-right: 1px solid #ccc;
  padding: 15px;
  text-align: center;
}
.card-left img {
  max-width: 100%;
}
.card-right {
  padding: 15px;
}
.vas-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 .badge {
  white-space: normal;
}
.wrapper-gps {

}
.img-gps {
  height: 45vh;
  margin: -4em -1.5em 10px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.title-gps {
  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;
}
.queue-gps {
  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);
}
.confirm-gps {
  margin-top: 20px;
}

.history-row {
  margin-bottom: 5px;
}
.history-icon {
  border-radius: 90px;
  width: 90px;
  max-width: 90px;
  height: 90px;
  background: #ffc;
}
.history-icon img {
  width: 100%;
  height: auto;
  margin-top: 0.73rem;
}
.history-detail {
  background: #fafafa;
  border-radius: 45px;
  padding: 5px 45px;
}

.history-wrapper {
  margin: 50px auto;
  padding: 0 20px;
  position: relative;
}
.history-wrapper .center-line {
  position: absolute;
  height: 100%;
  width: 4px;
  background: #fff;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
}
.history-wrapper .year_separator {
  text-align: center;
  position: relative;
  z-index: 5;
}
.history-wrapper .year_separator span {
  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);
}
.history-wrapper .history-row {
  display: flex;
}
.history-wrapper .row-1 {
  justify-content: flex-start;
}
.history-wrapper .row-2 {
  justify-content: flex-end;
}
.history-wrapper .history-row section {
  background: #fff;
  border-radius: 5px;
  width: calc(50% - 40px);
  padding: 20px;
  position: relative;
}
.history-wrapper .history-row section::before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  background: #fff;
  top: 28px;
  z-index: -1;
  transform: rotate(45deg);
}
.row-1 section::before {
  right: -7px;
}
.row-2 section::before {
  left: -7px;
}
.history-row section .icon,
.center-line .scroll-icon {
  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);
}
.center-line .scroll-icon {
  bottom: 0px;
  left: 50%;
  font-size: 25px;
  transform: translateX(-50%);
}
.row-1 section .icon {
  top: 15px;
  right: -60px;
}
.row-2 section .icon {
  top: 15px;
  left: -60px;
}
.history-row section .details,
.history-row section .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.history-row section .details {
  font-size: 90%;
  color: purple;
}
.history-row section p {
  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;
}
.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-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 i {
  float: right;
  font-size: 1.6rem;
  opacity: 0.65;
}
.box-info span {
  display: block;
  color: #333;
  font-size: 0.9rem;
  line-height: 1.1;
}
.box-info strong {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
}
.nav-action .nav-btn {
  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-btn i {
  font-size: 110%;
  display: block;
  margin-bottom: 4px;
}
.nav-action .nav-btn.success {
  background-color: #157347;
  color: #fff !important;
}
.nav-action .nav-btn.danger {
  background-color: #bb2d3b;
  color: #fff !important;
}

#notification-list li.msg-new {
  border-left: 5px solid green;
}
#notification-list li.msg-read {
  border-left: 5px solid transparent;
}
.notify-date {
  font-size: 90%;
  color: #666;
  padding: 5px 0;
}
.notify-text {
  font-size: 95%;
  line-height: 1.3;
  color: #444;
}
img.thumbnail {
  aspect-ratio: 16/9;
  object-fit: cover;
}

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

.pass-container .strenghtMeter::before {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  transition: 0.5s;
}

.pass-container.weak .strenghtMeter::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));
}

.pass-container.medium .strenghtMeter::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);
}
.pass-container.strong .strenghtMeter::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));
}
.pass-container .strenghtMeter::after {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
  transition: 0.5s;
  font-size: 14px;
}

.rx-wrapper {
  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-header {
  margin: -15px -15px 15px;
}
.rx-header .row {
  border-bottom: 1px solid #ccc;
  background: linear-gradient(0deg, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 100%);
}
.rx-header .rx-head {
  font-size: 90%;
  color: #333;
  padding: 8px 15px;
}
.rx-header .rx-head span {
  font-weight: 600;
  display: block;
  font-size: initial;
}
.rx-header .rx-head + .rx-head {
  border-left: 1px solid #ddd;
}
.rx-rows {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
  margin-bottom: 2px;
}
.rx-rows .rx-generic {
  font-weight: 500;
  letter-spacing: -0.05px;
  padding: 0.5em 0.7em;
  border-bottom: 1px solid #eee;
}
.rx-rows .rx-indication .rx-item + .rx-item {
  border-left: 1px solid #eee;
}
.rx-rows .rx-item {
  padding: 0.5em 0.7em;
  text-align: center;
  font-size: 90%;
  color: #555;
}
.rx-rows .rx-item span {
  display: block;
  color: #000;
  font-weight: 500;
}

.faq-ilustrations {
  position: relative;
}
.faq-ilustrations .mobile.ilust {
  position: absolute;
  top: -50px;
  left: -30px;
  right: 0;
  z-index: -1;
}
.mobile {
  display: block;
  margin: 0 auto;
}
.faq .accordion {
  background-color: transparent;
}
.faq .accordion-item {
  background-color: transparent;
  border-bottom: 1px solid rgba(147,112,216,0.5);
}
.faq .accordion-item .accordion-header {
  background-color: transparent;
  outline: none;
}
.faq .accordion-item .accordion-button {
  font-size: 0.95rem;
  padding: 0.8em 1em;
  box-shadow: none;
  border-radius: 4px;
  margin-top: 3px;
}
.faq .accordion-item .accordion-button.collapsed {
  background-color: transparent;
}
.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;
}
#accordion_search_bar_container {
  position: relative;
}
#accordion_search_bar_container:after {
  content: "\f002";
  font-family: 'Font Awesome 6 Free';
  font-display: swap;
  width: 18px;
  height: 18px;
  position: absolute;
  right: 20px;
  bottom: 12px;
  color: #555;
}
#accordion_search_bar_container #accordion_search_bar {
  display: block;
  margin: 10px auto;
  width: 100%;
  padding: 7px 15px;
  border: 1px solid #ccc;
  border-radius: 25px;
  outline: 0;
}

.button-hold {
  --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%;
}
.button-hold ul {
  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;
}
.button-hold ul li {
  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;
}
.button-hold ul li:not(:first-child) {
  --o: 0;
  position: absolute;
  left: 0;
  right: 0;
}
.button-hold ul li:nth-child(1) {
  opacity: var(--ul-o-1, 1);
}
.button-hold ul li:nth-child(2) {
  --t: 100%;
  opacity: var(--ul-o-2, 0);
}
.button-hold ul li:nth-child(3) {
  --t: 200%;
  opacity: var(--ul-o-3, 0);
}
.button-hold:focus:not(.process):not(.success), .button-hold:hover:not(.process):not(.success) {
  --shadow-y: 8px;
  --shadow-blur: 16px;
}
.button-hold:active:not(.success) {
  --shadow-y: 4px;
  --shadow-blur: 8px;
}
.button-hold.process {
  --ul-y: -100%;
  --ul-o-1: 0;
  --ul-o-2: 1;
  --ul-o-3: 0;
}
.button-hold.success {
  --ul-y: -200%;
  --ul-o-1: 0;
  --ul-o-2: 0;
  --ul-o-3: 1;
}
.button-hold.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;
}
.button-hold.fill:active:not(.success) {
  --scale: .94;
}
.button-hold.fill.process, .button-hold.fill.success {
  --p: 50%;
}
.button-hold.fill.success {
  --p: 0;
  transition: background 0.5s, box-shadow 0.3s, transform 0.3s;
}

.expand-ticket {
  cursor: pointer;
}
.expand-ticket: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-form {
  display: none;
}
.quick-reply {
  margin-bottom: 8px;
}
.quick-reply textarea {
  font-size: 85%;
  color: #000;
  line-height: 1.25;
}
.required {
  color: red;
}

.timelineBody {
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: -15px;
  margin-bottom: -15px;
}
.timelineBody .timeline {
  margin: 0;
  padding: 25px 15px 15px;
  list-style: none;
  position: relative;
  z-index: 2;
}
.timelineBody .timeline:before {
  content: "";
  position: absolute;
  width: 4px;
  background: #fff;
  top: 0;
  right: auto;
  left: 21px;
  height: 100%;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.02);
}
.timelineBody .timeline li {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 20px;
  position: relative;
}
.timelineBody .timeline .timelineDot {
  height: 15px;
  width: 15px;
  background: #fff;
  border-radius: 2rem;
  flex: 0 0 15px;
  margin-right: 20px;
  margin-top: 6px;
  box-shadow: 0 0 8px #56cb5f;
}
.timelineBody .timeline .timelineDot::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 3px;
  height: 9px;
  width: 9px;
  background: #56cb5f;
  border-radius: 50%;
}
.timelineBody .timeline .timelineDate {
  font-size: 0.9rem;
  color: #444;
  flex: 0 0 130px;
  margin-left: 15px;
}
.timelineBody .timeline .timelineWork {
  font-family: inherit;
  font-size: inherit;
  margin-left: 10px;
  flex: 0 0 auto;
}
.timelineBody .timeline .timelineWork small {
  display: block;
  color: crimson;
}
.timelineBody::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}
.timelineBody::-webkit-scrollbar {
  width: 6px;
  background-color: #f5f5f5;
}
.timelineBody::-webkit-scrollbar-thumb {
  background-color: #e91e63;
}
.divider-today {
  text-align: center;
  z-index: 10;
  position: relative;
  color: crimson;
  padding: 10px 5px;
  margin: 10px auto;
}
.divider-today span {
  display: inline-block;
  background: #fff;
  padding: 5px 6px;
  border-radius: 5px;
  line-height: 1;
}
.divider-today:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  border-bottom: 2px dotted crimson;
  left: 0;
  top: 23px;
  z-index: -1;
}
.medx-wrapper {
  margin: 20px auto;
  position: relative;
  padding-left: 20px;
}
.medx-wrapper .medx-row {
  margin-bottom: 8px;
}
.medx-wrapper .medx-icon {
  border-radius: 90px;
  width: 90px;
  max-width: 90px;
  height: 90px;
  background: #ffc;
}
.medx-wrapper .medx-icon img {
  width: 100%;
  height: auto;
  margin-top: 0.73rem;
}
.medx-wrapper .medx-detail {
  background: #fafafa;
  border-radius: 45px;
  padding: 5px 45px;
}
.medx-wrapper .center-line {
  position: absolute;
  height: 100%;
  width: 4px;
  background: #fff;
  top: 20px;
}
.medx-wrapper .year_separator {
  position: relative;
  z-index: 5;
  margin-left: -20px;
}
.medx-wrapper .year_separator span {
  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-wrapper .facility_separator {
  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-wrapper .medx-row {
  display: flex;
  justify-content: flex-start;
  margin-left: 18px;
}
.medx-wrapper .medx-row section {
  background: #fff;
  border-radius: 5px;
  width: 100%;
  padding: 12px 15px;
  position: relative;
}
.medx-wrapper .medx-row section::before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  background: #fff;
  top: 16px;
  z-index: -1;
  transform: rotate(45deg);
  left: -7px;
}
.medx-wrapper .medx-row section .icon,
.medx-wrapper .center-line .scroll-icon {
  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);
}
.medx-wrapper .center-line .scroll-icon {
  bottom: -18px;
  left: 50%;
  font-size: 25px;
  transform: translateX(-50%);
}
.medx-wrapper .medx-row section .icon {
  top: 10px;
  left: -30px;
}
.medx-wrapper .medx-row section .details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 90%;
  color: purple;
  cursor: pointer;
}
.medx-wrapper .medx-row section .drugs-wrapper {
  display: none;
  overflow: visible;
}
.medx-wrapper .medx-row section .drugs {
  line-height: 1.2;
  margin: 8px 0 0 0;
}
.medx-wrapper ul.drugs-items {
  padding: 5px 15px 0;
  margin: 0 -15px 0;
  list-style: none;
  border-top: 1px solid #8162df;
}
.medx-wrapper ul.drugs-items li {
  padding-bottom: 5px;
}
.medx-wrapper ul.drugs-items li + li {
  border-top: 1px dotted #bbb;
  padding-top: 5px;
}
.medx-wrapper .drugs-generic {
  font-size: 0.85rem;
  margin-bottom: 3px;
  font-weight: 600;
}
.medx-wrapper .drugs-dosage {
  color: #555;
  font-size: 0.8rem;
}
.medx-wrapper .drugs-dosage strong {
  color: green;
  font-size: 110%;
}
.medx-wrapper .drugs-status {
  padding-top: 5px;
  color: #444;
  font-size: 80%;
}
.medx-wrapper .drugs-status i {
  width: 24px;
  text-align: center;
  color: #777;
}

/**
 * JQuery Confirm
 */
.jconfirm.jconfirm-white .jconfirm-bg,
.jconfirm.jconfirm-light .jconfirm-bg {
  background-color: rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 1;
}
.jconfirm.jconfirm-material .jconfirm-bg {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background-color: rgba(0,0,0,0.5);
}
.jconfirm.jconfirm-material .jconfirm-box .jconfirm-buttons button {
  font-weight: 600;
  text-shadow: 0 0px 5px black;
}

/**
 * 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);
  }
}
.animate-slideup {
  opacity: 0;
  will-change: transform, opacity;
  animation: slideUp 0.35s cubic-bezier(.53,.53,.27,1) forwards;
}
.delay-1 { transition-delay: 0.1s; animation-delay: 0.1s }
.delay-2 { transition-delay: 0.2s; animation-delay: 0.2s }
.delay-3 { transition-delay: 0.3s; animation-delay: 0.3s }
.delay-4 { transition-delay: 0.4s; animation-delay: 0.4s }
.delay-5 { transition-delay: 0.5s; animation-delay: 0.5s }
.delay-6 { transition-delay: 0.6s; animation-delay: 0.6s }
.delay-7 { transition-delay: 0.7s; animation-delay: 0.7s }
.delay-8 { transition-delay: 0.8s; animation-delay: 0.8s }
.delay-9 { transition-delay: 0.9s; animation-delay: 0.9s }
.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;
}
.tips-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 .fa-star {
  transition: all 0.5s ease;
}
.tips-star {
  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
  }
}

/* Enable automatic transitions */
/* Chrome, Edge, and other browsers that support View Transitions */
@supports (view-transition-name: fade) {
  @view-transition {
    navigation: auto;
  }
}

/* Fallback for Safari / Firefox */
@supports not (view-transition-name: fade) {
  html, body {
    transition: opacity 0.35s ease-out;
  }

  body.fade-out {
    opacity: 0;
  }
}