:root {
  /** floating label font size */
  --toi-floating-label-font-size: calc(0.8 * var(--pico-font-size));
  --pico-line-height: 1.3;
}

@media (min-width: 576px) {
  body > main {
    padding: 1.25rem 0;
  }

  article div {
    padding: 1.25rem;
  }
}

@media (min-width: 768px) {
  body > main {
    padding: 1.5rem 0;
  }

  article div {
    padding: 1.5rem;
  }
}

@media (min-width: 992px) {
  body > main {
    padding: 1.75rem 0;
  }

  article div {
    padding: 1.75rem;
  }
}

@media (min-width: 1200px) {
  body > main {
    padding: 2rem 0;
  }
  article div {
    padding: 2rem;
  }
}
body {
  color: #777;
}
body > main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 12rem);
  padding: 1rem 0;
}

body main article {
  padding: 0;
  overflow: hidden;
}

body main.container {
  max-width: 550px;
}

/** login idp view */
section#login-idp-view img.highlight {
  border-radius: 50%;
  width: 80px;
  height: 80px;
}
/** end login idp view */

/* ud forget password */
nav#login-idp-ud-forget-pwd {
  justify-content: flex-end;
  line-height: 0;
}

nav#login-idp-ud-forget-pwd a {
  font-size: small;
  color: #89a6ef;
  outline-color: #8ba6ec;
  color-scheme: light;
  text-decoration: none;
}
/* end ud forget password */

/* login err container */
.login-err {
  display: block;
  color: var(--pico-form-element-invalid-border-color, #b86a6b);
  color-scheme: light;
}

/* term of service and security policy */
span.tos {
  display: flex;
  margin-top: -0.5em;
  font-size: small;
}
a.tos {
  color: #89a6ef;
  outline-color: #8ba6ec;
  color-scheme: light;
  text-decoration: none;
}
/* end term of service and security policy */

/** common style */
.hidden {
  display: none !important;
}

img.badge {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

p.idp-name {
  padding-top: 1rem;
  text-align: center;
  color: var(--pico-primary-background);
}

/** form validation: password inputbox disable background image*/
.no-background-image {
  background-image: none !important;
}
/** password toggle icon */
section[role="form"] i.toggle-password {
  /**!keep align*/
  margin-left: -23px;
  cursor: pointer;
}
.bi-eye::before {
  content: "\261C";
}
/** end password toggle icon */

/** floating label */
section[role="form"] {
  position: relative;
  margin-bottom: 0;
}

section[role="form"] > input::-moz-placeholder {
  color: transparent;
  -moz-transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

section[role="form"] > input::placeholder {
  color: transparent;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

section[role="form"] > input:focus::-moz-placeholder {
  color: var(--pico-form-element-placeholder-color);
}

section[role="form"] > input:focus::placeholder {
  color: var(--pico-form-element-placeholder-color);
}

section[role="form"] > input + label {
  position: absolute;
  top: 0.55rem;
  left: 0.8rem;
  transform: translateY(0);
  background: var(--pico-form-element-background-color);
  color: var(--pico-form-element-placeholder-color);
  cursor: text;
  transition: 0.3s ease;
}

section[role="form"] > input:not(:-moz-placeholder-shown) + label {
  top: 0;
  padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
  transform: translateY(-50%) scale(0.8);
  color: var(--pico-form-element-active-border-color);
  font-size: var(--pico-font-size);
  line-height: 1.15;
  -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

section[role="form"] > input:focus + label,
section[role="form"] > input:not(:placeholder-shown) + label {
  top: 0;
  padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
  transform: translateY(-50%) scale(0.8);
  color: var(--pico-form-element-active-border-color);
  font-size: var(--pico-font-size);
  line-height: 1.15;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

section[role="form"] > input:user-invalid:not(:-moz-placeholder-shown) + label {
  color: var(--pico-form-element-invalid-border-color);
}

section[role="form"] > input:user-invalid:not(:placeholder-shown) + label {
  color: var(--pico-form-element-invalid-border-color);
}

section[role="form"] > input:user-valid:not(:-moz-placeholder-shown) + label {
  color: var(--pico-form-element-valid-border-color);
}

section[role="form"] > input:user-valid:not(:placeholder-shown) + label {
  color: var(--pico-form-element-valid-border-color);
}

section[role="form"] input + label,
section[role="form"] > input:focus + label,
section[role="form"] > input:not(:placeholder-shown) + label {
  font-size: var(--toi-floating-label-font-size);
}
/** end floating label */

.password-container {
  position: relative;
  width: 100%;
}

.password-container input[type="text"] {
  padding-right: 2.5rem;
}

.password-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pico-color-secondary);
}