:root {
  --col-primary: hsl(209, 80%, 48%);
  --col-primary-s90: hsl(209, 72%, 48%);
  --col-primary-s80: hsl(209, 64%, 48%);
  --col-primary-s70: hsl(209, 56%, 48%);
  --col-primary-s60: hsl(209, 48%, 48%);
  --col-primary-s50: hsl(209, 40%, 48%);
  --col-primary-s40: hsl(209, 32%, 48%);
  --col-primary-s30: hsl(209, 24%, 48%);
  --col-primary-s20: hsl(209, 16%, 48%);
  --col-primary-s10: hsl(209, 8%, 48%);
  --col-primary-s00: hsl(209, 0%, 48%);
  --col-primary-l90: hsl(209, 80%, 43.2%);
  --col-primary-l80: hsl(209, 80%, 38.4%);
  --col-primary-l70: hsl(209, 80%, 33.6%);
  --col-primary-l60: hsl(209, 80%, 28.8%);
  --col-primary-l50: hsl(209, 80%, 24.0%);
  --col-primary-l40: hsl(209, 80%, 19.2%);
  --col-primary-l30: hsl(209, 80%, 14.4%);
  --col-primary-l20: hsl(209, 80%, 9.6%);
  --col-primary-l10: hsl(209, 80%, 4.8%);
  --col-primary-l00: hsl(209, 80%, 0.0%);
  --col-primary-s110: hsl(209, 82%, 48%);
  --col-primary-s120: hsl(209, 84%, 48%);
  --col-primary-s130: hsl(209, 86%, 48%);
  --col-primary-s140: hsl(209, 88%, 48%);
  --col-primary-s150: hsl(209, 90%, 48%);
  --col-primary-s160: hsl(209, 92%, 48%);
  --col-primary-s170: hsl(209, 94%, 48%);
  --col-primary-s180: hsl(209, 96%, 48%);
  --col-primary-s190: hsl(209, 98%, 48%);
  --col-primary-s200: hsl(209,100%, 48%);
  --col-primary-l110: hsl(209, 80%, 53.2%);
  --col-primary-l120: hsl(209, 80%, 58.4%);
  --col-primary-l130: hsl(209, 80%, 63.6%);
  --col-primary-l140: hsl(209, 80%, 68.8%);
  --col-primary-l150: hsl(209, 80%, 74.0%);
  --col-primary-l160: hsl(209, 80%, 79.2%);
  --col-primary-l170: hsl(209, 80%, 84.4%);
  --col-primary-l180: hsl(209, 80%, 89.6%);
  --col-primary-l190: hsl(209, 80%, 94.8%);
  --col-primary-l195: hsl(209, 80%, 97.4%);
  --col-primary-l200: hsl(209, 80%,100.0%);
  --col-secondary: hsl(17, 87%, 56%);
  --col-secondary-s90: hsl(17, 78.3%, 56%);
  --col-secondary-s80: hsl(17, 69.6%, 56%);
  --col-secondary-s70: hsl(17, 60.9%, 56%);
  --col-secondary-s60: hsl(17, 52.2%, 56%);
  --col-secondary-s50: hsl(17, 43.5%, 56%);
  --col-secondary-s40: hsl(17, 34.8%, 56%);
  --col-secondary-s30: hsl(17, 26.1%, 56%);
  --col-secondary-s20: hsl(17, 17.4%, 56%);
  --col-secondary-s10: hsl(17, 8.7%, 56%);
  --col-secondary-s00: hsl(17, 0.0%, 56%);
  --col-secondary-l90: hsl(17, 87%, 50.4%);
  --col-secondary-l80: hsl(17, 87%, 44.8%);
  --col-secondary-l70: hsl(17, 87%, 39.2%);
  --col-secondary-l60: hsl(17, 87%, 33.6%);
  --col-secondary-l50: hsl(17, 87%, 28.0%);
  --col-secondary-l40: hsl(17, 87%, 22.4%);
  --col-secondary-l30: hsl(17, 87%, 16.8%);
  --col-secondary-l20: hsl(17, 87%, 11.2%);
  --col-secondary-l10: hsl(17, 87%, 5.6%);
  --col-secondary-l00: hsl(17, 87%, 0.0%);
  --col-secondary-s110: hsl(17, 88.3%, 56%);
  --col-secondary-s120: hsl(17, 89.6%, 56%);
  --col-secondary-s130: hsl(17, 90.9%, 56%);
  --col-secondary-s140: hsl(17, 92.2%, 56%);
  --col-secondary-s150: hsl(17, 93.5%, 56%);
  --col-secondary-s160: hsl(17, 94.8%, 56%);
  --col-secondary-s170: hsl(17, 96.1%, 56%);
  --col-secondary-s180: hsl(17, 97.4%, 56%);
  --col-secondary-s190: hsl(17, 98.7%, 56%);
  --col-secondary-s200: hsl(17,100.0%, 56%);
  --col-secondary-l110: hsl(17, 87%, 60.4%);
  --col-secondary-l120: hsl(17, 87%, 64.8%);
  --col-secondary-l130: hsl(17, 87%, 69.2%);
  --col-secondary-l140: hsl(17, 87%, 73.6%);
  --col-secondary-l150: hsl(17, 87%, 78.0%);
  --col-secondary-l160: hsl(17, 87%, 82.4%);
  --col-secondary-l170: hsl(17, 87%, 86.8%);
  --col-secondary-l180: hsl(17, 87%, 91.2%);
  --col-secondary-l190: hsl(17, 87%, 95.6%);
  --col-secondary-l195: hsl(17, 87%, 97.8%);
  --col-secondary-l200: hsl(17, 87%,100.0%);
  --negative-bg1: #ef7171;
  --negative-bg2: #d36060;
  --negative-fg: black;
  --negative-disabled-bg: #df9f9f;
  --negative-disabled-fg: #555555;
  --intermediate-bg1: #efaa71;
  --intermediate-bg2: #d39460;
  --intermediate-fg: black;
  --intermediate-disable-bg: #dfbc9f;
  --intermediate-disable-fg: #555555;
  --positive-bg1: #6fd95b;
  --positive-bg2: #6ecf59;
  --positive-fg: black;
  --positive-disable-bg: #aadf9f;
  --positive-disable-fg: #555555;
  --delete-bg1: #ef7171;
  --delete-bg2: #d36060;
  --delete-fg: black;
  --edit-bg1: var(--col-primary-l130);
  --edit-bg2: var(--col-primary-l120);
  --edit-fg: black;
  --close-bg1: #fbfbfb;
  --close-bg2: #efefef;
  --close-fg: black;
  --shared-bg1: rgba(138, 230, 119, 0.8);
  --shared-bg2: rgba(135, 219, 116, 0.8);
  --shared-bg3: rgba(135, 219, 116);
  --shared-fg: black;
  --save-bg1: #65d151;
  --save-bg2: #62c74f;
  --save-fg: black;
  --validate-bg1: #6fd95b;
  --validate-bg2: #6ecf59;
  --validate-fg: black;
  --deny-bg1: #ef7171;
  --deny-bg2: #d36060;
  --deny-fg: black;
  --deny-keep-bg1: #efaa71;
  --deny-keep-bg2: #d39460;
  --deny-keep-fg: black;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12pt;
}

