@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Neucha&display=swap');

/* Branding: */

:root {
    --white: #fff;
    --black: #0a0a0a;
    --gray: #373736;
    --gray-hover: #2f2f2e;
    --gray-muted: #6b6b61;
    --beige: #f7f5ee;
    --yellow: #fcca40;
    --yellow-hover: #f3b81d;
    --yellow-muted: #6b6b61;
    --orange: #ea5d12;
    --orange-hover: #e15006;
    --orange-muted: #918883;
    --teal: #7cc3c6;
    --teal-hover: #62aaad;
    --teal-dark: #62aaad;
    --teal-muted: #8ca5a8;
    --green: #70be9a;
    --green-b: #5eab5c;
    --red: #c02b0a;
    --red-hover: #a62307;
    --red-muted: #8a7a7a;
    --blue: #3f7f9b;
    --blue-hover: #2f6b7f;
    --blue-disabled: #45595e;
    --purple: #492d75;
    --purple-hover: #3e2467;
    --purple-muted: #6b5b7b;
    --bs-info-bg-subtle: #d4eaeb;
    --bs-info-border-subtle: var(--teal);
    --bs-info-rgb: 124, 195, 198;
    --bs-danger: var(--red);
    --bs-danger-rgb: 192, 43, 10;
}

.orange,
.orange:hover {
    color: var(--orange) !important;
}

.yellow,
.yellow:hover {
    color: var(--yellow) !important;
}

.teal,
.teal:hover {
    color: var(--teal) !important;
}

.green,
.green:hover {
    color: var(--green) !important;
}

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

.alert .bi {
    margin-right: 0.5em;
}

.input-group-prepend .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Paper shape on buttons and inputs: */

.btn,
input {
    border-top-left-radius: 255px 0px;
    border-top-right-radius: 10px 225px;
    border-bottom-right-radius: 225px 0px;
    border-bottom-left-radius: 10px 255px;
}

.btn {
    padding: 0.5rem 1.5rem;
}

input {
    outline: none;
    border: none;
    background-color: var(--beige);
    padding: 0.75rem;
    font-size: 16px;
}

/* Primary button: */

.btn-primary {
    --bs-btn-bg: var(--orange);
    --bs-btn-border-color: var(--orange);
    --bs-btn-hover-bg: var(--orange-hover);
    --bs-btn-hover-border-color: var(--orange-hover);
    --bs-btn-active-bg: var(--orange-hover);
    --bs-btn-active-border-color: var(--orange-hover);
    --bs-btn-disabled-bg: var(--orange-muted);
    --bs-btn-disabled-border-color: var(--orange-muted);
    --bs-btn-color: var(--white);
    --bs-btn-hover-color: var(--white);
    --bs-btn-active-color: var(--white);
}

/* Secondary button: */

.btn-secondary {
    --bs-btn-bg: var(--yellow);
    --bs-btn-border-color: var(--yellow);
    --bs-btn-hover-bg: var(--yellow-hover);
    --bs-btn-hover-border-color: var(--yellow-hover);
    --bs-btn-active-bg: var(--yellow-hover);
    --bs-btn-active-border-color: var(--yellow-hover);
    --bs-btn-disabled-bg: var(--yellow-muted);
    --bs-btn-disabled-border-color: var(--yellow-muted);
    --bs-btn-color: var(--black);
    --bs-btn-hover-color: var(--black);
    --bs-btn-active-color: var(--black);
}

.btn-outline-secondary {
    --bs-btn-bg: var(--white);
    --bs-btn-border-color: var(--gray);
    --bs-btn-hover-bg: #f7f5ee;
    --bs-btn-hover-border-color: var(--gray);
    --bs-btn-active-bg: var(--gray-hover);
    --bs-btn-active-border-color: var(--gray-hover);
    --bs-btn-disabled-bg: var(--gray-muted);
    --bs-btn-disabled-border-color: var(--gray-muted);
    --bs-btn-color: var(--gray);
    --bs-btn-hover-color: var(--gray);
}

/* Success button: */

.btn-success {
    --bs-btn-bg: var(--green);
    --bs-btn-border-color: var(--green);
    --bs-btn-hover-bg: var(--green);
    --bs-btn-hover-border-color: var(--green);
    --bs-btn-active-bg: var(--green);
    --bs-btn-active-border-color: var(--green);
    --bs-btn-disabled-bg: var(--green);
    --bs-btn-disabled-border-color: var(--green);
    --bs-btn-color: var(--white);
    --bs-btn-hover-color: var(--white);
}

/* Danger button: */

.btn-danger {
    --bs-btn-bg: var(--red);
    --bs-btn-border-color: var(--red);
    --bs-btn-hover-bg: var(--red-hover);
    --bs-btn-hover-border-color: var(--red-hover);
    --bs-btn-active-bg: var(--red-hover);
    --bs-btn-active-border-color: var(--red-hover);
    --bs-btn-disabled-bg: var(--red-muted);
    --bs-btn-disabled-border-color: var(--red-muted);
    --bs-btn-color: var(--white);
    --bs-btn-hover-color: var(--white);
}

/* Background and headers: */

body {
    background-color: var(--beige);
}

/* Typography: */

body {
    color: var(--black);
    font-family: 'Lato', 'Segoe UI Light', sans-serif;
    font-weight: lighter;
    font-size: 18px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Neucha', cursive;
    font-weight: normal;
}

a {
    color: var(--teal-dark);
    text-decoration: underline;
    font-weight: 200;
}

a.badge {
    text-decoration: none;
}

h1, h2, h3,
.form-group {
    margin-bottom: 1.5rem;
}

.field-validation-error {
    color: var(--bs-danger);
}

