:root{
    --body-font-family: Lato;
    --body-font-weight: 400;
    --body-font-weight-bold: 700;
    --body-line-height: 1.625;
    --body-font-style: normal;
    --body-font-size: 1rem;
    --body-font-large-size: 1.5rem;
    --body-small-spacing: 2px;
    --body-spacing: 0.5rem;
    --body-paragraph-spacing: 1rem;
    --body-paragraph-double-spacing: calc(var(--body-paragraph-spacing) * 2);

    --footer-font-size: 1rem;
    --bold-font-weight: 700;

    --header-font-size: 2rem;
    --header-height: 120px;

    --submenu-max-width: 30rem;
    --column-min-width: 300px;
    --panel-min-width: 500px;

    --color-black:#111111;
    --color-white:#ffffff;
    --color-white-alt: #f8f9fC;
    --color-blue:#193e72;
    --color-light-blue: #E0EEEF;
    --color-blue-green: #4DA5AE;
    --color-red:#ea5c4e;
    --color-light-red: #FBE3D9;
    --color-orange: #E7973F;
    --color-light-orange: #FFF8E8;
    --color-light-grey: #F0F1F5;
    --color-grey: #ced4da;
    --color-dark-grey: #6c757d;
    --color-green: #46a86c;
    --color-light-green: #e8f6ed;
    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-yellow: #fdcb14;

    --_button_background_color: var(--color-green);
    --_button_forground_color: var(--color-white);
    --_pill_background_color: var(--color-dark-grey);
    --_pill_forground_color: var(--color-white);

    --border-radius: 5px;
    --viewport-width: 80rem;

    --animation-duration: 150ms;
}

/* Reset Start*/

    * {
        margin: 0px;
        padding: 0px;
        font: inherit;
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        font-size: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

    ::selection {
        color: var(--color-white);
        background: var(--color-blue);
    }

    ::placeholder{
        color: var(--color-blue);
    }

    html {
        hanging-punctuation: first last;
    }

    body {
        min-height: 100svh;
        color: var(--color-blue);
        font-weight: var(--body-font-weight);
        font-size: var(--body-font-size);
        font-family: var(--body-font-family);
        font-style: var(--body-font-style);
        line-height: var(--body-line-height);    
    }

    img,
    picture,
    video {
        display: block;
        max-width: 100%;
    }

    h2, h3, h4, h5, h6 {
        text-wrap: balance;
    }
    
    p, ul, ol, img {
        margin-bottom: var(--body-paragraph-spacing);
    }

/* Reset End */

/* Layout Start */
body {
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
}

.container {
    max-width: min(var(--viewport-width), 90%);
    margin: auto;
}

.with_sidebar {
    display: grid;
    gap: var(--body-paragraph-spacing);

    @media (min-width: 1024px) {
        grid-template-columns: 1fr var(--column-min-width);
    }
}

.flex_header {
    display: flex;
    gap: var(--body-spacing);
	align-items:center;
}

.flex_three_middle_grow {
    display: flex;
    gap: var(--body-spacing);

    & > *:nth-child(2) {
        flex-grow: 1;
    }
}

.flex_two_left_grow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--body-spacing);

    & > *:first-child {
        flex-grow: 1;
    }

    & > *:last-child {
        flex-shrink: 1;
    }
}

.grid_stacked_center {
    display: grid;
    justify-items: center;
    gap: var(--body-spacing);
}

.grid_stacked_left {
    display: grid;
    justify-items: left;
    gap: var(--body-spacing);
}

.grid_stacked_right {
    display: grid;
    justify-items: right;
    gap: var(--body-spacing);
}

/* Layout End */

/* Header Starter */

body > header a {
    display: block;
    text-align: right;
}

body > header > a > h1 {
    height: var(--header-height);
    line-height: var(--header-height);
    font-size: var(--header-font-size);
    font-weight: bold;
    background-image: url(../img/nihr-lbrc-cropped.png);
    background-size: 270px auto;
    background-repeat: no-repeat;
    background-position: center left;    
}

/* Header End */

/* Footer Start */