* {
  box-sizing: border-box;
  margin: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

body > .title {
  text-align: center;
  padding: 1em;
}

.template {
  display: none !important;
}

@keyframes spinner-fade {
  15% {
    background-color: transparent;
  }
  45% {
    background-color: var(--col);
  }
  55% {
    background-color: var(--col);
  }
  85% {
    background-color: transparent;
  }
}
@property --a {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}
@property --b {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}
@keyframes spinner-top {
  0% {
    --a: 0%;
    --b: 0%;
  }
  35% {
    --a: 0%;
  }
  65% {
    --b: 100%;
  }
  100% {
    --a: 100%;
    --b: 100%;
  }
}
@keyframes spinner-day-in {
  0% {
    transform: translateY(1em);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
#spinner {
  position: fixed;
  inset: 0;
  background-color: rgba(78, 78, 78, 0.667);
  display: grid;
  visibility: hidden;
  opacity: 0;
  place-items: center;
  transition: visibility, opacity;
  transition-duration: 500ms;
  z-index: 200;
}
#spinner.show {
  visibility: visible;
  opacity: 1;
}
#spinner.show .spinner {
  opacity: 1;
  transform: translateY(0) scale(1);
}
#spinner.show .spinner .day {
  animation-name: spinner-day-in, spinner-fade;
}
#spinner .spinner {
  display: grid;
  border: solid black 2px;
  border-radius: 8px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 2fr 2fr;
  width: max-content;
  background-color: #d7d7d7;
  --col: #f5b6b6;
  opacity: 0;
  transform: translateY(5em) scale(0.5);
  transition: transform, opacity;
  transition-duration: 500ms;
}
#spinner .spinner .top {
  grid-column: 1/4;
  border-bottom: solid black 2px;
  background: #f36868 linear-gradient(120deg, transparent var(--a), var(--col) var(--a), var(--col) var(--b), transparent var(--b));
  animation-name: spinner-top;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  border-radius: 8px 8px 0 0;
}
#spinner .spinner .day {
  margin: 0.4em;
  border: solid black 2px;
  border-radius: 8px;
  height: 2em;
  width: 2em;
  animation: none;
  animation-duration: 0.5s, 1s;
  animation-delay: calc(var(--j) * 100ms + 500ms), calc(var(--i) * 100ms);
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.18, 0.89, 0.21, 1.72), ease;
}

