@import './node_modules/pikaday/css/pikaday.css';
.raised {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: var(--box-shadow);
  background: var(--bg700);
}
@media screen and (max-width: 767px) {
  .raised {
    padding: 1rem;
  }
}

.scrollable {
  max-height: min(600px, 75vh);
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 16px;
}
@media screen and (max-width: 767px) {
  .scrollable {
    max-height: 33vh;
  }
}

.column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.full_wrapper {
  width: 100%;
}

.part_wrapper {
  width: 100%;
  padding: 0 5rem;
}
@media screen and (max-width: 767px) {
  .part_wrapper {
    padding: 0;
  }
}

.half_wrapper {
  width: 50%;
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .half_wrapper {
    width: 75%;
  }
}
@media screen and (max-width: 767px) {
  .half_wrapper {
    width: 100%;
  }
}

.mt-XL {
  margin-top: 3rem;
}

.mt-L {
  margin-top: 2rem;
}

.mt-M {
  margin-top: 1rem;
}

.mt-S {
  margin-top: 0.5rem;
}

.primary {
  color: var(--primary);
}

.secondary {
  color: var(--secondary);
}

.accent {
  color: var(--accent);
}

.grey {
  color: var(--grey300);
}

.fw {
  width: 100%;
}

.zindex1 {
  z-index: 1;
}

.wrap {
  display: flex;
  flex-wrap: wrap;
}

