body {
 font-family: 'Poppins', sans-serif;
 height: 100%;
 background-image: url("../../images/login_background/Hintergrundbild_DHfPG_BSA.png");
 background-size: cover;
 background-repeat: no-repeat;
}

#login-body {
 background: var(--alabaster);
 max-width: 450px;
 padding: 1.5rem;
 width: 100%;
 margin: auto;
 text-align: left;
 margin-top: 100px;
 border-radius: 8px;
 box-shadow: 4px 4px 10px 0 rgb(0 0 0 / 0.5)
 }

#login-header {
 display: flex;                  /* establish flex container */
 flex-direction: row;            /* default value; can be omitted */
 flex-wrap: nowrap;              /* default value; can be omitted */
 justify-content: space-between; /* switched from default (flex-start, see below) */
}

#login-header p {
  font-size: large;
  font-weight: normal;
}

#login-header > #text-login-header {
 width: 85%;
}
#login-header > #dhfpg-logo {
 width: 15%;
}
#dhfpg-logo-image {
  width: 270px;
  height: auto;
}

#login-form > label,input {
 width: 100% !important;
}
  
.how-to-login {
 margin-top: 3rem;
}


.topmargin{
 margin-top: 1.5rem !important;
}

.login_button {
  margin-top: 2.5rem;
}

#legal-notice {
  text-align: center;
}

#legal-notice a {
  color: var(--cardinal);
  text-decoration: underline;
}

/* FORM TYPOGRAPHY*/
label {
  margin: 5px;
}


input[type=submit]  {
 background-color: var(--cardinal);
 border: none;
 color: white;
 padding: 15px 80px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 20px;
 -webkit-box-shadow: 0 10px 30px 0 rgba(196, 24, 47, 1,0.4);
 box-shadow: 0 10px 30px 0 rgba(196, 24, 47, 1,0.4);
 -webkit-border-radius: 5px 5px 5px 5px;
 border-radius: 5px 5px 5px 5px;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

input[type=submit]:hover {
 background-color: var(--tamarillo);
}



input[type=text], input[type=password] {
 background-color: var(--alabaster) !important;
 border: solid;
 border-color: var(--alto);
 color: var(--cod_gray);
 padding: 15px 32px;
 text-align: left;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 border: 2px solid var(--alto);
 -webkit-transition: all 0.5s ease-in-out;
 -moz-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
 -webkit-border-radius: 5px 5px 5px 5px;
 border-radius: 5px 5px 5px 5px;
}

input[type=text]:focus, input[type=password]:focus, input[type=search]:focus {
 background-color: var(--alabaster);
 border-bottom: 2px solid var(--cardinal);
}

input[type=text]:-webkit-autofill,
input[type=text]:-webkit-autofill:hover, 
input[type=text]:-webkit-autofill:focus, 
input[type=text]:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--chilean_heath) inset !important;
    transition: -webkit-box-shadow 0s; /* Set the transition to none */
    background-color: var(--chilean_heath); /* Ensure consistent background color */
}

input[type=password]:-webkit-autofill,
input[type=password]:-webkit-autofill:hover, 
input[type=password]:-webkit-autofill:focus, 
input[type=password]:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--chilean_heath) inset !important;
    transition: -webkit-box-shadow 0s; /* Set the transition to none */
    background-color: var(--chilean_heath); /* Ensure consistent background color */
}

input[type=text]:placeholder, input[type=password]:placeholder, input[type=search]::placeholder {
 color: var(--silver2);

}

/* password visibility icon */


.password-toggle-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}

.password-toggle-icon i {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--alto);
  transition: color 0.3s ease-in-out;
  margin-right: 10px;
}

.password-toggle-icon i:hover {
  color: black;
}