body {
  background: #ECEFF1;
}

header {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
  color: #1e88e5;
  position: relative;
  height: unset !important;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

header .logo {
  max-width: 25rem;
}

header .logo img {
  width: 100%;
}

header h1 {
  max-width: 14em;
  margin: 0 auto;
}

form {
  font-size: 18px;
  margin: 2em  auto;
  padding: 0;
  border-radius: .5ex;
  background: white;
  max-width: 25em;
  box-shadow: 0 1ex 7em -3ex #b0c4d5;
  overflow: hidden;
}


input, button, select {
  font: inherit;
}

form fieldset {
  border:none;
  padding: 2em;
  margin: 0 auto;
  grid-template-rows: 3em 2em 2em;
}

form label {
  display: flex;
  flex-direction: column;
}

form label:not(:last-child) {
  margin-bottom: 3em;
}

form fieldset.radiogroup label:not(:last-child) {
  margin-bottom: 1em;
}

form input:not([type='checkbox']):not([type='radio']),
form button,
form select {
  min-height: 3em;
  line-height: 3;
  padding: 0;
  border-radius: .25ex;
}

form input,
form select {
  background: rgba(0,0,0,.04);
  border-width: 0 0 2px 0;
  border-style: solid;
  border-color: #CcCcCc;
  text-indent: 1ex;
  transition: border-color .5s cubic-bezier(0.075, 0.82, 0.165, 1);
  margin-top: 1ex;
}

form input:hover {
  border-color: #8c8c8c;
}

form input:focus {
  outline-color: transparent;
  border-color: #1E88E5;
}

form input:invalid {
  box-shadow: none;
  outline: none;
  outline-color: transparent;
  border-color: transparent;
}

form input:invalid:focus {
  border-color: #F44336;
}

form input[type=checkbox],
form input[type=radio] {
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 2ex;
  height: 2ex;
  cursor: pointer;
  border: 2px solid #ccc;
}

form input[type=checkbox] {
  border-radius: .2ex;
}

form input[type=radio] {
  border-radius: 50%;
}

form input[type=checkbox]:checked,
form input[type=radio]:checked {
  background:#1e88e5;
  border-color:#1e88e5 !important;
  box-shadow: inset 0 0 0 3px white;
}

form input[type=checkbox]:focus,
form input[type=radio]:focus {
  border-color: #1e88e5
}


form input[type=checkbox]:hover:not(:focus),
form input[type=radio]:hover:not(:focus) {
  border-color: #8c8c8c;
}

form select:focus {
  border-color: #1e88e5;
}

:focus {outline:none;}
::-moz-focus-inner {border:0;}

form button {
  border: none;
  background: #1E88E5;
  color: white;
  cursor: pointer;
  transition: transform .15s;
}

form button:hover {
  transform: translateY(-2px) scale(1.02);
}

form button:focus {
  transform: translateY(-2px) scale(1.02);
  box-shadow: #3ca4ff 0px 0px 10px;
}

form:invalid button[type=submit] {
  background-color: #CCC;
  transform: none;
  pointer-events: none;
}

.msg.info {
  padding: 1em 2em;
  margin: 0 auto 1em;
  max-width: 33em;
  font-weight: 800;
  background: #1e88e5;
  color: white;
  position: relative;
  text-indent: -2.6ex;
}

.msg.info::before {
  content: '\2713';
  margin-right: 1ex;
}

.msg.info::after {
  content: '';
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 100%;
  transform: rotate(45deg) translateY(-1.5ex);
  background: #1e88e5;
}

.msg.error {
  padding: 1em 2em;
  margin: 0 auto 1em;
  max-width: 33em;
  font-weight: 800;
  background: #F44336;
  color: white;
  position: relative;
  text-indent: -2.6ex;
}

.msg.error::before {
  content: '\26A0';
  margin-right: 1ex;
}

.msg.error::after {
  content: '';
  display: block;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 100%;
  transform: rotate(45deg) translateY(-1.5ex);
  background: #F44336;
}

input.totp {
  font-family: monospace;
}

.checkbox,
.radio {
  flex-direction: row;
}

.checkbox :nth-child(1),
.radio :nth-child(1) {
  order: 2;
}
.checkbox :nth-child(2),
.radio :nth-child(2) {
  order: 1;
}

.checkbox input,
.radio input  {
  margin: 0 1ex 0 0;
}

.checkbox span,
.radio span {
  cursor: pointer;
}

form p {
  margin-bottom: 10px;
}

form a {
  color: #1e88e5;
  text-decoration-color: #1e88e5;
  transition: all .5s;
  padding: 3px 5px;
}

form a:hover {
  text-decoration-color: transparent;
}

form a:focus {
  text-decoration-color: transparent;
  box-shadow: #3ca4ff 0px 0px 10px;
  border-radius: .25ex;
}

.form-description {
  margin-bottom: 2em;
}

.form-options {
  text-align: center;
}

.hidden {
  display: none;
}

.qrcode {
  text-align: center;
}

.qrcode img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.qrcode .secret {
  font-family: monospace;
  font-weight: bold;
  background-color: #e0e0e0;
  padding: 0.5em;
}