/* Override default bootstrap styling. 
    Based on bootstrap 5.2 
    https://getbootstrap.com/docs/5.2/
*/
:root {
    /* Root colour specification 
        - HEX and RGB values for each colour are provided as that is the way they are specified in bootstrap 5.2 
        - Darker and Darkest are used as colour shades in buttons, alerts, etc. 
            Darker = Colour-5%
            Darkest = Colour-10%
    */
    /* primary colour - blue */
    --color-primary: #0545fd;
    --color-primary-rgb: rgb(5, 69, 253);
    --color-primary-darker: #04268e;
    --color-primary-darker-rgb: rgb(4, 38, 142);
    --color-primary-darkest: #020b28;
    --color-primary-darkest-rgb: rgb(2, 11, 40);
    /* secondary colour - dark gray */
    /* darker and darkest are used as colour shades in buttons, alerts, etc. */
    --color-secondary: #474747;
    --color-secondary-rgb: rgb(71, 71, 71);
    --color-secondary-darker: #454545;
    --color-secondary-darker-rgb: rgb(45, 45, 45));
    --color-secondary-darkest: #1c1c1c;
    --color-secondary-darkest-rgb: rgb(28, 28, 28);
    /* tertiary colour - light gray */
    /* darker and darkest are used as colour shades in buttons, alerts, etc. */
    --color-tertiary: #707070;
    --color-tertiary-rgb: rgb(112, 112, 122);
    --color-tertiary-darker: #707070;
    --color-tertiary-darker-rgb: rgb(112, 112, 112);
    --color-tertiary-darkest: #474747;
    --color-tertiary-darkest-rgb: rgb(71, 71, 71);
    /* attempt to override the bootstrap root variables */
    --bs-primary: var(--color-primary) !important;
    --bs-primary-rgb: var(--color-primary-rgb) !important;
    --bs-secondary: var(--color-secondary) !important;
    --bs-secondary-rgb: var(--color-secondary-rgb) !important;
    --bs-link-color: var(--color-secondary-darkest) !important;
    --bs-link-hover-color: var(--color-secondary-darkest) !important;
    --bs-light: #ffffff !important;
    --color-dark: #000;
}

.body {
    color: var(--color-dark);
}
/* text */
.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.text-tertiary {
    color: var(--color-tertiary) !important;
}

.text-gray {
    color: var(--bs-gray-400) !important;
}

.text-black {
    color: var(--bs-black) !important;
}

/* link */
.link-primary {
    color: var(--color-primary) !important;
}

.link-secondary {
    color: var(--color-secondary) !important;
}

.link-tertiary {
    color: var(--color-tertiary) !important;
}

.link-gray {
    color: var(--bs-gray-400) !important;
}

.link-black {
    color: var(--bs-black) !important;
}


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

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

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

.bg-gray {
    background-color: var(--bs-gray-200) !important;
}

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


/* border */
.border-primary {
    border-color: var(--color-primary-rgb) !important;
}

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

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

.border-gray {
    border-color: var(--bs-gray-400) !important;
}

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


/* table */
.table-primary {
    background-color: var(--color-primary-rgb) !important;
}

.table-secondary {
    background-color: var(--color-secondary-rgb) !important;
}

.table-tertiary {
    background-color: var(--color-tertiary-rgb) !important;
}

.table-gray {
    background-color: var(--bs-gray-200) !important;
}


/* badge */
.badge.badge-primary {
    background-color: var(--color-primary-rgb) !important;
    color: var(--bs-dark) !important;
}

.badge.badge-secondary {
    background-color: var(--color-secondary-rgb) !important;
    color: var(--bs-dark) !important;
}

.badge.badge-tertiary {
    background-color: var(--color-tertiary-rgb) !important;
    color: var(--bs-dark) !important;
}

.badge.badge-gray {
    background-color: var(--bs-gray-200) !important;
    color: var(--bs-dark) !important;
}

/* alert */
.alert.alert-primary {
    background-color: var(--color-primary-rgb) !important;
    background-color: var(--color-primary-darker-rgb) !important;
    color: var(--color-primary-darker) !important;
}

.alert.alert-secondary {
    background-color: var(--color-secondary-rgb) !important;
    background-color: var(--color-secondary-darker-rgb) !important;
    color: var(--bs-light) !important;
}

.alert.alert-tertiary {
    background-color: var(--color-tertiary-rgb) !important;
    border-color: var(--color-tertiary-darker-rgb) !important;
    color: var(--color-tertiary-darker) !important;
}

.alert.alert-gray {
    background-color: var(--bs-gray-200) !important;
    border-color: var(--bs-dark) !important;
    color: var(--bs-dark) !important;
}


/* nav tabs*/
.nav-tabs.nav-tabs-custom {
}

    .nav-tabs.nav-tabs-custom .nav-link {
        border-bottom: 0;
        background-color: var(--color-secondary-rgb);
        color: var(--bs-light);
    }

        .nav-tabs.nav-tabs-custom .nav-item.show .nav-link,
        .nav-tabs.nav-tabs-custom .nav-link.active {
            color: var(--bs-light);
            background-color: var(--color-primary-rgb);
            margin-bottom: calc(var(--bs-nav-tabs-border-width) * -1);
            border: var(--bs-nav-tabs-border-width) solid var(--color-primary-rgb);
        }

        .nav-tabs.nav-tabs-custom .nav-link:focus,
        .nav-tabs.nav-tabs-custom .nav-link:hover {
            isolation: isolate;
            border: var(--bs-nav-tabs-border-width) solid transparent;
        }

