:root {
    /* --canvas-color:#222222;
    --canvas-text-color:#ffffff;
    --banner-color:#06402B;
    --banner-text-color:#ffffff;
    --tile-color:#222222;
    --tile-text-color:#ffffff;
    --button-text-color:#000000; */
    --accent-dark:#51d7ec;
    --accent-dark-text:#000000;
    --banner-dark:#06402B;
    --banner-dark-text:#ffffff;
    --banner-dark-text-variant:#b0b0b0;
}

/* Remove default red box around hyperlinks when focussed */
a:focus {
    outline: none;
}
/* Custom class to underline certain hyperlinks when focussed */
.link-underline-focus:focus {
    text-decoration: underline !important;
}
/* Remove dropdown arrows in menu */
.dropdown-toggle::after {
    content: none;
}
/* Custom class for debugging html layouts */
.red-border {
    border: solid 3px red;
}
/* Light thene */
@media not (prefers-color-scheme: dark) {
    /* Custom class -- always use in a pair with light-mode-only */
    .dark-mode-only {
        display: none;
    }
    /* Custom class for accent button -- coloured from settings in database via _setting_lib.php */
    .btn-accent {
        background-color: var(--accent-light);
        color: var(--accent-light-text);
    }
    /* Variant of btn-accent class */
    .btn-accent:hover, .btn-accent:focus {
        background-color: rgb(from var(--accent-light) calc(r + 40) calc(g + 40) calc(b + 40));
        color: var(--accent-light-text);
    }
    /* Custom class for banner divs */
    .bg-banner,
    .bg-banner a:not(.nav-link) {
        background-color: var(--banner-light);
        color: var(--banner-light-text);
    }
    /* Custom class for banner borders */
    .border-banner {
        border-color: var(--banner-light) !important;
    }
    /* Custom colour for menu text */
    .nav-link, .dropdown-item {
        color: var(--banner-light-text-variant) !important;
    }
    /* Custom colour for focussed menu text */
    .nav-link:hover, .nav-link:focus, .dropdown-item:hover, .dropdown-item:focus, .active {
        color: var(--banner-light-text) !important;
    }
    /* Fill bottom of page with banner colour */
    footer {
        box-shadow: 0 50vh 0 50vh var(--banner-light);
    }
}
/* Dark thene */
@media (prefers-color-scheme: dark) {
    /* Custom class -- always use in a pair with dark-mode-only */
    .light-mode-only {
        display: none;
    }
    /* Custom class for accent button -- coloured from settings in database via _setting_lib.php */
    .btn-accent {
        background-color: var(--accent-dark);
        color: var(--accent-dark-text);
    }
    /* Variant of btn-accent class */
    .btn-accent:hover, .btn-accent:focus {
        background-color: rgb(from var(--accent-dark) calc(r + 40) calc(g + 40) calc(b + 40));
        color: var(--accent-dark-text);
    }
    /* Custom class for banner divs */
    .bg-banner,
    .bg-banner a:not(.nav-link) {
        background-color: var(--banner-dark);
        color: var(--banner-dark-text);
    }
    /* Custom class for banner borders */
    .border-banner {
        border-color: var(--banner-dark) !important;
    }
    /* Custom colour for menu text */
    .nav-link, .dropdown-item {
        color: var(--banner-dark-text-variant) !important;
    }
    /* Custom colour for focussed menu text */
    .nav-link:hover, .nav-link:focus, .dropdown-item:hover, .dropdown-item:focus, .active {
        color: var(--banner-dark-text) !important;
    }
    /* Fill bottom of page with banner colour */
    footer {
        box-shadow: 0 50vh 0 50vh var(--banner-dark);
    }
}

/* .bg-canvas {
    background-color: var(--canvas-color) !important;
}

.bg-canvas,
.bg-canvas h3 {
    color: var(--canvas-text-color);
}

.bg-tile,
.bg-tile th:not(.archive),
.bg-tile td:not(.archive) {
    background-color: var(--tile-color) !important;
}

.bg-tile,
.bg-tile p,
.bg-tile a,
.bg-tile span,
.bg-tile label,
.bg-tile th,
.bg-tile td {
    color: var(--tile-text-color);
}

.bg-banner {
    background-color: var(--banner-color) !important;
}

.bg-banner,
.bg-banner a:not(.nav-link) {
    color: var(--banner-text-color);
}

.border-banner {
    border-color: var(--banner-color) !important;
}

a.btn, label.btn {
    color: var(--button-text-color);
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.navbar a:hover, a.btn:hover {
    text-decoration: none;
}

.red_border {
    border: solid 3px red;
}

.navbar-toggler-icon{
    font-size: 0.8em;
}

footer {
    box-shadow: 0 50vh 0 50vh var(--banner-color);
}

.archive {
    background-color: var(--archive-color) !important;
}

.archive:not(th, td) {
    border-color: var(--archive-color) !important;
}

.required_label::after {
    content: " *";
    color: red;
} */