footer {
    background-color: var(--color-blue);
    color: var(--color-white);
    font-size: var(--footer-font-size);
    font-weight: var(--bold-font-weight);
    padding-block: var(--body-paragraph-double-spacing);
    margin-top: var(--body-paragraph-double-spacing);
}

/* Footer End */

/* Main Menu Start */

nav.main_menu {
    background-color: var(--color-light-grey);
    margin-bottom: var(--body-paragraph-double-spacing);
}

nav.main_menu > div {
    display: flex;
    flex-wrap: wrap;

    & > menu:first-child {
        flex-grow: 1;
    }
    
    & > menu {
        display: flex;
        flex-wrap: wrap;
    }
    
    & > menu > li:has(menu) > a:after {
        display: inline-block;
        padding-left: 0.5rem;
        font-family: 'Font Awesome 5 Free';
        content: "\f078";
        font-size: 0.5em;
    }
    
    & > menu menu {
        display: none;
        position: absolute;
        background-color: var(--color-white);
        box-shadow: 0px 8px 16px 0px var(--color-shadow);
        max-width: var(--submenu-max-width);
        border-radius: var(--border-radius);
    }
    
    & > menu > li:hover menu {
        display: block;
        z-index: 1000;
    }
    
    & li {
        list-style: none;
        margin-left: 0;
    }
    
    & a {
        padding-block: var(--body-paragraph-spacing);
        padding-inline: var(--body-spacing);
        display: block;
        font-weight: var(--bold-font-weight);
        color: var(--color-blue);
        
        &:hover {
            background-color: var(--color-grey);
        }
    }
}
/* Main Menu End */

/* Side Menu Start */

aside {
    background-color: var(--color-light-grey);
    padding: var(--body-paragraph-spacing);
    border-radius: var(--border-radius);
    margin-bottom: var(--body-paragraph-spacing);
}

/* Side Menu End */

/* Modal Start */
body:has(.modal) {
    overflow: hidden;
}

.modal {
	/* Underlay covers entire screen. */
	position: fixed;
    inset: 0;
	background-color:var(--color-shadow);
	z-index: 1000;

    display: flex;
    flex-direction:column;
	align-items:center;

	/* Animate when opening */
	animation-name: fadeIn;
	animation-duration: var(--animation-duration);
	animation-timing-function: ease;
}

.modal > .modal-underlay {
	/* underlay takes up the entire viewport. This is only
	required if you want to click to dismiss the popup */
	position: absolute;
	z-index: -1;
    inset: 0;
}

.modal > .modal-content {
	/* Display properties for visible dialog*/
    border: 1px solid var(--color-grey);
	box-shadow: 0px 8px 16px 0px var(--color-shadow);
	background-color: var(--color-white);
    max-width: 700px;
    min-width: var(--panel-min-width);

    padding: var(--body-paragraph-spacing);
    border-radius: var(--border-radius);

	/* Animate when opening */
	animation-name: zoomIn;
	animation-duration: var(--animation-duration);
	animation-timing-function: ease;

    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

.modal.closing {
	/* Animate when closing */
	animation-name: fadeOut;
	animation-duration: var(--animation-duration);
	animation-timing-function: ease;
}

.modal.closing > .modal-content {
	/* Animate when closing */
	animation-name: zoomOut;
	animation-duration: var(--animation-duration);
	animation-timing-function: ease;
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
} 

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
} 

@keyframes zoomIn {
	0% {transform: scale(0.9);}
	100% {transform: scale(1);}
} 

@keyframes zoomOut {
	0% {transform: scale(1);}
	100% {transform: scale(0.9);}
} 

/* Modal End */

/* Form Start */

fieldset
{
    border: none;
    display: grid;
    gap: var(--body-paragraph-spacing);
    align-items: first baseline;
    grid-template-columns: [start] minmax(min(var(--column-min-width), 100%), 1fr) [end];
    margin-block: var(--body-paragraph-spacing);
}

fieldset.columns {
    grid-template-columns: [start] repeat( auto-fit, minmax(min(var(--column-min-width), 100%), 1fr) ) [end];
}

