:root {
    --back: #EF961a;
    --dark: #6D2760;
    --even: #eFdCd0;
    --odd:  #eFeDe0;
    --sort: gold;
    --bord: black
}

body {
    margin: 1% 1%;
}

body:not(.loaded) .table {
    display: none;
}

.header-container {
    text-align: center;
}

.header-image {
    height: 120px;
    max-width: 90%
}

h1 {
    color: var(--dark);
    font-family: sans;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 4px double;
}

.table {
    width: 100%;
    border-collapse: collapse;
    border: 0.5px solid var(--bord);
    background-color: var(--back);
}

.table th {
    user-select: none;
}

.row {
    border: 0.5px solid var(--bord);
}

.row th,td {
    padding: 8px;
}

.row-header {
    background-color: var(--dark);
    color: var(--even);
}

.row-even {
    background-color: var(--even);
}

.row-odd {
    background-color: var(--odd);
}

.center {
    text-align: center;
}

.cell-left {
    text-align: left;
}

.cell-right {
    text-align: right;
}

.cell-center {
    text-align: center;
}

.sort-indicator {
    color: gold;
    font-weight: 900;
}

footer {
    font-size: 0.7rem;
    text-align:center;
    margin: 2rem auto;
}

.tooltip-popup {
  position: fixed;
  z-index: 1000;
  border: 1px solid #333;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s;
}

.tooltip-popup.active {
  visibility: visible;
  opacity: 1;
}