@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  --btn-login-background-primary: #000747;
  --btn-login-color: #ffffff;
  --btn-login-background-secondary: #05128A;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

  html:has(main.login-wrapper) {
    font-size: 16px !important;
  }

.login h2, .login p, .login a, .login button, .login label {
  font-family: Poppins;
  margin: 0;
  line-height: inherit;
}

input::placeholder {
  color: #CDCEDB;
  font-family: Poppins;
  font-weight: 300;
}


input::-ms-reveal,
input::-ms-clear {
  display: none;
}

app,
#app {
  min-height: 100%;
}

main.login-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
}

  main.login-wrapper .login {
    flex: 1;
    font-family: Poppins;
  }

    main.login-wrapper .login form {
      background-color: #FFFFFF;
      color: #000747;
      width: 468px;
    }

.kitchen-chefs {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  min-width: 100%;
  min-height: 100%;
  width: 100vmax;
  height: 100vmax;
  max-width: none !important;
}

  .kitchen-chefs.bg-video {
    position: fixed;
    z-index: -20;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, -20px);
  }

  .kitchen-chefs.bg-img {
    position: fixed;
    z-index: -20;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, -20px)
  }

  .kitchen-chefs.blackout {
    top: 50%;
    left: 50%;
    position: fixed;
    z-index: -20;
    transform: translate3d(-50%, -50%, -20px);
    background: rgba(0,0,0,.65);
  }

  .kitchen-chefs.shading {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -10;
    transform: translateZ(-10px);
    background-image: linear-gradient(90deg, #000000 0%, rgba(255, 255, 255, 0) 100%);
  }

.link-forgot-password {
  color: #000747;
}

  .link-forgot-password:hover {
    color: #05128A;
  }

.link-login {
  color: #6F7BF6;
}

  .link-login:hover {
    color: #05128A;
  }

.btn-login {
  background-color: var(--btn-login-background-primary);
  color: var(--btn-login-color);
}

  .btn-login:hover {
    background-color: var(--btn-login-background-secondary);
  }

  .btn-login:disabled {
    background-color: #F0F0F0;
  }

.input-login {
  outline: none;
  border: 1px solid #D2D3E3;
}

  .input-login:invalid {
    border-color: #c53030 !important;
  }

  .input-login:focus-visible {
    border: 1px solid #000747;
  }

  .input-login:focus-within {
    border: 1px solid #000747 !important;
    outline: none !important;
  }

  .input-login.invalid {
    outline: 1px solid red;
  }

  .input-login:has(.input.invalid) {
    outline: 1px solid red;
  }

  .input-login:has(.input.valid) {
    border-color: none !important;
    outline: none !important;
  }

  .input-login.valid {
    border-color: none !important;
    outline: none !important;
  }

  .input-login .input {
    border-color: none !important;
    outline: none !important;
  }

@media (min-aspect-ratio: 16/9) {
  .kitchen-chefs {
    width: 100vmax;
    height: 100vmax;
  }
}

@media (max-aspect-ratio: 16/9) {
  .kitchen-chefs {
    width: 200vmax;
    height: 100vmax;
  }
}

.reg-form {
  background-image: linear-gradient(145deg, #f9c154 0%, #f39318 100%);
  border-radius: 1em;
  height: 175%;
  height: 175vh;
  overflow-y: auto;
}

  .reg-form.with-no-products {
    height: 110%;
    height: 110vh;
  }

@media (max-width: 767.98px) {
  main.login-wrapper > .login {
    margin: auto !important;
  }

  main.login-wrapper .login form {
    width: 370px;
  }
}

@media (min-width: 768px) {
  main .login-wrapper > .login {
    padding-left: 2rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (max-width: 1240.98px) {
  .reg-form {
    height: 200%;
    height: 200vh;
  }
}

.license-backdrop {
  position: absolute;
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99999;
  background-color: rgba(49, 145, 200, 0.75);
  text-align: center;
  display: flex;
  align-items: center;
  justify-items: center;
}

  .license-backdrop > p {
    margin: auto;
    color: #fff;
    padding: 2em;
    background: #222;
  }