@import url("https://fonts.googleapis.com/css?family=Oleo+Script:400|Open+Sans:300,300italic,600,600italic,800");
html, body {
  font-family: "Open Sans", sans-serif;
  font-size: 10pt;
  font-weight: 300;
  padding: 0px;
  margin: 0px;
  min-height: 100%;
  box-sizing: border-box;
}

:root {
  background: var(--color-white-100);
  --padding-sm: clamp(0.1rem, 3%, .5rem);
  --padding-md: clamp(.5rem, 6%, 1rem);
  --padding-lg: clamp(.5rem, 12%, 1.5rem);
  --block-flow-sm: min(2rem, 4vh);
  --block-flow-md: min(4rem, 8vh);
  --block-flow-lg: min(8rem, 16vh);
  --layout-gap-sm: clamp(1rem, 3vmax, 1.5rem);
  --layout-gap-md: clamp(1.5rem, 6vmax, 3rem);
  --layout-gap-lg: clamp(3rem, 8vmax, 6rem);
  --bounce: cubic-bezier(0.31, -0.105, 0.43, 1.4);
  --primary: #1f7cb5;
  --secondary:#b5581f;
  --neutral: #112833;
  --error: #b51f31;
  --warning: #b5a31f;
  --success: #7cb51f;
  --info: #1fb5a3;
  --color-primary-50: #F0F8FC;
  --color-primary-100: #DAEDF9;
  --color-primary-200: #AFD8F1;
  --color-primary-300: #83C3EA;
  --color-primary-400: #58AEE2;
  --color-primary-500: #2C98DB;
  --color-primary-600: #1F7CB5;
  --color-primary-700: #185E89;
  --color-primary-800: #10405E;
  --color-primary-900: #092332;
  --color-secondary-50: #FCF5F0;
  --color-secondary-100: #F9E6DA;
  --color-secondary-200: #F1C8AF;
  --color-secondary-300: #EAAA83;
  --color-secondary-400: #E28C58;
  --color-secondary-500: #DB6F2C;
  --color-secondary-600: #B5581F;
  --color-secondary-700: #894318;
  --color-secondary-800: #5E2E10;
  --color-secondary-900: #321809;
  --color-white: #ffffff;
  --color-white-50: #FFFFFF;
  --color-white-100: #FAFAFB;
  --color-white-200: #F4F6F7;
  --color-white-300: #EFF1F3;
  --color-white-400: #E9ECEF;
  --color-white-500: #E4E8Eb;
  --color-white-600: #DFE3E7;
  --color-white-700: #D9DFE3;
  --color-white-800: #D4DADF;
  --color-white-900: #CED5DC;
  --color-gray-50: #7c898f;
  --color-gray-100: #707e85;
  --color-gray-200: #64737a;
  --color-gray-300: #586970;
  --color-gray-400: #4d5e66;
  --color-gray-500: #41535c;
  --color-gray-600: #354852;
  --color-gray-700: #293e47;
  --color-gray-800: #1d333d;
  --color-gray-900: #112833;
  --color-success-50: #F3FCF0;
  --color-success-100: #E2F9DA;
  --color-success-200: #BFF1AF;
  --color-success-300: #9DEA83;
  --color-success-400: #7AE258;
  --color-success-500: #58DB2C;
  --color-success-600: #45B51F;
  --color-success-700: #348A17;
  --color-success-800: #245E10;
  --color-success-900: #133209;
  --color-error-50: #FCF0F0;
  --color-error-100: #F9DADA;
  --color-error-200: #F1AFAF;
  --color-error-300: #EA8383;
  --color-error-400: #E25858;
  --color-error-500: #DB2C2C;
  --color-error-600: #B51F1F;
  --color-error-700: #8A1717;
  --color-error-800: #5E1010;
  --color-error-900: #320909;
  --color-info-50: #F0FCFC;
  --color-info-100: #DAF8F9;
  --color-info-200: #AFF0F1;
  --color-info-300: #83E8EA;
  --color-info-400: #58E0E2;
  --color-info-500: #2CD8DB;
  --color-info-600: #1FB3B5;
  --color-info-700: #17888A;
  --color-info-800: #105D5E;
  --color-info-900: #093232;
  --color-warning-50: #FCF9F0;
  --color-warning-100: #F9F0DA;
  --color-warning-200: #F1DEAF;
  --color-warning-300: #EACD83;
  --color-warning-400: #E2BB58;
  --color-warning-500: #DBA92C;
  --color-warning-600: #B58A1F;
  --color-warning-700: #8A6917;
  --color-warning-800: #5E4810;
  --color-warning-900: #322609;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--color-white);
  border-bottom: 0.1rem solid var(--color-white-500);
  height: 3.5rem;
  max-height: 3.5rem;
  z-index: 1;
  position: relative;
}
.header svg.logo, .header img.logo {
  margin-inline: 1rem;
  width: 4rem;
  aspect-ratio: 1;
  color: var(--color-primary-600);
}
.header .part {
  max-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header a {
  text-decoration: none;
}
.header .title {
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-primary-500);
}
.header .subtitle {
  font-size: clamp(0.25rem, 7vw + 0.5rem, 0.5rem);
  font-weight: bold;
  color: var(--color-gray-500);
}
.header .button.signup,
.header .button.upload {
  --button-accent: var(--color-primary-400);
  --button-background: var(--color-white);
  --button-background-blend: 15%;
}

