@-webkit-keyframes loading-bar {
  0%, 20% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes loading-bar {
  0%, 20% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes generic-enter {
  0% {
    opacity: 0%;
  }
  20% {
    opacity: 40%;
  }
  40% {
    opacity: 20%;
  }
  60% {
    opacity: 80%;
  }
  80% {
    opacity: 60%;
  }
  100% {
    opacity: 100%;
  }
}
@keyframes generic-enter {
  0% {
    opacity: 0%;
  }
  20% {
    opacity: 40%;
  }
  40% {
    opacity: 20%;
  }
  60% {
    opacity: 80%;
  }
  80% {
    opacity: 60%;
  }
  100% {
    opacity: 100%;
  }
}
@-webkit-keyframes generic-exit {
  0% {
    opacity: 0%;
  }
  20% {
    opacity: 40%;
  }
  40% {
    opacity: 20%;
  }
  60% {
    opacity: 80%;
  }
  80% {
    opacity: 60%;
  }
  100% {
    opacity: 100%;
  }
}
@keyframes generic-exit {
  0% {
    opacity: 0%;
  }
  20% {
    opacity: 40%;
  }
  40% {
    opacity: 20%;
  }
  60% {
    opacity: 80%;
  }
  80% {
    opacity: 60%;
  }
  100% {
    opacity: 100%;
  }
}
@-webkit-keyframes notification-enter {
  0% {
    opacity: 0%;
    line-height: 0;
    padding: 0 0.5em;
  }
  50% {
    opacity: 0%;
    line-height: 1.2;
    padding: 0.5em 0.5em;
  }
  55% {
    opacity: 40%;
  }
  60% {
    opacity: 20%;
  }
  65% {
    opacity: 80%;
  }
  70% {
    opacity: 60%;
  }
  75% {
    opacity: 100%;
  }
  100% {
    opacity: 100%;
    line-height: 1.2;
    padding: 0.5em 0.5em;
  }
}
@keyframes notification-enter {
  0% {
    opacity: 0%;
    line-height: 0;
    padding: 0 0.5em;
  }
  50% {
    opacity: 0%;
    line-height: 1.2;
    padding: 0.5em 0.5em;
  }
  55% {
    opacity: 40%;
  }
  60% {
    opacity: 20%;
  }
  65% {
    opacity: 80%;
  }
  70% {
    opacity: 60%;
  }
  75% {
    opacity: 100%;
  }
  100% {
    opacity: 100%;
    line-height: 1.2;
    padding: 0.5em 0.5em;
  }
}
@-webkit-keyframes fade-in-delay {
  0%, 50% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}
@keyframes fade-in-delay {
  0%, 50% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}
@-webkit-keyframes blink {
  0%, 50% {
    opacity: 40%;
  }
  51%, 100% {
    opacity: 100%;
  }
}
@keyframes blink {
  0%, 50% {
    opacity: 40%;
  }
  51%, 100% {
    opacity: 100%;
  }
}
@-webkit-keyframes pulse {
  0% {
    opacity: 40%;
  }
  50% {
    opacity: 100%;
  }
  100% {
    opacity: 40%;
  }
}
@keyframes pulse {
  0% {
    opacity: 40%;
  }
  50% {
    opacity: 100%;
  }
  100% {
    opacity: 40%;
  }
}
@-webkit-keyframes text-scroll {
  from {
    left: 0;
  }
  to {
    left: -100%;
  }
}
@keyframes text-scroll {
  from {
    left: 0;
  }
  to {
    left: -100%;
  }
}
@-webkit-keyframes logo {
  0% {
    letter-spacing: 0vh;
    opacity: 100%;
    color: white;
  }
  10% {
    letter-spacing: 2vh;
    opacity: 70%;
  }
  20% {
    letter-spacing: 1.5vh;
    opacity: 90%;
  }
  30% {
    letter-spacing: 0.5vh;
    opacity: 60%;
  }
  40% {
    letter-spacing: 1vh;
    opacity: 100%;
  }
  50% {
    letter-spacing: 1.25vh;
    opacity: 80%;
    color: hsl(56deg, 100%, 50%);
  }
  60% {
    letter-spacing: 2vh;
    opacity: 100%;
  }
  70% {
    letter-spacing: 0.5vh;
    opacity: 30%;
  }
  80% {
    letter-spacing: 1.75vh;
    opacity: 90%;
  }
  90% {
    letter-spacing: 1vh;
    opacity: 70%;
  }
  100% {
    letter-spacing: 0vh;
    opacity: 100%;
    color: white;
  }
}
@keyframes logo {
  0% {
    letter-spacing: 0vh;
    opacity: 100%;
    color: white;
  }
  10% {
    letter-spacing: 2vh;
    opacity: 70%;
  }
  20% {
    letter-spacing: 1.5vh;
    opacity: 90%;
  }
  30% {
    letter-spacing: 0.5vh;
    opacity: 60%;
  }
  40% {
    letter-spacing: 1vh;
    opacity: 100%;
  }
  50% {
    letter-spacing: 1.25vh;
    opacity: 80%;
    color: hsl(56deg, 100%, 50%);
  }
  60% {
    letter-spacing: 2vh;
    opacity: 100%;
  }
  70% {
    letter-spacing: 0.5vh;
    opacity: 30%;
  }
  80% {
    letter-spacing: 1.75vh;
    opacity: 90%;
  }
  90% {
    letter-spacing: 1vh;
    opacity: 70%;
  }
  100% {
    letter-spacing: 0vh;
    opacity: 100%;
    color: white;
  }
}
@-webkit-keyframes bluebox {
  0% {
    transform: translate3d(-40%, -40%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  20% {
    transform: translate3d(-35%, -35%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  50% {
    transform: translate3d(-45%, -45%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  80% {
    transform: translate3d(-35%, -35%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  100% {
    transform: translate3d(-40%, -40%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
}
@keyframes bluebox {
  0% {
    transform: translate3d(-40%, -40%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  20% {
    transform: translate3d(-35%, -35%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  50% {
    transform: translate3d(-45%, -45%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  80% {
    transform: translate3d(-35%, -35%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  100% {
    transform: translate3d(-40%, -40%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
}
@-webkit-keyframes redbox {
  0% {
    transform: translate3d(-30%, -30%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  20% {
    transform: translate3d(-40%, -40%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  50% {
    transform: translate3d(-35%, -35%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  80% {
    transform: translate3d(-25%, -25%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  100% {
    transform: translate3d(-30%, -30%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
}
@keyframes redbox {
  0% {
    transform: translate3d(-30%, -30%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  20% {
    transform: translate3d(-40%, -40%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  50% {
    transform: translate3d(-35%, -35%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  80% {
    transform: translate3d(-25%, -25%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
  100% {
    transform: translate3d(-30%, -30%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  }
}
@-webkit-keyframes scanner {
  0% {
    transform: translate3d(-45%, 1100%, 0);
  }
  20% {
    transform: translate3d(-45%, -700%, 0);
  }
  50% {
    transform: translate3d(-45%, 900%, 0);
  }
  80% {
    transform: translate3d(-45%, -450%, 0);
  }
  100% {
    transform: translate3d(-45%, 1100%, 0);
  }
}
@keyframes scanner {
  0% {
    transform: translate3d(-45%, 1100%, 0);
  }
  20% {
    transform: translate3d(-45%, -700%, 0);
  }
  50% {
    transform: translate3d(-45%, 900%, 0);
  }
  80% {
    transform: translate3d(-45%, -450%, 0);
  }
  100% {
    transform: translate3d(-45%, 1100%, 0);
  }
}
@-webkit-keyframes bg-dots {
  0%, 20%, 80%, 100% {
    background-size: 10vh 10vh;
  }
  35%, 65% {
    background-size: 20vh 20vh;
  }
}
@keyframes bg-dots {
  0%, 20%, 80%, 100% {
    background-size: 10vh 10vh;
  }
  35%, 65% {
    background-size: 20vh 20vh;
  }
}
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsla(340deg, 100%, 50%, 0.1);
  outline: 1px solid hsl(340deg, 100%, 50%);
  outline-offset: -2px;
}

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

html {
  display: flex;
  justify-content: center;
  height: 100vh;
  background-color: hsl(0deg, 0%, 0%);
  visibility: visible;
  opacity: 100;
  overflow: hidden;
}

body {
  aspect-ratio: 16/9;
  margin: 5vh;
  perspective: 2000px;
}

main {
  display: none;
  height: 100%;
  outline: 100vw solid black;
}

h2 {
  font-family: "Rajdhani", sans-serif;
  font-size: 2.8vh;
  background-color: white;
  margin: 0;
  padding: 0 0.5em;
}

button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  color: white;
  border: 1px solid white;
  padding: 0.25vh 2vh;
  font-family: "Rajdhani", sans-serif;
  font-size: 2.8vh;
  cursor: pointer;
  filter: drop-shadow(0 0 24px white);
}
button:hover {
  background-color: hsla(0deg, 0%, 100%, 0.1);
}

.dialog-box {
  -webkit-animation: generic-enter 0.25s forwards;
          animation: generic-enter 0.25s forwards;
  display: none;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 60vh;
  height: 17vh;
  background-color: hsl(0deg, 0%, 0%);
  border: 1px solid hsl(187deg, 100%, 50%);
  z-index: 100;
}
.dialog-box h2 {
  background-color: hsl(187deg, 100%, 50%);
  width: 100%;
}
.dialog-box p {
  font-family: "Rajdhani", sans-serif;
  font-size: 2.2vh;
  color: white;
}

.dialog-box-exit {
  -webkit-animation: generic-exit 0.25s forwards;
          animation: generic-exit 0.25s forwards;
  border: 1px solid hsl(145deg, 70%, 55%);
}
.dialog-box-exit h2 {
  background-color: hsl(145deg, 70%, 55%);
}
.dialog-box-exit .loading-bar-container {
  border: 1px solid hsl(145deg, 70%, 55%);
}
.dialog-box-exit .loading-bar-container div {
  background-color: hsl(145deg, 70%, 55%);
}

.loading-bar-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
  height: 1.5vh;
  padding: 0.2vh;
  border: 1px solid hsl(187deg, 100%, 50%);
}
.loading-bar-container div {
  -webkit-animation: loading-bar 1s forwards;
          animation: loading-bar 1s forwards;
  width: 100%;
  height: 100%;
  background-color: hsl(187deg, 100%, 50%);
}

#title-screen {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: black;
  outline: 1px solid white;
  width: 100%;
  height: 100%;
  perspective: 2000px;
  z-index: 10000;
}
#title-screen h1 {
  -webkit-animation: logo 10s infinite;
          animation: logo 10s infinite;
  font-family: "Rajdhani", sans-serif;
  font-size: 12vh;
  font-weight: 100;
  width: 90%;
  text-align: center;
  color: white;
  transform: translate3d(0%, 0%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  text-shadow: 1vh 1vh 0px hsla(0deg, 0%, 100%, 0.2);
  background-color: hsla(0deg, 0%, 0%, 0.1);
  box-shadow: inset 0 0 5vh black;
  -webkit-backdrop-filter: blur(32px) saturate(800%);
          backdrop-filter: blur(32px) saturate(800%);
  z-index: 10000;
}
#title-screen div {
  position: absolute;
  top: 40%;
  left: 45%;
  width: 90vh;
  height: 60vh;
  pointer-events: none;
}
#title-screen div:nth-child(3) {
  -webkit-animation: redbox 8s infinite, pulse 3s infinite;
          animation: redbox 8s infinite, pulse 3s infinite;
  transform: translate3d(-30%, -30%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  outline: 0.5vh solid hsl(340deg, 100%, 50%);
  filter: drop-shadow(1vh 1vh 0.5vh hsl(340deg, 100%, 50%)) blur(0.2vh);
  box-shadow: inset 0 0 16vh hsla(340deg, 100%, 50%, 0.25);
}
#title-screen div:nth-child(3) div {
  -webkit-animation: scanner 9s infinite;
          animation: scanner 9s infinite;
  position: absolute;
  transform: translate3d(-45%, -45%, 0);
  background-color: hsl(340deg, 100%, 50%);
  opacity: 40%;
  outline: 0.5vh solid hsl(340deg, 100%, 50%);
  width: 100%;
  height: 5%;
}
#title-screen div:nth-child(4) {
  -webkit-animation: bluebox 6s infinite, pulse 4s infinite;
          animation: bluebox 6s infinite, pulse 4s infinite;
  transform: translate3d(-40%, -40%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  outline: 0.5vh solid hsl(187deg, 100%, 50%);
  filter: drop-shadow(1vh 1vh 0.5vh hsl(187deg, 100%, 50%)) blur(0.2vh);
  box-shadow: 0 0 32vh hsla(187deg, 100%, 50%, 0.25);
}
#title-screen div:nth-child(5) {
  -webkit-animation: redbox 10s infinite reverse, pulse 5s infinite;
          animation: redbox 10s infinite reverse, pulse 5s infinite;
  transform: translate3d(-50%, -50%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  outline: 0.5vh solid white;
  filter: drop-shadow(1vh 1vh 0.5vh white) blur(0.2vh);
  box-shadow: 0 0 8vh hsla(0deg, 0%, 100%, 0.25);
}
#title-screen button {
  font-size: 3.4vh;
  padding: 1vh 3vh;
  color: hsl(340deg, 100%, 50%);
  border: 1px solid hsl(340deg, 100%, 50%);
  transform: translate3d(0%, -125%, 0) rotateY(-25deg) rotateX(45deg) rotateZ(10deg);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
          backdrop-filter: blur(32px) saturate(200%);
  z-index: 100000;
  transition-duration: 0.5s;
}
#title-screen button:hover {
  background-color: hsla(340deg, 100%, 50%, 0.1);
  filter: drop-shadow(0 0 24px hsl(340deg, 100%, 50%));
}

#background-grid {
  background-size: 20vh 20vh;
  background-image: linear-gradient(to right, hsl(187deg, 100%, 50%) 0.25vh, transparent 0.25vh), linear-gradient(to bottom, hsl(187deg, 100%, 50%) 0.25vh, transparent 0.25vh), radial-gradient(circle, hsl(187deg, 100%, 50%) 0.33vh, rgba(0, 0, 0, 0) 0.33vh);
  background-position: center;
  opacity: 40%;
  transform: translate3d(-45%, -40%, 0);
  height: 100%;
  width: 100%;
}

#background-dots {
  -webkit-animation: bg-dots 13s infinite;
          animation: bg-dots 13s infinite;
  background-size: 10vh 10vh;
  background-image: radial-gradient(circle, white 0.25vh, rgba(0, 0, 0, 0) 0.25vh);
  background-position: center;
  opacity: 40%;
  transform: translate3d(-45%, -40%, 0);
  height: 100%;
  width: 100%;
}

#debrief-container {
  position: fixed;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: black;
  padding: 0 28vh;
  outline: 1px solid white;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
#debrief-container p {
  -webkit-animation: fade-in-delay 1s forwards;
          animation: fade-in-delay 1s forwards;
  font-family: "Rajdhani", sans-serif;
  font-size: 2.8vh;
  text-align: center;
  color: white;
  margin: 2vh 0;
}
#debrief-container h2 {
  -webkit-animation: fade-in-delay 1s forwards;
          animation: fade-in-delay 1s forwards;
}
#debrief-container button {
  -webkit-animation: fade-in-delay 1s forwards;
          animation: fade-in-delay 1s forwards;
  margin-top: 2vh;
}

#transcript-container {
  display: flex;
  flex-direction: column;
  background-color: black;
  width: 25%;
  height: 100%;
  outline: 1px solid white;
  outline-offset: -1px;
  transform: rotateY(0);
  transform-style: preserve-3d;
  transform-origin: center right;
}
#transcript-container div {
  overflow: auto;
  height: 100%;
}

#text-login-status {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.75vh;
  text-align: center;
  text-transform: uppercase;
  color: hsl(0deg, 0%, 50%);
}

.transcript-admin, .transcript-user {
  -webkit-animation: generic-enter 0.25s forwards;
          animation: generic-enter 0.25s forwards;
  background-color: transparent;
  font-family: "Rajdhani", sans-serif;
  font-size: 2.4vh;
  margin: 2px 0.5em 1em 0.5em;
  padding: 4px 0.5em;
  width: 80%;
}

.transcript-admin {
  border: 1px solid hsl(56deg, 100%, 50%);
  color: hsl(56deg, 100%, 50%);
  filter: drop-shadow(0 0 24px hsl(56deg, 100%, 50%));
  margin-left: auto;
}

.transcript-user {
  border: 1px solid hsl(187deg, 100%, 50%);
  color: hsl(187deg, 100%, 50%);
  filter: drop-shadow(0 0 24px hsl(187deg, 100%, 50%));
}

.name-admin, .name-user {
  -webkit-animation: generic-enter 0.25s forwards;
          animation: generic-enter 0.25s forwards;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.75vh;
  color: white;
  margin: 0 12px;
  filter: drop-shadow(0 0 24px white);
}

.name-admin {
  text-align: right;
}

#btn-open-connection {
  -webkit-animation: 1s blink infinite;
          animation: 1s blink infinite;
  width: 100%;
  margin-top: auto;
}
#btn-open-connection:hover {
  -webkit-animation: none;
          animation: none;
}

.btn-open-connection-disabled {
  -webkit-animation: none !important;
          animation: none !important;
  pointer-events: none;
  opacity: 40%;
}

#desktop-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}

#date {
  font-family: "Share Tech Mono", monospace;
  font-size: 2.6vh;
  margin-top: 2vh;
  margin-bottom: 0.5vh;
  color: white;
  filter: drop-shadow(0 0 24px white);
}

#time {
  font-family: "Share Tech Mono", monospace;
  font-size: 3vh;
  margin: 0;
  margin-bottom: 3vh;
  color: white;
  filter: drop-shadow(0 0 24px white);
}

#metadata-container {
  -webkit-animation: generic-enter 0.25s forwards;
          animation: generic-enter 0.25s forwards;
  display: none;
  flex-direction: column;
  justify-content: center;
  border: 1px solid white;
  height: 60vh;
  width: 60vh;
}

.metadata-container-approve {
  -webkit-animation: generic-exit 0.25s forwards !important;
          animation: generic-exit 0.25s forwards !important;
  border: 1px solid hsl(145deg, 70%, 55%) !important;
}
.metadata-container-approve h2 {
  background-color: hsl(145deg, 70%, 55%);
}

.metadata-container-reject {
  -webkit-animation: generic-exit 0.25s forwards !important;
          animation: generic-exit 0.25s forwards !important;
  border: 1px solid hsl(340deg, 100%, 50%) !important;
}
.metadata-container-reject h2 {
  background-color: hsl(340deg, 100%, 50%);
}

#message-deny {
  color: hsl(340deg, 100%, 50%);
  font-size: 2.8vh;
}

table {
  font-family: "Rajdhani", sans-serif;
  font-size: 2.4vh;
  color: white;
  margin: auto;
}

th, td {
  padding: 0.2vh 1vh;
  line-height: 1.15;
}

tr:hover {
  background-color: hsl(0deg, 0%, 5%);
}

th {
  font-weight: 100;
  text-align: right;
  width: 37.5%;
  color: hsl(0deg, 0%, 50%);
}

.btn-group {
  display: flex;
}

#btn-reject, #btn-approve {
  display: none;
  -webkit-animation: generic-enter 0.25s forwards;
          animation: generic-enter 0.25s forwards;
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
  width: 100%;
  font-family: "Rajdhani", sans-serif;
  font-size: 2.8vh;
  cursor: pointer;
}

#btn-reject {
  border: 1px solid hsl(340deg, 100%, 50%);
  color: hsl(340deg, 100%, 50%);
  filter: drop-shadow(0 0 24px hsl(340deg, 100%, 50%));
}
#btn-reject:hover {
  background-color: hsla(340deg, 100%, 50%, 0.1);
}

#btn-approve {
  border: 1px solid hsl(145deg, 70%, 55%);
  color: hsl(145deg, 70%, 55%);
  filter: drop-shadow(0 0 24px hsl(145deg, 70%, 55%));
}
#btn-approve:hover {
  background-color: hsla(145deg, 70%, 55%, 0.1);
}

.scrolling-text {
  -webkit-animation: text-scroll 25s linear infinite;
          animation: text-scroll 25s linear infinite;
  position: absolute;
  bottom: -1vh;
  width: 200%;
  z-index: -1;
}
.scrolling-text span {
  font-family: "Rajdhani", sans-serif;
  font-size: 2vh;
  color: hsl(0deg, 0%, 50%);
  float: left;
  width: 12.5%;
}

#notifications-container {
  display: flex;
  flex-direction: column;
  background-color: black;
  width: 25%;
  height: 100%;
  outline: 1px solid white;
  outline-offset: -1px;
  transform: rotateY(0);
  transform-style: preserve-3d;
  transform-origin: center left;
}
#notifications-container div {
  overflow: auto;
  height: 100%;
}

.notif-regular, .notif-warning, .notif-danger {
  -webkit-animation: notification-enter 1s forwards;
          animation: notification-enter 1s forwards;
  opacity: 0%;
  line-height: 0;
  padding: 0 0.5em;
  font-family: "Rajdhani", sans-serif;
  font-size: 2.2vh;
  margin: 0;
}

.notif-regular {
  border: 1px solid white;
  color: white;
  filter: drop-shadow(0 0 24px white);
}

.notif-warning {
  border: 1px solid hsl(46deg, 100%, 50%);
  color: hsl(46deg, 100%, 50%);
  filter: drop-shadow(0 0 24px hsl(46deg, 100%, 50%));
}

.notif-danger {
  border: 1px solid hsl(340deg, 100%, 50%);
  color: hsl(340deg, 100%, 50%);
  filter: drop-shadow(0 0 24px hsl(340deg, 100%, 50%));
  font-weight: 600;
}

#rulebook-container {
  position: absolute;
  display: none;
  flex-direction: column;
  background-color: black;
  top: 0%;
  left: 75%;
  width: 25%;
  height: 100%;
  outline: 1px solid white;
  outline-offset: -1px;
}
#rulebook-container p {
  font-family: "Rajdhani", sans-serif;
  font-size: 2.2vh;
  color: white;
  margin: 1vh 1vh;
}
#rulebook-container div {
  overflow-y: scroll;
  height: 100%;
}

#switch-tab {
  opacity: 0%;
  pointer-events: none;
}

#toggle-rulebook {
  color: hsl(340deg, 100%, 50%);
  border: 1px solid hsla(340deg, 100%, 50%, 0.1);
}
#toggle-rulebook:hover {
  background-color: hsla(340deg, 100%, 50%, 0.1);
}

#rules-file-naming {
  padding: 0.25em;
}

#rules-metadata {
  display: none;
  padding: 0.25em;
}

#btn-rulebook {
  width: 100%;
  margin-top: auto;
}

#employee-number {
  position: absolute;
  bottom: 0em;
  font-family: "Libre Barcode 128 Text", sans-serif;
  font-size: 5vh;
  text-align: center;
  width: 100%;
  color: hsl(0deg, 0%, 50%);
  z-index: -1;
}

span {
  color: hsl(56deg, 100%, 50%);
}/*# sourceMappingURL=styles.css.map */