@font-face {
  font-family: "PTRootUI", system-ui, sans-serif;
  src:
    url("../../fonts/PT-Root-UI/pt-root-ui_vf.woff2") format("woff2-variations"),
    url("../../fonts/PT-Root-UI/pt-root-UI_vf.woff") format("woff-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
p {
  margin: 0;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.25;
}

:root {
  --background-default: radial-gradient(circle at 26% 26%, #62d6e3, #7eeea4 100%);
  --background-dark_candy: url("../../images/background/dark_candy.jpg");
  --background-dark_default: radial-gradient(circle at 26% 26%, #434a4d, #23292e 100%);
  --background-dark_dune: url("../../images/background/dark_dessert.jpg");
  --background-dark_mono: #262626;
  --background-dark_soccer: url("../../images/background/dark_soccer.jpg");
  --background-light_abstract: url("../../images/background/light_candy.jpg");
  --background-light_default: radial-gradient(circle at 26% 26%, #62d6e3, #7eeea4 100%);
  --background-light_dune: url("../../images/background/light_dessert.jpg");
  --background-light_mono: #e7eff1;
  --background-light_winter: url("../../images/background/light_winter.jpg");
  --background-x_dark_edeka: url("../../images/background/x_dark_edeka.png");
  --background-x_dark_high5: url("../../images/background/x_dark_high5.png");
  --background-x_dark_kelvion: url("../../images/background/x_dark_kelvion.png");
  --background-x_dark_vinos: url("../../images/background/x_dark_vinos.png");
  --background-x_light_mcfit: url("../../images/background/x_light_mcfit.png");
}

html {
  -webkit-text-size-adjust: 100%;
  font-family: "PTRootUI", Helvetica, Arial, sans-serif;
  font-size: 1.125em;
}

@media screen and (min-width: 768px) {
  html {
    font-size: 1em;
  }
}

body {
  margin: 0;
  background: linear-gradient(to bottom, white 50%, #013343 50%);
  background-size: cover;
  min-height: 100dvh;
}

.login-page,
.startup-page,
.error-page {
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  
  &:not(.app-login){
      align-items: center;
  }
}

.shadow {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.error {
  background: #d22244;
  color: #e7eff1;
  display: block;
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 2px;
  font-weight: 500;
  text-align: center;
}

.errors {
  background: #d22244;
  color: #e7eff1;
  display: block;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  border-radius: 2px;
  font-weight: 500;
  font-size: 0.9rem;
}

.errors .error {
  margin: 0;
  padding: 0;
  text-align: left;
  display: list-item;
  list-style-position: outside;
}

.login {
  background: #fff;
  padding-top: 2rem;
  position: relative;
}

#buildInfo {
  color: #fff;
  text-align: right;
}

@media screen and (min-width: 450px) {
  body {
    background: var(--background);
  }

  body:not(.testdata-page) section {
    border-radius: 4px;
    max-width: 324px;
  }

  section.login {
    border-radius: 12px;
    margin-inline: 2rem;
  }

  .login-page {
    justify-content: center;
  }

  .login {
    padding-top: 2rem;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  #buildInfo {
    color: black;
  }
}

.login.team {
  width: 100%;
  max-width: 1000px;
}

#preselection {
  display: none;
}

#preselection label {
  font-size: 1em;
}

.login.preselected .email-wrapper {
  display: none;
}

.login.preselected #preselection {
  display: flex;
}

.login-wrapper {
  display: flex;
  transform: translateX(0);
  transition: transform 150ms ease-in-out;
}

#user-list {
  list-style: none;
  list-style-position: inside;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: min-content;
  padding: 1em;
  gap: 1em;
  max-height: 400px;
  overflow-y: auto;
}

.loggedInPrevention {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25em;
  z-index: 100;
  text-align: center;
}

#user-list button {
  width: 100%;
  background: none;
  border: 1px solid #b3ccd4;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em;
}

@media screen and (min-width: 626px) {
  #user-list button {
    flex-direction: row;
    max-width: unset;
  }
}

#user-list button .display {
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

span.avatar-icon {
  border-radius: 50%;
  display: inline-block;
  aspect-ratio: 1 / 1;
  height: 3em;
}

span.avatar-icon img {
  width: 100%;
  height: 100%;
}

span.avatar-abbr {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: white;
  font-family: inherit;
  font-weight: 400;
}

