/* General */

:root {
  --darkblue: #123456;
  --body-white: #EEEEEE;
  --table-white1: #FFFFFF;
  --table-white2: #F2F2F2;
  --table-highlight: #8293A4;
  --section-background: #CCCCCC;
  --subsection-background: #BBBBBB;
  --button-gray: #6C757D;
  --button-gray-active: #5C636A;
  --button-blue: #123456;
  --button-blue-active: #002244;
  --button-red: #CC1212;
  --button-red-active: #AA0000;
  --green: green;
  --red: red;
}

html {
    font-family: Verdana, sans-serif;
    font-size: 12px;
}

@media (min-width: 2000px) {
    html {
        font-size: 14px;
    }
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--body-white);
}

section {
   background-color: var(--section-background);
   margin: 20px 20px 0px 20px;
   padding: 15px;
   border-radius: 5px;
}

a {
    color: inherit;
}

a:hover {
    color: inherit;
}

h1, h2, h4, h5 {
    margin: 0px;
}

h3 {
    margin: 0px 10px 10px 10px;
}

/* Utilities */

.text-green {
    color: var(--green);
}

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

.bg-blue {
    background-color: var(--darkblue);
}

.bg-black {
    background-color: black;
}

.subsection {
    background-color: var(--subsection-background);
    border-radius: 5px;
    padding: 10px;
}

.rounded {
    border-radius: 5px;
}

.form-table td {
    padding: 5px;
}

.btn-gray {
    --bs-btn-color: white;
    --bs-btn-hover-color: white;
    --bs-btn-active-color: white;

    --bs-btn-bg: var(--button-gray);
    --bs-btn-border-color: var(--button-gray);
    --bs-btn-active-border-color: var(--button-gray);

    --bs-btn-hover-bg: var(--button-gray-active);
    --bs-btn-active-bg: var(--button-gray-active);
}

.btn-blue {
    --bs-btn-color: white;
    --bs-btn-hover-color: white;
    --bs-btn-active-color: white;

    --bs-btn-bg: var(--button-blue);
    --bs-btn-border-color: var(--button-blue);
    --bs-btn-active-border-color: var(--button-blue);

    --bs-btn-hover-bg: var(--button-blue-active);
    --bs-btn-active-bg: var(--button-blue-active);
}

.btn-red {
    --bs-btn-color: white;
    --bs-btn-hover-color: white;
    --bs-btn-active-color: white;

    --bs-btn-bg: var(--button-red);
    --bs-btn-border-color: var(--button-red);
    --bs-btn-active-border-color: var(--button-red);

    --bs-btn-hover-bg: var(--button-red-active);
    --bs-btn-active-bg: var(--button-red-active);
}

.btn-text {
    border: none;
    background-color: inherit;
}

/* Navigation */

.navigation {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    flex: 0 0 10rem;
    font-size: 20px;

    background-color: var(--darkblue);
    color: white;
}

.navigation-item {
    padding: 5px;
    text-align: center;
}

.navigation-item:hover {
    color: black;
    background-color: var(--body-white);
}

/* Default Table */

.default-table {
    width: 100%;
    margin: 10px auto;
    table-layout: fixed;
    color: black;
}

.default-table td,
.default-table th {
    padding: 5px 10px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.default-table th {
    background-color: var(--darkblue);
    color: white;
}

.default-table .th-xxs {
    width: 40px;
}

.default-table .th-xs {
    width: 120px;
}

.default-table .th-s {
    width: 200px;
}

.default-table tr {
    background-color: var(--table-white2);
}

.default-table tr:nth-child(2n) {
    background-color: var(--table-white1);
}

.default-table tr:hover {
    background-color: var(--table-highlight);
}

/* Pagination */

.pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.pagination a {
    padding: 8px;
    margin: 2px;
    width: 3rem;
    text-align: center;
    background-color: var(--table-white2);
}

.pagination a.current {
    color: white;
    background-color: var(--button-gray);
    text-decoration: none;
}

.pagination a.hidden {
    visibility: hidden;
}

/* Other */

.splash-position {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

.splash-effect {
    width: 800px;
    height: 800px;
    z-index: -2;

    background:
        radial-gradient(black 30%, transparent 0),
        repeating-conic-gradient(black 0 3%, transparent 0 23%) 50% 50% / 80% 80%,
        repeating-conic-gradient(transparent 0 5%, black 0 7%) 50% 50% / 70% 70%,
        repeating-conic-gradient(transparent 0 7%, black 0 9%) 50% 50% / 60% 60%,
        white;
    background-repeat: no-repeat;
    filter: blur(15px) contrast(70);
}

.splash-color {
    width: 1000px;
    height: 1000px;
    z-index: -1;
    background-color: var(--darkblue);
    mix-blend-mode: darken;
}

.actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.form-check-label {
    margin: 5px;
    transform: scale(1.3);
}

.form-subsection {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.form-column {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
}

.form-column-wide {
    width: 30%;
}

.form-column-narrow {
    width: 10rem;
}

.checkbox-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.checkbox-row label {
    margin-right: 1rem;
}

.section-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}