:root {
  color-scheme: light;
  --border-radius: 0.25rem;
  --gap: 1rem;
  --font-size: 16px;
  --accent: #0003;
  --accent-1: #0005;
  --accent-2: #0008;
  --white: #fff;
  --white-tr-85: #fffd;
  --white-tr-75: #fffc;
  --white-tr-50: #fff8;
  --white-tr-40: #fff6;
  --bg: #fff;
  --text: #222;
  --blue: #4267b2;
  --blue-tr-50: #4267b288;
  --blue-tr-30: #4267b255;
  --blue-tr-20: #4267b233;
  --red: #f55;
  --red-tr-50: #f558;
  --red-tr-20: #f553;
  --yellow: #ff3;
  --yellow-tr-75: #ff3c;
  --yellow-tr-55: #ff39;
  --yellow-tr-40: #ff36;
  --green: #3f3;
  --green-tr-75: #3f3c;
  --green-tr-40: #3f36;
  --green-tr-30: #3f35;
  --green-tr-20: #3f33;
}

* {
  all: unset;
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  color: var(--text);
  font-family: Raleway, Arial, Helvetica, sans-serif;
  font-size: var(--font-size);
  font-weight: 500;
  font-style: normal;
  line-height: calc(1.75 * var(--font-size));
  overflow: visible;
  scroll-margin: var(--gap);
  word-wrap: break-word;
  transition: all 0.125s ease-in-out;
  display: flex;
  flex-wrap: wrap;
}

html {
  scroll-behavior: smooth;
  font-size: var(--font-size);
}

.button,
a:any-link,
button,
input[type="button"],
input[type="checkbox"],
input[type="color"],
input[type="radio"],
input[type="submit"],
input[type="reset"],
input[type="file"],
label {
  cursor: pointer;
}

a,
a:any-link {
  color: var(--blue);
  text-decoration: underline;
}

[type="hidden"],
head,
style,
script,
title {
  display: none;
}

[disabled] {
  opacity: 0.75;
  cursor: not-allowed;
  pointer-events: none;
}

th {
  display: table-cell;
}

tr {
  display: table-row;
}

.row {
  flex-direction: row;
}

.row > * {
  margin-right: var(--gap);
}

.row :last-child {
  margin-right: 0;
}

.col {
  flex-direction: column;
}

.col > * {
  margin-bottom: var(--gap);
}

.col :last-child {
  margin-bottom: 0;
}

body {
  background: var(--bg) url("") 50% 50% no-repeat;
  background-size: cover;
  min-height: 100vh;
  min-width: 500px;
  margin: 0 auto;
  padding-top: 4rem;
}

main {
  flex: 1;
  padding: 1rem;
  align-content: center;
  justify-content: flex-start;
  position: relative;
}

h1 {
  color: var(--blue-tr-50);
  padding: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  --font-size: 2rem;
  line-height: 2rem;
  letter-spacing: 1rem;
  margin-right: -1rem;
}

h2 {
  color: var(--blue-tr-50);
  padding: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  --font-size: 1.5rem;
  line-height: 1.75rem;
  letter-spacing: 0.25rem;
  margin-right: -1rem;
}

.fieldset {
  width: 100%;
}

.fieldset > * {
  width: max-content;
}

.form {
  width: 100%;
  padding: 2rem;
  border-radius: var(--border-radius);
  background-color: var(--white-tr-85);
  flex-direction: column;
  align-self: center;
  justify-self: start;
  box-shadow: 0 0 0.25rem 0.125rem var(--blue-tr-30)
            , 0 0 0 0.25rem var(--white-tr-75);
  backdrop-filter: opacity(0.8) blur(0.25rem);
}

.form > * {
  margin-bottom: 2rem;
}

.c {
  text-align: center;
  align-content: center;
  align-items: center;
  align-self: center;
  justify-content: center;
  justify-items: center;
  justify-self: center;
}

.button,
button,
input {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 0.125rem solid var(--blue-tr-30);
  border-radius: var(--border-radius);
  box-shadow: 0 0 0 0 var(--blue-tr-30);
}

::placeholder {
  color: var(--blue-tr-30);
}

input[type="password"],
input[type="text"] {
  background-color: var(--white-tr-40);
  box-shadow: 0 0 0 0 var(--blue-tr-30);
}

