:root {
   --main-fg-color: #0d47a1;
   --main-highlight-color: #2196f3;
   --toast-fail-color: #c62828;
   --toast-warn-color: #ffa000;
   --table-highlight-color: #bbdefb;
   --logo-bg-color: white;
}

.input-field label {
  color: var(--main-fg-color);
}

.failtoast {
  color: white;
  background-color: var(--toast-fail-color);
}

.clickable {
  cursor: pointer;
}

.warningtoast {
  color: white;
  background-color: var(--toast-warn-color);;
}

nav, footer {
  background-color: var(--main-fg-color) !important;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.navbar-logo {
  height: 46px;
  margin: 8px;
  padding: 4px;
  border-radius: 3px;
  background-color: var(--logo-bg-color);
}

.invisible {
  visibility: hidden !important;
}

.bold {
  font-weight: bold !important;
}

.narrow {
  margin-bottom: 0;
}

main {
  flex: 1 0 auto;
}
table.highlight tbody tr:hover {
  background-color: var(--table-highlight-color) !important;
}
#toast-container {
  z-index: 1000000;
}
.modal-footer {
  height: 5em !important;
}

.wide {
  width: 100%;
}

[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
  border: 2px solid var(--main-fg-color);
}

[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after {
  background-color: var(--main-fg-color);
}

.btn, .btn-small {
  background-color: var(--main-fg-color);
}

.btn:hover, .btn-small:hover {
  background-color: var(--main-highlight-color);
}

.btn:focus, .btn-large:focus, .btn-small:focus,
.btn-floating:focus {
  background-color: var(--main-fg-color);
}

.dropdown-content li > a, .dropdown-content li > span {
  color: var(--main-fg-color);
}

.tabs {
  height: 100px;
}

.tabs .tab {
  line-height: 100px;
  height: 100px;
}

.tabs .tab a {
  color: var(--main-highlight-color);
  font-size: 24px;
}

.tabs .tab a:focus, .tabs .tab a:focus.active {
  background-color: transparent;
}

.tabs .tab a:hover, .tabs .tab a.active {
  color: black;
  cursor: pointer;
}

.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
  color: var(--main-highlight-color);
}

.tabs .indicator {
  background-color: var(--main-highlight-color);
}