body {
    box-sizing: border-box;
    font-family: system-ui, monospace;
    /*background-color: #eee;*/
    --bg-light: #eef2f3;
    --font-primary: #333;
    --minimal-shadow: 0 0 1rem rgba(0, 0, 0, .05);
    --border-radius: 1rem;
    --border-radius-inner: .5rem;
    --padding-outer: 1rem;
    --padding-inner: .5rem;
    --margin-block: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

a, a:link, a:active, a:focus, a:visited {
    color: var(--font-primary);
}

.container {
    display: grid;
    height: 100vh;
    grid-template-columns: min-content auto;
    grid-template-rows: 3rem 1fr;
}

.container > div {
}

.container > .topbar {
    grid-column: 1 / span 2;
    padding: .5rem;
}

.container > .topbar h1 {
    font-size: 1.65rem;
    font-weight: normal;
}

.container > .topbar h1 > span {
    color: #d33c43;
}

.container > .sidebar {
    background-color: #fff;
    padding: 2rem;
    border-top: .125rem solid rgba(0, 0, 0, .05);
}

.container > .sidebar > nav .nav-items-wrapper {
    display: flex;
    gap: 2rem;
    flex-direction: column;
}

.container > .sidebar > nav .nav-items-wrapper img {
    width: 3rem;
    height: 3rem;
}

.container > .content {
    background-color: var(--bg-light);
    color: var(--font-primary);
    padding: 2rem;
}

.table-responsive {
    background-color: white;
    border-radius: var(--border-radius);
    padding: var(--padding-outer);
    box-shadow: var(--minimal-shadow);
    margin-block: var(--margin-block);
    overflow-x: auto;
}

.table-responsive > table {
    /*min-width: 800px;*/
    width: 100%;
    border-collapse: collapse;
}

.table-responsive > table > thead {
}

.table-responsive > table > thead th {
    background-color: #eee;
    padding: var(--padding-inner);
}

.table-responsive > table > thead tr th:first-child {
    border-top-left-radius: var(--border-radius-inner);
}

.table-responsive > table > thead tr th:last-child {
    border-top-right-radius: var(--border-radius-inner);
}

.table-responsive > table > tbody.clickable tr {
    cursor: pointer;
}

.table-responsive > table > tbody.clickable tr:hover td {
    background-color: #ddd;
}

.table-responsive > table > tbody tr:nth-child(2n) td {
    background-color: rgba(0, 0, 0, .05);
}

.table-responsive > table > tbody tr td {
    padding: var(--padding-inner);
}

.table-responsive > table > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: var(--border-radius-inner);
}

.table-responsive > table > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: var(--border-radius-inner);
}

.paginator {
    background-color: white;
    padding: var(--padding-outer);
    border-radius: var(--border-radius);
    margin-block: var(--margin-block);
}

.paginator ul.pagination {
    display: flex;
    gap: .5rem;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.paginator .pagination li {
    box-shadow: 0 0 .2rem rgba(0, 0, 0, .15);
    padding: var(--padding-inner);
    border-radius: var(--border-radius-inner);
    cursor: pointer;
}

.paginator .pagination li.active {
    background-color: rgba(100, 150, 140, .1);
}

.paginator .pagination li:hover {
    background-color: rgba(0, 0, 0, .125);
}

fieldset {
    border: 0;
    background-color: white;
    padding: var(--padding-outer);
    border-radius: var(--border-radius);
    margin-block: var(--margin-block);
}

fieldset.search {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

fieldset legend {
    display: none;
}

fieldset .input {
    padding: var(--padding-inner);
}

fieldset.search input[type="text"],
fieldset .input input[type="text"] {
    padding: var(--padding-inner);
    border-radius: var(--border-radius-inner);
    border: 1px solid var(--font-primary);
}

fieldset.search input[type="text"] {
    width: 20rem;
}

fieldset .input.checkbox input[type=checkbox] {
    margin-right: .5rem;
}

fieldset .input.file label {
    display: block;
}

nav.actions {
    background-color: white;
    border-radius: var(--border-radius);
    padding: var(--padding-outer);
    box-shadow: var(--minimal-shadow);
    margin-block: var(--margin-block);
    margin-top: 0;
}

nav.actions a {
    padding: var(--padding-inner);
}

nav.actions a:hover {
    text-decoration: none;
}

input[type="submit"], input[type="button"], button {
    padding: var(--padding-inner);
    padding-inline: var(--padding-outer);
    border-radius: var(--border-radius-inner);
    border: 0;
    box-shadow: 2px 2px #dbb;
    color: white;
    background-color: #d33c43;
    cursor: pointer;
    transition: all .02s linear;
}

:is(input[type="submit"], input[type="button"], button):hover {
    box-shadow: 0px 0px #dbb;
    margin-left: 2px;
    margin-top: 2px;
}

.content > main > .message {
    background-color: #eeccaa;
    border-radius: var(--border-radius);
    padding: var(--padding-outer);
    box-shadow: var(--minimal-shadow);
    margin-block: var(--margin-block);
    margin-top: 0;
}

.content > main > .message.success {
    background-color: #aaccaa;
}

.content > main > .message.error {
    background-color: #ccaaaa;
}

.content > main > .message.hidden {
    display: none;
}

.cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.cards-30-70 {
    display: grid;
    grid-template-columns: 3fr 7fr;
    gap: 2rem;
}

.card {
    background-color: white;
    border-radius: var(--border-radius);
    padding: var(--padding-outer);
    box-shadow: var(--minimal-shadow);
    margin-block: var(--margin-block);
}

table.data-list th {
    text-align: left;
    padding-right: 2rem;
}

.users.login.form {
    div.input {
        max-width: 500px;
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
}

.members.quarterlies-form {
    label {
        display: block;
        padding-block: .5rem;
    }
}