.login-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: start;
}

.form-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  height: 100vh;
  max-width: 35vw;
  /* margin: 0 9vw 0 15vw; */
}

.create-account-error-message{
  display: none;
  font-size: 2vh;
  color: var(--color-app-secondary);
  margin-bottom: 2vh;
}

.content-login {
  margin: 28vh 0 0 5vw;
  width: 33vw;
  text-align: start;
}

.create-account-form-area {
  will-change: transform, opacity;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(50%, 50%);
  height: 50vh;
  width: 50vw;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--login-btn-radius);
  background-color: #101010;
  /* box-shadow: 0 0 10vh 25vh rgba(0, 0, 0, 0.95); */
}

.create-account-button-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.create-account-area {
  will-change: transform, opacity;
  position: fixed;
  top: 20vh;
  left: 20vw;
  height: 60vh;
  width: 60vw;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 1vw;
  background-color: #101010;
  /* box-shadow: 0 0 10vh 25vh rgba(0, 0, 0, 0.95); */
}

.show-modal {
  display: flex !important;
}

.form {
  max-width: inherit;
  margin-bottom: 1vh;
}

.create-account-form {
  max-width: inherit;
  margin-bottom: 1vh;
}

.login-logo {
  position: fixed;
  align-self: center;
  top: 5vh;
  /* right: 0; */
  left: 5vh;
  z-index: 10;
  margin: 1vw 1vw 1vw 2vw;
  max-width: 12vw;
}

.form-title {
  font-size: 5vh;
  margin-bottom: 1vw;
  font-weight: 600;
}

.form-description {
  font-size: 2.2vh;
  margin-bottom: 4vh;
  font-weight: 500;
  line-height: 1.4 !important;
      opacity: 0.9 !important;
}

.separator-qr-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 2vh;
  margin-bottom: 1vw;
  text-align: center;
}

.button-qr-code {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  padding: 0 2vw !important;
}

.button-qr-code img {
  width: 2vw;
  height: 2vw;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
  -webkit-text-fill-color: var(--color-font-primary) !important;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: white;
}

.form-input-field {
  will-change: box-shadow;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3535357a;
  border-radius: var( --form-input-radius); 
  margin: 1vw 0;
  padding: 0 2vw;
}

.form-input-field>input {
  outline: none;
  border: none;
  box-shadow: none;
  background-color: #35353500;
  width: 45vw;
  height: 8vh;
  font-size: 2vh;
  color: white;
}

.form-input-field>input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.form-input-field:focus-within {
  box-shadow: 0 0 0 2px var(--color-app-primary);
}

.form-input-field>span {
  width: 3vh;
  height: 3vh;
}

.form-input-field>span>img {
  width: inherit;
  height: inherit;
}

.action-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.second-action-items {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.qr-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* height: 100vh; */
  width: 20vw;
  font-size: 2vh;
  margin-bottom: 2vw;
}

.qrcode-description {
  font-size: 3vh;
}

img.qrCode-img {
    height: 30vh;
    width: 18vw;
    margin: 2vh 0;
}

.qrCode-code {
  text-align: center;
  font-size: 5vh;
  letter-spacing: 2.5vh;
  margin-left: 2.5vh;
}

.qrcode-tip {
  letter-spacing: normal;
  font-size: 1.8vh;
  margin: 0 0 1vh -2.5vh;
}

.button-base-login:hover .qr-code-icon,
.button-base-login:focus .qr-code-icon {
    background-color: var(--color-font-selected);
}

.qr-code-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 3vh;
  height: 3vh;
  margin-right: 1vw;
  background-color: var(--color-font-primary);
  -webkit-mask: url('../../assets/images/icoQRCode.svg') no-repeat center / contain;
  mask: url('../../assets/images/icoQRCode.svg') no-repeat center / contain;
}

.qr-code-icon, .qr-code-text { 
  pointer-events: none; 
  font-weight: 500;
}

.button-base-login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6vh;
  padding: 0 1vw;
  text-align: center;
  margin-bottom: 1vw;
  width: 100%;
  /* will-change: box-shadow, background-color; */
  background: transparent;
  border: 1px solid rgba(55, 55, 55, 0.8);
  font-size: 2.2vh;
  cursor: pointer;
  font-weight: 600;
}

.form-entrar,
.button-base-confirm,
.button-login {
  background: rgba(55, 55, 55, 0.8);
}

.button-base-login:hover,
.button-base-login:focus {
  border: none !important;
  outline: none;
  color: var(--color-font-selected);
  background: linear-gradient(var(--color-app-secondary), var(--color-app-primary));
  box-shadow: none;
  transform: scale(1.05) !important;
  transition: transform 0.2s ease !important;
}

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: transparent !important;
    color: fieldtext !important;
}

.qr-timer {
    font-size: 2vh;
    margin-bottom: 1vh;
  }

@media (max-width: 1000px) {
  

  .button-base-login {
    height: 7.5vh;
    font-size: 2.2vh !important;
  }

  .qr-code-icon {
    width: 4vh;
    height: 4vh;
  }

}

@media (max-width: 900px) {
  .content-login {
    width: 60vw;
  }
}