fieldset > p, fieldset > .pill {
    grid-column: start / end;
}

fieldset > ul {
    grid-column: start / end;
    margin-left: var(--body-paragraph-spacing);
}

.field {
    display: grid;
}

label {
    text-transform: capitalize;
}

input,
textarea,
select,
.select2-selection.select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default
{
    accent-color: var(--color-red);
    border: 1px solid var(--color-grey);
}

.select2-selection__choice {
    white-space: wrap !important;
}

.select2-selection__choice__remove {
    border-bottom: 1px solid #aaa !important;
}

/*
    Taken out to fix  problem where:
    - form is in a modal dialog
    - form has another element, say paragraph or pill, that is greater than 1 column
      width, but not yet 2 columns wide.
    - Paragraph stretches width of modal dialog
    - But inputs remain fixed width and are squeezed to the left.
*/
/* input:not([type="search"]),
textarea,
select,
.select2-selection.select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default
 {
    max-width: min(100%, var(--column-min-width));
} */

input[type="checkbox"], input[type="radio"] {
    display: block;
    transform: scale(1.5);
}

input[type="color"] {
    display: inline;
    margin-bottom: var(--body-paragraph-spacing);
}

input[type="date"],
input[type="datetime-local"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
input[type="email"],
input[type="search"],
textarea,
select {
    padding: var(--body-spacing);
    border-radius: var(--border-radius);
    background-color: var(--color-white);
    color: var(--color-blue);
    min-width: 100px
}

select option {
    padding: var(--body-spacing);
    color: var(--color-blue);
}

select[multiple]:focus option:checked {
    background: var(--color-red) linear-gradient(0deg, var(--color-red) 0%, var(--color-red) 100%);
}

textarea {
    resize: vertical;
}

a[role=button],
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="image"],
button[type="button"],
button[type="reset"],
button[type="submit"] {
    padding: var(--body-spacing);
    background-color: var(--_button_background_color);
    color: var(--_button_forground_color);
    border: 1px solid var(--_button_background_color);
    cursor: pointer;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: var(--body-spacing);

    &.muted {
        --_button_background_color: var(--color-dark-grey);
    }
    &.warning {
        --_button_background_color: var(--color-orange);
    }
    &.error {
        --_button_background_color: var(--color-red);
    }
    & .pill {
        color: var(--_button_background_color);
        background-color: var(--_button_forground_color);
    }
}

.button_bar {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    grid-column: start / end;
    gap: var(--body-spacing);
}

.checkbox_bar, .radio_bar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--column-min-width), 1fr));;
    gap: var(--body-spacing);
}

.RadioField ul, .MultiCheckboxField ul {
    display: grid;
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(var(--column-min-width), 1fr));;
    gap: var(--body-spacing);
    padding-top: var(--body-spacing);
    padding-left: var(--body-paragraph-spacing);

    & li {
        display: flex;
        gap: var(--body-spacing);
        align-items: baseline;
    }
}

