﻿/* Bootstrap */
/*@import "functions";
@import "variables";
@import "variables-dark";
*/
root, * {
    /* define Nuco colours first */
    --nuco-blue: #28b7ff;
    --nuco-blue-rgb: 40, 183, 255;
    --nuco-blue-hover: #009fe3;
    --nuco-blue-hover-rgb: 0, 159, 227;
    --nuco-white: #FFF;
    --nuco-bg-header-row: #F2F2F2;
    --nuco-bg-alt: #F8F8F8;
    --nuco-border-light: #E8E8E8;
    --nuco-bg-header-row-text: var(--bs-body-color);
    /* define common elements next */
    --bs-nav-link-color: var(--nuco-blue);
    --bs-link-color: var(--nuco-blue);
    --bs-link-color-rgb: var(--nuco-blue-rgb);
    --bs-link-hover-color: var(--nuco-blue-hover);
    --bs-link-hover-color-rgb: var(--nuco-blue-hover-rgb);
    --bs-blue: var(--nuco-blue);
    --bs-btn-bg: var(--nuco-blue);
    --bs-btn-border-color: var(--nuco-blue);
    --bs-btn-hover-bg: var(--nuco-blue-hover);
    --bd-violet-bg: var(--nuco-blue);
    --bs-btn-color: #FFF;
    --bs-btn-bg: var(--nuco-blue);
    --adam-question-color: #FF0;
    --adam-question-bg: #000;
/*    
    --bs-body-bg: #FFF;
*/    
    --bs-border-light: var(--nuco-border-light);
}
/* light theme */

/* dark theme */
[data-bs-theme="dark"] root, [data-bs-theme="dark"] * {
    --bs-body-bg: #1a1a1a;
    --nuco-bg-header-row: #3c3c3c;
    --nuco-bg-alt: #2b2b2b;
    --nuco-border-light: #444;
    --nuco-bg-header-row-text: #FFF;
    --adam-question-bg: #FF0;
    --adam-question-color: #000;
    --nuco-header-bg-alt: #E8E8E8;
    --nuco-header-color-alt: #2B2B2B;
    --bs-secondary-bg: var(--nuco-border-light);
    --bs-nav-link-hover-color: #FFF;
}
.bi {vertical-align: -.125em;fill: currentColor;}
.btn {color: var(--nuco-white);}
.btn-bd-primary {background-color: var(--nuco-blue); border-color: var(--nuco-blue);}
.text-primary {color: var(--nuco-blue) !important;}
.btn-outline-secondary {color: inherit;}
.btn:hover, .btn:focus {background-color: var(--nuco-blue-hover); border-color: var(--nuco-blue-hover); color: var(--nuco-white);}
.sidebar .nav-link:hover, .sidebar .nav-link:focus {background-color: var(--bs-secondary-bg);}
.sidebar .nav-link.active {color: #FFF; background-color: var(--nuco-blue-hover);}
.input-group-prepend {display: flex;}
input, select, textarea {font-size: 1rem; font-family: Roboto, Arial, Helvetica, sans-serif; font-weight: 400;}
.form-control:focus {border: 1px solid var(--nuco-blue); box-shadow: none; background-color: var(--nuco-white);}
.form-select option:checked {
    background-color: var(--nuco-blue-hover) !important;
    color: white !important;
}
option:hover, option:focus {background-color: #654321; color: #FFF;}
.form-select option:hover, .form-select option:focus {
    background-color: var(--nuco-blue) !important;
    color: var(--nuco-bg-alt) !important;
    background-image: none !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    text-decoration: none;
    color: #ffffff;
    background-color: #f3969a;
}
input:-internal-autofill-selected, input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    background-color: var(--nuco-white) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #000;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px var(--nuco-white);
    font-size: 1rem;
    font-family: inherit;
    zoom: 1;
}
input:-webkit-autofill::first-line {font-size: 1rem; font-family: Roboto, Arial, Helvetica, sans-serif;}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    font-size: 1rem;
    font-family: Roboto, Arial, Arial, Helvetica, sans-serif;
    font-weight: 400;
    zoom: 1;
}
header img {width: 100%; height: 64px; max-width: 284px; margin-right: 0.5rem;}
body, html {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}
h1, h2, h3, .roboto-condensed-tracker {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}
h1, h2, h3 {position: relative;}
h1:after, h2:after {position: absolute; bottom: -0.5rem; height: 0.125rem; width: 5rem; background-color: var(--nuco-blue); display: block; content: '';}
h1 {font-size: 2.5rem; margin-bottom: 2.5rem;}
h2 {font-size: 2rem; margin-bottom: 2rem;}
h3 {font-size: 1.5rem; margin-bottom: 1.5rem;}
i.fa-solid, i.fa-regular {margin-right: 0.5rem;}
span.validation-error {display: block; margin: 1em 0;}
section.header {font-weight: bold; background-color: var(--nuco-bg-header-row); color: var(--nuco-bg-header-row-text);}
section.d-flex.alt:nth-of-type(2n+1) {background-color: var(--nuco-bg-alt);}
a.button {text-decoration: none;}
i.blue {color: var(--nuco-blue); background-color: inherit;}
a > i.blue {display: inline-block; width: 1rem; height: 1rem; margin-right: 0.25rem;}
.adam-question {font-weight: bold; margin: 1rem 0; padding: 1rem; font-size: 200%; background-color: var(--adam-question-bg); color: var(--adam-question-color);}
.btn-link {color: var(--nuco-blue); text-decoration: none; border: 1px solid var(--nuco-border-light);}
.btn-link:hover, .btn-link:focus {background-color: var(--nuco-blue-hover); color: #FFF;}
a:hover > i.blue, a:focus > i.blue {background-color: var(--nuco-blue-hover); color: #FFF;}
a.btn-link.d-block {text-align: left;}
.relative-anchor {position: relative; top: -3rem;}
strong.d-flex {gap: 0.25rem;}
strong.d-flex i {width: 1rem; line-height: 1.5rem;}
.flex-column.sticky {flex-wrap: wrap;}
@media all and (min-width: 720px) {
    .sticky-container {overflow: visible;}
    .sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 3.0625rem;
    }
    #sidebarMenu .sticky {height: calc(100% - 6.0625rem);}
/*    header, header.navbar {display: none;}
*/}
/* custom select options */
header .select-container {
    position: relative;
    width: 100%;
}

    header .select-container select {
        display: none; /*hide original SELECT element:*/
    }

/*style the items (options), including the selected item:*/
.select-items div, .select-selected {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    user-select: none;
}

.select-selected {
    background-color: inherit;
    border: 1px solid #888;
    border-radius: 0.25rem;
    color: #DDD;
}

    /*style the arrow inside the select element:*/
    .select-selected:after {
        position: absolute;
        content: "";
        top: 14px;
        right: 10px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-color: #DDD transparent transparent transparent;
    }
    .select-selected.select-arrow-active {border: 1px solid #FFF; color: #FFF;}
    /*point the arrow upwards when the select box is open (active):*/
    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #FFF transparent;
        top: 7px;
    }

/*style items (options):*/
.select-items {
    position: absolute;
    background-color: inherit;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}
header .select-items {background-color: var(--nuco-bg-alt); color: inherit;}
/*hide the items when the select box is closed:*/
.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: #444; color: #FFF;
}
.select-items .same-as-selected {background-color: var(--nuco-blue-hover); color: #FFF;}
.select-items .same-as-selected:hover {background-color: var(--nuco-blue-hover);}