#reset-form {
  visibility: hidden;
  position: relative;
  max-height: 0;
}

#reset-success {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: #fff;
  text-align: center;
  flex-direction: column;
  gap: 2rem;
}

.login-wrapper.show-reset {
  transform: translateX(-100%);
}

.login-wrapper form {
  min-width: 100%;
  flex: 1;
}

.password-wrapper {
  position: relative;
}

.visibility-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border: none;
  background: none;
}

.visibility-toggle.show .hide {
  display: none;
}

.visibility-toggle.hide .hide {
  display: block;
}

.visibility-toggle.hide .show {
  display: none;
}

.logo {
  align-self: center;
}

label {
  font-size: 0.875em;
  margin-left: 0.25rem;
}

form {
  display: flex;
  flex-direction: column;
}

button {
  cursor: pointer;
}

.primary {
  background: #89fba8;
  border-radius: 2px;
  border: none;
  height: 2.25rem;
  color: #025670;
  font-size: 1rem;
  text-transform: capitalize;
  text-decoration: none;
  padding-inline: 1em;
}

input {
  border-radius: 2px;
  background: #e7eff1;
  color: #171717;
  font-size: 1em;
  border: none;
  padding: 0 0.25em;
  height: 2rem;
}

input[type="checkbox"] {
  margin: 0;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.self-center {
  align-self: center;
}

.overflow-hidden {
  overflow: hidden;
}

.justify-between {
  justify-content: space-between;
}

.text-medium {
  font-size: 1.25em;
}

.text-center {
  text-align: center;
}

.gap-1 {
  gap: 1rem;
}

.pt-2 {
  padding-top: 2em;
}

.p-1 {
  padding: 1em;
}

.p-2 {
  padding: 2em;
}

.p-4 {
  padding: 4em;
}

.mb-1 {
  margin-bottom: 1em;
}

.mt-1 {
  margin-top: 1em;
}

.mt-2 {
  margin-top: 2em;
}

.mb-075 {
  margin-bottom: 0.75em;
}

.mb-0125 {
  margin-bottom: 0.125em;
}

.w-full {
  width: 100%;
}

.fc {
  width: fit-content;
}

.bg-white {
  background: #ffffff;
}

.bg-blue {
  background: #013343;
  color: #b3ccd4;
}

.rounded {
  border-radius: 12px;
}

.text-button {
  background: none;
  color: inherit;
  border: none;
  text-decoration: underline;
  padding: 0;
}

.registration {
  color: #89fba8;
  text-align: center;
  margin-top: 2em;
}

.social-logins {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.social {
  text-decoration: none;
  text-align: center;
  color: inherit;
  border: 1px solid currentColor;
  font-size: 0.875em;
  padding: 0.7em 0;
}

.medium {
  font-weight: 500;
}

.bold {
  font-weight: 700;
}

.font-small {
  font-size: 0.875em;
}

.h-full {
  height: 100%;
}

.errormessage {
  max-width: 40ch;
}

/* testdata */
.icon {
  height: 2.5em;
  width: 2.5em;
  border-radius: 50%;
  background-color: #72d59c;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-50%);
}

.icon:before {
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  height: 2.5em;
  width: 2.5em;
  content: " ";
}

.icon.report-projects-customers:before {
  background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' fill='%23025670' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12.002 2c1.204 0 2.358.213 3.427.602l-1.194 1.194a8.502 8.502 0 1 0 5.974 5.976l1.194-1.194a9.984 9.984 0 0 1 .601 3.424c0 5.524-4.478 10.002-10.002 10.002C6.478 22.004 2 17.526 2 12.002 2 6.478 6.478 2 12.002 2zm0 4.002a6.01 6.01 0 0 1 1.502.19v1.567a4.5 4.5 0 1 0 2.742 2.743h1.567a6 6 0 1 1-5.81-4.5zm2 6a2 2 0 1 1-1.218-1.841l1.72-1.72V5.252a.75.75 0 0 1 .22-.53l2.5-2.5a.75.75 0 0 1 1.28.53v2.75h2.75a.75.75 0 0 1 .53 1.28l-2.5 2.5a.75.75 0 0 1-.53.22h-3.19l-1.72 1.72c.102.24.158.503.158.78zm4.441-4 1-1h-1.69a.75.75 0 0 1-.75-.75v-1.69l-1 1 .001 2.381a.701.701 0 0 1 .059.06h2.38z'/></svg>");
}

.icon.stopwatch:before {
  background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' fill='%23025670' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><path d='M8.502 11.896a1.002 1.002 0 1 1 0 2.004 1.002 1.002 0 0 1 0-2.004zM12 4.75v14.896a.75.75 0 0 1-.88.739l-8.5-1.502a.75.75 0 0 1-.62-.738V6.146a.75.75 0 0 1 .628-.74l8.5-1.396a.75.75 0 0 1 .872.74zm-1.5.883-7 1.15v10.733l7 1.236V5.633zM13 18.897h.765l.102-.006a.75.75 0 0 0 .648-.745l-.007-2.646L13 13.896v5.001zm.002-8.501L13 9.121V5.396h.745a.75.75 0 0 1 .743.647l.007.102.007 2.655-1.5 1.596zM22.247 11.4h-6.692l1.723-1.724a.75.75 0 0 0 .072-.976l-.073-.084a.75.75 0 0 0-.976-.073l-.084.073-2.997 2.997a.75.75 0 0 0-.073.976l.073.084 2.996 3.004a.75.75 0 0 0 1.135-.975l-.073-.085-1.713-1.717h6.682a.75.75 0 0 0 0-1.5z'/></g></svg>");
}

.icon.shiftplan:before {
  background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' fill='%23025670' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12.5 1.75a.75.75 0 0 0-1.5 0V2H5.25A3.25 3.25 0 0 0 2 5.25v9.5A3.25 3.25 0 0 0 5.25 18h2.398l-1.475 1.77a.75.75 0 0 0 1.153.96L9.6 18h3.508a2.776 2.776 0 0 1 1.075-1.5H5.25a1.75 1.75 0 0 1-1.75-1.75v-9.5c0-.966.784-1.75 1.75-1.75h13.5c.966 0 1.75.784 1.75 1.75v5.377A3.496 3.496 0 0 1 22 13.5V5.25A3.25 3.25 0 0 0 18.75 2H12.5v-.25zm-6.5 5A.75.75 0 0 1 6.75 6h4a.75.75 0 0 1 0 1.5h-4A.75.75 0 0 1 6 6.75zM6.75 9a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5zM6 12.75a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75zm15 .75a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0zm2 5.375C23 20.431 21.714 22 18.5 22S14 20.437 14 18.875v-.103c0-.98.794-1.772 1.773-1.772h5.454c.98 0 1.773.793 1.773 1.772v.103z' /></svg>");
}

.test-data-intro h1 {
  font-size: 2.75em;
  font-weight: 300;
  color: #3c4858;
  margin: 0;
  margin-bottom: 0.5em;
}

.test-data-intro p {
  color: #495057;
  max-width: calc(932px);
  font-weight: 500;
}

.options {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap: 1em;
  margin-top: 2rem;
}

.option {
  border-top: 2.5rem solid #025670;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.option h2 {
  font-size: 1.5em;
  color: #013343;
  font-weight: 400;
  margin: 0;
  margin-bottom: 0.5rem;
}

.option ul {
  color: #495057;
  list-style-position: outside;
  padding: 0;
  margin: 0;
  margin-bottom: 3rem;
  margin-left: 1.125rem;
  font-weight: 500;
}

.option li {
  margin-bottom: 0.25em;
}

.option .content {
  margin-top: -1.25em;
  flex: 1;
}

.option a {
  margin-top: auto;
}

.clean-start {
  margin-top: 2.5rem;
  gap: 1rem;
}

.clean-start h3 {
  margin: 0;
  color: #212529;
  font-size: 1.5em;
  font-weight: 400;
}

.clean-start a {
  border: 2px solid currentColor;
  color: #013343;
  text-decoration: none;
  padding: 0 1em;
  border-radius: 4px;
  display: flex;
  align-items: center;
  line-height: 1;
}

.clean-start p {
  color: #495057;
  font-weight: 500;
}

.color-petrol-light {
  color: #b3ccd4;
}

.color-petrol-dark {
  color: #013343;
}

/* spinner */
.spinner-wrapper {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(1px);
  z-index: 10000;
  display: none;
  justify-content: center;
  align-items: center;
}

.spinner-wrapper.show {
  display: flex;
}

.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  transform: scale(0.5);
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #fff;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}