.field_with_buttons {
    display: flex;

    input {
        flex-grow: 1;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        width: 100px
    }

    & a {
        display: block;
        padding: var(--body-spacing);
        color: var(--color-green);
        border-block: 1px solid var(--color-grey);
    }

    & button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

.field.BooleanField {
    display: flex;
    align-items: last baseline;
    gap: var(--body-spacing);
}

.field.SearchField {
    grid-column: start / end;
}

.field.icon {
    display: flex;
    grid-column: start / end;
    gap: var(--body-spacing);
    flex-direction: row-reverse;

    &::after {
        width: 1.5em;
        line-height: 1.5em;
        font-size: 1.5em;
    }

    & > *:first-child {
        flex-grow: 1;
    }
}

/* Form End */

/* Dropdown Button Start */
.dropdown {
    position: relative;

    & > a::after {
        content: '\f0d7';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 0.8em;
        margin-left: var(--body-spacing);
    }

    & > ul {
        position: absolute;
        background-color: var(--color-white);
        display: none;
        margin: 0;
        z-index: 1000;
        list-style: none;
        background-color: var(--color-white);
        box-shadow: 0px 8px 16px 0px var(--color-shadow);
    }
    
    & > ul > li {
        margin-left: 0;
    }

    & > ul a, & > ul button[type="menu"] {
        display: block;
        padding: var(--body-paragraph-spacing);
        white-space: nowrap;
    }

    & > ul button[type="menu"] {
        min-width: 100%;
    }

    & > ul a:hover, & > ul button[type="menu"]:hover {
        background-color: var(--color-grey);
    }

    &:focus, &:focus-within > ul {
        display: block;
    }
}

/* Dropdown Button End */

/* Table Start */

table {
    border-collapse: collapse;
    text-align: left;
    min-width: 100%;
    max-width: 100%;
}

tr {
    border-top: 1px solid var(--color-light-grey);
}

tr:nth-child(even){
    background-color: var(--color-white-alt);
}

td, th {
    padding: var(--body-spacing);
    vertical-align: top;
}

table.with_icons td:first-child {
    white-space: nowrap;
}

th {
    font-weight: var(--body-font-weight-bold);
}

/* Table End */

/* Pagination Start */
.pagination {
    display: flex;
    justify-content: center;
    margin-block: var(--body-paragraph-spacing);

    & > * {
        border: 1px solid var(--color-light-grey);
        border-left: none;
    }
    
    & > *:first-child {
        border-left: 1px solid var(--color-light-grey);
        border-top-left-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
    }
    
    & > *:last-child {
        border-top-right-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
    }
    
    & a, & span {
        display: block;
        padding: var(--body-spacing);
    }
    
    & :any-link {
        color: var(--color-green);

        &:hover, &:focus {
            background-color: var(--color-light-grey);
        }
    }
    
    & a:not(:any-link) {
        color: var(--color-dark-grey);
    }
    
    & span {
        background-color: var(--color-green);
        color: var(--color-white);
    }
}

.pagination_summary {
    font-size: 0.8em;
    color: var(--color-dark-grey);
    font-style: italic;
    text-align: right;
}

/* Pagination End */

/* Data List Start */
dl {
    margin-block: var(--body-paragraph-spacing);

    & dd::after {
        display: block;
        content: '';
        clear: both;
    }
    
    & dt {
        float: left;
        font-weight: var(--body-font-weight-bold);
        padding-right: var(--body-paragraph-spacing);
     
        &::after {
            content: ': ';
        }
    }
}

dl.concatenated {
    display: flex;
    flex-wrap: wrap;
    color: var(--color-dark-grey);

    & > * {
        padding-right: var(--body-paragraph-spacing);
    }

    & a {
        color: var(--color-dark-grey);
    }
}

dl.columns {
    display: grid;
    gap: var(--body-spacing);
    align-items: last baseline;
    grid-template-columns: [start] 1fr 1fr [end];

    & dt {
        grid-column: 1;
    }
    & dd {
        grid-column: 2;
    }
}

/* Data List End */

/* Panel List Start */

ul.panel_list > li {
    list-style: none;
    margin-left: 0;
    padding-bottom: var(--body-paragraph-spacing);

    border: 1px solid var(--color-light-grey);

    &:first-child {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
    }

    &:last-child {
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
    }

    & header {
        background-color: var(--color-light-grey);
        padding: var(--body-paragraph-spacing);
    }

    & header.success {
        background-color: var(--color-green);
    }

    & header.warning {
        background-color: var(--color-orange);
    }

    & header.error {
        background-color: var(--color-red);
    }

    & > * {
        padding-inline: var(--body-paragraph-spacing);
    }

    & > *:last-child {
        margin-bottom: 0;
    }
}

/* Panel List End */

/* Cards Start */

ul.cards {
    display: grid;
    gap: var(--body-paragraph-spacing);
    align-items: first baseline;
    grid-template-columns: [start] repeat( auto-fit, minmax(min(var(--panel-min-width), 100%), 1fr) ) [end];
    margin-block: var(--body-paragraph-spacing);
}

ul.cards > li {
    list-style: none;
    margin-left: 0;
    padding-bottom: var(--body-paragraph-spacing);

    border: 1px solid var(--color-light-grey);
    border-radius: var(--border-radius);

    & header {
        background-color: var(--color-light-grey);
        padding: var(--body-paragraph-spacing);
        margin-bottom: var(--body-paragraph-spacing);
    }

    & header.success {
        background-color: var(--color-green);
    }

    & header.warning {
        background-color: var(--color-orange);
    }

    & header.error {
        background-color: var(--color-red);
    }

    & > * {
        padding-inline: var(--body-paragraph-spacing);
    }

    & > *:last-child {
        margin-bottom: 0;
    }
}

/* Cards End */

/* Simple List Start */
ul.simple_list {
    margin: var(--body-spacing);
}
/* Simple List End */

/* Tabbed Display Start */

.tabbed_display {
    margin-block: var(--body-paragraph-spacing);
}

.tabbed_display_content {
    padding: var(--body-paragraph-spacing);
    border: 1px solid var(--color-light-grey);
}

.tabbed_display_tabs {
    display: flex;
    gap: var(--body-spacing);
}

.tabbed_display_tabs span:last-child {
    flex-grow: 1;
    text-align: right;
}

.tabbed_display_tabs a {
    margin-bottom: -1px;
    z-index: 1;
    padding-block: var(--body-small-spacing);
    padding-inline: var(--body-paragraph-spacing);
    background-color: var(--color-light-grey);
    border: 1px solid var(--color-light-grey);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    color: var(--color-blue);
}

.tabbed_display_tabs a.selected {
    background-color: var(--color-blue);
    border-bottom-color: var(--color-white);
    color: var(--color-white);
    font-weight: bold;
}

.tabbed_display_tabs a.htmx-request {
    animation: spinner 2s;
    color: transparent;
    background-image: url('data:image/svg+xml;utf8,<svg width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_S1WN{animation:spinner_MGfb .8s linear infinite;animation-delay:-.8s}.spinner_Km9P{animation-delay:-.65s}.spinner_JApP{animation-delay:-.5s}@keyframes spinner_MGfb{93.75%,100%{opacity:.2}}</style><circle class="spinner_S1WN" cx="4" cy="12" r="3"/><circle class="spinner_S1WN spinner_Km9P" cx="12" cy="12" r="3"/><circle class="spinner_S1WN spinner_JApP" cx="20" cy="12" r="3"/></svg>');
    background-repeat: no-repeat;
    background-position: center center;
}

@keyframes spinner {
    from {
        color: currentColor;
        background-image: none;
    }

    to {
        color: transparent;
        background-image: url('data:image/svg+xml;utf8,<svg width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_S1WN{animation:spinner_MGfb .8s linear infinite;animation-delay:-.8s}.spinner_Km9P{animation-delay:-.65s}.spinner_JApP{animation-delay:-.5s}@keyframes spinner_MGfb{93.75%,100%{opacity:.2}}</style><circle class="spinner_S1WN" cx="4" cy="12" r="3"/><circle class="spinner_S1WN spinner_Km9P" cx="12" cy="12" r="3"/><circle class="spinner_S1WN spinner_JApP" cx="20" cy="12" r="3"/></svg>');
    }
}

/* Tabbed Display End */

/* Error Start */

ul.errors {
    margin: 0;

    & li {
        list-style: none;
        color: var(--color-red);    
    }
}
/* Error end */

/* Link List Start */

nav.link_list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--body-spacing);

    & > * {
        white-space: nowrap;
    }
}

