/* ================ TABLE OF CONTENTS ================ */
/*
01. User Login From
02. Instructions
03. Shibboleth Button
04. Divider
05. Username and Password
00. Media Quires
*/

/* ==================== 01. User Login Form ==================== */
form.user-login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* === 900px === */


/* === 659px === */
@media screen and (min-width: 659px) {
  form.user-login-form {
    max-width: 75%;
  }
}

@media screen and (min-width: 900px) {
  form.user-login-form {
    max-width: 50%;
  }
}

/* ==================== 02. Instructions ==================== */

.login__instructions {
}

/* ==================== 03. Shibboleth Button ==================== */

a.simplesamlphp-auth-login-link {
  display: inline-block;
  vertical-align: middle;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  cursor: pointer;
  border: 0.0625rem solid #d3d4d5;
  border-radius: 0.5rem;
  background-color: #d3d4d5;
  padding: 0.5rem 1rem;
  color: #000000;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  text-align: center;
  text-decoration: none;
}

a.simplesamlphp-auth-login-link:hover {
  border-color: #abadaf;
  background-color: #c7c8c9;
  color: #000000;
}

a.simplesamlphp-auth-login-link:focus,
a.simplesamlphp-auth-login-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem #c7c8c980;
  border-color: #c6c7c8;
  background-color: #c7c8c9;
  color: #000;
}

/* ==================== 04. Divider ==================== */
.login__divider {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  margin-top: 1rem;
  margin-bottom: 1rem;
  height: 1rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.login__divider::after,
.login__divider::before {
  flex-grow: 1;
  background-color: #c7c8c9;
  width: 100%;
  height: 0.125rem;
  content: "";
}

.login__divider:not(:empty) {
  gap: 1rem;
}

/* ==================== 05. Username and Password  ==================== */

.login__username-and-password {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login__username-and-password .form-actions {
  margin: 0;
}
.login__username-and-password .form-item {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.login__username-and-password .form-item > label {
  cursor: pointer;
}

.login__username-and-password .form-text {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0.5rem;
  border: 1px solid;
  color: #212529;
  display: block;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  min-height: calc(1.5em + 1rem + calc(1px * 2));
  padding: 0.5rem 1rem;
  width: 100%;
}

.login__username-and-password .form-text:hover {
  box-shadow: inset 0 0 0 1px #232429;
  border-color: #232429;
}

.login__username-and-password .form-text:focus,
.login__username-and-password .form-text:focus-visible {
  outline: none;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  border-color: #86b7fe;
}

.login__username-and-password .form-submit {
  display: inline-block;
  vertical-align: middle;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  cursor: pointer;
  border: 0.0625rem solid #d3d4d5;
  border-radius: 0.5rem;
  background-color: #d3d4d5;
  padding: 0.5rem 1rem;
  color: #000000;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  text-align: center;
  text-decoration: none;
}

.login__username-and-password .form-submit:hover {
  border-color: #abadaf;
  background-color: #c7c8c9;
  color: #000000;
}

.login__username-and-password .form-submit:focus,
.login__username-and-password .form-submit:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem #c7c8c980;
  border-color: #c6c7c8;
  background-color: #c7c8c9;
}

/* ==================== 00. MEDIA QUERIES ==================== */
/* UO Cosmic is build using the mobile first design principle. 
    - styling not wrapped in a media query should be styled for
      mobile.
    - styling for larger screens should be wrapped in the appropriate
      media query.
/* === 480px === */
@media screen and (min-width: 480px) {
}

/* === 659px === */
@media screen and (min-width: 659px) {
}

/* === 900px === */
@media screen and (min-width: 900px) {
}

/* === 960px === */
@media screen and (min-width: 960px) {
}

/* === 1550px === */
@media screen and (min-width: 1550px) {
}