@charset "UTF-8";
.light {
  /* Primary colors */
  --primary: #d4f0ee;
  --on-primary: #000000;
  --primary-border: #f4f5ff;
  --primary-container: #b5d8e250;
  --on-primary-container: #546e7a;
  /* Secondary colors */
  --secondary: #ffffff;
  --on-secondary: #1153538f;
  --secondary-container: #f7eff2;
  --on-secondary-container: #646464;
  /* Body/Surface color */
  --surface: #fff;
  /* Variation colors*/
  --color1: #9b75e2;
  --color2: #238d8d;
  --color3: #238d8d;
  --opacity: 80;
}

:root {
  /* Primary colors */
  --primary: #212121;
  --on-primary: #B0BEC5;
  --primary-border: #292929;
  --primary-container: #323232;
  --on-primary-container: #FFFFFF;
  /* Secondary colors */
  --secondary: #292929;
  --on-secondary: #b6b6b6;
  --secondary-container: #3F3F3F;
  --on-secondary-container: #FFFFFF;
  /* Body/Surface color */
  --surface: #1A1A1A;
  --on-surface: #009688;
  /* Variation colors*/
  --color1: #5727b0;
  --color2: #238d8d;
  --color3: #238d8d;
  --opacity: 8E;
  /* Error colors */
  --error: #ff5370;
  --on-error: #000000;
  --error-container: #212121;
  --on-error-container: #FFFFFF;
}

.vlue {
  /* Primary colors */
  --primary: #263238;
  --on-primary: #B0BEC5;
  --primary-border: #2A373E;
  --primary-container: #2E3C43;
  --on-primary-container: #FFFFFF;
  /* Secondary colors */
  --secondary: #32424A;
  --on-secondary: #b6b6b6;
  --secondary-container: #425B67;
  --on-secondary-container: #FFFFFF;
  /* Body/Surface color */
  --surface: #1E272C;
  --on-surface: #009688;
  /* Variation colors*/
  --color1: #5727b0;
  --color2: #238d8d;
  --color3: #238d8d;
  --opacity: 9F;
}