.button,
button,
input[type="button"],
input[type="submit"] {
  border: 0.125rem solid var(--blue);
  background: var(--bg);
  padding: 0.5rem 1rem;
  color: var(--blue);
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.button *,
button *,
input[type="button"] *,
input[type="submit"] * {
  color: var(--blue);
}

input[type="submit"] {
  color: var(--bg);
  background: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  font-weight: 600;
}

input[type="submit"],
input[type="submit"] * {
  color: var(--white-tr-75);
}

input[type="submit"]:active,
input[type="submit"]:active *,
input[type="submit"]:focus,
input[type="submit"]:focus *,
input[type="submit"]:hover,
input[type="submit"]:hover * {
  color: var(--bg);
}

input[type="radio"] {
  height: 1rem;
  width: 2rem;
  border-radius: 999px;
  color: var(--blue);
  background: var(--white-tr-50);
  border: 0.125rem solid var(--blue);
  position: relative;
}

input[type="radio"]:checked {
  background: var(--blue-tr-30);
}

input[type="radio"]:checked::before {
  position: absolute;
  content: "X";
  font-size: 2rem;
  line-height: 2rem;
  z-index: 100;
  top: -50%;
  left: 0.35rem;
}

input[type="checkbox"] {
  position: relative;
  line-height: 1em;
  height: 1em;
  width: 1em;
  color: var(--blue);
  background: var(--white-tr-50);
  border: 0.125rem solid var(--blue-tr-50);
}

input[type="checkbox"]:checked {
  background: var(--blue-tr-30);
}

input[type="checkbox"]:checked::before {
  content: "✓";
  position: absolute;
  top: -0.25rem;
  left: 0.175rem;
  font-size: 2.5em;
  z-index: 100;
}

label.placeholder {
  color: var(--blue);
  padding: 0 0.25rem;
  margin-top: -0.5rem;
}

.button:active,
.button:focus,
.button:hover,
button:active,
button:focus,
button:hover,
input[type="button"]:active,
input[type="button"]:focus,
input[type="button"]:hover {
  background: var(--blue-tr-30);
  box-shadow: 0 0 0 0.125rem var(--blue-tr-30);
}

input[type="submit"]:active,
input[type="submit"]:focus,
input[type="submit"]:hover {
  border: 0.125rem solid var(--white-tr-75);
  box-shadow: 0 0 0 0.125rem var(--blue);
}

input[type="checkbox"]:hover,
input[type="password"]:hover,
input[type="radio"]:hover,
input[type="text"]:hover {
  border-color: var(--blue-tr-30);
  box-shadow: 0 0 0 0.125rem var(--blue);
}

input[type="checkbox"]:active,
input[type="checkbox"]:focus,
input[type="password"]:active,
input[type="password"]:focus,
input[type="radio"]:active,
input[type="radio"]:focus,
input[type="text"]:active,
input[type="text"]:focus {
  border-color: var(--blue);
  background-color: var(--white-tr-75);
  box-shadow: 0 0 0 0.125rem var(--blue-tr-30);
}

footer {
  --font-size: 0.75rem;
  background-color: var(--white-tr-50);
  padding: 1rem;
  border-radius: var(--border-radius);
  margin-top: 4rem;
  letter-spacing: 1px;
  backdrop-filter: opacity(0.7) blur(0.25rem);
}

footer * {
  font-weight: 500;
}

footer a:any-link,
footer a:any-link span {
  color: var(--text);
}

footer a:any-link > span,
footer address > span {
  padding: 0 0.5rem;
  border-radius: 999px;
}

footer a:active,
footer a:active span,
footer a:focus,
footer a:focus span,
footer a:hover,
footer a:hover span {
  color: var(--blue);
}

footer a:active span,
footer a:focus span,
footer a:hover span {
  background-color: var(--white-tr-75);
  box-shadow: 0 0 0 0.25rem var(--white-tr-50),
    0 0 0.25rem 0.25rem var(--white-tr-40);
}

.nogap > * {
  --gap: 0;
}

.button {
  align-items: center;
  align-content: center;
  border: 0.125rem solid var(--gray);
  background: var(--gray);
  color: var(--text);
}

.button.text:active,
.button.text:focus,
.button.text:hover {
  box-shadow: 0 0 0 0.125rem var(--text);
}

.button.danger,
.button.danger span {
  border-color: var(--red);
  color: var(--red);
}

.button.danger:active,
.button.danger:focus,
.button.danger:hover {
  box-shadow: 0 0 0 0.125rem var(--red);
  background: none;
}

.wide {
  padding: 0.5rem 2rem !important;
}

@media ( max-width: 540px ) { body.login { background-image: url(../static/login/house-540.jpg) } }
@media ( max-width: 1080px ) { body.login { background-image: url(../static/login/house-1080.jpg) } }
@media ( max-width: 2160px ) { body.login { background-image: url(../static/login/house-2160.jpg) } }
@media ( min-width: 2161px ) { body.login { background-image: url(../static/login/house-9999.jpg) } }

@media (max-width: 600px) {
  footer.row {
    justify-content: space-between;
    padding-bottom: 0;
  }

  footer.row > * {
    margin-right: 0;
    margin-bottom: 1rem !important;
  }

}

body.login .form {
  width: 470px;
}

body.login input[type="password"],
body.login input[type="text"] {
  width: 100%;
}

.gap-025 {
  --gap: 0.25rem;
}

p {
  display: block;
}

.text,
.text *,
p > * {
  display: inline;
}

button,
a.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"],
label[for]
{
  user-select: none;
}



.bullet {
  margin-left: 0.75rem;
  position: relative;
}

.bullet.green::before {
  color: var(--green-75);
}

.bullet.blue::before {
  color: var(--black-tr-75);
}

.bullet::before {
  font-size: 1.5rem;
  content: "–";
  position: absolute;
  left: -1.85rem;
}

.bullet.arrow.right::before {
  content: "➤";
}

.bullet.arrow.down::before {
  content: "↓";
  top: -0.25rem;
  left: -1.5rem;
}

.bullet.check::before {
  font-size: 2rem;
  content: "✓";
  left: -1.9rem;
}

.offset-2 {
  margin-left: 1.5rem;
}

a.with-outside-arrow {
  position: relative;
}

a.with-outside-arrow::after {
  font-size: 1.5rem;
  content: "➚";
}