@font-face {
  font-family: "Yaldevi";
  src: url("/fonts/Yaldevi-Bold.woff") format("woff"), url("/fonts/Yaldevi-Bold.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Average Sans";
  src: url("/fonts/AverageSans-Regular.woff") format("woff"), url("/fonts/AverageSans-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*:not(dialog), *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --fontSize: 1.05rem;
  --fontSizeS: calc(var(--fontSize) * 0.85);
  --primary: #D13BC5;
  --secondary: #57D2DB;
  --accent: #0F8;
  --body100: #E6E6E6;
  --body300: #B9B1B1;
  --bg800: #0C101B;
  --bg700: #141926;
  --shadow: #475D90;
  --navBorder: #3E4079;
  --grey300: #AAA;
  --grey500: #666;
  --grey700: #444;
  --SUCCESS: #33BE4A;
  --WARNING: #F63;
  --ERROR: #caff00;
  --box-shadow: 0px 0px 7px 1px var(--shadow);
  --bodyFont: "Average Sans", sans-serif;
  --headingFont: "Yaldevi", sans-serif;
  --transformTransition: transform cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
  --filterTransition: filter cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
  --max-width: 1440px;
  --min-width: 600px;
  --delimiter: linear-gradient(90deg, var(--bg800) 0%, var(--grey500) 20%, var(--grey500) 80%, var(--bg800) 100%);
}

::-webkit-scrollbar {
  width: 0.75rem;
  height: 0.5rem;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  ::-webkit-scrollbar {
    width: 0.5rem;
  }
}

::-webkit-scrollbar-track {
  background: var(--grey700);
}

::-webkit-scrollbar-thumb {
  background: var(--grey500);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

body {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg800);
  color: var(--body100);
  display: flex;
  font-family: var(--bodyFont);
}

h1, h2, h3 {
  font-family: var(--headingFont);
}

h1 {
  font-size: 3rem;
  color: var(--secondary);
  margin-bottom: 2rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  h1 {
    font-size: 1.75rem;
  }
}

h2 {
  font-size: 2.25rem;
  color: var(--primary);
}
@media screen and (max-width: 767px) {
  h2 {
    font-size: 1.5rem;
  }
}

h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
@media screen and (max-width: 767px) {
  h3 {
    font-size: 1.1rem;
    margin-bottom: 0;
  }
}

p {
  font-size: var(--fontSize);
  letter-spacing: 0.2px;
}
p[data-state=hidden] {
  display: none;
}
p.small {
  font-size: var(--fontSizeS);
}
p.italic {
  font-style: italic;
}
p.bold {
  font-weight: bold;
}
p.info {
  color: var(--secondary);
  font-size: var(--fontSizeS);
  font-style: italic;
}
p.error {
  margin: 1rem;
  color: var(--ERROR);
}
p.warning {
  margin: 1rem;
  color: var(--WARNING);
}
p.truncated {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
p.center {
  text-align: center;
}
p.date[data-state=overdue] {
  color: var(--WARNING);
}

button, .button {
  display: inline-block;
  font-size: var(--fontSize);
  padding: 0.5rem 1.5rem;
  color: var(--body100);
  border-radius: 0.5rem;
  border: 1px solid var(--grey500);
  background: var(--bg700);
  font-family: var(--bodyFont);
  margin-top: 1rem;
  cursor: pointer;
}
button.small, .button.small {
  font-size: var(--fontSizeS);
  padding: 6px 12px;
  margin: 0.25rem;
}
button:hover, button:focus-visible, .button:hover, .button:focus-visible {
  color: var(--accent);
}
button[data-state=active], .button[data-state=active] {
  color: var(--accent);
}
button[data-state=inactive], .button[data-state=inactive] {
  color: var(--grey300);
}
button[data-state=inactive]:hover, button[data-state=inactive]:focus-visible, .button[data-state=inactive]:hover, .button[data-state=inactive]:focus-visible {
  color: var(--body100);
}
button[disabled], .button[disabled] {
  color: var(--grey500);
  cursor: not-allowed;
}

li {
  list-style: none;
}
li + li {
  margin-top: 0.5rem;
}

a {
  text-decoration: none;
  color: var(--secondary);
  font-size: var(--fontSize);
}
a.redirect {
  display: block;
  margin-top: 2rem;
  color: var(--grey300);
}
a:hover, a:focus-visible {
  color: var(--accent);
}

i {
  color: var(--shadow);
  font-size: 1.5rem;
  min-width: 30px;
  height: 100%;
  position: relative;
}
i::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 5rem;
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  main {
    padding: 1rem;
  }
}
@media screen and (max-width: 767px) {
  main {
    padding: 1rem;
  }
}

dialog {
  background: transparent;
  border: none;
}
dialog .wrapper {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: var(--box-shadow);
  background: var(--bg700);
  align-items: center;
  width: calc(var(--max-width) / 2);
  max-width: 85vw;
  padding: 0.5rem;
}
@media screen and (max-width: 767px) {
  dialog .wrapper {
    padding: 1rem;
  }
}
dialog .content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 300px;
  overflow-y: auto;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--body100);
}
dialog .content .title {
  font-size: 1.5rem;
  color: var(--secondary);
  margin-bottom: 1rem;
  font-weight: bold;
}
dialog #deleteButton:hover, dialog #deleteButton:focus-visible {
  color: var(--WARNING);
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}
@media screen and (max-width: 767px) {
  dialog {
    text-align: center;
  }
}

.overlay {
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 25;
}
.overlay[data-state=hidden] {
  display: none;
}

#loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  --dim: 5rem;
}
#loader[data-state=hidden] {
  display: none;
}
#loader #spinners {
  display: flex;
  margin-bottom: 2rem;
}
#loader #spinners div {
  border-radius: 50%;
  width: var(--dim);
  height: var(--dim);
  border-top: calc(var(--dim) / 20) solid #44e5ff;
  animation: loader 2.5s linear 0s infinite forwards;
  position: relative;
  margin: 0 2rem;
}
#loader #spinners div::before {
  content: "";
  position: absolute;
  top: 25%;
  right: -10%;
  background: #44e5ff;
  width: calc(var(--dim) / 5);
  height: calc(var(--dim) / 5);
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0px 0px 8px 8px rgba(68, 229, 255, 0.6), 0px 0px 12px 3px rgba(68, 229, 255, 0.4666666667), 0px 0px 15px 1px rgba(68, 229, 255, 0.2666666667);
}
#loader #spinners div:nth-of-type(2) {
  animation-name: loader2;
  border-left: calc(var(--dim) / 20) solid #ff44e8;
  border-top: none;
}
#loader #spinners div:nth-of-type(2)::before {
  top: 90%;
  right: 50%;
  background: #ff44e8;
  box-shadow: 0px 0px 8px 8px rgba(255, 68, 232, 0.6), 0px 0px 12px 3px rgba(255, 68, 232, 0.4666666667), 0px 0px 15px 1px rgba(255, 68, 232, 0.2666666667);
}
#loader #spinners div:nth-of-type(3) {
  animation-name: loader;
  border-top-color: #f3ff44;
}
#loader #spinners div:nth-of-type(3)::before {
  top: 25%;
  right: -10%;
  background: #f3ff44;
  box-shadow: 0px 0px 8px 8px rgba(243, 255, 68, 0.6), 0px 0px 12px 3px rgba(243, 255, 68, 0.4666666667), 0px 0px 15px 1px rgba(243, 255, 68, 0.2666666667);
}
#loader p {
  text-align: center;
  max-width: 90%;
}
#loader p.warning {
  font-size: 1.15rem;
  margin: 0.25rem;
}
#loader #mainText {
  font-size: 1.75rem;
  color: var(--body100);
  margin-bottom: 1rem;
}
#loader button {
  margin-top: 2rem;
}
#loader button[data-state=hidden] {
  display: none;
}
#loader .warning {
  color: var(--WARNING);
}
#loader .warning[data-state=hidden] {
  display: none;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loader2 {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#messageContainer {
  position: fixed;
  top: 2%;
  right: 0%;
  align-items: flex-start;
  min-width: 25%;
  border-radius: 16px 0px 0px 16px;
  transition: var(--transformTransition);
  padding: 1rem;
}
#messageContainer .buttonRow {
  margin-left: auto;
  justify-content: flex-end;
}
#messageContainer[data-state=closed] {
  transform: translateX(200%);
}
#messageContainer p.title {
  margin-bottom: 0.25rem;
  letter-spacing: 0.4px;
  font-size: 1.1rem;
}
#messageContainer p.title[data-state=info] {
  color: var(--SUCCESS);
}
#messageContainer p.title[data-state=warning] {
  color: var(--WARNING);
}
#messageContainer p.title[data-state=error] {
  color: var(--ERROR);
}
#messageContainer #messages {
  max-height: min(600px, 75vh);
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  width: 100%;
  background: transparent;
  padding: 0.5rem;
}
@media screen and (max-width: 767px) {
  #messageContainer #messages {
    max-height: 33vh;
  }
}
#messageContainer .message {
  margin-bottom: 1rem;
}
#messageContainer .message p {
  max-width: 50ch;
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  #messageContainer {
    min-width: 50%;
  }
}
@media screen and (max-width: 767px) {
  #messageContainer {
    min-width: 95%;
  }
}

@keyframes bell-shake {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-20deg);
  }
  40% {
    transform: rotate(20deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
#bellContainer {
  margin-left: auto;
  cursor: pointer;
  position: relative;
}
#bellContainer[data-state=active] i {
  animation: bell-shake 1s ease-in-out 0s 1 forwards;
}
#bellContainer i {
  transform-origin: top center;
  animation: none;
}
#bellContainer:hover i, #bellContainer:focus-visible i {
  color: var(--navBorder);
}
#bellContainer #notifications {
  position: absolute;
  top: 0%;
  left: 30%;
  transform: translate(10%, -50%) scale(0);
  font-weight: bold;
  color: var(--body300);
  background: var(--bg800);
  box-shadow: var(--box-shadow);
  padding: 0.25rem 0.65rem;
  border-radius: 50%;
  font-size: 0.875rem;
  color: var(--SUCCESS);
  transition: var(--transformTransition);
}
#bellContainer[data-state=active] #notifications {
  transform: translate(10%, -50%) scale(1);
}
#bellContainer[data-status=warning] #notifications {
  color: var(--WARNING);
}
#bellContainer[data-status=error] #notifications {
  color: var(--ERROR);
  font-weight: bold;
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  #bellContainer #notifications {
    top: 30%;
  }
}

