:root {
    --brand-prim-r-default: #1fb6ff;
    --brand-off-weiss-dunkel:#eff2f7;
    --shared-styles-tabellen-gerade:#ffffff;
    --brand-grau-100: #e5e9f2;
	 --brand-grau-200: #c0ccda;
     --brand-grau-300:#8492a6;
}
body{
    padding-left: 0px !important;
}
.Rectangle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--brand-off-weiss-dunkel);
    height: 100vh;
    width: 100vw;
}
.Shape {
    width: 157px;
    height: 43px;
    margin: 0 40px 8px;
    color: var(--brand-prim-r-default);
    font-size: 450%;
    font-weight: bold;
  }
  .Dialog-Control {
    width: 208px;
    height: 27px;
    margin: 8px 0 0;
    font-family: "Open Sans";
    font-size: 23px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.5;
    letter-spacing: normal;
    text-align: center;
    color: var(--brand-grau-300);
  }
  .Rectangle-Copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 438px;
    height: 408px;
    margin: 40px 0;
    padding: 48px 40px 40px;
    border-radius: 16px;
    background-color: var(--shared-styles-tabellen-gerade);
  }
  .Willkommen-zurck {
    width: 358px;
    height: 40px;
    margin: 0 0 8px;
    font-family: "Open Sans";
    font-size: 33px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: normal;
    text-align: center;
    color: var(--brand-schwarz-schwarz);
  }
  .Bitte-logen-Sie-sich {
    width: 358px;
    height: 24px;
    margin: 8px 0 0;
    font-family: "Open Sans";
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 0.5;
    letter-spacing: normal;
    text-align: center;
    color: var(--brand-grau-300);
  }
  .input-with-icon, .input-with-icon_2 {
    margin: 0px !important;
    position: relative;
    padding-left: 1.5rem;
}

/* .input-with-icon::before {
    font-family: FontAwesome;
    content: "\f0e0";
    position: relative;
    left: 2rem;
    top: 0.2vh;
    font-size: 21px;
    transform: translateY(-50%);
    color: var(--brand-grau-300)
}
.input-with-icon_2::before {
    font-family: FontAwesome;
    content: "\f13e";
    position: relative;
    left: 2rem;
    top: 0.2vh;
    font-size: 21px;
    transform: translateY(-50%);
    color: var(--brand-grau-300)
} */
.input-with-icon input, .input-with-icon_2 input{
    display: block;
    margin-left: 0;
    padding-left: 0;
    width: 355px;
    height: 40px;
    margin: 40px 1.5rem 24px 0;
    border-radius: var(--unit3);
    border: 1px solid var( --brand-grau-200);
    padding-left: 50px;
    font-size: 18px;
}
#LogOnForm{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.input-with-icon input{
    margin-bottom: 15px;
}
.input-with-icon_2 input{
    margin-top: 15px;
}
.myButton{
    width: 360px;
    height: 40px;
    margin-left: 19px;
    color: #fff;
    font-size: 20px;
    margin-bottom: 30px;
    display: flow !important;
    font-weight: bold;
    border-radius: var(--unit3) !important;
}
.submit{
    padding-right: 1rem;
}
.input-with-icon::before{
    font-family: FontAwesome;
    content: "\f007"; /* Platzhalterinhalt für das Pseudo-Element */
    position: absolute;
    left: 35px; /* Anpassen der Position nach Bedarf */
    top: 64%; /* Zentrieren des Pseudo-Elements vertikal */
    transform: translateY(-50%); /* Zentrieren des Pseudo-Elements vertikal */
    font-size: 23px;
    color: var(--brand-grau-300);
}
.input-with-icon_2::before {
    font-family: FontAwesome;
    content: "\f023"; /* Platzhalterinhalt für das Pseudo-Element */
    position: absolute;
    left: 37px; /* Anpassen der Position nach Bedarf */
    top: 45%; /* Zentrieren des Pseudo-Elements vertikal */
    transform: translateY(-50%); /* Zentrieren des Pseudo-Elements vertikal */
    font-size: 25px;
    color: var(--brand-grau-300);
}
.logonError{
    color:var(--alarm-fehler-aktiv);
}

.toggle-password {
    position: absolute;
    top: 45%;
    right: 36px;
    transform: translateY(-50%);
    width: 20px;
    height: 17px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z" fill="gray"/></svg>');
    background-size: cover;
    cursor: pointer;
}