@import url(https://fonts.googleapis.com/css?family=Lato:400,900|Gentium+Basic:400,900|Inter:100,200,300,400,500,600,700,800,900|Lora:400,700|Poppins|Roboto+Mono);
/**************
** Framework
***************/
html,
body {
  position: relative;
  font-family: var(--fontSerif);
}

a {
  text-decoration: none;
}

json {
  display: none;
}

.pointer {
  cursor: pointer;
}

.hide {
  display: none;
}

.show {
  display: inherit;
}

[hidden] {
  display: none !important;
}

[invisible] {
  visibility: hidden;
}

.form-select:focus {
  border-color: rgba(0, 0, 0, 0);
  outline: 0;
  box-shadow: none;
}

.ellipsis,
[ellipsis] {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/**************************
   autocomplete
 **************************/
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--accent14);
}

/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--accent05);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--accent06);
}

.autocomplete-list {
  position: absolute;
  width: -webkit-fill-available;
  max-height: 23.5em;
  text-align: left;
  box-shadow: 0px 2px 7px 0px #b7b7b7;
  overflow-y: auto;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.autocomplete-list .autocomplete-list-item {
  padding: 0.4em 0.7em;
  border-bottom: 1px solid lightgray;
  background-color: white;
  font-size: 1.1em;
  text-transform: capitalize;
  color: var(--main03);
  cursor: default;
}
.autocomplete-list .autocomplete-list-item:hover, .autocomplete-list .autocomplete-list-item[highlighted] {
  background-color: var(--main05) !important;
  color: white;
}
.autocomplete-list[differentiate] .autocomplete-list-item[staff] {
  background-color: var(--main09);
}
.autocomplete-list[differentiate] .autocomplete-list-item[staff][highlighted] {
  background-color: var(--main11);
}

/**************************
   modal
 **************************/
.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  overflow: auto;
}

.modal-content {
  width: initial !important;
  margin: auto;
  padding: 1.5rem;
  border: 1px solid #888;
  background-color: var(--main10);
}

.close-modal {
  padding-bottom: 0.5em;
  font-size: 1.5em;
  font-weight: bold;
  text-align: right;
  color: var(--main07);
}

.close-modal-wrapper {
  padding-bottom: 0.5em;
}

.close-modal:hover,
.close-modal:focus {
  text-decoration: none;
  color: var(--main02);
  cursor: pointer;
}

/**************************
   autocomplete
 **************************/
.autocomplete-list-item {
  padding: 0.3em;
  border-bottom: 1px solid lightgray;
  background-color: white;
  cursor: default;
}

.autocomplete-list-item:hover {
  background-color: lightgray;
}

/**************************
  general buttons styles
 **************************/
/* buttons bg and text */
.positive-message,
.neutral-message,
.negative-message {
  display: inline-block;
  padding: 0.3em 0.6em;
  border-radius: 3px;
}

[addressed=true],
.positive-button,
.positive-message {
  border: 1px solid var(--positive-text);
  background-color: var(--positive-text) !important;
  color: var(--positive-text);
}

.neutral-button,
.neutral-message {
  border: 1px solid var(--neutral-text);
  background-color: var(--neutral-bg) !important;
  color: var(--neutral-text);
}

.AddressedStatus[addressed=false],
.negative-button,
.negative-message {
  border: 1px solid var(--negative-text);
  background-color: var(--negative-text) !important;
  color: var(--negative-text);
}

