body {
  overflow: hidden !important;
}


.login-page-wrapper {
  background-image: linear-gradient(0deg, var(--oxford) 0%, var(--oxford-solid-1) 100%) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.login-part-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  max-width: 450px;
  gap: 20px;
  box-shadow: var(--reg-box-shadow);
  border: var(--reg-border);
  border-radius: var(--reg-radius);
  padding: 4rem;
  background-color: var(--white);

}

/* Password Setup-Page */
.form-container {
  width: 100%;
  padding: 0 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  /*max-width: 450px;*/
}

/* Password Setup-Page Ende */


.portal-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px 30px;
  width: 100%;
  max-width: 450px;
}

.um-field-area input,
.login-form.portal-login .form-field input[type=text],
.login-form.portal-login .form-field input[type=password] {
  -webkit-appearance: none;
  padding: 14px 4% !important;
  font-size: 16px;
  background-color: var(--white);
  width: 100%;
  font-weight: 400;
  border-radius: var(--reg-radius) !important;
  border: 1px solid var(--dark-grey);
}

.um-field-area input:focus,
.um-field-area input:active,
.login-form.portal-login .form-field input:focus,
.login-form.portal-login .form-field input:active {
  border-color: var(--accent) !important;
}

.form-field,
.login-button,
.login-form .font-size-smaller,
.um-button,
.um-row,
.um-field-area,
.um-field,
.portal-login-form .um-field {
  width: 100%;
  max-width: 450px;
  padding: 0 !important;
}

.um-field-area:has(.um-field-checkbox) {
  display: flex;
  justify-content: center;
}

.login-page-wrapper .um-row {
  margin: 0;
}


.portal-login .um-col-alt {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  align-items: center;
  width: 100%;
}

/* UM Form Notice */
p.um-notice {
  width: 100% !important;
  color: var(--white) !important;
  font-size: 1em !important;
  -moz-border-radius: var(--reg-radius) !important;
  -webkit-border-radius: var(--reg-radius) !important;
  border-radius: var(--reg-radius) !important;
}

p.um-notice.success {
  background: var(--status-good) !important;
}


.um-field-error {
  background: var(--w-red) !important;
  -moz-border-radius: var(--reg-radius) !important;
  -webkit-border-radius: var(--reg-radius) !important;
  border-radius: var(--reg-radius) !important;
  color: var(--white) !important;
}

.um-field-arrow {
  color: var(--w-red) !important;
}

/* UM-Button Wrapper */

.um-col-1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.um-col-alt {
  margin: 0;
}

.um-center {
  width: 100%;
  margin: 15px 0;
}


/*Button*/
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.button-icon {
  display: flex;
  transition: flex-grow 2s ease;

}

.button-icon img {
  height: 21px;
  width: 21px;
  margin: 0 5px;
}

.icon-transition {
  flex-grow: 1;
}

.button-description {
  font-weight: 400;
}

.button {
  width: 100%;
  gap: 15px;
  min-width: 100%;
  max-width: 450px;
  font-size: 16px !important;
  font-weight: 400 !important;
  padding: var(--button-padding) !important;
  font-family: inherit !important;
  border: var(--reg-border) !important;
  border-radius: var(--reg-radius) !important;
  transition: background-color 100ms ease 0s;
  line-height: 1.7rem !important;
}

.button:hover {
  cursor: pointer;
  background-color: var(--white);
  color: var(--accent);
}

.button.primary {
  color: var(--white);
  background-color: var(--accent);
  border-color: var(--accent);
}

.button.primary:hover {
  color: var(--accent);
  background-color: var(--white);
  border-color: var(--oxford-solid-20);
}

.button.secondary {
  color: var(--accent);
  background-color: var(--white);
  border-color: var(--accent);
}

.button.secondary:hover {
  color: var(--white);
  background-color: var(--accent);
}




.font-size-smaller {
  font-size: smaller;


}

.remember-me-wrapper {
  width: 100%;
  max-width: 450px;
  line-height: 25px;
  display: flex;
  justify-content: space-between;
  gap: 0 10px;
  font-weight: 300;
  font-family: inherit;
}

.wrapper-item .button {
  flex-grow: ;
  width: 300px;

}

.toggler-wrapper {
  display: block;
  width: 45px;
  height: 25px;
  cursor: pointer;
  position: relative;
  margin-right: 20px;
}

.toggler-wrapper input[type="checkbox"] {
  display: none;
}

.toggler-wrapper input[type="checkbox"]:checked+.toggler-slider {
  background-color: var(--ca-blue);
}

.toggler-wrapper .toggler-slider {
  background-color: #ccc;
  position: absolute;
  border-radius: 100px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.toggler-wrapper .toggler-knob {
  position: absolute;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}


/* UM-Login*/

.um-portal-login .login-form {
  gap: 20px;
}

.um-portal-login .login-logo {
  margin-bottom: 5vh;
}

.um-field-checkbox-option {
  color:
}



/*--------------------------------------------------------------
3.0 Effects Styles 
--------------------------------------------------------------*/


/*Style 1*/

.toggler-wrapper.style-1 input[type="checkbox"]:checked+.toggler-slider .toggler-knob {
  left: calc(100% - 19px - 3px);
}

.toggler-wrapper.style-1 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background-color: #fff;
}



.symbol-pulse {
  animation: pulse .7s ease-in-out 0s infinite alternate-reverse none;
}




@keyframes pulse {
  0% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.form-error-wrapper {
  color: var(--w-red);
}



span.material-symbols-outlined.active-symbol {
  font-size: 120%;
}