/* Icon Buttons Start */
a:not([role=button]).icon, .pill, button[type="menu"] {
    &::before {
        --_font_weight: 900;
        font-size: 1rem;
        font-family: 'Font Awesome 5 Free';
        font-weight: var(--_font_weight);
        padding-right: var(--body-spacing);
        content: var(--_content);    
    }
}
a[role=button],
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="image"],
button[type="button"],
button[type="reset"],
button[type="submit"] 
/* , .link_list a removed as this causes double icons */
{
    &.icon::after {
        --_font_weight: 900;
        font-size: 1rem;
        font-family: 'Font Awesome 5 Free';
        font-weight: var(--_font_weight);
        padding-left: var(--body-spacing);
        content: var(--_content);
    }

    &.icon:empty::after {
        padding-left: 0;
    }
}

.icon.regular {
    --_font_weight: 400;
}
.icon.academic {
    --_content: "\f501";
}
.icon.add {
    --_content: "\f067";
}
.icon.back {
    --_content: "\f2ea";
}
.icon.book {
    --_content: "\f02d";
}
.icon.chart {
    --_content: "\f080";
}
.icon.check {
    --_content: "\f00c";
}
.icon.check_circle {
    --_content: "\f058";
}
.icon.check_circle_unchecked {
    --_content: "\f111";
}
.icon.check_list {
    --_content: "\f0ae";
}
.icon.clear {
    --_content: "\f55a";
}
.icon.confirm {
    --_content: "\f560";
}
.icon.csv {
    --_content: "\f6dd";
}
.icon.dashboard {
    --_content: "\f3fd";
}
.icon.delete {
    --_content: "\f1f8";
}
.icon.download {
    --_content: "\f019";
}
.icon.download_all {
    --_content: "\f218";
}
.icon.edit {
    --_content: "\f044";
}
.icon.email {
    --_content: "\f0e0";
}
.icon.excel {
    --_content: "\f1c3";
}
.icon.exclamation {
    --_content: "\f06a";
}
.icon.export {
    --_content: "\f56e";
}
.icon.bug {
    --_content: "\f188";
}
.icon.file {
    --_content: "\f15b";
}
.icon.fish {
    --_content: "\f578";
}
.icon.folder {
    --_content: "\f07b";
}
.icon.folder_add {
    --_content: "\f65e";
}
.icon.folder_open {
    --_content: "\f07c";
}
.icon.hand {
    --_content: "\f256";
}
.icon.hide {
    --_content: "\f070";
}
.icon.home {
    --_content: "\f015";
}
.icon.image {
    --_content: "\f03e";
}
.icon.list {
    --_content: "\f03a";
}
.icon.lock {
    --_content: "\f023";
}
.icon.pack {
    --_content: "\f466";
}
.icon.pause {
    --_content: "\f04c";
}
.icon.pdf {
    --_content: "\f1c1";
}
.icon.play {
    --_content: "\f04b";
}
.icon.publication {
    --_content: "\f1ea";
}
.icon.quote {
    --_content: "\f10e";
}
.icon.random {
    --_content: "\f074";
}
.icon.redo {
    --_content: "\f01e";
}
.icon.refresh {
    --_content: "\f1b8";
}
.icon.report {
    --_content: "\f71e";
}
.icon.signpost {
    --_content: "\f277";
}
.icon.shipment {
    --_content: "\f48b";
}
.icon.table {
    --_content: "\f0ce";
}
.icon.times {
    --_content: "\f00d";
}
.icon.themes {
    --_content: "\f0e8";
}
.icon.tristate_checked {
    --_content: "\f058";
}
.icon.tristate_unchecked {
    --_content: "\f111";
}
.icon.tristate_none {
    --_content: "\f056";
}
.icon.unlock {
    --_content: "\f09c";
}
.icon.upload {
    --_content: "\f093";
}
.icon.user {
    --_content: "\f007";
}
.icon.user_cog {
    --_content: "\f4fe";
}
.icon.user_add {
    --_content: "\f234";
}
.icon.users {
    --_content: "\f0c0";
}
.icon.view {
    --_content: "\f06e";
}