.switchRow {
  display: flex;
  align-items: center;
  margin: 0.5rem;
}
.switchRow input {
  display: none;
}
.switchRow p {
  margin: 0 0.5rem;
  cursor: pointer;
}
.switchRow p[data-state=faded] {
  color: var(--grey500);
}
.switchRow .switch {
  --dim:1.25rem;
  width: calc(var(--dim) * 2);
  height: calc(var(--dim) / 1.5);
  font-size: 0;
  position: relative;
  margin: 0;
}
.switchRow .switch::after, .switchRow .switch::before {
  content: "";
  position: absolute;
  cursor: pointer;
  transition: 0.3s;
  background-color: var(--grey700);
}
.switchRow .switch[data-type=dual]::after, .switchRow .switch[data-type=dual]::before {
  background-color: var(--accent);
}
.switchRow .switch::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  filter: brightness(0.6);
  border-radius: 50px;
}
.switchRow .switch::after {
  width: var(--dim);
  height: var(--dim);
  left: 0;
  top: 50%;
  border-radius: 50%;
  transform: translate(-10%, -50%);
}
.switchRow .switch[data-state=on]::before {
  background-color: var(--accent);
}
.switchRow .switch[data-state=on]::after {
  transform: translate(120%, -50%);
  background-color: var(--accent);
}
.switchRow .switch.locked::after {
  background-image: url("/img/padlock.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.pikadayTarget {
  cursor: pointer;
}

.pika-single.pikaday-dark {
  background: var(--bg800);
  color: var(--body100);
}
.pika-single.pikaday-dark .pika-prev, .pika-single.pikaday-dark .pika-next {
  filter: invert(1);
  margin: 0;
}
.pika-single.pikaday-dark .pika-label {
  background: var(--bg700);
}
.pika-single.pikaday-dark .pika-button {
  background: var(--bg700);
  color: var(--body300);
}
.pika-single.pikaday-dark .pika-button:hover, .pika-single.pikaday-dark .pika-button:focus-visible {
  color: var(--accent);
}

#primary_header {
  background: var(--bg700);
  z-index: 12;
}
#primary_header a:not(.primary), #primary_header button {
  background: var(--bg700);
  color: var(--body100);
}
#primary_header a:not(.primary)[data-state=active], #primary_header button[data-state=active] {
  color: var(--secondary);
}
#primary_header a:not(.primary) i, #primary_header button i {
  color: inherit;
}
#primary_header[data-type=side] {
  box-shadow: var(--box-shadow);
  flex: 1;
  min-width: 250px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#primary_header[data-type=side]::-webkit-scrollbar {
  width: 0.5rem;
}
#primary_header[data-type=side]::-webkit-scrollbar-track {
  background: var(--bg700);
}
#primary_header[data-type=side]::-webkit-scrollbar-thumb {
  background: var(--grey500);
}
#primary_header[data-type=side]::-webkit-scrollbar-thumb:hover {
  background: var(--grey300);
}
#primary_header[data-type=side] #headerLogo {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 1rem;
  margin-bottom: 1rem;
}
#primary_header[data-type=side] #headerLogo img {
  max-width: 70%;
}
#primary_header[data-type=side] nav {
  width: 100%;
}
#primary_header[data-type=side] nav li {
  margin: 0;
}
#primary_header[data-type=side] nav a, #primary_header[data-type=side] nav .navigation {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  border-top: 1px solid var(--navBorder);
  border-bottom: 1px solid var(--navBorder);
  padding: 1.5rem 1rem 1.5rem 2rem;
  position: relative;
}
#primary_header[data-type=side] nav a i, #primary_header[data-type=side] nav .navigation i {
  margin-right: 1.5rem;
}
#primary_header[data-type=side] nav a:hover, #primary_header[data-type=side] nav a:focus-visible, #primary_header[data-type=side] nav .navigation:hover, #primary_header[data-type=side] nav .navigation:focus-visible {
  color: var(--primary);
}
#primary_header[data-type=side] nav a[data-state=active]::before, #primary_header[data-type=side] nav .navigation[data-state=active]::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0.33rem;
  background: var(--secondary);
  top: 0;
  left: 0;
}
#primary_header[data-type=side] nav #logoutForm button {
  margin: 0;
  border-radius: 0;
}
#primary_header[data-type=side] nav #logoutForm button:hover, #primary_header[data-type=side] nav #logoutForm button:focus-visible {
  color: var(--accent);
}
#primary_header[data-type=side][data-state=closed] {
  min-width: 75px;
}
#primary_header[data-type=side][data-state=closed] a, #primary_header[data-type=side][data-state=closed] .navigation {
  font-size: 0rem;
  justify-content: center;
  padding: 2rem;
}
#primary_header[data-type=side][data-state=closed] a i, #primary_header[data-type=side][data-state=closed] .navigation i {
  margin: 0;
}
#primary_header[data-type=side][data-state=closed] #primary_footer {
  display: none;
}
#primary_header[data-type=side][data-state=closed] #headerLogo {
  padding: 0.5rem;
  margin: 0.5rem 0 2rem;
}
#primary_header[data-type=side][data-state=closed] #headerLogo img {
  max-width: 100%;
}
#primary_header[data-type=side][data-state=closed] #toggleMenu {
  font-size: 0rem;
  justify-content: center;
  margin-bottom: 1rem;
  width: 100%;
}
#primary_header[data-type=side][data-state=closed] #toggleMenu i {
  font-size: 1.25rem;
  transform: rotate(0deg);
  margin: 0;
}
#primary_header[data-type=bottom] {
  position: fixed;
  display: flex;
  bottom: 0;
  max-width: 100%;
  overflow-x: auto;
}
#primary_header[data-type=bottom]::-webkit-scrollbar {
  height: 0.75vh;
}
#primary_header[data-type=bottom] nav {
  min-width: 100vw;
}
#primary_header[data-type=bottom] nav ul {
  display: flex;
}
#primary_header[data-type=bottom] nav ul li {
  margin: 0;
}
#primary_header[data-type=bottom] nav ul a, #primary_header[data-type=bottom] nav ul button {
  font-size: var(--fontSizeS);
  border: 1px solid var(--grey500);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 110px;
  padding: 1.5rem 0.5rem 0.5rem;
  border-radius: 8px 8px 0 0;
}
#primary_header[data-type=bottom] nav ul a:nth-of-type(1), #primary_header[data-type=bottom] nav ul button:nth-of-type(1) {
  border-left: none;
}
#primary_header[data-type=bottom] nav ul a i, #primary_header[data-type=bottom] nav ul button i {
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
}
#primary_header[data-type=bottom] nav ul a[data-state=active], #primary_header[data-type=bottom] nav ul button[data-state=active] {
  border-top-color: var(--secondary);
  border-top-width: 2px;
}
#primary_header[data-type=bottom] #toggleMenu {
  display: none;
}
#primary_header[data-type=bottom] #logoutForm button {
  border-right: none;
  margin: 0;
}