.parcels_background {
  position: fixed;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.parcels_background .icon {
  top: 0;
  left: 0;
  height: 4rem;
  width: 4rem;
  position: absolute;
}
.parcels_background .icon.small {
  width: 3rem;
}
.parcels_background .icon.depth2 {
  z-index: -2;
}
.parcels_background .icon.depth1 {
  z-index: -1;
}
.parcels_background .icon.depth0 {
  z-index: 0;
}
.parcels_background .icon svg {
  height: inherit;
  width: inherit;
}

.downloadbanner {
  background: linear-gradient(135deg, var(--color-primary-50) 40%, var(--color-primary-100) 100%) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 1rem;
  text-align: center;
  padding-block: 2rem !important;
}
.downloadbanner .hugeicon {
  width: 8rem;
  background-color: color-mix(in oklab, var(--color-primary-200) 20%, rgba(0, 0, 0, 0) 0%);
  border-radius: 2rem;
  padding: 1.5rem;
  margin: 1rem;
}
.downloadbanner .hugeicon.animate .cloud {
  animation: rock 3s linear infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes rock {
  from {
    transform: translateY(-20px) rotate(-3deg);
  }
  to {
    transform: translateY(20px) rotate(3deg);
  }
}
.downloadbanner .hugeicon.animate .cloud .bit {
  animation-duration: 3s;
  font-size: 100px;
  font-family: monospace;
  fill: var(--color-primary-500);
  animation: fall linear infinite;
  user-select: none;
}
@keyframes fall {
  from {
    transform: translateY(0px);
    opacity: 1;
  }
  to {
    transform: translateY(160px);
    opacity: 0;
  }
}
.downloadbanner .title {
  font-weight: 800;
  font-size: 15pt;
}
.downloadbanner .button {
  --button-accent: var(--color-white-50);
  --button-background: var(--color-primary-600);
  --button-background-blend: 100%;
}
.downloadbanner input[type=number],
.downloadbanner input[type=text] {
  --border-color: var(--color-white-400);
  color: var(--color-gray-200);
  height: 1.5rem;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 0.5rem;
  border: 2px solid var(--border-color);
  background-color: var(--color-white-100);
  transition-duration: 0.3s;
}
.downloadbanner input[type=number]:focus,
.downloadbanner input[type=text]:focus {
  outline: none !important;
  box-shadow: none !important;
  color: var(--color-gray-500);
}
.downloadbanner input[type=text].hidden,
.downloadbanner input[type=number].hidden {
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}
.downloadbanner .passwordwrapper {
  display: flex;
  flex-flow: row;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}
.downloadbanner .passwordwrapper .title {
  font-size: 10pt;
  font-weight: 600;
  user-select: none;
  flex: 1 1;
}
.downloadbanner .passwordwrapper .icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 1rem;
}
.downloadbanner .status {
  display: flex;
  width: 100%;
}
.downloadbanner .status .statusitem {
  display: flex;
  align-items: center;
  flex: 1 1;
  flex-flow: column;
}
.downloadbanner .status .statusitem .title {
  font-weight: 601;
  font-size: 10pt;
  align-content: center;
}
.downloadbanner .status .statusitem .icon {
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
}

.settings {
  --container-max: 40ch;
}
.settings:not(.linked) {
  display: none;
}
.settings .item {
  display: flex;
  flex-flow: column;
  overflow: hidden;
}
.settings .item:not(:last-child) {
  border-bottom: 0.05rem solid var(--color-white-400);
}
.settings .item .itemheader {
  display: flex;
  align-items: center;
  padding-inline: 1rem;
}
.settings .item .itemheader .title {
  font-size: 10pt;
  font-weight: 600;
  user-select: none;
  flex: 1 1;
}
.settings .item .itemheader .icon {
  width: 1.2rem;
  height: 1.2rem;
  padding: 1rem;
  padding-left: 0;
}
.settings .item .button {
  --button-accent: var(--color-white-50);
  --button-background: var(--color-primary-500);
  --button-background-blend: 100%;
  margin-inline: 5rem;
  margin-block: 1rem;
}
.settings .item .switch {
  display: flex;
  flex-flow: column;
  flex: 1 1;
}
.settings .item .switch input[type=checkbox] {
  display: none;
}
.settings .item .switch label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.settings .item .switch span {
  position: relative;
  width: 3rem;
  min-width: 3rem;
  height: 1.5rem;
  border-radius: 15000rem;
  background: var(--color-white-500);
  transition: all 0.3s;
  box-sizing: border-box;
}
.settings .item .switch span::before,
.settings .item .switch span::after {
  content: "";
  position: absolute;
}
.settings .item .switch span::before {
  top: 0.1rem;
  left: 0.1rem;
  width: 1.3rem;
  height: 1.3rem;
  background: var(--color-white-50);
  border-radius: 50%;
  z-index: 1;
  transition: transform 0.3s;
}
.settings .item .switch [type=checkbox]:checked + label span {
  background: var(--color-success-600);
}
.settings .item .switch [type=checkbox]:checked + label span::before {
  transform: translateX(1.5rem);
}
.settings .item .switch span::after {
  top: 50%;
  right: 0.3rem;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  background: url("/icons/cross.svg");
  background-size: 1rem 1rem;
}
.settings .item .switch [type=checkbox]:checked + label span::after {
  width: 1rem;
  height: 1rem;
  left: 0.3rem;
  background-image: url("/icons/check_white.svg");
  background-size: 1rem 1rem;
}
.settings .item input[type=number],
.settings .item input[type=text] {
  --border-color: var(--color-white-300);
  margin-inline-start: 3rem;
  margin-inline-end: 1rem;
  margin-bottom: 0.5rem;
  height: 1.5rem;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 0.5rem;
  border: 2px solid var(--border-color);
  background-color: var(--color-white-100);
  transition-duration: 0.3s;
}
.settings .item input[type=number]:focus,
.settings .item input[type=text]:focus {
  outline: none !important;
  box-shadow: none !important;
}
.settings .item input[type=text].hidden,
.settings .item input[type=number].hidden {
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}
.settings .item .qrcode {
  padding: 1rem;
  padding-top: 0;
}
.settings .status {
  display: flex;
}
.settings .status .statusitem {
  display: flex;
  align-items: center;
  flex: 1 1;
  flex-flow: row;
}
.settings .status .statusitem .title {
  font-weight: 601;
  align-content: center;
}
.settings .status .statusitem .icon {
  width: 1.2rem;
  height: 1.2rem;
  padding: 1rem;
}

.alertcontainer {
  display: flex;
  width: 100%;
  min-height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1;
  position: relative;
  flex-flow: column;
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  position: absolute;
  pointer-events: none;
  transition: all 0.3s var(--bounce);
}
.alertcontainer .alert::before {
  content: "";
  box-shadow: 0px 0px 20px -5px var(--color-white-900), 0px 0px 5px 0px var(--color-white-300);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: inherit;
}
.alertcontainer .alert.info {
  --alert-color: var(--color-info-500);
}
.alertcontainer .alert.success {
  --alert-color: var(--color-success-500);
}
.alertcontainer .alert.danger {
  --alert-color: var(--color-danger-500);
}
.alertcontainer .alert.warning {
  --alert-color: var(--color-warning-500);
}
.alertcontainer .alert {
  background: linear-gradient(135deg, color-mix(in oklab, var(--alert-color) 5%, #fff 100%) 40%, color-mix(in oklab, var(--alert-color) 20%, #fff 100%) 100%);
  box-sizing: border-box;
  border-radius: 1rem;
  color: var(--color-gray-500);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  font-weight: 501;
  position: relative;
  transition: all 0.3s var(--bounce);
  animation: zoomIn 0.2s var(--bounce) none;
  pointer-events: auto;
}
.alertcontainer .alert.out {
  animation: zoomOut 0.3s 0.6s var(--bounce) forwards;
}
.alertcontainer .alert.out .alertmessage {
  animation: expandOut 0.3s var(--bounce) forwards;
}
.alertcontainer .alert.out .alertmessage::after {
  animation: zoomOut 0.3s var(--bounce) forwards;
}
.alertcontainer .alert.out .alertclose {
  display: none;
}
.alertcontainer .alert.info .alerticon.info, .alertcontainer .alert.warning .alerticon.warning, .alertcontainer .alert.success .alerticon.success, .alertcontainer .alert.danger .alerticon.danger {
  display: block;
}
.alertcontainer .alert .alerticoncontainer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.alertcontainer .alert .alerticoncontainer .alerticon {
  width: 2rem;
  color: var(--alert-color);
  display: none;
}
.alertcontainer .alert .alertmessage {
  white-space: nowrap;
  overflow: hidden;
  animation: expandIn 0.5s 0.6s var(--bounce) forwards;
  max-width: 45ch;
  width: 0px;
}
.alertcontainer .alert .alertmessage::after {
  content: "";
  background-color: var(--alert-color);
  width: 0.15rem;
  height: 70%;
  position: absolute;
  top: 15%;
  left: 3.5rem;
  transform: scale(0);
  animation: zoomIn 0.4s 1.1s var(--bounce) forwards;
}
.alertcontainer .alert .alertclose {
  height: 2rem;
  user-select: none;
  cursor: pointer;
  transform: scale(0);
  animation: zoomIn 0.3s 2s var(--bounce) forwards;
  position: absolute;
  right: 0px;
  margin: auto;
  padding: 1rem;
}
@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes expandIn {
  0% {
    width: 0px;
    margin-left: 0px;
    white-space: nowrap;
    overflow: hidden;
  }
  90% {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 3rem;
    margin-left: 1.5rem;
  }
  100% {
    width: 100%;
    white-space: unset;
    overflow: unset;
    padding-right: 3rem;
    margin-left: 1.5rem;
  }
}
@keyframes expandOut {
  0% {
    width: 100%;
    margin-left: 1.5rem;
    padding-right: 3rem;
  }
  100% {
    width: 0ch;
    margin-left: 0ch;
    padding-right: 0ch;
  }
}

.droparea {
  border: 0.25rem dashed var(--color-gray-300) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 1rem;
  text-align: center;
  padding-block: 2rem !important;
}
.droparea.dragover {
  border: 0.25rem solid var(--color-gray-500);
}
.droparea .dropareatext {
  max-width: 30rem;
  font-size: 13pt;
}
.droparea input {
  position: absolute;
  cursor: pointer;
  opacity: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.droparea .icon {
  width: 5rem;
  stroke: var(--color-primary-500);
  background-color: var(--color-primary-50);
  border-radius: 100000rem;
  padding: 1rem;
  margin: 1rem;
}
.droparea .title {
  font-weight: 800;
  font-size: 15pt;
}
.droparea .button {
  --button-accent: var(--color-white-50);
  --button-background: var(--color-primary-600);
  --button-background-blend: 100%;
}

.filelist {
  display: flex;
  flex-flow: column;
  padding: 0 !important;
  font-weight: bold;
  flex-direction: column-reverse !important;
}
.filelist .listheader {
  display: flex;
  flex-flow: row;
  width: 100%;
  height: 4rem;
  align-items: center;
  padding: var(--padding-sm);
  padding-inline: var(--padding-md);
  box-sizing: border-box;
  background-color: var(--color-white-200);
  border-bottom: 0.1rem solid var(--color-white-800);
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.filelist .listheader #totalsize {
  width: 12ch;
  text-align: right;
  cursor: default;
  padding-inline: 0.5rem;
}
.filelist .listheader .counter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.filelist .listheader .counter span {
  width: 100%;
}
.filelist .listheader .counter #filecounter {
  background-color: var(--color-secondary-200);
  color: var(--color-gray-500);
  height: 1rem;
  border-radius: 10000rem;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  padding: 0.21rem;
}
.filelist .files:empty ~ .listheader {
  display: none;
}
.filelist .files {
  display: flex;
  width: 100%;
  flex-flow: column;
  overflow: hidden;
  border-radius: inherit;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.filelist .files .file {
  display: flex;
  flex-flow: row;
  max-width: 100%;
  background-color: var(--color-white-50);
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  padding: var(--padding-sm);
}
.filelist .files .file .fileicon {
  height: 2rem;
  aspect-ratio: 1;
  margin-inline: 1rem;
}
.filelist .files .file .stacked {
  flex-grow: 1;
  display: flex;
  flex-flow: column;
  word-wrap: anywhere;
}
.filelist .files .file .filesize {
  width: 8ch;
  text-align: right;
  cursor: default;
}
.filelist .files .file .controls {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.filelist .files .file .controls .icon {
  width: 1.15rem;
  height: 1.15rem;
  display: none;
}
.filelist .files .file .controls.upload {
  --button-accent: var(--color-success-700);
}
.filelist .files .file .controls.upload .icon.upload {
  display: block;
}
.filelist .files .file .controls.pause {
  --button-accent: var(--color-success-700);
}
.filelist .files .file .controls.pause .icon.pause {
  display: block;
}
.filelist .files .file .progresscontainer {
  height: 0.3rem;
  border-radius: 1000rem;
  overflow: hidden;
  background-color: color-mix(in oklab, var(--color-gray-500) 20%, rgba(0, 0, 0, 0) 0%);
}
.filelist .files .file .progresscontainer:not(.busy, .incomplete) {
  display: none;
}
.filelist .files .file .progresscontainer:not(.busy).incomplete .progress {
  background-color: var(--color-warning-500);
}
.filelist .files .file .progresscontainer .progress {
  height: inherit;
  width: inherit;
  position: relative;
  top: 0px;
  border-radius: inherit;
  left: -100%;
  background-color: var(--color-success-600);
  transition-duration: 0.3s;
}
.filelist .files .file .upload_status {
  --statuscolor:var(--color-error-500);
  font-weight: 500;
  align-items: center;
}
.filelist .files .file .upload_status .icon {
  display: none;
  stroke: var(--statuscolor);
  width: 1.15rem;
  height: 1.15rem;
}
.filelist .files .file .upload_status .msg {
  display: none;
  margin-inline: 0.2rem;
  color: var(--statuscolor);
}
.filelist .files .file .upload_status.success {
  --statuscolor: var(--color-success-600);
}
.filelist .files .file .upload_status.success .icon.success {
  display: block;
}
.filelist .files .file .upload_status.success .msg.success {
  display: block;
}
.filelist .files .file .upload_status.aborted {
  --statuscolor: var(--color-warning-600);
}
.filelist .files .file .upload_status.aborted .icon.aborted {
  display: block;
}
.filelist .files .file .upload_status.aborted .msg.aborted {
  display: block;
}
.filelist .files .file.complete .upload_status {
  display: flex;
}
.filelist .files .file .button.remove {
  --button-accent: #0000;
}
.filelist .files .file .button.remove .icon {
  width: 1rem;
  height: 1rem;
}
.filelist .files .file:hover {
  background-color: var(--color-white-100);
}
.filelist .files .file:hover .button.remove {
  --button-accent: var(--color-gray-500);
}
.filelist .files .file:hover .button.remove:hover {
  --button-accent: var(--color-error-500);
}
.filelist .files .file:not(:last-child) {
  border-bottom: 0.05rem solid var(--color-white-400);
}
.filelist .files .file:last-child {
  border-radius: inherit;
}

.notfound {
  background: linear-gradient(135deg, color-mix(in oklab, var(--color-warning-50) 20%, #fff 100%) 20%, color-mix(in oklab, var(--color-warning-500) 20%, #fff 100%) 100%) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 1rem;
  text-align: center;
  padding-block: 2rem !important;
}
.notfound .hugeicon {
  width: 8rem;
  border-radius: 2rem;
  padding: 1rem;
  margin: 1rem;
}
.notfound .title {
  font-weight: 800;
  font-size: 15pt;
  color: var(--color-warning-500);
}
.notfound .text {
  font-weight: 600;
}

.button {
  --button-accent: var(--color-primary-400);
  --button-background: var(--button-accent);
  --button-background-blend: 15%;
  color: var(--button-accent);
  text-wrap: nowrap;
  padding: 0.5rem;
  padding-inline: 1rem;
  border-radius: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-weight: bold;
  background-color: color-mix(in oklab, var(--button-background) var(--button-background-blend), rgba(0, 0, 0, 0) 0%);
}
.button.nobackground {
  background: none;
}
.button.nobackground:hover {
  background-color: color-mix(in oklab, var(--button-background) var(--button-background-blend), rgba(0, 0, 0, 0) 0%);
}
.button.square {
  padding: 0.5rem;
  padding-inline: 0.5rem;
}
.button:hover {
  background-color: color-mix(in oklab, var(--button-background) var(--button-background-blend), #000 10%);
}
.button.red {
  --button-accent: var(--color-error-500);
}
.button.busy {
  color: var(--button-background);
}
.button.busy:hover {
  cursor: not-allowed;
  background-color: var(--button-background);
}
.button.error {
  --color-issue: var(--color-error-500);
  animation: shake 1s var(--bounce) forwards;
}
@keyframes shake {
  0% {
    background-color: var(--color-issue);
    color: var(--color-white);
    transform: translateX(0rem);
  }
  10% {
    background-color: var(--color-issue);
    color: var(--color-white);
    transform: translateX(-0.2rem);
  }
  20% {
    background-color: var(--color-issue);
    color: var(--color-white);
    transform: translateX(0.2rem);
  }
  30% {
    background-color: var(--color-issue);
    color: var(--color-white);
    transform: translateX(-0.2rem);
  }
  40% {
    background-color: var(--color-issue);
    color: var(--color-white);
    transform: translateX(0rem);
  }
  99% {
    background-color: var(--color-issue);
    color: var(--color-white);
    transform: translateX(0rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
.button.busy::after {
  content: "";
  background-color: transparent;
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  border-radius: 100rem;
  border: 0.3rem solid transparent;
  border-left-color: transparent;
  border-left-style: solid;
  border-left-width: 0.3rem;
  border-left: 0.3rem solid var(--color-white-50);
  animation: 1s rotate linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

select {
  flex: 1;
}

select {
  border: none;
  background: var(--color-white-200);
  transition: 0.4s;
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin-inline: 1rem;
  max-width: 12ch;
}

select:hover,
select:focus {
  background: var(--color-white-500);
}

option {
  display: flex;
  justify-content: flex-start;
  gap: 0.1rem;
  border: none;
  padding: 0.5rem;
  transition: 0.4s;
}

option:checked {
  font-weight: bold;
  background: var(--white);
}

.register {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 1rem;
  text-align: center;
  padding-block: 2rem !important;
  font-weight: 501;
}
.register.hidden {
  display: none;
}
.register + .subtle {
  text-align: center;
  color: var(--color-gray-50);
  padding: 1rem;
  width: 100%;
  box-sizing: border-box;
  max-width: var(--container-max, 80ch);
}
.register .title {
  font-size: 16pt;
}
.register .hugeicon {
  width: 8rem;
  background-color: color-mix(in oklab, var(--color-primary-200) 20%, rgba(0, 0, 0, 0) 0%);
  border-radius: 2rem;
  padding: 1.5rem;
  margin: 1rem;
}
.register .hugeicon .key {
  fill: var(--color-warning-500);
}
.register #verification {
  width: 20rem;
  height: 6rem;
  font-size: 4rem;
  font-family: Fira Code, sans-serif, monospace;
  text-align: center;
  color: var(--color-gray-400);
}
.register .item {
  display: flex;
  flex-flow: column;
  overflow: hidden;
}
.register .item .itemheader {
  display: flex;
  align-items: center;
  padding-inline: 1rem;
}
.register .item .itemheader .title {
  font-size: 10pt;
  font-weight: 600;
  user-select: none;
  flex: 1 1;
  padding-inline: 1rem;
}
.register .item .itemheader .icon {
  width: 1.2rem;
  height: 1.2rem;
  padding: 1rem;
}
.register .item .button {
  --button-accent: var(--color-white-50);
  --button-background: var(--color-primary-500);
  --button-background-blend: 100%;
  margin-inline: 5rem;
  margin-block: 1rem;
}
.register .item input[type=number],
.register .item input[type=text] {
  --border-color: var(--color-white-300);
  height: 1.5rem;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 0.5rem;
  border: 2px solid var(--border-color);
  background-color: var(--color-white-100);
  transition-duration: 0.3s;
}
.register .item input[type=number]:focus,
.register .item input[type=text]:focus {
  outline: none !important;
  box-shadow: none !important;
}
.register .item input[type=text].hidden,
.register .item input[type=number].hidden {
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}
.register .item .qrcode {
  padding: 1rem;
  padding-top: 0;
  cursor: pointer;
}

.dashboard {
  flex-direction: column;
  gap: 0.5rem;
  margin: auto;
}
.dashboard .diskuse {
  display: flex;
  padding: 1rem;
  gap: 1rem;
  flex: 1000 1000 var(--card-max);
  background: linear-gradient(135deg, var(--color-primary-700) 20%, var(--color-primary-600) 100%);
}
.dashboard .diskuse .title {
  padding: 1rem;
  font-weight: 601;
  font-size: 1.5rem;
  color: var(--color-white-500);
}
.dashboard .diskuse .progresscontainer {
  height: 0.5rem;
  margin-inline: 1rem;
  border-radius: 1000rem;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary-600) 20%, var(--color-primary-500) 100%);
}
.dashboard .diskuse .progresscontainer .progress {
  height: inherit;
  width: inherit;
  position: relative;
  top: 0px;
  border-radius: inherit;
  left: 0%;
  background: linear-gradient(135deg, var(--color-success-600) 20%, var(--color-success-500) 100%);
  transition-duration: 0.3s;
}
.dashboard .uploadbutton {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  gap: 0.5rem;
  text-decoration: none;
  flex: 1 1;
}
.dashboard .uploadbutton .icon {
  width: 1.5rem;
  stroke: var(--color-primary-500);
  background-color: var(--color-primary-50);
  border-radius: 100000rem;
  padding: 1rem;
}
.dashboard .uploadbutton .title {
  font-weight: 800;
  font-size: 1.5rem;
  text-align: center;
}
.dashboard .uploadbutton .button {
  --button-accent: var(--color-white-50);
  --button-background: var(--color-primary-600);
  --button-background-blend: 100%;
}
@container (max-width: var(--container-max)) {
  .dashboard .uploadbutton {
    background-color: orange !important;
    flex: 1 1 100%;
  }
}

.container {
  --container-max: 150ch;
  display: flex;
  max-width: var(--container-max);
  container-type: inline-size;
  flex-flow: row wrap;
  background-color: whitesmoke;
}

.cardcontainer {
  position: relative;
  display: flex;
}
.cardcontainer .card {
  --card-max: var(--container-max);
  flex-basis: 40ch;
  max-width: var(--card-max);
  border: 0.1rem solid var(--color-white-500);
  backdrop-filter: blur(0.08rem);
  color: var(--color-gray-300);
  background-color: var(--color-white);
  border-radius: 0.8rem;
  display: flex;
  flex-flow: column;
  position: relative;
  box-sizing: border-box;
}
.cardcontainer .card::before {
  content: "";
  box-shadow: 0px 0px 20px 50px var(--color-white-900), 0px 0px 5px 0px var(--color-white-300);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: inherit;
}