/* Icon Button End */

/* Flash Message Start */

.flash {
    margin: var(--body-paragraph-spacing);
    border-radius: var(--border-radius);
    padding: var(--body-paragraph-spacing);
    padding-left: var(--body-paragraph-double-spacing);
    background-color: var(--color-light-grey);
}

.flash::before {
    font-family: 'Font Awesome 5 Free';
    content: "\f075";
    font-weight: 900;
    margin-left: -1.5em;
    margin-right: 0.5em;
}

.flash.warning {
    background-color: var(--color-light-orange);

    &::before {
        content: "\f12a";
    }    
}
.flash.error {
    background-color: var(--color-light-red);

    &::before {
        content: "\f071";
    }    
}
.flash.success {
    background-color: var(--color-light-green);

    &::before {
        content: "\f00c";
    }    
}
.flash.message {
    background-color: var(--color-blue-green);
    color: var(--color-white);

    &::before {
        content: "\f277";
    }    
}

/* Flash Message End */

/* Chart Start */

.chart {
    position: relative;
    margin-top: var(--body-paragraph-double-spacing);

    &:hover nav.link_list {
        display: block;
    }
    
    & nav.link_list {
        background-color: var(--color-white);
        border: 1px var(--color-light-grey) solid;
        border-radius: var(--border-radius);
        padding: 0.5rem;
        position: absolute;
        display: none;
        right: var(--body-paragraph-double-spacing);
        top: var(--body-paragraph-spacing);
        box-shadow: 0px 8px 16px 0px var(--color-shadow);
    }    
}

