:root {
  --main-color: #040203;
  --ztl-cyan: #79c6bc;
  --ztl-red: #ea5165;
  --ztl-dark-navy: #03002e;
  --ztl-putty: #fafafa;
  --ztl-foggy-blue: #f5f4ff;
  --ztl-blutrazid: #2b2a36;
  --ztl-antrazid: #3c3838;
  --ztl-grey: #5b5a5a;
}

* {
  box-sizing: border-box;
}

html {
  margin: 0;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color:var(--main-color);
  background-color:var(--ztl-putty);
}

a, a:visited {
  color:var(--main-color);
}

/* Splash */

.splash {
  height:100vh;
  color:var(--ztl-putty);
  background-color:var(--ztl-red);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.splash-logo {
  height: 50vh;
  width: 100%;
}

.splash-registration .splash-logo {
  height: 20vh;
}

.splash-logo img {
  display: block;
  margin: auto;
  max-height: 100%;
}

/* Grid */

.main-head {
  grid-area: header;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--main-color);
  padding: 0 1.5rem;
  margin: 0 0 1.5rem 0;
}

.main-nav {
  grid-area: nav;
  padding: 0 1.5rem;
}

.admin-btn {
  margin-right: .75rem;
}

/* "you are here" state while inside the admin section */
.admin-btn.active, .admin-btn.active:hover {
  background-color: var(--main-color);
  color: var(--ztl-putty);
}

/* sidebar menu */

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  display: block;
  padding: .5rem .75rem;
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
}

.nav-menu a:hover {
  background-color: var(--ztl-foggy-blue);
}

.nav-menu li.active a {
  font-weight: bold;
  border-left-color: var(--ztl-red);
  background-color: var(--ztl-foggy-blue);
}

/* breadcrumbs */

.breadcrumbs {
  font-size: 0.875rem;
  color: var(--ztl-grey);
  margin: 0 0 1.5rem 0;
}

.breadcrumbs a, .breadcrumbs a:visited {
  color: var(--ztl-grey);
}

.breadcrumbs a:hover {
  color: var(--main-color);
}

.content {
  grid-area: content;
  padding: 0 1.5rem;
}

.main-footer {
  grid-area: footer;
  padding: 0 1.5rem;
}

.container {
  display: grid;
  grid-template-areas:
    "header"
    "nav"
    "content"
    "footer";
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 220px auto;
    grid-template-areas:
      "header header"
      "nav content"
      "nav footer";
  }
  .registration-form {
    max-width:40%;
  }
}

/* logo */
.logo {
  flex-grow: 2;
  font-size: 1.5rem;
}

.logo a {
  text-decoration: none;
}

/* login */

.registration-form {
  padding:0 1.5rem;
  width:100%;
}

.registration-form a {
  color: var(--ztl-patty);
}

/* logout */

/* forms */

.errorlist {
  font-size: 0.875rem;
  margin: 0 0 .5rem 0;
  padding: 0;
  color: var(--ztl-red);
  list-style: none;
}

.registration-form .errorlist {
  color: var(--ztl-patty);
}

.helptext {
  font-size: 0.75rem;
  margin: .5rem 0 0 0;
}

.helptext ul {
  margin: 0;
  padding: 0 0 0 1rem;
}

.btn {
  display: inline-block;
  padding: .375rem .75rem;
  background-color: var(--ztl-putty);
  border: 2px solid var(--main-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  text-decoration: none;
}

.btn:hover {
  background-color: var(--main-color);
  color: var(--ztl-putty);
}

.btn.btn-primary {
  background-color: var(--main-color);
  color: var(--ztl-putty);
}

.btn.btn-primary:hover {
  background-color: var(--ztl-putty);
  color: var(--main-color);
}

.btn.btn-danger {
  background-color: var(--ztl-red);
  color: var(--ztl-putty);
  border: 2px solid var(--ztl-red);
}

.btn.btn-danger:hover {
  background-color: var(--ztl-putty);
  color: var(--ztl-red);
}

.btn.btn-danger.force-border {
  border: 2px solid var(--ztl-putty);
}

.field-group {
  margin-bottom: 1rem;
}

.field-group label {
  display: inline-block;
  margin-bottom: .5rem;
}

.field-group input, .field-group select {
  padding: .375rem .75rem;
  font-size: 1rem;
}

.field-group input:not([type="checkbox"]), .field-group textarea, .field-group select {
  display: block;
  width: 100%;
}

table.object-detail {
  border-spacing: 0;
  text-align: left;
  width: 100%;
}

table.object-detail th {
  color: var(--ztl-grey);
}

table.object-detail td:first-child, table.object-detail th:first-child {
  padding-left: 0;
  width: 15vw;
}

table.object-detail td, table.object-detail th {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid var(--ztl-grey);
}

table.object-list {
  border-spacing: 0;
  text-align: left;
  width: 100%;
}

table.object-list th {
  color: var(--ztl-grey);
}

table.object-list td, table.object-list th {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid var(--ztl-grey);
}

table.object-list td:first-child, table.object-list th:first-child {
  padding-left: 0;
}

/* list filter */

.list-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem 0;
}

.list-filter input[type="text"] {
  padding: .375rem .75rem;
  font-size: 1rem;
  flex-grow: 1;
  min-width: 12rem;
}

.list-filter select {
  padding: .375rem .75rem;
  font-size: 1rem;
}

.list-filter label {
  white-space: nowrap;
}