button,
[button],
[button-secondary],
[button-round-sm],
[button-round],
[button-round-lg],
[button-round-xl],
[button-success],
[button-danger] {
  display: inline-flex;
  border: 0px solid transparent;
  align-items: center;
  justify-content: center;
  margin-left: 1px;
  padding: 0.45rem 0.7rem;
  border-radius: 4px;
  background-color: var(--accent04);
  font-family: Inter !important;
  font-size: 1rem;
  color: white;
  transition-duration: 0.3s;
  transition-property: transform, color, background-color;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  gap: 0.5rem;
}
button[enabled=false],
[button][enabled=false],
[button-secondary][enabled=false],
[button-round-sm][enabled=false],
[button-round][enabled=false],
[button-round-lg][enabled=false],
[button-round-xl][enabled=false],
[button-success][enabled=false],
[button-danger][enabled=false] {
  background-color: var(--gris06) !important;
  cursor: default;
}
button:not([enabled=false]):hover,
[button]:not([enabled=false]):hover,
[button-secondary]:not([enabled=false]):hover,
[button-round-sm]:not([enabled=false]):hover,
[button-round]:not([enabled=false]):hover,
[button-round-lg]:not([enabled=false]):hover,
[button-round-xl]:not([enabled=false]):hover,
[button-success]:not([enabled=false]):hover,
[button-danger]:not([enabled=false]):hover {
  background-color: var(--accent02);
  transform: translateY(-1.5px);
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
}
button:not([enabled=false]):active,
[button]:not([enabled=false]):active,
[button-secondary]:not([enabled=false]):active,
[button-round-sm]:not([enabled=false]):active,
[button-round]:not([enabled=false]):active,
[button-round-lg]:not([enabled=false]):active,
[button-round-xl]:not([enabled=false]):active,
[button-success]:not([enabled=false]):active,
[button-danger]:not([enabled=false]):active {
  transform: translate(1px, 1px);
  transform: translateY(0);
  box-shadow: inset 1px 1px 3px 1px var(--accent01);
}

[button-secondary] {
  background-color: var(--accent13);
  color: var(--accent03);
}
[button-secondary]:not([enabled=false]):hover {
  background-color: var(--accent06);
  transform: translateY(-1.5px);
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
}

[button-success] {
  background-color: rgb(28, 188, 0) !important;
}

[button-danger] {
  background-color: rgb(179, 1, 1) !important;
}

[button-round-sm] img,
[button-round] img,
[button-round-lg] img,
[button-round-xl] img {
  position: absolute;
}
[button-round-sm]:has(img)::before,
[button-round]:has(img)::before,
[button-round-lg]:has(img)::before,
[button-round-xl]:has(img)::before {
  content: "\f106";
  font-family: bootstrap-icons !important;
  color: rgba(0, 0, 0, 0);
}

[button-round-sm] {
  padding: 0.25rem 0.25rem !important;
  border-radius: 100%;
  font-size: 0.75rem;
  line-height: 0.75rem;
}

[button-round] {
  padding: 0.5rem !important;
  border-radius: 100%;
  font-size: 1rem;
  line-height: 1rem;
}

[button-round-lg] {
  padding: 0.5rem !important;
  border-radius: 100%;
  font-size: 1.25rem;
  line-height: 1.25rem;
}

