*{
  text-decoration: none;
  list-style-type: none;
  transition: border-color 0.2s ease-in;
  transition: background 0.2s ease-in;
}

*:focus {
  outline: none !important;
}

.content {
  grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */
  gap: 1rem; /* Optional: adds space between the items */
}

body .left-div {
  width: 100%;
  height: 100%;
  margin-right: 2rem;
  background-image: url(/public/assets/linear-effect-left.svg);
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
}

body .right-div {
  width: 100%;
  height: 100%;
  margin-left: 2rem;
  background-image: url(/public/assets/linear-effect-right.svg);
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
}

.wrapper {
  overflow-x: hidden;
  width: 50rem;
  padding: 3rem;
  border: 0.2rem solid var(--emerald-main);
  border-radius: 1rem; /* Optional: to give the border rounded corners */
  display: flex;
  align-items: center;
  flex-direction: column;
  max-height: fit-content;
  overflow-y: auto;
}

.wrapper::-webkit-scrollbar {
  width: 1rem;
}

.wrapper::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 7px;
}

.wrapper::-webkit-scrollbar-thumb {
  background-color: var(--emerald-main);
  border-radius: 7px;
}

.wrapper::-webkit-scrollbar-thumb:hover {
  background-color: var(--emerald-main);
}

.wrapper .title-text{
  width: 100%;
}

.wrapper .title{
  font-size: 3.5rem;
  font-weight: 600;
  text-align: center;
  display: flex;
  transition: all 0.3s ease;
}

.wrapper .subtitle{
  font-size: 1.6rem;
  text-align: center;
  display: flex;
  text-align: start;
  transition: all 0.3s ease;
}

#logo-bi {
  padding: 12px;
  padding-left: 0;
  margin-bottom: 1.2rem;
  width: 50%;
}

#login-header {
  font-size: 3.2rem;
  text-align: left;
}

.wrapper .welcome {
  font-size: 3.2rem;
}

input{
  color: var(--white);
  height: 100%;
  width: 100%;
  outline: none;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  border-radius: 0.5rem;
  border: 0.2rem solid var(--light-grey);
  background-color: var(--haiti-main);
  font-size: 1.6rem;
  transition: all 0.3s ease;
}

#login:checked ~ label.signup{
  color: var(--emerald-main);
}

#login:checked ~ label.login{
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.wrapper .form-container{
  width: 100%;
}

.form-container .form-inner{
  display: flex;
  width: 200%;
}

.form-container .form-inner form{
  width: 50%;
  gap: 3.2rem;
  display: flex;
  flex-direction: column;
}

.form-inner form .field{
  min-height: fit-content;
  margin-top: 2rem;
}

.field.send-btn {
    position: relative;
    align-items: right;
    flex-direction: row;
    display: flex;
    /* margin: 0 !important; */
    align-items: center;
}

.form-inner form .field p{
  color: var(--light-grey);
  font-size: 1.6rem;
  transition: all 0.3s ease;
}


.form-inner form .field input:focus{
  border-color: var(--emerald-main);
}

.form-inner form .field input::placeholder{
  color: #999;
  transition: all 0.3s ease;
}

form .field input:focus::placeholder{
  color: var(--light-grey);
}

.form-inner form .pass-link{
  margin-top: 0.5rem;
}

.form-inner form .pass-link a{
  color: var(--emerald-main);
}


#login-button {
  width: 100%;
  height: 100%;
  font-weight: 600;
  padding: 1.6rem; /* Adds some padding inside the button */
  background-color: var(--emerald-main); /* Customize the background color */
  color: var(--white);
  border: none; /* Removes the border */
  border-radius: 0.5rem; /* Optional: Adds rounded corners */
  font-size: 1.6rem; /* Adjusts the font size */
  cursor: pointer; /* Changes the cursor to a pointer on hover */
}


#login-button:disabled {
  background-color: var(--light-grey); /* Change the background color when disabled */
  cursor: not-allowed; /* Changes the cursor to indicate the button is disabled */
  color: var(--dark-grey);
}

.highlight-text {
  color: var(--emerald-500);
}

.subtitle.login .highlight-text {
  color: var(--emerald-500);
  text-decoration: none;   /* Remove the underline */
}

.field[disabled] {
  background-color: #EBEBE4;
  opacity: 0.3;
}

#loading-overlay {
  position: absolute;
  top: unset;
  left: unset;
  z-index: 2;
  font-size: 1.6rem; /* tamanho padrão */
  right: 2rem;
}

@media (max-width: 650px) {

  .wrapper .subtitle{
    font-size: 1.5rem;
  }

  #login-header {
    font-size: 2rem;
  }

}

@media (max-height: 700px) {

  .form-inner form .field{
    height: auto;
    margin-top: 1.5rem;
  }

  .wrapper .subtitle{
    font-size: 1.5rem;
  }

  #login-header {
    font-size: 2rem;
  }

}

#password {
  padding-right: 4.4rem;
}

#password-fields{
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

#toggle_password_view.error path {
  fill: #FC5050 !important;
}

#password-fields input:focus + .password_visibility_button svg path {
  fill: var(--emerald-500);
}

.password_visibility_button {
  width: fit-content;
  height: fit-content;
  background: none;
  border: none;
  position: absolute;
  right: 8px;
  box-shadow: none;
  padding: 0;
  margin-right: 1rem;

  svg {
      transform: scale(1.4);
      transform-origin: center;
      opacity: 1 !important;

      path {
          fill: var(--light-grey);
          transition: all 0.2s ease-in;
      }
      
  }

  &:hover {
      cursor: pointer;
      background-color: transparent;
      svg {
        path {
            fill: var(--emerald-500);
            transition: all 0.2s ease-in;
        }
    }
  }
}

::-ms-reveal {
  display: none;
}