@keyframes notif-timeout {
  0% {
    right: 100%;
  }
  100% {
    right: 0.2em;
  }
}
#notifs {
  z-index: 300;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: max-content;
  margin: auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 1em;
  padding-top: 1em;
  max-width: min(30em, 80%);
}
#notifs .notif {
  --col-bg: #EBF5FF;
  --col-text: #1A56DB;
  --col-border: #93BCFA;
  --col-icon: #77AAFB;
  --icon: url(../images/notif_info.svg);
  border: solid var(--col-border) 2px;
  border-radius: 4px;
  padding: 0.5em 1em 0.6em 2em;
  background-color: var(--col-bg);
  color: var(--col-text);
  position: relative;
  white-space: pre-wrap;
  cursor: pointer;
  --timeout: 5000;
}
#notifs .notif::before {
  content: "";
  background-color: var(--col-icon);
  mask-image: var(--icon);
  -webkit-mask-image: var(--icon);
  mask-size: cover;
  -webkit-mask-size: cover;
  width: 1.2em;
  height: 1.2em;
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translate(-50%, -50%);
}
#notifs .notif::after {
  content: "";
  height: 0.2em;
  position: absolute;
  bottom: 0.1em;
  left: 0.2em;
  right: 0.2em;
  border-radius: 0.1em;
  animation: notif-timeout calc(var(--timeout) * 1ms) forwards linear;
  background: linear-gradient(to right, transparent 0%, var(--col-border) 100%);
}
#notifs .notif.success {
  --col-bg: #F1FAF7;
  --col-text: #05543F;
  --col-border: #33C48D;
  --col-icon: #31C48D;
  --icon: url(../images/notif_success.svg);
}
#notifs .notif.warn {
  --col-bg: #FEFDEB;
  --col-text: #8D4B0F;
  --col-border: #E9B640;
  --col-icon: #E2A109;
  --icon: url(../images/notif_warn.svg);
}
#notifs .notif.error {
  --col-bg: #FDF1F1;
  --col-text: #991B1C;
  --col-border: #E63E3E;
  --col-icon: #E63E3D;
  --icon: url(../images/notif_error.svg);
}

.tooltip {
  position: relative;
}
.tooltip .tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 100;
  max-width: 20em;
  width: max-content;
  padding: 0.4em 0.8em;
  border-radius: 0.4em;
  background-color: var(--col-primary-l10);
  color: var(--col-primary-l190);
  text-align: center;
  transition-property: opacity, visibility;
  transition-duration: 0.2s;
}
.tooltip .tooltip-text::before {
  content: "";
  position: absolute;
  border-width: 0.5em;
  border-style: solid;
  border-color: transparent;
}
.tooltip .tooltip-text.left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0.5em;
}
.tooltip .tooltip-text.left::before {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--col-primary-l10);
}
.tooltip .tooltip-text.right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.5em;
}
.tooltip .tooltip-text.right::before {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--col-primary-l10);
}
.tooltip .tooltip-text.top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.5em;
}
.tooltip .tooltip-text.top::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--col-primary-l10);
}
.tooltip .tooltip-text.bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5em;
}
.tooltip .tooltip-text.bottom::before {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--col-primary-l10);
}
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 425px) {
  :root {
    font-size: 11pt;
  }
}
@media (max-width: 375px) {
  :root {
    font-size: 10pt;
  }
}

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