[button-round-xl] {
  padding: 0.5rem !important;
  border-radius: 100%;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

/******  buttons end ******/
/**************************
sliders
 **************************/
label.toggle {
  display: inline-block;
  position: relative;
  min-width: 3rem;
  max-height: 1.4rem;
  cursor: pointer;
}
label.toggle input {
  width: 0;
  height: 0;
  opacity: 0;
}
label.toggle span.slider {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 5em;
  background-color: #ccc;
  font-size: 0.5em;
  color: white;
  transition: 0.4s;
  transition-property: transform;
  -webkit-transition: 0.4s;
}
label.toggle span.slider::before {
  content: "";
  position: absolute;
  left: 0.17em;
  bottom: 0.125em;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background-color: white;
  font-size: initial !important;
  transition: 0.4s;
  -webkit-transition: 0.4s;
}
label.toggle input:checked + span.slider {
  background-color: var(--main02);
}
label.toggle input:checked + span.slider::before {
  transform: translateX(1.5em);
  -webkit-transform: translateX(1.5em);
  -ms-transform: translateX(1.5em);
}
label.toggle.lock-toggle {
  min-width: 1.5rem;
}
label.toggle.lock-toggle span.slider {
  background-color: var(--success);
  color: white;
}
label.toggle.lock-toggle span.slider::before {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  font-family: bootstrap-icons;
  background-color: transparent;
  content: "\f5ff";
  left: 0.17em;
}
label.toggle.lock-toggle input:checked + span.slider {
  background-color: var(--danger);
}
label.toggle.lock-toggle input:checked + span.slider::before {
  content: "\f47a";
  background-color: transparent;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
}
label.toggle.lock-toggle[size=lg] {
  min-width: 2.4rem;
  font-size: 2.6rem;
  max-height: 2.4rem;
  font-size: 1.5rem !important;
}
label.toggle.lock-toggle[size=lg] span.slider::before {
  font-size: 1.65rem !important;
  left: 0.26rem;
}
label.toggle.lock-toggle:has(input:disabled) {
  cursor: not-allowed;
}
label.toggle.lock-toggle:has(input:disabled) span.slider::before {
  opacity: 0.35;
}

/******  sliders end ******/
/******  built in button spinners ******/
[button-round-sm][spinning] i,
[button-round-lg][spinning] i,
[button-round][spinning] i,
button[spinning] i,
[button][spinning] i {
  display: flex;
}
[button-round-sm][spinning] i::before,
[button-round-lg][spinning] i::before,
[button-round][spinning] i::before,
button[spinning] i::before,
[button][spinning] i::before {
  border-color: white !important;
  border-right-color: transparent !important;
  font-size: 0.625em;
  color: transparent;
}

/******  built in spinners   end ******/
/**************************
spinners
 **************************/
@keyframes spinner-spin {
  to {
    transform: rotate(360deg);
  }
}
spinner {
  width: 1rem;
  height: 1rem;
}

[button-round-sm][spinning] i::before,
[button-round-lg][spinning] i::before,
[button-round][spinning] i::before,
button[spinning] i::before,
[button][spinning] i::before,
spinner {
  display: inline-block;
  border-style: solid;
  border-width: 3px;
  border-right-color: transparent;
  border-radius: 50%;
  animation: 0.75s linear infinite spinner-spin;
  vertical-align: -0.125em;
  -webkit-animation: 0.75s linear infinite spinner-spin;
}

spinner.spinner-small {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-style: solid;
  border-width: 2px;
  border-right-color: transparent;
  border-radius: 50%;
  animation: 0.75s linear infinite spinner-spin;
  vertical-align: -0.125em;
  -webkit-animation: 0.75s linear infinite spinner-spin;
}

[button-round-lg] spinner {
  width: 1.25rem;
  height: 1.25rem;
}

[button-round-xl] spinner {
  width: 1.5rem;
  height: 1.5rem;
}

/******  spinners end ******/
/**************************
  tooltips
 **************************/
div.tooltip[role=tooltip] {
  z-index: 10000;
}
div.tooltip[role=tooltip].show {
  opacity: 1;
}
div.tooltip[role=tooltip] .tooltip-inner {
  background-color: var(--main01);
  font-family: var(--fontSanSerif) !important;
}
div.tooltip[role=tooltip][data-popper-placement^=top] .tooltip-arrow::before {
  border-top-color: var(--main01);
}
div.tooltip[role=tooltip][data-popper-placement^=bottom] .tooltip-arrow::before {
  border-bottom-color: var(--main01);
}
div.tooltip[role=tooltip][data-popper-placement^=left] .tooltip-arrow::before {
  border-left-color: var(--main01);
}
div.tooltip[role=tooltip][data-popper-placement^=right] .tooltip-arrow::before {
  border-right-color: var(--main01);
}

/******  tooltips end ******/
/******  sidebar ******/
.bg-dark.sidebar {
  background-color: var(--main03) !important;
}

/******  sidebar end ******/
/******  user badge ******/
[moved-by] {
  position: relative !important;
}
[moved-by]::before {
  opacity: 0;
  transition: opacity 0.5s;
  background-color: var(--bs-info);
  color: white;
  padding: 0.25rem 0.5rem;
  content: attr(moved-by);
  position: absolute;
  font-size: 0.8rem;
  border-radius: 10px;
  top: -10px;
  left: -10px;
}
[moved-by][show-moved-badge]::before {
  opacity: 1;
}
[moved-by][show-moved-badge]:hover::before {
  opacity: 0.25;
}

/******  carousel ******/
carousel {
  margin: 0.75em;
  max-width: 100%;
  position: relative;
  overflow-x: hidden;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 4em 1fr 4em;
}
carousel .carousel-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
carousel .carousel-slide {
  min-width: 100%;
}
carousel .carousel-next,
carousel .carousel-prev {
  align-items: center;
  justify-content: center;
  display: flex;
  cursor: pointer;
  opacity: 0.5;
  transition: 0.5s;
  font-size: 2em;
}

/******  carousel end ******/
/******  onoff start ******/
onoff::before {
  content: "off";
  font-weight: 700;
  color: #fff;
  padding: 2px 5px;
  border-radius: 5px;
  margin-left: 5px;
  background-color: #d00d0d;
}

onoff[on]::before {
  content: "on";
  background-color: #2e9a2e;
}

/******  onoff end ******/
.bi-padded {
  margin-right: 0.5em;
}

.demo-warning {
  background-color: var(--bs-warning);
  padding: 0.75rem;
  border: 2px dotted gray;
  display: flex;
  justify-content: center;
}
.demo-warning::before {
  content: "Demo:";
  padding-right: 0.25rem;
  font-weight: bold;
}

error,
.error,
.error-message {
  color: var(--danger);
  font-weight: 500;
}

*,
::after,
::before {
  box-sizing: inherit;
}

/* added to design system */
:root {
  --fontSanSerif: "Inter";
  --fontSerif: Lora;
  --fontMonospace: "Courier";
  --relative-starttimestamp-g1: 225;
  --relative-duration-g1: 100;
  --relative-starttimestamp-e1: 0;
  --relative-duration-e1: 100;
  --relative-starttimestamp-a2: 0;
  --relative-duration-a2: 100;
  --relative-starttimestamp-b2: 115;
  --relative-duration-b2: 70;
  --relative-starttimestamp-c2: 225;
  --relative-duration-c2: 100;
  --relative-starttimestamp-d2: 340;
  --relative-duration-d2: 70;
  --relative-starttimestamp-a1: 225;
  --relative-duration-a1: 100;
  --relative-starttimestamp-d1: 340;
  --relative-duration-d1: 70;
}

/***********************
 ** Color Definitions **
 ***********************/
:root {
  /* present */
  --present-text: var(--cyan03);
  /* absent */
  --absentColor: hsla(3, 40%, 75%, .8);
  --absent-text: var(--rojo03);
  /* nurse */
  --nurse-text: var(--amarillo03);
  --nurse-bg: var(--amarillo10);
  /* guidance */
  --guidance-pass-text: var(--indigo03);
  --guidance-pass-bg: var(--indigo10);
  /* roompass */
  --room-pass-bg: var(--cyan10);
  --room-pass-text: var(--cyan05);
  /* office pass */
  --office-pass-text: var(--rojo05);
  --office-pass-bg: var(--rojo10);
  /* wrong room */
  --wrong-room-bg: var(--rojo06);
  --wrong-room-text: var(--blanco);
  /*  */
  --discrepancyColor: gold;
  --discrepancyText: var(--blanco);
  --dismissedText: var(--rojo01);
  --dismissedBG: var(--rojo09);
  /* late pass */
  --late-pass-bg: var(--rosa10);
  --late-pass-text: var(--rosa03);
  /*  */
  --lhgold: #FCB716;
  --warning: #ffc107;
  --danger: #dc3545;
  --success: #198754;
  --main01: hsl(210, 61%, 16%);
  --main02: hsl(210, 61%, 19%);
  --main03: hsl(210, 61%, 27%);
  --main04: hsl(210, 61%, 35%);
  --main05: hsl(210, 61%, 42%);
  --main06: hsl(210, 61%, 50%);
  --main07: hsl(210, 61%, 58%);
  --main08: hsl(210, 61%, 65%);
  --main09: hsl(210, 61%, 73%);
  --main10: hsl(210, 61%, 81%);
  --main11: hsl(210, 62%, 89%);
  --main12: hsl(210, 62%, 95%);
  --main13: hsl(210, 62%, 96.5%);
  --main14: hsl(210, 62%, 98%);
  --accent01: rgb(18, 39, 46);
  --accent02: rgb(25, 55, 64);
  --accent03: rgb(33, 70, 82);
  --accent04: rgb(40, 86, 100);
  --accent05: rgb(47, 102, 119);
  --accent06: rgb(54, 117, 137);
  --accent07: rgb(62, 133, 155);
  --accent08: rgb(69, 149, 173);
  --accent09: rgb(82, 161, 186);
  --accent10: rgb(100, 171, 193);
  --accent11: rgb(118, 181, 201);
  --accent12: rgb(136, 191, 208);
  --accent13: rgb(155, 201, 215);
  --accent14: rgb(173, 211, 222);
  --accent15: rgb(191, 220, 230);
  --accent16: rgb(209, 230, 237);
  --accent17: rgb(228, 240, 244);
  --accent18: rgb(246, 250, 251);
  /*  */
  --cyan01: hsl(184, 91%, 17%);
  --cyan02: hsl(185, 84%, 25%);
  --cyan03: hsl(185, 81%, 29%);
  --cyan04: hsl(184, 77%, 34%);
  --cyan05: hsl(185, 62%, 45%);
  --cyan06: hsl(185, 57%, 50%);
  --cyan07: hsl(184, 65%, 59%);
  --cyan08: hsl(184, 80%, 74%);
  --cyan09: hsl(185, 94%, 91%);
  --cyan10: hsl(186, 100%, 94%);
  /*  */
  --indigo01: hsl(228, 62%, 26%);
  --indigo02: hsl(228, 51%, 36%);
  --indigo03: hsl(228, 49%, 41%);
  --indigo04: hsl(228, 45%, 45%);
  --indigo05: hsl(228, 42%, 51%);
  --indigo06: hsl(228, 50%, 59%);
  --indigo07: hsl(228, 57%, 67%);
  --indigo08: hsl(228, 67%, 76%);
  --indigo09: hsl(228, 78%, 86%);
  --indigo10: hsl(228, 68%, 93%);
  /*  */
  --rosa01: hsl(330, 79%, 20%);
  --rosa02: hsl(330, 74%, 27%);
  --rosa03: hsl(330, 70%, 36%);
  --rosa04: hsl(330, 68%, 40%);
  --rosa05: hsl(330, 63%, 47%);
  --rosa06: hsl(330, 66%, 57%);
  --rosa07: hsl(330, 72%, 65%);
  --rosa08: hsl(330, 77%, 76%);
  --rosa09: hsl(330, 87%, 85%);
  --rosa10: hsl(330, 100%, 94%);
  /*  */
  --rojo01: hsl(0, 92%, 20%);
  --rojo02: hsl(0, 85%, 25%);
  --rojo03: hsl(0, 79%, 32%);
  --rojo04: hsl(0, 72%, 38%);
  --rojo05: hsl(0, 67%, 44%);
  --rojo06: hsl(0, 64%, 55%);
  --rojo07: hsl(0, 71%, 66%);
  --rojo08: hsl(0, 77%, 78%);
  --rojo09: hsl(0, 82%, 89%);
  --rojo10: hsl(0, 100%, 97%);
  /*  */
  --amarillo01: hsl(43, 86%, 17%);
  --amarillo02: hsl(43, 77%, 27%);
  --amarillo03: hsl(43, 72%, 37%);
  --amarillo04: hsl(42, 63%, 48%);
  --amarillo05: hsl(42, 78%, 60%);
  --amarillo06: hsl(43, 89%, 70%);
  --amarillo07: hsl(43, 90%, 76%);
  --amarillo08: hsl(45, 86%, 81%);
  --amarillo09: hsl(45, 90%, 88%);
  --amarillo10: hsl(45, 100%, 96%);
  /*  */
  --verde01: hsl(165, 97%, 15%);
  --verde02: hsl(165, 80%, 23%);
  --verde03: hsl(165, 72%, 28%);
  --verde04: hsl(165, 71%, 34%);
  --verde05: hsl(165, 51%, 49%);
  --verde06: hsl(165, 63%, 41%);
  --verde07: hsl(165, 58%, 62%);
  --verde08: hsl(165, 73%, 74%);
  --verde09: hsl(165, 75%, 87%);
  --verde10: hsl(165, 68%, 96%);
  /*  */
  --negro: hsl(000, 00%, 00%);
  --gris01: hsl(000, 00%, 10%);
  --gris02: hsl(000, 00%, 20%);
  --gris03: hsl(000, 00%, 30%);
  --gris04: hsl(000, 00%, 40%);
  --gris05: hsl(000, 00%, 50%);
  --gris06: hsl(000, 00%, 60%);
  --gris07: hsl(000, 00%, 70%);
  --gris08: hsl(000, 00%, 80%);
  --gris09: hsl(000, 00%, 90%);
  --blanco: hsl(000, 00%, 100%);
  /* Button Colors */
  --positive-bg: var(--verde09);
  --neutral-bg: gray;
  --negative-bg: var(--rojo09);
  --positive-text: var(--verde02);
  --neutral-text: lightgray;
  --negative-text: var(--rojo02);
}

:root {
  --perfectShadow: 0 1px 3px 0 #0006, 0 0px 4px 0 #0003;
}

/*# sourceMappingURL=Lighthouse_framework.css.map */