body,
* {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

body {
  background-color: var(--surface);
  color: var(--on-primary);
  overflow-x: hidden;
  height: 100vh;
}

.small-screen-warning {
  display: none;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/*-------------------------Media Querry------------------------*/
@media only screen and (max-width: 1230px) {
  .small-screen-warning {
    z-index: 100;
    display: flex;
    background-color: tomato;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
  }
  .content {
    display: none;
  }
  .modal {
    visibility: hidden;
  }
  #context-menu.visible {
    transform: scale(0);
    transition: none;
  }
}
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
  html {
    zoom: 0.8;
  }
}
.topnav {
  z-index: 9;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  height: 50px;
  margin: 5px;
  display: flex;
}
.topnav .install {
  background-color: var(--primary);
  border-radius: 15px;
  padding: 0 16px;
  height: 50px;
  display: none;
  align-items: center;
  margin-left: 5px;
}
.topnav .install a {
  transform: translateY(-2px);
}
.topnav .install:hover {
  background-color: var(--primary);
}
.topnav .menus {
  background-color: var(--primary);
  border-radius: 15px;
  flex-grow: 1;
  height: 50px;
  padding-left: 16px;
  padding-right: 16px;
}
.topnav .menus ul {
  list-style-type: none;
  min-width: 100px;
}
.topnav .menus.ss > ul > li:hover > ul {
  display: block;
}
.topnav .menus > ul {
  display: flex;
  height: inherit;
  width: -moz-fit-content;
  width: fit-content;
}
.topnav .menus > ul > li {
  position: relative;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.topnav .menus > ul > li:hover > a {
  background-color: var(--primary-container);
}
.topnav .menus > ul > li > a {
  color: var(--on-primary-container);
  border-radius: 5px;
}
.topnav .menus > ul > li a {
  text-decoration: none;
  padding: 10px 20px;
  transform: translateY(-1px);
}
.topnav .menus > ul > li ul {
  top: 100%;
  left: 0px;
  display: block;
  position: absolute;
  border: 2px var(--secondary-border) solid;
  background-color: var(--secondary);
  border-radius: 5px;
  display: none;
  min-width: 100px;
  padding: 1px;
  box-shadow: 0 0 0.8em var(--secondary-container);
}
.topnav .menus > ul > li > ul > li {
  padding: 1px;
  position: relative;
}
.topnav .menus > ul > li > ul > li a {
  display: block;
  border-radius: 5px;
  text-align: start;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topnav .menus > ul > li > ul > li a .shortcut {
  font-weight: 100;
  padding: 0px 0px 0px 35px;
  font-size: small;
  right: 0;
  opacity: 0.4;
}
.topnav .menus > ul > li > ul > li .checked:after {
  content: "☑";
  position: absolute;
  top: 0px;
  right: 10px;
  transform: translateY(45%);
}
.topnav .menus > ul > li > ul > li .unchecked:after {
  content: "☐";
  position: absolute;
  top: 0px;
  right: 10px;
  transform: translateY(45%);
}
.topnav .menus > ul > li > ul > li .selected:after {
  content: "●";
  position: absolute;
  top: 0px;
  right: 10px;
  transform: translateY(45%);
}
.topnav .menus > ul > li > ul > li .disabled > a {
  opacity: 0.4;
}
.topnav .menus > ul > li > ul > li .disabled > a .shortcut {
  opacity: 1;
}
.topnav .menus > ul > li > ul li:has(ul)::after {
  content: "▶";
  position: absolute;
  right: 10px;
  top: 20%;
  transform: translateY(50%);
  font-size: 10px;
}
.topnav .menus > ul > li > ul li:hover {
  border: 2px;
}
.topnav .menus > ul > li > ul li:hover > a {
  background-color: var(--primary-container);
}
.topnav .menus > ul > li > ul li:hover > ul {
  display: block;
}
.topnav .menus > ul > li > ul li > ul {
  position: absolute;
  left: 100%;
  display: none;
  transform: translateY(-2px);
  top: 0;
}
.topnav .menus > ul > li > ul li > ul > li {
  position: relative;
  width: auto;
}

.day-wrapper {
  z-index: 1;
  margin-top: 30px;
  margin-left: 15px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.day-wrapper .event-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.day-wrapper .event-list .dayCard {
  padding: 17px 7px;
  margin: 4px;
  height: -moz-min-content;
  height: min-content;
  border-radius: 12px;
  background-color: var(--color1);
}
.day-wrapper .event-list .subcard-holder {
  position: absolute;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  width: 115%;
  margin-left: 100px;
}
.day-wrapper .event-list .subcard-holder .subCard {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: inherit;
  border-radius: 25px;
  background-color: rgb(116, 79, 93);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}
.day-wrapper .event-list .subcard-holder .subCard[type="1"] {
  border-top-right-radius: 5px;
}
.day-wrapper .event-list .subcard-holder .subCard[type="1"] .badge {
  position: absolute;
  background-color: var(--color1);
  top: 0;
  right: 0;
  text-align: center;
  padding: 4px 8px;
  border-radius: 5px;
}
.day-wrapper .event-list .subcard-holder .subCard[type="2"] {
  border-top-right-radius: 5px;
}
.day-wrapper .event-list .subcard-holder .subCard[type="2"] .badge {
  position: absolute;
  background-color: var(--color1);
  top: 0;
  right: 0;
  text-align: center;
  padding: 4px 8px;
  border-radius: 5px;
}
.day-wrapper .event-list .subcard-holder .caret::after {
  z-index: 2;
  position: absolute;
  left: -2.7px;
  content: "";
  width: 2px;
  height: inherit;
  background-color: var(--color3);
}
.day-wrapper .event-list .subcard-holder .caret::before {
  z-index: 2;
  position: absolute;
  left: -5.6px;
  bottom: 0;
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color3);
}
.day-wrapper .event-list .subcard-holder .badge {
  transform: translate(-2px, 2px);
}
.day-wrapper .event-list .subcard-holder .active {
  border: 2px solid var(--color2);
}
.day-wrapper .event-list .subcard-holder .active .badge {
  transform: translate(0px, 0px);
}
.day-wrapper .event-list .subcard-holder .plus {
  background-color: var(--secondary);
  font-size: 33px;
  align-items: normal;
  cursor: pointer;
}
.day-wrapper .event-list .subcard-holder .plus:hover {
  background-color: var(--secondary-container);
}

.schedule-timeline-group {
  overflow-x: hidden;
  padding-left: 32px;
  display: flex;
  flex: 80%;
}
.schedule-timeline-group .schedule-timeline {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  position: relative;
  justify-content: flex-start;
  min-width: 100px;
  width: 150px;
}
.schedule-timeline-group .schedule-timeline .circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin-bottom: 10px;
  transform: translate(-43%, 20px);
}
.schedule-timeline-group .schedule-timeline span {
  align-self: flex-start;
  position: relative;
  transform: translateX(calc(-50% - 10px));
}
.schedule-timeline-group .schedule-timeline::after {
  content: "";
  position: absolute;
  top: 30px;
  height: calc(100% - 30px);
  width: 1px;
  background-color: #ccc;
}

.fade-group {
  position: absolute;
  background-image: linear-gradient(to right, var(--primary), rgba(255, 255, 255, 0));
  transform: translate(115px, 0%);
  height: 328px;
  width: 20px;
  z-index: 1;
}

.main {
  display: flex;
  border-radius: 15px;
  margin: 0px 5px 5px 5px;
  background-color: var(--primary);
  padding: 5px;
}

.dropdown {
  min-width: 15em;
  position: relative;
}

.dropdown * {
  box-sizing: border-box;
}

.select {
  background: var(--secondary);
  color: var(--on-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px #2a2f3b solid;
  border-radius: 0.5em;
  padding: 1em;
  margin: 5px;
  cursor: pointer;
  transition: background 0.2s;
}
.select span:first-child {
  color: var(--on-secondary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.select .e {
  display: flex;
  align-items: center;
}
.select .e span {
  color: var(--on-secondary-container);
  margin-right: 12px;
}
.select .e .caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #ffffff;
  transition: 0.3s;
}
.select .e .caret-rotate {
  transform: rotate(180deg);
}
.select:hover {
  background-color: var(--secondary-container);
}

.select-clicked {
  border: 2px var(--on-secondary-container-border, #323741) solid;
  box-shadow: 0 0 0.8em var(--secondary-container);
  background-color: var(--secondary-container);
}

.menu {
  list-style: none;
  padding: 0.2em 0.5em;
  background-color: var(--secondary-container);
  border: 1px var(--secondary-container-border, #363a43) solid;
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
  color: var(--on-secondary-container);
  position: absolute;
  top: 3em;
  right: 0%;
  opacity: 0;
  display: none;
  z-index: 1;
}
.menu li {
  padding: 0.7em 0.5em;
  margin: 0.3em 0;
  border-radius: 0.5em;
  cursor: pointer;
}
.menu li:hover {
  background-color: var(--primary-container);
}

.active {
  background: var(--primary-container);
}

.menu-open {
  display: block;
  opacity: 1;
}

.cl-box {
  background: var(--secondary);
  color: var(--on-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px #2a2f3b solid;
  border-radius: 0.5em;
  padding: 1em;
  margin: 5px;
}
.cl-box span:first-child {
  color: var(--on-secondary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.cl-box .k {
  display: flex;
  align-items: center;
  height: 21px;
}
.cl-box .k input {
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
  border-radius: 5px;
  margin-right: 10px;
  height: 32px;
  border: 1px solid var(--secondary-container);
}
.cl-box .k input:focus {
  box-shadow: 0 0 0.8em var(--secondary-container);
}
.cl-box .k input:focus {
  outline: 0;
}
.cl-box .k input::-webkit-inner-spin-button, .cl-box .k input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cl-box .k .counter-btn {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.cl-box .k .counter-btn .btn {
  height: 20px;
  width: 20px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: end;
}
.cl-box .k .counter-btn .btn:hover {
  background-color: var(--secondary-container);
  transition: background 0.2s;
  border-radius: 5px;
}

.classDetails {
  background: var(--secondary);
  color: var(--on-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px #2a2f3b solid;
  border-radius: 0.5em;
  padding: 1em;
  margin: 5px;
  flex-direction: column;
  align-items: flex-start;
}
.classDetails span:first-child {
  color: var(--on-secondary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.classDetails .inner-stack {
  display: flex;
}
.classDetails .inner-stack #close-btn {
  display: none;
  position: absolute;
  right: 0px;
  top: 0px;
  transform: translate(40%, -40%);
  background-color: var(--secondary);
  width: 22px;
  height: 22px;
  text-align: center;
  border-radius: 7px;
  border: 1px solid var(--secondary-container, white);
  cursor: pointer;
}
.classDetails .inner-stack #close-btn:hover {
  background-color: var(--error);
}
.classDetails .inner-stack .inner {
  margin: 15px;
  position: relative;
  margin-top: 15px;
  max-width: 500px;
  border-radius: 10px;
  border: 1px solid var(--secondary-container, white);
  padding-left: 15px;
}
.classDetails .inner-stack .inner:hover #close-btn {
  display: block;
}
.classDetails .inner-stack .inner.shadow {
  opacity: 30%;
  transition: ease opacity 0.2s;
}
.classDetails .inner-stack .inner.shadow:hover {
  opacity: 100%;
}
.classDetails .inner-stack .inner.shadow #close-btn {
  display: none;
}
.classDetails .inner-stack .inner.hidden {
  display: none;
}
.classDetails .inner-stack .inner .m {
  display: flex;
  align-items: center;
  margin: 15px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.classDetails .inner-stack .inner .m span {
  width: 104px;
}
.classDetails .inner-stack .inner .m input {
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
  border-radius: 5px;
  margin-right: 10px;
  height: 32px;
  border: 1px solid var(--secondary-container);
  margin-left: 12px;
}
.classDetails .inner-stack .inner .m input:focus {
  box-shadow: 0 0 0.8em var(--secondary-container);
}
.classDetails .inner-stack .inner .m input:focus {
  outline: 0;
}
.classDetails .inner-stack .inner .m input::-webkit-inner-spin-button, .classDetails .inner-stack .inner .m input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.classDetails .inner-stack .inner .class-num {
  position: absolute;
  transform: rotateZ(-90deg) translate(-50%, -40%);
  left: -5%;
  background-color: var(--secondary);
  border: 1px solid var(--secondary-container);
  color: var(--on-secondary-container);
  border-radius: 10px;
  padding: 5px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.property-menu-stack {
  display: flex;
  flex-grow: 1;
}
.property-menu-stack .event-properties {
  padding: 5px;
  border-radius: 15px;
  margin: 0px 5px 5px 5px;
  background-color: var(--primary);
  flex-grow: 1;
}
.property-menu-stack .debug-window {
  width: 25%;
  margin: 0px 5px 5px 0px;
  padding: 5px;
  border-radius: 15px;
  background-color: var(--primary);
}
.property-menu-stack .debug-window .json-view {
  border-radius: 15px;
  background-color: var(--primary-container);
  width: 90%;
  height: 85%;
  margin: auto;
  color: var(--primary-container);
}
.property-menu-stack .debug-window .json-view .heading {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--on-primary-container);
  position: absolute;
  transform: translate(-52%, 130%) rotateZ(-90deg);
}
.property-menu-stack .debug-window .json-view #json-text {
  overflow: hidden;
}
.property-menu-stack .debug-window.hidden {
  display: none;
}

#context-menu {
  position: fixed;
  z-index: 10;
  width: 150px;
  background: var(--secondary);
  border-radius: 5px;
  transform: scale(0);
  transform-origin: top left;
  border: 1px solid white;
  box-shadow: 0 0 0.8em var(--secondary-container);
}
#context-menu.visible {
  transform: scale(1);
  transition: transform 200ms ease-in-out;
}
#context-menu .item {
  padding: 8px 10px;
  font-size: 15px;
  color: var(--on-secondary-container);
  border-radius: inherit;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
#context-menu .item:hover {
  background: var(--secondary-container);
}
#context-menu .item.red:hover {
  background: var(--error);
}
#context-menu .hide {
  display: none;
}
#context-menu .disable {
  color: var(--on-secondary);
}
#context-menu .disable:hover {
  cursor: default;
}

.popupMenu {
  color: var(--on-primary);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 10;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.popupMenu-content {
  position: absolute;
  z-index: 50;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--primary);
  color: var(--on-primary);
  padding: 1rem 1.5rem;
  width: 24rem;
  border-radius: 0.5rem;
  border: 1px solid white;
}
.popupMenu-content .btn-group .button {
  float: right;
  /* width: 1.5rem; */
  padding: 3px 12px;
  margin: 5px;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  background-color: var(--primary-container);
}
.popupMenu-content .btn-group .button:hover {
  background-color: var(--secondary-container);
}
.popupMenu-content .btn-group .disable {
  color: rgb(138, 138, 138);
}
.popupMenu-content .btn-group .disable:hover {
  background-color: var(--primary-container);
  cursor: default;
}
.popupMenu-content:has(.left) {
  width: unset;
}
.popupMenu-content .box-content {
  margin-top: 40px;
  left: 1px;
}
.popupMenu-content .box-content:has(.left) {
  display: flex;
  align-items: center;
}
.popupMenu-content .box-content:has(.left) input {
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
  border-radius: 5px;
  margin-right: 10px;
  height: 32px;
  border: 1px solid var(--secondary-container);
  height: 25px;
}
.popupMenu-content .box-content:has(.left) input:focus {
  box-shadow: 0 0 0.8em var(--secondary-container);
}
.popupMenu-content .box-content:has(.left) input:focus {
  outline: 0;
}
.popupMenu-content .box-content:has(.left) input::-webkit-inner-spin-button, .popupMenu-content .box-content:has(.left) input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.popupMenu-content .box-content:has(.left) .left tr > td {
  padding: 7px 5px;
  text-align: left;
}
.popupMenu-content .box-content:has(.left) .divider {
  height: 210px;
  width: 1px;
  background-color: rgb(126, 122, 122);
  margin: 0px 5px;
}
.popupMenu-content .box-content:has(.left) .right .i {
  width: 200px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin: 5px;
}
.popupMenu-content .box-content:has(.left) .right .i img {
  width: 200px;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  border: 0px;
  transition: transform 0.3s, border-radius 0.3s;
}
.popupMenu-content .box-content:has(.left) .right .i img.zoom {
  position: absolute;
  cursor: zoom-out;
  border-radius: 0px;
  transform: translate(-70%) scale(6);
}
.popupMenu-content .box-content:has(.left) .right .i .block-img {
  position: absolute;
  display: none;
  width: 200px;
  height: 100%;
  border-radius: 10px;
  cursor: zoom-in;
  background-color: rgba(102, 102, 102, 0.397);
}
.popupMenu-content .box-content:has(.left) .right .i .block-img span {
  color: black;
}
.popupMenu-content .box-content:has(.left) .right .i:hover .block-img {
  display: block;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popupMenu-content .btn-group {
  margin-top: 30px;
}

.show-popupMenu {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

#snackbar-container {
  position: fixed;
  right: 25px;
  bottom: 0px;
}

.snackbar {
  position: relative;
  display: flex;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  margin-bottom: 20px;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 16px;
  z-index: 1;
  font-size: 17px;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  animation: fadeout 0.5s;
  height: auto;
}
.snackbar.show {
  visibility: visible;
  animation: fadein 0.5s;
}
.snackbar[type=success] {
  background-color: #4caf50;
}
.snackbar[type=system] {
  background-color: #2896f3;
}
.snackbar[type=warning] {
  background-color: #fbc107;
}
.snackbar[type=error] {
  background-color: #f55153;
}
.snackbar .close-btn {
  width: 25px;
  cursor: pointer;
  opacity: 0.5;
}
.snackbar .close-btn path {
  fill: #fff;
}
.snackbar .close-btn:hover {
  opacity: 1;
}
.snackbar .icon {
  width: 25px;
  height: 25px;
}
.snackbar .icon svg {
  fill: white;
  width: 25px;
  height: 25px;
}
.snackbar .text {
  flex-grow: 1;
  text-align: left;
  margin: 0px 15px;
}
.snackbar .t-progress-bar {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6px;
  width: 100%;
  border-radius: 0 0 0 0.5rem;
  background-color: rgba(255, 255, 255, 0.5);
  animation: progress-bar-animation linear forwards var(--toast-duration, 3000ms);
  transform-origin: left;
}
@keyframes fadein {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes fadeout {
  from {
    opacity: 1;
    transform: translateX(0%);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes progress-bar-animation {
  to {
    transform: scaleX(0);
  }
}
#canvas {
  image-rendering: pixelated;
  z-index: 90;
  scale: 0.93;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}/*# sourceMappingURL=style.css.map */