:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, Apple Color Emoji, "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
}

@media screen and (min-width: 50em) {
  .login .content-wrapper {
    max-width: 28rem;
    padding: 3rem 3.5rem;
  }
}

h1 {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  color: #000;
}

h2 {
  color: #000;
  font-size: 1.25rem;
}

button {
  -webkit-font-smoothing: auto;
  -moz-appearance: none;
  background-color: hsl(180.5 100% 24.7%);
  border: 1px solid hsl(180.5 100% 24.7%);
  border-radius: 0.1875rem;
  color: white;
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
  height: 3rem;
  line-height: calc(2.25em - 2px);
  cursor: pointer;
  outline-offset: 3px;
  overflow: hidden;
  padding: 0 1em;
  position: relative;
  text-decoration: none;
  transition: background-color 0.2s ease;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
}

button:hover {
  background-color: hsl(181.9 100% 18.4%);
  border-color: #0000;
}

button:disabled {
  background-color: #c4c4c4;
  border-color: #c4c4c4;
  color: #404040;
  cursor: not-allowed;
}

/* Increase distance between button and Cancel/Back link */
form div button + a {
  margin-left: 1rem;
}

form > div {
  margin-block: 1.875rem;
}

form label {
  font-weight: 600;
  display: block;
  font-size: 1rem;
  color: #000;
}

form input[type="email"],
form input[type="text"],
form input[type="password"] {
  padding: 0.6rem;
  border: 1px solid hsl(0 0% calc(11.4% + 67%));
  border-radius: 6px;
  background-color: #fff;
  color: #000;
  font-size: 1rem;
  transition: border-color 0.2s ease;
  margin-top: 0.625rem;
  width: 100%;
}

form input[name="otp_token"] {
  width: 8rem;
}

form input[type="email"]:focus,
form input[type="text"]:focus,
form input[type="password"]:focus {
  border-color: #3fb9ad;
  outline: none;
}

/*
Target checkbox/label combo's inside divs and paragraphs to make the checkbox
appear on the left side of the label
*/
div:has(> label + input[type="checkbox"]),
p:has(> label + input[type="checkbox"]) {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 1rem;
  justify-content: start;
}

a {
  color: hsl(180.5 100% 24.7%);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: hsl(calc(180.5 + 1.4) 100% calc(24.7% - 6.3%));
}

ul {
  padding-left: 0;
  margin-block: 1rem;
  line-height: 1.6;
  list-style: none;
}

.helptext {
  font-size: 0.9rem;
  color: #767676;
  margin-top: 0.5rem;
}

.helptext ul {
  margin: 0;
}

p {
  line-height: 1.5;
  margin-block: 1rem;
  color: #000;
}

pre {
  font-family: var(--font-mono);
  padding-block: 1rem;
}

hr {
  margin-block: 1rem;
}

.errorlist {
  list-style: none;
  background-color: #ffe5e5;
  border: 1px solid #ff4d4f;
  color: #b00020;
  padding: 0.9rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.1);
}

.messages {
  padding: 0;
}

.messages li {
  list-style: none;
  padding: 0.9rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.1);
}

.messages li.error {
  background-color: #ffe5e5;
  border: 1px solid #ff4d4f;
  color: #b00020;
}

.messages li.warning {
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  color: #856404;
}

.messages li.info {
  background-color: #d1ecf1;
  border: 1px solid #bee5eb;
  color: #0c5460;
}

.messages li.success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

/*
 * Utility class to hide content visually while keeping it screen reader-accessible.
 * Source: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
 */

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

ul.oidc-provider-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}