/* design system v1.5.0 8 */
:root {
  --breakpoint-fullhd: 75rem;
  --breakpoint-widescreen: 64rem;
  --breakpoint-desktop: 49.125rem;
  --breakpoint-tablet: 37.5rem;
  --breakpoint-mobile: 30rem;
  --border-radius-50: 50%;
  --border-radius-8: 0.5rem;
  --border-radius-4: 0.25rem;
  --border-radius-0: 0;
  --color-auxiliary-4: #f5d56c;
  --color-auxiliary-3: #3498db;
  --color-auxiliary-2: #9b59b6;
  --color-auxiliary-1: #39b685;
  --color-danger-700: #451c1c;
  --color-danger-600: #681f1f;
  --color-danger-500: #982020;
  --color-danger-400: #d92929;
  --color-danger-300: #f47171;
  --color-danger-200: #ffafaf;
  --color-danger-100: #ffd5d5;
  --color-danger-50: #ffe7e7;
  --color-alarm-700: #63431b;
  --color-alarm-600: #7d4e14;
  --color-alarm-500: #a25f0e;
  --color-alarm-400: #d47e15;
  --color-alarm-300: #edb065;
  --color-alarm-200: #ffd9a9;
  --color-alarm-100: #ffefd4;
  --color-alarm-50: #fff5ea;
  --color-success-700: #003d18;
  --color-success-600: #00451b;
  --color-success-500: #005a24;
  --color-success-400: #008033;
  --color-success-300: #54b27a;
  --color-success-200: #a8ddbd;
  --color-success-100: #dcf6e6;
  --color-success-50: #f3fff8;
  --color-neutral-900: #000000;
  --color-neutral-800: #191d22;
  --color-neutral-700: #333b46;
  --color-neutral-600: #4d5a6b;
  --color-neutral-500: #67778e;
  --color-neutral-400: #8395ab;
  --color-neutral-350: #9eb0c2;
  --color-neutral-300: #b7c7d5;
  --color-neutral-200: #e0e8ee;
  --color-neutral-150: #eef3f6;
  --color-neutral-100: #f8fafc;
  --color-neutral-50: #ffffff;
  --color-accent-900: #001b29;
  --color-accent-800: #032a3a;
  --color-accent-700: #073b4c;
  --color-accent-600: #0e4f5e;
  --color-accent-500: #15656f;
  --color-accent-400: #1f7d81;
  --color-accent-300: #43999f;
  --color-accent-200: #72b8bd;
  --color-accent-100: #abdadc;
  --color-accent-50: #f0fafa;
  --color-primary-900: #083759;
  --color-primary-800: #08436d;
  --color-primary-700: #094f81;
  --color-primary-600: #0d5c95;
  --color-primary-500: #146aa8;
  --color-primary-400: #207bbc;
  --color-primary-300: #4192cd;
  --color-primary-200: #6daede;
  --color-primary-100: #a4cfee;
  --color-primary-50: #e3f3ff;
  --space-8: 2rem;
  --space-7: 1.75rem;
  --space-6: 1.5rem;
  --space-5: 1.25rem;
  --space-4: 1rem;
  --space-3: 0.75rem;
  --space-2: 0.5rem;
  --space-1: 0.25rem;
  --space-0-5: 0.125rem;
  --space-0-25: 0.0625rem;
  --space-0: 0;
  --line-height-smaller: 1.1;
  --line-height-small: 1.3;
  --line-height-base: 1.5;
  --font-weight-900: 900;
  --font-weight-700: 700;
  --font-weight-500: 500;
  --font-weight-400: 400;
  --font-weight-300: 300;
  --font-weight-100: 100;
  --font-size-10: 0.75rem;
  --font-size-9: 0.875rem;
  --font-size-8: 1rem;
  --font-size-7: 1.125rem;
  --font-size-6: 1.25rem;
  --font-size-5: 1.5rem;
  --font-size-4: 1.75rem;
  --font-size-3: 2.25rem;
  --font-size-2: 2.5rem;
  --font-size-1: 3rem;
  --font-family-mono: "Roboto Mono", monospace;
  --font-family-base: "Roboto", sans-serif;
  --font-size-base: var(--font-size-8);
  --font-weight-light: var(--font-weight-300);
  --font-weight-normal: var(--font-weight-400);
  --font-weight-semibold: var(--font-weight-500);
  --font-weight-bold: var(--font-weight-700);
  --space-px: var(--space-0-25);
  --color-primary: var(--color-primary-400);
  --color-primary-inverse: var(--color-neutral-50);
  --color-accent: var(--color-accent-400);
  --color-accent-inverse: var(--color-neutral-50);
  --color-neutral: var(--color-neutral-500);
  --color-success: var(--color-success-400);
  --color-success-inverse: var(--color-neutral-50);
  --color-alarm: var(--color-alarm-400);
  --color-alarm-inverse: var(--color-neutral-50);
  --color-danger: var(--color-danger-400);
  --color-danger-inverse: var(--color-neutral-50);
  --background-color-base: var(--color-neutral-50);
  --background-color-soft: var(--color-neutral-100);
  --background-color-softer: var(--color-neutral-150);
  --background-color-softest: var(--color-neutral-200);
  --background-color-inverse: var(--color-neutral-900);
  --background-color-inverse-soft: var(--color-neutral-700);
  --background-color-inverse-softer: var(--color-neutral-600);
  --background-color-inverse-softest: var(--color-neutral-500);
  --background-color-primary: var(--color-primary);
  --background-color-primary-soft: var(--color-primary-300);
  --background-color-primary-softer: var(--color-primary-100);
  --background-color-primary-softest: var(--color-primary-50);
  --background-color-primary-strong: var(--color-primary-500);
  --background-color-primary-stronger: var(--color-primary-700);
  --background-color-primary-strongest: var(--color-primary-900);
  --background-color-success: var(--color-success);
  --background-color-success-soft: var(--color-success-300);
  --background-color-success-softer: var(--color-success-100);
  --background-color-success-softest: var(--color-success-50);
  --background-color-alarm: var(--color-alarm);
  --background-color-alarm-soft: var(--color-alarm-300);
  --background-color-alarm-softer: var(--color-alarm-100);
  --background-color-alarm-softest: var(--color-alarm-50);
  --background-color-danger: var(--color-danger);
  --background-color-danger-soft: var(--color-danger-300);
  --background-color-danger-softer: var(--color-danger-100);
  --background-color-danger-softest: var(--color-danger-50);
  --background-color-button-primary: var(--color-primary);
  --background-color-button-primary-hover: var(--color-primary-300);
  --background-color-button-primary-active: var(--color-primary-600);
  --background-color-button-secondary: var(--color-neutral-50);
  --background-color-button-secondary-hover: var(--color-primary-50);
  --background-color-button-secondary-active: var(--color-primary-50);
  --background-color-button-accent: var(--color-accent);
  --background-color-button-accent-hover: var(--color-accent-300);
  --background-color-button-accent-active: var(--color-accent-600);
  --background-color-button-success: var(--color-success);
  --background-color-button-success-hover: var(--color-success-300);
  --background-color-button-success-active: var(--color-success-600);
  --background-color-button-alarm: var(--color-alarm);
  --background-color-button-alarm-hover: var(--color-alarm-300);
  --background-color-button-alarm-active: var(--color-alarm-600);
  --background-color-button-danger: var(--color-danger);
  --background-color-button-danger-hover: var(--color-danger-300);
  --background-color-button-danger-active: var(--color-danger-600);
  --background-color-button-disabled: var(--color-neutral-400);
  --background-color-input-disabled: var(--color-neutral-200);
  --background-color-input-hover: var(--color-neutral-100);
  --background-color-list-item: var(--background-color-base);
  --background-color-list-item-active: var(--background-color-primary-softest);
  --background-color-researcher-navbar: var(--color-accent);
  --background-color-participant-navbar: var(--color-primary);
  --background-color-menu: var(--color-primary-900);
  --background-color-menu-header: var(--color-accent-800);
  --background-color-menu-item-active: var(--color-primary);
  --background-color-account-menu: var(--color-primary-900);
  --text-color-base: var(--color-neutral-800);
  --text-color-soft: var(--color-neutral-600);
  --text-color-softer: var(--color-neutral-500);
  --text-color-softest: var(--color-neutral-400);
  --text-color-inverse: var(--color-neutral-50);
  --text-color-disabled: var(--color-neutral-400);
  --text-color-primary-soft: var(--color-primary-300);
  --text-color-primary: var(--color-primary);
  --text-color-primary-strong: var(--color-primary-500);
  --text-color-primary-stronger: var(--color-primary-700);
  --text-color-primary-strongest: var(--color-primary-900);
  --text-color-accent: var(--color-accent);
  --text-color-success: var(--color-success);
  --text-color-alarm: var(--color-alarm);
  --text-color-danger: var(--color-danger);
  --text-color-button-primary: var(--color-primary-inverse);
  --text-color-button-secondary: var(--text-color-soft);
  --text-color-button-secondary-hover: var(--text-color-primary);
  --text-color-button-secondary-active: var(--text-color-primary-strong);
  --text-color-button-accent: var(--color-accent-inverse);
  --text-color-button-success: var(--color-success-inverse);
  --text-color-button-alarm: var(--color-alarm-inverse);
  --text-color-button-danger: var(--color-danger-inverse);
  --text-color-link: var(--color-primary);
  --text-color-link-hover: var(--color-primary-500);
  --text-color-link-active: var(--color-primary-600);
  --text-color-input-disabled: var(--text-color-disabled);
  --text-color-input-placeholder: var(--color-neutral-500);
  --text-color-menu: var(--text-color-inverse);
  --border-color-base: var(--color-neutral-350);
  --border-color-soft: var(--color-neutral-300);
  --border-color-softer: var(--color-neutral-200);
  --border-color-softest: var(--color-neutral-150);
  --border-color-primary: var(--color-primary);
  --border-color-primary-soft: var(--color-primary-300);
  --border-color-primary-softer: var(--color-primary-200);
  --border-color-primary-softest: var(--color-primary-100);
  --border-color-primary-strong: var(--color-primary-500);
  --border-color-inverse: var(--color-neutral-50);
  --border-color-success: var(--color-success);
  --border-color-success-soft: var(--color-success-200);
  --border-color-alarm: var(--color-alarm);
  --border-color-alarm-soft: var(--color-alarm-200);
  --border-color-danger: var(--color-danger);
  --border-color-danger-soft: var(--color-danger-200);
  --border-color-button-primary: var(--color-primary);
  --border-color-button-secondary: var(--color-neutral-300);
  --border-color-button-secondary-hover: var(--border-color-primary);
  --border-color-button-secondary-active: var(--border-color-primary-strong);
  --border-color-input: var(--color-neutral-300);
  --border-color-input-hover: var(--color-neutral-400);
  --border-color-input-active: var(--color-neutral-500);
  --border-color-input-disabled: var(--color-neutral-300);
  --border-color-separator: var(--border-color-softer);
  --border-color-list-item: var(--border-color-softer);
  --border-color-list-item-active: var(--border-color-primary-softest);
  --border-color-list-header: var(--border-color-soft);
}

