@import url(https://fonts.googleapis.com/css?family=Roboto:400);

/* :root {
  --clr-primary-100: #fff0e5;
  --clr-primary-200: #ffd4b2;
  --clr-primary-300: #ffb77f;
  --clr-primary-400: #ff9a4c;
  --clr-primary-500: #ff7000;
  --clr-primary-700: #cc5900;
  --clr-primary-800: #994300;
  --clr-primary-900: #662c00;

  --bs-info: #cff4fc;

  --in_focus: rgba(255, 154, 76, 0.5);
} */

.test-info {
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: var(--bs-info);
  padding: 1rem;
}

.test-info > p {
  margin: 0;
}
/* header .header{
  background-color: #fff;
  height: 45px;
}
header a img{
  width: 134px;
  margin-top: 4px;
} */
.login-page {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;
}
.form .login {
  margin-top: -31px;
  margin-bottom: 26px;
}

.form {
  position: relative;
  background: #ffffff;
  max-width: 360px;
  margin: 0 auto 100px;
  /* padding: 45px; */
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius: 0.6rem;
  padding-top: 4.5em;
  padding-left: 45px;
  padding-right: 45px;
  padding-bottom: 45px;
}

.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 0.3rem;
  border: 1px solid lightgray;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background-color: var(--clr-primary-500);
  width: 100%;
  border: 0;
  border-radius: 0.3rem;
  padding: 15px;
  color: #ffffff;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4caf50;
  text-decoration: none;
}

.container {
  position: relative;
  max-width: 300px;
  margin: 0 auto;
}

.bar {
  padding: 10px;
  margin-bottom: 2rem;
}

.error {
  color: #ba3939 !important;
  background: #ffe0e0 !important;
  border: 1px solid #a33a3a !important;
  border-radius: 0.6rem;
}

body {
  background-color: #ffffff;
  /* background-image: linear-gradient(45deg,#328f8a,#08ac4b); */
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.input-container {
  position: relative;
}

.input-label {
  position: absolute;
  color: #6e6e6e;
  font-size: 0.9rem;
  left: 14px;
  top: 14px;

  transition: all 150ms ease-out;
}

.input-container input:focus,
.input-container input:active {
  color: #212529;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--clr-primary-500_rgb), .2);;
  border: 1px solid var(--clr-primary-500);
}

.input-container input:focus + .input-label,
.input-container input:active + .input-label {
  top: 2px;
  font-size: 12px;
}

.input-container input[data-filled="true"] + .input-label {
  top: 2px;
  font-size: 12px;
}

.show_pw_toggle {
  position: absolute;
  right: 8px;
  top: 14px;

  cursor: pointer;
  transition: opacity 100ms ease-out;
}

.show_pw_toggle:hover {
  opacity: 0.7;
}

.newHere {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.seperator {
  margin-top: 1.2rem;
  margin-bottom: 0.8rem;

  border: 1px solid lightgray;
  width: 30%;
}

.register {
  font-size: 0.85rem;
}

.register_here {
  color: var(--clr-primary-500);
  cursor: pointer;
}

.register_here:hover,
.register_here:focus {
  text-decoration: underline;
}

.register_input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 15px;
  border-radius: 0.3rem;
}

.register_input:focus,
.register_input:active {
  color: #212529;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--clr-primary-500_rgb), .2);
}

.fehler {
  position: absolute;
  color: red;
  font-size: 0.8rem;
  bottom: -9px;
}