:root {
    --site-font: "Work Sans";
    --txt-colour: white;
    --bg: black;
    --title-bg: black;
    --header-bg: black;
    --content-bg: black;
    --content-bg-color: black;
    --footer-bg: black;
    --slider-bg: darkslategray;
    --active-color: rgb(72, 185, 167);
    --gold: darkgoldenrod;
    --tablehover: rgb(72, 185, 167);
}

button,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--site-font), sans-serif;
    line-height: 1.4;
    font-style: normal;
    font-weight: lighter;
    color: var(--txt-colour);
    margin: 0%;
}

body {
    background-color: black;
    color: var(--txt-colour);
}

@media screen and (max-width: 430px) {
    h1 {
        font-size: x-large;
    }
}

li {
    font-family: var(--site-font), sans-serif;
    padding: 6px 0;
}

a {
    text-decoration: none;
}

p {
    padding: 0%;
    margin: 0%;
}

td {
    padding-inline: 8px;
}

td:hover,
th:hover,
td div:hover,
th div:hover {
    background-color: var(--tablehover);
    color: white !important;
}

.wtlg-body {
    background-image: url("../Content/Images/well-tempered-watermark.png");
}

table {
    border: 0px;
    margin-left: auto;
    margin-right: auto;
}

.dimmer {
    background-color: rgba(211, 211, 211, 0.5);
}

.smaller {
    font-size: smaller;
}

.text-colour {
    color: var(--txt-colour);
}

.white {
    color: white !important;
}

.gray {
    color: rgb(155, 155, 155);
}

.darkgray {
    color: darkslategray;
}

.gold {
    color: var(--gold);
}

.italic {
    font-style: italic;
}

.internal-link {
    color: rgb(12, 131, 131);
    padding: 0px;
    margin: 0px;
    text-underline-offset: 2px;
    text-decoration:underline !important;
    text-decoration-style: dotted !important;
}

.internal-link:hover {
    font-weight: 900;
    text-decoration: underline !important;
}

.external-link {
    color: rgb(0, 102, 255);
    padding: 0px;
    margin: 0px;
    text-underline-offset: 2px;
    text-decoration:underline !important;
    text-decoration-style: dotted !important;
}

.external-link:hover {
    font-weight: 900;
    text-decoration: underline !important;
}

.warning {
    border-color: red;
}

.test {
    background-color: blueviolet;
    color: greenyellow;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff !important;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    font-size: x-small;

    opacity: 0;
    transition: opacity .5s;
}

.tooltip .tooltiptextright {
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 115%;
}

.tooltip .tooltiptextabove {
    position: absolute;
    z-index: 9999;
    bottom: 120%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptextbelow {
    position: absolute;
    z-index: 9999;
    width: 120px;
    top: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltip-touch {
    visibility: visible !important;
    opacity: 1;
}

.tooltip .tooltiptextright::after {
    /* Arrow to left */
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

.tooltip .tooltiptextabove::after {
    /* Arrow below */
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip .tooltiptextbelow::after {
    /* Arrow above */
    content: " ";
    position: absolute;
    bottom: 100%;
    /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}