:root {
  --primary: #044154;
  --primary-dark: #042628;
  --gray: #808788;
  --black: #4d5758;
  --red: #bc3f34;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

main {
  flex: 1;
}

nav {
  background-color: var(--primary-dark);
  box-shadow: 0 2px 4px 0 rgb(203 199 199 / 50%);
}

.logo {
  width: 175px;
}

#login-wrapper {
  max-width: 580px;
  margin: auto;
}

.headline {
  font-size: 28px;
  text-align: center;
  margin-bottom: 2rem;
}

.options {
  text-align: center;
  max-width: 350px;
  margin: auto;
}

.localAccount .divider {
  display: none;
}

.accountButton,
button {
  color: var(--primary);
  border-radius: 100rem;
  padding: 0.375rem 0.9375rem;
  font-weight: 500;
  text-align: center;
  background-color: white;
  border: 1pt solid var(--primary);
  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;
  margin-bottom: 1rem;
}

.accountButton {
  width: 100%;
  background-repeat: no-repeat;
  background-origin: content-box;
}

.accountButton#MicrosoftAccountExchange {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19.08'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23f25022;%7D.cls-2%7Bfill:%237fba00;%7D.cls-3%7Bfill:%2359b4d9;%7D.cls-4%7Bfill:%23ffb900;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EMicrosoft%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg id='Microsoft_Logo' data-name='Microsoft Logo'%3E%3Crect class='cls-1' width='9.06' height='9.06'/%3E%3Crect class='cls-2' x='9.94' width='9.06' height='9.06'/%3E%3Crect class='cls-3' y='10.02' width='9.06' height='9.06'/%3E%3Crect class='cls-4' x='9.94' y='10.02' width='9.06' height='9.06'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.accountButton#GoogleExchange {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.04 20.49'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23ed412d;%7D.cls-2%7Bfill:%232da94f;%7D.cls-3%7Bfill:%23fdbd00;%7D.cls-4%7Bfill:%233e82f7;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EAsset 56%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cg id='HrcCOE.tif'%3E%3Cpath class='cls-1' d='M17,2.54l-3,3A5.89,5.89,0,0,0,8.55,4.43,6,6,0,0,0,4.5,8.32L4.08,8,1.26,5.85c-.19-.15-.19-.15-.08-.36A10.17,10.17,0,0,1,6.31.79,9.63,9.63,0,0,1,9,.08a10.14,10.14,0,0,1,2.4,0,10.28,10.28,0,0,1,5.49,2.38l.1.09S17,2.55,17,2.54Z'/%3E%3Cpath class='cls-2' d='M16.94,17.94a9.1,9.1,0,0,1-1.22.95A9.65,9.65,0,0,1,12,20.33a9,9,0,0,1-2.13.15,10.22,10.22,0,0,1-8.77-5.59c0-.08,0-.12.05-.18l3-2.33.28-.21.09.2A6,6,0,0,0,9,16.18a6.12,6.12,0,0,0,1.86.12,6.42,6.42,0,0,0,2.25-.56,5,5,0,0,0,.51-.27.11.11,0,0,1,.15,0l3.11,2.41Z'/%3E%3C/g%3E%3Cpath class='cls-3' d='M4.49,8.35c-.68-.58-2-1.52-3.43-2.65a10.41,10.41,0,0,0,0,9.07l3.45-2.63A5.08,5.08,0,0,1,4.32,9C4.41,8.7,4.49,8.35,4.49,8.35Z'/%3E%3Cpath class='cls-4' d='M10.32,8.35l-.05,4,5.43.07,0,.26a5.81,5.81,0,0,1-.73,1.49,4.62,4.62,0,0,1-1.31,1.26L16.84,18c.09-.08.23-.21.37-.36a7.46,7.46,0,0,0,.61-.69,10.59,10.59,0,0,0,.95-1.39A10.62,10.62,0,0,0,20,11.48a10.33,10.33,0,0,0,0-2.12c0-.36-.09-.67-.13-.9Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E ");
}

.accountButton:hover {
  color: white;
  background-color: var(--primary);
}

.buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

button#next,
button#continue,
.sendCode,
.sendNewCode,
.verifyCode {
  background-color: var(--primary);
  color: white;
  min-width: 200px;
}

button#next:hover,
button#continue:hover,
.sendCode:hover,
.sendNewCode:hover,
.verifyCode:hover {
  background-color: var(--primary-dark);
  color: white;
}

div#api {
  max-width: 350px;
  margin: auto;
}

a {
  color: var(--primary);
}

input {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black);
  background-color: white;
  background-clip: padding-box;
  border: 1px solid var(--gray);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

label {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.password-label {
  display: flex;
  justify-content: space-between;
}

.entry-item,
.attrEntry {
  margin-bottom: 1rem;
}

.intro {
  display: none;
}

.divider {
  display: flex;
  max-width: 200px;
  margin: 20px auto;
  align-items: center;
  justify-content: center;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1pt solid var(--gray);
}

.divider h2 {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
  padding: 0 10px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.helpLink {
  display: none;
}

#attributeVerification .working {
  text-align: center;
}

#attributeVerification .working:after {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -0.125em;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: 0.75s linear infinite spinner-border;
  animation: 0.75s linear infinite spinner-border;
}

.verificationSuccessText {
  text-align: center;
  margin-bottom: 20px;
  color: var(--primary);
  padding: 0 10px;
}

#forgotPassword {
  font-size: 0.875rem;
}

.create {
  font-size: larger;
  text-align: center;
}

.create a {
  font-weight: bold;
}

.terms{
  text-align: center;
}

a { white-space: nowrap; }