.pre {
    white-space: pre-wrap !important;
}

.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Branded navigation: */

.navbar {
    --bs-navbar-background-color: #ea5d12;
    --bs-navbar-brand-color: #fff;
    background-color: var(--bs-navbar-background-color);
    font-weight: 700;
}

.navbar-nav {
    --bs-nav-link-color: #fff;
}

/* Paper effect: */

.paper {
    display: block;
    padding: 2rem 3rem;
    position: relative;
    background-color: var(--white);
    border: solid 7px #fff;
    border-top-left-radius: 255px 0px;
    border-top-right-radius: 10px 225px;
    border-bottom-right-radius: 225px 0px;
    border-bottom-left-radius: 10px 255px;
}

@media (max-width: 1500px) {
    .paper {
        padding: 1.5rem 2rem;
    }
}

/* Paper link blocks: */

.menu.row > div {
    margin-bottom: 3rem;
}

a.paper {
    font-size: 1.3rem;
    text-decoration: none;
    height: 100%;
}

a.paper .title {
    font-weight: 700;
}

a.paper:hover .title {
    text-decoration: underline;
}

a.paper .about {
    display: block;
    color: var(--black);
    font-weight: 200;
    font-size: 0.9em;
    margin: 1rem 0;
}

@media (max-width: 1200px) {

    a.paper {
        padding: 1rem 1.5rem;
    }

    a.paper .about {
        font-size: 0.8em;
        margin-top: 0.5rem;
        margin-bottom: 0;
    }
}

/* Tables: */

.table {
    --bs-table-hover-bg: var(--beige);
    --bs-table-border-color: #e0ddd8;
}

.table th {
    font-weight: normal;
}

.sort {
    text-decoration: none;
}

.table-responsive td,
.table-responsive th {
    white-space: nowrap;
}

th {
    white-space: nowrap;
    width: 1%; /* Make columns shrink to fit content */
}

.table-success {
    --bs-table-bg: #eef9f4;
}

.table .btn {
    padding: 0.1em 0.5em;
    font-size: 0.8em;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

/* Responsive table scaling: */

@media (max-width: 2000px) {
    table {
        font-size: 17px;
    }
}

.table-responsive td,
.table-responsive th {
    white-space: nowrap;
    vertical-align: middle;
}

@media (max-width: 2000px) {

    .table-responsive {
        font-size: 0.9em;
    }
}

@media (max-width: 1600px) {

    .table-responsive {
        letter-spacing: -1px;
    }

    .table-responsive td {
        white-space: normal;
    }
}

/* JavaScript utilities: */

[data-load] {
    display: none; /* Fades in when loaded */
}

.select2-container--default .select2-selection--single {
    border: none;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: 0.15rem;
}

/* Select lists */

.select-wrapper {
    width: 100%;
    position: relative;
    display: block;
}

.select-wrapper::after {
    content: "";
    position: absolute;
    right: 10px; /* Position the arrow on the right side of the dropdown */
    top: 21px; /* Center the arrow vertically */
    transform: translateY(-50%); /* Adjust the arrow's vertical position */
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent; /* Create the arrow */
}

.select-wrapper select {
    -webkit-appearance: none; /* Remove default select dropdown arrow for Chrome */
    -moz-appearance: none; /* Remove default select dropdown arrow for Firefox */
    appearance: none; /* Remove default select dropdown arrow for standard syntax */
}

/* Monthly update styling: */

[data-submission] {
    cursor: pointer;
}

/* Account: */

.account {
    display: flex;
    background-color: #fff;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
}

@media (min-width: 1800px) {
    .account {
        right: 1.3em; /* workaround due to scrollbar shift fix */
    }
}

@media (max-width: 768px) {
    .account {
        width: 100%;
        justify-content: space-between;
        margin-bottom: 0.5em;
        border-radius: 0;
        top: 0;
        right: 0;
    }
}

@media (min-width: 769px) {

    .account {
        padding: 3px;
        margin-top: -3px;
        justify-content: flex-end;
    }
}

.account .btn-block {
    max-width: 260px;
}

.account .username {
    max-width: 260px;
}

.account > * {
    width: fit-content;
}

.account .btn {
    font-size: 0.9em;
}

/* Search boxes */

.options-and-search {
    margin-bottom: 1.5rem;
}

.options-and-search form {
    display: flex;
    justify-content: space-between;
}

.options-and-search input {
    flex-grow: 1;
}

/* Breadcrumbs: */

.breadcrumb {
    flex-wrap: nowrap;
    background-color: var(--white);
    color: var(--black);
    padding: 10px;
    font-size: 0.95em;
}

.breadcrumb-item {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: ">";
}

.breadcrumb a {
    text-decoration: none;
    color: var(--orange);
}

/* Forms */

fieldset {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

legend {
    font-size: 1.3em;
    font-family: 'Neucha', cursive;
    font-weight: normal;
    margin-bottom: 1.5rem;
}

.required::after {
    content: "*";
    color: var(--red);
    margin-left: 0.2em;
}

/* Lists */

dl {
    margin-top: 1.5rem;
}

/* Monthly update widget */

[data-wnc-update] h1,
[data-wnc-update] h2,
[data-wnc-update] h3 {
    font-family: 'Lato', 'Segoe UI Light', sans-serif;
    font-weight: 800;
}

[data-wnc-update] h2 {
    font-size: 1.8rem;
}

[data-wnc-update] h3 {
    font-size: 1.3rem;
}

/* Status circles */

.counts {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.circle {
    padding: 0.5em;
    width: 0;
    height: 0;
    display: inline-block;
    margin-bottom: -4px;
    border-radius: 999px;
}