.title {
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 150%;
  text-align: center;
  padding: 24px;
}

.input-label {
  text-align: left;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #191D22;
  padding: 4px 0px 4px 0px;
}

.login-button {
  margin-top: 24px!important;
}

.form-separator{
    border-bottom: 1px solid #e4e5e7;
    height: 12px;
    text-align: center;
    margin-bottom: 24px;
}

.form-separator span {
    background: var(--color-primary-inverse);
    color: var(--color-neutral-500);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    padding: 0 8px;
    text-transform: uppercase;
}

.links1 {
  margin-top: 20px;
}
.links2 {
  margin-top: 8px;
}
.image-container {
  line-height: 0;
}

.field:not(:last-child) {
  margin-bottom: 15px;
}

.el-button.el-button--block {
  display: block;
  width: 100%;
}

.input-wrap {
  position: relative;
  line-height: 1;
}

.icon {
  width: 20px;
}

.login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 24px;
}

.form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  min-width: 280px;
}

@media print, screen and (min-width: 769px) {
  .form {
    min-width: 400px;
  }
}

body,
figure,
html,
iframe,
textarea {
  margin: 0;
  padding: 0;
}

button,
input,
textarea {
  margin: 0;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

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

iframe {
  border: 0;
}

html {
  background-color: var(--background-color-base);
  font-size: 14px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  min-width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  text-rendering: optimizeLegibility;
}

figure,
section {
  display: block;
}

body,
button,
input,
textarea {
  font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial,
    sans-serif;
}

body {
  color: var(--text-color-base);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

a {
  color: var(--text-color-link);
  cursor: pointer;
  text-decoration: none;
}

a:hover {
  color: var(--text-color-link-hover);
}

a:active {
  color: var(--text-color-link-active);
}

span {
  font-style: inherit;
  font-weight: inherit;
}

.el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: var(--background-color-button-secondary);
  border: 1px solid var(--border-color-button-secondary);
  color: var(--text-color-button-secondary);
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}

.el-button:focus,
.el-button:hover {
  color: var(--text-color-button-secondary-hover);
  border-color: var(--border-color-button-secondary-hover);
  background-color: var(--background-color-button-secondary-hover);
}

.el-button:active {
  color: var(--text-color-button-secondary-active);
  border-color: var(--border-color-button-secondary-active);
  background-color: var(--background-color-button-secondary-active);
  outline: none;
}

.el-button::-moz-focus-inner {
  border: 0;
}

.el-button--primary {
  color: var(--text-color-button-primary);
  border-color: var(--border-color-button-primary);
  background-color: var(--background-color-button-primary);
}

.el-button--primary:focus,
.el-button--primary:hover {
  color: var(--text-color-button-primary);
  border-color: var(--border-color-button-primary);
  background-color: var(--background-color-button-primary-hover);
}

.el-button--primary:active {
  color: var(--text-color-button-primary);
  border-color: var(--border-color-button-primary);
  background-color: var(--background-color-button-primary-active);
  outline: none;
}

.el-button--primary.is-disabled,
.el-button--primary.is-disabled:hover,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:active {
  color: var(--text-color-button-primary);
  border-color: var(--border-color-button-primary);
  background-color: var(--background-color-button-primary);
  opacity: 0.5;
}

.el-input {
  position: relative;
  font-size: 16px;
  display: inline-block;
  width: 100%;
}

.el-input::-webkit-scrollbar {
  z-index: 11;
  width: 6px;
}

.el-input::-webkit-scrollbar:horizontal {
  height: 6px;
}

.el-input::-webkit-scrollbar-thumb {
  border-radius: 5px;
  width: 6px;
  background: var(--color-primary-inverse);
}

.el-input::-webkit-scrollbar-corner,
.el-input::-webkit-scrollbar-track {
  background: var(--background-color-base);
}

.el-input::-webkit-scrollbar-track-piece {
  background: var(--background-color-base);
  width: 6px;
}

.el-input__inner {
  -webkit-appearance: none;
  background-color: var(--background-color-base);
  background-image: none;
  border-radius: 4px;
  border: 1px solid var(--border-color-input);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: var(--text-color-base);
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}

.el-input__inner::-webkit-input-placeholder {
  color: var(--text-color-input-placeholder);
}

.el-input__inner::-ms-input-placeholder {
  color: var(--text-color-input-placeholder);
}

.el-input__inner::placeholder {
  color: var(--text-color-input-placeholder);
}

.el-input__inner:hover {
  border-color: var(--border-color-input-hover);
  background-color: var(--background-color-input-hover);
}

.el-input__inner:focus {
  outline: none;
  border-color: var(--border-color-input-active);
}

.el-input-group {
  line-height: normal;
  display: inline-table;
  width: 100%;
  border-collapse: separate;
}

.el-input-group > .el-input__inner {
  vertical-align: middle;
  display: table-cell;
}

.el-input-group__prepend {
  background-color: var(--background-color-input-hover);
  color: var(--text-color-soft);
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid var(--border-color-input);
  border-radius: 4px;
  padding: 0 20px;
  width: 1px;
  white-space: nowrap;
}

.el-input-group:hover .el-input-group__prepend {
  border-color: var(--border-color-input-hover);
}

.el-input-group__prepend:focus {
  outline: none;
}

.el-input-group__prepend {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.el-input-group--prepend .el-input__inner {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.el-input__inner::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.el-input-group__prepend {
  padding: 0 10px;
  color: var(--text-color-soft);
}

.el-input .icon {
  line-height: 1.7rem;
}

.el-button--large {
  font-size: 16px;
}

.p-helper-abs-center {
  top: 0;
  padding: 20px;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-y: auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.p-helper-abs-center > * {
  margin: auto;
}

.fa-icon {
  vertical-align: middle;
  margin-top: -2px;
  width: auto;
  min-width: 1em;
  height: 1em;
}

.fa-icon {
  width: 1em;
}

#app {
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  position: relative;
  background-color: var(--color-primary-inverse);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.p-guest-layout {
  position: relative;
  height: 100%;
}

.image-container {
  line-height: 0;
}

.auth {
  text-align: center;
  margin-top: 64px;
}

@media print, screen and (min-width: 769px) {
  .auth {
    margin-top: 100px;
    min-width: 300px;
  }
}

.errors {
  color: var(--text-color-danger);
  text-overflow: ellipsis;
  max-width: 317px;
}

@media print, screen and (min-width: 769px) {
  .errors {
    max-width: 400px;
  }
}
.error {
  margin-top: 10px;
}

.el-notification-fade-leave-active {
  opacity: 0;
}

.el-alert__closebtn.is-customed {
  font-style: normal;
  font-size: 13px;
  top: 9px;
}

.el-notification {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 330px;
  padding: 14px 26px 14px 13px;
  border-radius: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid var(--border-color-softer);
  position: fixed;
  background-color: var(--background-color-base);
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: opacity 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s,
    -webkit-transform 0.3s;
  transition: opacity 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s,
    -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
    bottom 0.3s;
  transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
    bottom 0.3s, -webkit-transform 0.3s;
  overflow: hidden;
}

.el-notification.right {
  right: 16px;
}

.el-notification.left {
  left: 16px;
}

.el-notification__group {
  margin-left: 13px;
  margin-right: 8px;
}

.el-notification__title {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-color-base);
  margin: 0;
}

.el-notification__content {
  font-size: 14px;
  line-height: 21px;
  margin: 6px 0 0;
  color: var(--text-color-soft);
  text-align: justify;
}

.el-notification__content p {
  margin: 0;
}

.el-notification__icon {
  height: 24px;
  width: 24px;
  font-size: 24px;
}

.el-notification__closeBtn {
  position: absolute;
  top: 18px;
  right: 15px;
  cursor: pointer;
  color: var(--text-color-softer);
  font-size: 16px;
}

.el-notification__closeBtn:hover {
  color: var(--text-color-soft);
}

.el-notification .el-icon-error {
  color: var(--text-color-danger);
}

.el-notification-fade-enter.right {
  right: 0;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.el-notification-fade-enter.left {
  left: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.el-icon-error {
  font-family: "CustomIcons";
}

.el-icon-error:before {
  content: "\e79d";
}

.loader {
  font-size: 3px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: loading 1.1s infinite ease;
  animation: loading 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.el-button .loader {
  display: none;
}

.el-button.is-loading {
  position: relative;
}

.el-button.is-loading .loader {
  display: inline-block;
  position: absolute;
  margin-left: -20px;
  top: 50%;
}

@keyframes loading {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em var(--background-color-base) 1.8em -1.8em 0
        0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
      1.8em -1.8em 0 0em var(--background-color-base),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7),
      2.5em 0em 0 0em var(--background-color-base),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.7),
      1.75em 1.75em 0 0em var(--background-color-base),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7),
      0em 2.5em 0 0em var(--background-color-base),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.7),
      -1.8em 1.8em 0 0em var(--background-color-base),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7),
      -2.6em 0em 0 0em var(--background-color-base),
      -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
      1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
      2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
      1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
      0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
      -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
      -2.6em 0em 0 0em rgba(255, 255, 255, 0.7),
      -1.8em -1.8em 0 0em var(--background-color-base);
  }
}

.error {
    text-align: left;
    color: red;
}