/* buttons */
.btn {
    font-weight: 400;
    line-height: 1.5 !important;
}

    /* standard appearance */
    .btn.btn-primary {
        background-color: var(--color-primary-rgb) !important;
        border-color: var(--color-primary-darker-rgb) !important;
        color: var(--bs-light) !important;
    }

    .btn.btn-secondary {
        background-color: var(--color-secondary-rgb) !important;
        border-color: var(--color-secondary-darker-rgb) !important;
        color: var(--bs-light) !important;
    }

    .btn.btn-tertiary {
        background-color: var(--color-tertiary-rgb) !important;
        border-color: var(--color-tertiary-darker-rgb) !important;
        color: var(--bs-light) !important;
    }

    .btn.btn-gray {
        background-color: var(--bs-gray-200) !important;
        border-color: var(--bs-gray-400) !important;
        color: var(--bs-dark) !important;
    }


    /*standard appearance hover/active */
    .btn.btn-primary:hover,
    .btn-check:active + .btn-primary,
    .btn-check:checked + .btn-primary,
    .btn-primary.active, .btn-primary:active,
    .show > .btn-primary.dropdown-toggle {
        background-color: var(--color-primary-darker-rgb) !important;
        border-color: var(--color-primary-darkest-rgb) !important;
        color: var(--bs-light) !important;
        box-shadow: 0 0 0 0.2rem rgb(38 143 255 / 0%);
    }

    .btn.btn-secondary:hover,
    .btn-check:active + .btn-secondary,
    .btn-check:checked + .btn-secondary,
    .btn-secondary.active, .btn-secondary:active,
    .show > .btn-secondary.dropdown-toggle {
        background-color: var(--color-secondary-darker) !important;
        border-color: var(--color-secondary-darker) !important;
        color: var(--bs-light) !important;
    }

    .btn.btn-tertiary:hover,
    .btn-check:active + .btn-tertiary,
    .btn-check:checked + .btn-tertiary,
    .btn-tertiary.active, .btn-tertiary:active,
    .show > .btn-tertiary.dropdown-toggle {
        background-color: var(--color-tertiary-darker-rgb) !important;
        border-color: var(--color-tertiary-darkest-rgb) !important;
        color: var(--bs-light) !important;
    }

    .btn.btn-gray:hover,
    .btn-check:active + .btn-gray,
    .btn-check:checked + .btn-gray,
    .btn-gray.active, .btn-gray:active,
    .show > .btn-gray.dropdown-toggle {
        background-color: var(--bs-gray-500) !important;
        border-color: var(--bs-gray-600) !important;
        color: var(--bs-light) !important;
    }

    /* outline appearance */
    .btn.btn-outline-primary {
        color: var(--color-primary) !important;
        border-color: var(--color-primary-rgb) !important;
        background-color: transparent !important;
    }

    .btn.btn-outline-secondary {
        color: var(--color-secondary) !important;
        border-color: var(--color-secondary-rgb) !important;
        background-color: transparent !important;
    }

    .btn.btn-outline-tertiary {
        color: var(--color-tertiary) !important;
        border-color: var(--color-tertiary-rgb) !important;
        background-color: transparent !important;
    }

    .btn.btn-outline-gray {
        color: var(--bs-dark) !important;
        border-color: var(--bs-gray-400) !important;
        background-color: transparent !important;
    }

    /* outline appearance hover/active */
    .btn.btn-outline-primary:hover,
    .btn-check:active + .btn-outline-primary,
    .btn-check:checked + .btn-outline-primary,
    .btn-outline-primary.active, .btn-outline-primary:active,
    .show > .btn-outline-primary.dropdown-toggle {
        color: var(--bs-light) !important;
        background-color: var(--color-primary-rgb) !important;
        border-color: var(--color-primary-rgb) !important;
    }

    .btn.btn-outline-secondary:hover,
    .btn-check:active + .btn-outline-secondary,
    .btn-check:checked + .btn-outline-secondary,
    .btn-outline-secondary.active, .btn-outline-secondary:active,
    .show > .btn-outline-secondary.dropdown-toggle {
        color: var(--bs-light) !important;
        background-color: var(--color-secondary-rgb) !important;
        border-color: var(--color-secondary-rgb) !important;
    }

    .btn.btn-outline-tertiary:hover,
    .btn-check:active + .btn-outline-tertiary,
    .btn-check:checked + .btn-outline-tertiary,
    .btn-outline-tertiary.active, .btn-outline-tertiary:active,
    .show > .btn-outline-tertiary.dropdown-toggle {
        color: var(--bs-dark) !important;
        background-color: var(--color-tertiary-rgb) !important;
        border-color: var(--color-tertiary-rgb) !important;
    }

    .btn.btn-outline-gray:hover,
    .btn-check:active + .btn-outline-gray,
    .btn-check:checked + .btn-outline-gray,
    .btn-outline-gray.active, .btn-outline-gray:active,
    .show > .btn-outline-gray.dropdown-toggle {
        color: var(--bs-dark) !important;
        background-color: var(--bs-gray-200) !important;
        border-color: var(--bs-gray-200) !important;
    }

/* Accordions */
.accordion-button:hover {
    background-color: var(--bs-gray-200) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--color-primary-light-rgb) !important;
    color: var(--color-primary) !important;
}