#primary_footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem 0;
}
#primary_footer a:not(.primary) {
  font-weight: bold;
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  #primary_footer {
    margin-bottom: 10rem;
  }
}
@media screen and (max-width: 767px) {
  #primary_footer {
    margin-bottom: 6rem;
  }
}

#main_wrapper {
  flex: 5.5;
}
#main_wrapper[data-state=menu_open] {
  flex: 24;
}

#skip_link {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translate(-50%, -10vh);
  transition: var(--transformTransition);
  z-index: 99;
}
#skip_link:focus-visible {
  transform: translate(-50%, 0);
}

#toggleMenu {
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  font-size: 0.875rem;
  margin: 0 0 0.25rem;
  padding: 0 0.5rem;
  width: 100%;
  color: var(--grey300);
}
#toggleMenu:hover, #toggleMenu:focus-visible {
  color: var(--accent);
}
#toggleMenu i {
  color: inherit;
  transition: var(--transformTransition);
  margin: 3px 0.5rem 0 0.8rem;
  transform: rotate(-180deg);
  font-size: 1rem;
  min-width: unset;
}

#subHeader {
  width: 100%;
  background: var(--bg700);
  box-shadow: var(--box-shadow);
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 10;
}
#subHeader #headerLogo img {
  max-width: 80px;
}
@media screen and (max-width: 767px) {
  #subHeader {
    padding: 0.5rem 1rem;
  }
}

.infoRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 0.5rem 2rem;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
}
.infoRow > :nth-child(2) {
  margin-left: auto;
}
.infoRow + .infoRow.bordered {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--grey500);
}
.infoRow.hoverable:hover, .infoRow.hoverable:focus-visible {
  background: var(--bg800);
}
@media screen and (max-width: 767px) {
  .infoRow {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid var(--grey700);
  }
  .infoRow:last-of-type {
    border-bottom: none;
  }
  .infoRow:nth-of-type(2n) {
    background: rgba(0, 0, 0, 0.1333333333);
  }
}

.infoBlock {
  padding: 0.5rem;
}
.infoBlock p + p {
  margin-top: 0.5rem;
}

.buttonRow {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.buttonRow.nfw {
  width: unset;
}

.eventRow {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.eventRow .buttonRow:nth-of-type(1) {
  justify-content: flex-start;
}
@media screen and (max-width: 767px) {
  .eventRow .buttonRow:nth-of-type(1) {
    justify-content: center;
    margin-bottom: 1rem;
  }
}
.eventRow .buttonRow:nth-of-type(2) {
  justify-content: flex-end;
  align-items: center;
}
.eventRow .buttonRow:nth-of-type(2) p {
  margin-right: 1rem;
  color: var(--grey300);
  font-style: italic;
}
@media screen and (max-width: 767px) {
  .eventRow .buttonRow:nth-of-type(2) {
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .eventRow {
    flex-direction: column;
  }
}

.cardContainer {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 0 1rem;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .cardContainer {
    margin-top: 1rem;
    padding: 1rem;
    gap: 2rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    width: calc(100vw - 2rem);
  }
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: var(--box-shadow);
  background: var(--bg700);
  flex-basis: 450px;
  min-width: max-content;
  position: relative;
}
@media screen and (max-width: 767px) {
  .card {
    padding: 1rem;
  }
}
.card .buttonRow {
  margin-left: auto;
  justify-content: flex-end;
}
.card p {
  max-width: 35ch;
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .card {
    min-width: 45%;
  }
}
@media screen and (max-width: 767px) {
  .card {
    min-width: 100%;
  }
}
.card[data-state=hidden] {
  display: none;
}
.card.notes::before {
  content: attr(data-noteamount);
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: var(--grey700);
  font-size: 1.5rem;
}
.card[data-status=overdue] {
  outline: 3px solid var(--ERROR);
}
.card[data-status=comingup] {
  outline: 3px solid var(--WARNING);
}
.card header {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  position: relative;
}
.card header::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  height: 1px;
  background: var(--delimiter);
  filter: opacity(0.8);
}
.card header .subTitle {
  display: block;
  width: 100%;
}
.card .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0 1rem;
}
.card .content.center {
  align-items: center;
}
.card .content.center .infoRow {
  width: unset;
  align-items: center;
}
.card span.colour {
  height: 100%;
  width: 25%;
  min-width: 50px;
  background: var(--colour);
}
.card p.colour {
  color: var(--colour);
}
.card p.today {
  color: var(--ERROR);
}
.card footer {
  position: relative;
  margin-top: 1rem;
  padding-top: 1rem;
}
.card footer::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 1px;
  background: var(--delimiter);
  filter: opacity(0.8);
}
.card .title {
  font-weight: bold;
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  color: var(--primary);
}
.card .favIcon {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}
@media screen and (max-width: 767px) {
  .card .title, .card .secondary {
    text-align: center;
  }
  .card .subTitle {
    text-align: center;
  }
  .card .content {
    padding: 0 0.5rem;
  }
  .card .favIcon {
    background: var(--bg700);
    border: 1px solid var(--grey700);
    top: -0.9rem;
    left: -0.9rem;
    border-radius: 50%;
    padding: 0.25rem;
  }
  .card .buttonRow {
    justify-content: center;
  }
  .card .buttonRow button, .card .buttonRow .button, .card .buttonRow form {
    min-width: 45%;
    text-align: center;
  }
  .card.notes::before {
    content: none;
  }
}