/* Chart End */
button[type="menu"] {
    background-color: transparent;
    border: none;
    display: inline;
    padding: 0;
    margin: 0;
    text-align: left;
}

a, button[type="menu"] {
    text-decoration: none;
    color: var(--color-green);
}

a[href^="http"]::after {
    padding-left: var(--body-spacing);
    font-family: 'Font Awesome 5 Free';
    content: "\f35d";
    font-weight: 900;
    font-size: 0.8em;
}

a.help::after {
    padding-left: var(--body-spacing);
    font-family: 'Font Awesome 5 Free';
    content: "\f059";
    font-weight: 900;
    font-size: 0.8em;
}

section {
    margin-block: var(--body-spacing);
}

strong {
    font-weight: var(--body-font-weight-bold);
}

h2, h3, h4, h5 {
    font-weight: var(--body-font-weight-bold);
}

h2 .fas {
    font-size: 0.7em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.3em;
    color: var(--color-green);
}

h4 {
    font-size: 1.1em;
    color: var(--color-dark-grey);
}

h5 {
    font-size: 1em;
    color: var(--color-dark-grey);
    font-style: italic;
    font-weight: var(--body-font-weight);
}

h6 {
    font-size: 1em;
    color: var(--color-red);
}

p {
    /* margin: auto; */
    max-width: 80ch;
    line-height: 1.5em;
}

hr {
    color: var(--color-light-grey);
    border-color: var(--color-light-grey);
    margin: var(--body-paragraph-spacing);
}

.pill {
    background-color: var(--_pill_background_color);
    color: var(--_pill_forground_color);
    padding: var(--body-spacing);
    border-radius: 2em;
    white-space: nowrap;
    line-height: 1.5;

    & a {
        color: var(--color-white);
    }

    &.success {
        --_pill_background_color: var(--color-green);
    }
    &.muted {
        --_pill_background_color: var(--color-dark-grey);
    }
    &.warning {
        --_pill_background_color: var(--color-orange);
    }
    &.error {
        --_pill_background_color: var(--color-red);
    }
}

.pill.small {
    padding: var(--body-small-spacing);
}

.text-danger {
    color: var(--color-red);
}

.text-muted {
    color: var(--color-dark-grey);
}

#spinner {
    opacity: 0;
    transition: opacity 500ms ease-in;
}

#spinner.htmx-request {
    opacity: 1;
    display: block;
    position: fixed;
    z-index: 2000;
    inset: 0;
    animation: spinner 2s;
    color: transparent;
    background-color: var(--color-shadow);
    background-image: url('data:image/svg+xml;utf8,<svg width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_S1WN{animation:spinner_MGfb .8s linear infinite;animation-delay:-.8s}.spinner_Km9P{animation-delay:-.65s}.spinner_JApP{animation-delay:-.5s}@keyframes spinner_MGfb{93.75%,100%{opacity:.2}}</style><circle class="spinner_S1WN" cx="4" cy="12" r="3"/><circle class="spinner_S1WN spinner_Km9P" cx="12" cy="12" r="3"/><circle class="spinner_S1WN spinner_JApP" cx="20" cy="12" r="3"/></svg>');
    background-repeat: no-repeat;
    background-position: center center;
}