html {
    --colour-bg: #61103e;
    --colour-text: #3d0224;
}

body {
    background-color: var(--colour-bg);

    padding: 3rem;
}

section {
    padding-bottom: 2rem;
}

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

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

.align-center {
    align-items: center;
}

.align-end {
    align-items: end;
}

.flex-col {
    flex-direction: column;
}

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

.end-text {
    text-align: end;
}

.white {
    color: white;
}

.margin-1 {
    margin-left: .5rem;
    margin-right: .5rem;
}

#spreadsheetData * {
    color: white;
    border-color: white;
    outline-color: white;
}

#spreadsheetData option {
    color: var(--colour-bg);
}

.dt-paging-button.current {
    outline: 2px solid white !important;

    margin-left: 5px !important;
    margin-right: 3px !important;
}









/* error handling */
.errorField {
    outline: 3px solid red !important;
}











/* overriding bootstrap */

.table > :not(caption) > * > * {
    background-color: transparent;
}

.modal-header .close-button {
    display: none;
}


















/* HTML: <div class="loader"></div> */
.loader {
    width: 60px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side,#fff 90%,#0000);
    background: 
      var(--_g) 0%   50%,
      var(--_g) 50%  50%,
      var(--_g) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: l3 1s infinite linear;
  }
  @keyframes l3 {
      20%{background-position:0%   0%, 50%  50%,100%  50%}
      40%{background-position:0% 100%, 50%   0%,100%  50%}
      60%{background-position:0%  50%, 50% 100%,100%   0%}
      80%{background-position:0%  50%, 50%  50%,100% 100%}
  }









  /* special datatable style overrides */

.dt-search,
.dt-paging,
.flex-end {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
}  











#controls button {
    font-size: 1.125rem;
    line-height: 1.6rem;
    color: var(--colour-text);
    background-color: pink;

    border: 3px solid white;
    border-radius: .5rem;

    padding: .5rem 1rem;

    margin: .5rem;
}

#controls button:hover,
#controls button:focus {
    background-color: white;
    cursor: pointer;
}

#controls button.noclick {
    background-color: #aaa;
    color: white;
}

#controls button.noclick:hover,
#controls button.noclick:focus {
    cursor: not-allowed;
}

.special-container {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-gap: .5rem;
}

.special-container-item {
    color: var(--colour-text);
    background-color: pink;

    border-radius: 10px;

    padding: 1rem;
    margin: 0 0 1rem 0;
}

.disabled {
    display: none !important;
}

#spreadsheetData {
    grid-template-columns: 1fr;
}

table {
    width: 100%;
}

td {
    color: white;
    font-size: 1rem;
    line-height: 1.4rem;
}