.deleteButton:not(.inline) {
  padding: 0.5rem 0.75rem;
  margin: 0;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border-radius: 50%;
  font-size: 0.75rem;
}
@media screen and (max-width: 767px) {
  .deleteButton:not(.inline) {
    top: -0.9rem;
    right: -0.9rem;
  }
}
.deleteButton:hover, .deleteButton:focus-visible {
  color: var(--WARNING);
}

.progressBar {
  --br: 4px;
  min-width: 150px;
  min-height: 0.75rem;
  max-height: 0.75rem;
  background-color: rgba(255, 255, 255, 0.0666666667);
  display: block;
  margin: 0.5rem 0;
  border-radius: var(--br);
  --progress: 100%;
  position: relative;
  border: 1px solid var(--grey700);
  flex: 1;
}
.progressBar::before {
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(45deg, var(--primary), var(--secondary), var(--accent));
  border-radius: var(--br);
}
.progressBar::after {
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  width: var(--progress);
  background: var(--bg700);
  border-radius: 0 var(--br) var(--br) 0;
  transition: 0.1s width;
}

form {
  align-items: center;
}
form:not(.simple) {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: var(--box-shadow);
  background: var(--bg700);
}
@media screen and (max-width: 767px) {
  form:not(.simple) {
    padding: 1rem;
  }
}
form.simple {
  display: flex;
  flex-direction: column;
}
form a.redirect {
  margin-top: 1rem;
}
form div[data-state=hidden] {
  display: none;
}

label {
  margin-bottom: 0.25rem;
}

input, textarea, select {
  background: var(--bg800);
  border: none;
  border-bottom: 1px solid var(--grey500);
  border-radius: 4px;
  color: var(--body100);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  max-width: 82vw;
}
input[data-state=invalid], textarea[data-state=invalid], select[data-state=invalid] {
  border-color: var(--WARNING);
}

.selectContainer {
  --rot: 40deg;
  position: relative;
}
.selectContainer::before, .selectContainer::after {
  content: "";
  height: 25%;
  position: absolute;
  width: 2px;
  background-color: var(--body100);
  top: 30%;
  right: 1rem;
  rotate: var(--rot);
  transition: rotate cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
  pointer-events: none;
}
.selectContainer::after {
  rotate: calc(var(--rot) * -1);
  right: calc(1rem + 5px);
}
.selectContainer:focus-within::before {
  rotate: calc(180deg - var(--rot));
}
.selectContainer:focus-within::after {
  rotate: calc(-180deg + var(--rot));
}
.selectContainer select {
  width: 100%;
  appearance: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  box-shadow: 0 0 0 50px var(--bg800) inset !important;
  -webkit-text-fill-color: var(--body100) !important;
}

.formBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 1rem;
}

.formField {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  width: 75%;
}
.formField > * {
  flex: 1;
}
@media screen and (max-width: 767px) {
  .formField {
    width: 90%;
  }
}

.underlined {
  width: 100%;
  margin-bottom: 2rem;
  position: relative;
}
.underlined::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--grey700);
}

.delimiter {
  display: inline-block;
  margin: 2rem 0;
  width: 100%;
  position: relative;
}
.delimiter::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  height: 1px;
  background: var(--delimiter);
  filter: opacity(0.8);
}
.delimiter.small {
  margin: 1rem 0;
}
.delimiter.fifty::before {
  left: 25%;
  width: 50%;
}/*# sourceMappingURL=main.css.map */