h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

button.btn-submit {
    background-color: var(--background-2a);
    color: var(--text-2a);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button.btn-submit:hover {
    background-color: var(--background-2b);
    color: var(--text-2b);
}

button.btn-submit:disabled {
    background-color: var(--background-disabled);
    cursor: not-allowed;
}

button.btn-cancel {
    background-color: var(--background-cancel);
    color: var(--text-cancel);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button.btn-cancel:hover {
    background-color: var(--background-cancel-hover);
    color: var(--text-cancel-hover);
}

button.btn-cancel:disabled {
    background-color: var(--background-disabled);
    color: var(--text-disabled);
    cursor: not-allowed;
}

button.btn-secondary {
    background-color: var(--background-3b);
    color: var(--text-3b);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button.btn-secondary:hover {
    background-color: var(--background-3a);
    color: var(--text-3a);
}

div.entry-grid-two-col {
    display: grid;
    grid-template-columns: max-content 50%;
    padding: 10px 0px;
}

div.entry-grid-row:nth-child(odd) {
    display: contents;
    background-color: var(--background-4a);
    color: var(--text-4a);
    padding: 10px 0px;
    margin-bottom: var(--bottom-margin);
}

div.entry-grid-row:nth-child(even) {
    display: contents;
    background-color: var(--background-4c);
    color: var(--text-4c);
    padding: 10px 0px;
    margin-bottom: var(--bottom-margin);
}

div.entry-grid-cell, div.entry-grid-click-cell {
    padding: 10px 0px;
    margin-bottom: var(--bottom-margin);
}

div.entry-grid-click-cell {
    cursor: pointer;
    color: var(--text-4a-link);
}

div.entry-grid-click-cell:hover {
    cursor: pointer;
    text-decoration: underline;
}

.entry-grid-label {
    padding: 5px 10px 5px 0px;
    font-weight: bold;
}

.entry-grid-input-text {
    width: 80%;
    padding: 5px;
}

.entry-grid-input-checkbox {
    padding: 5px;
}

div.my-table {
    display: table;
    table-layout: auto;
    width: max-content;
    border-collapse: separate;
    border-spacing: 0 12px;
}

div.table-header {
    display: table-header-group;
    font-weight: bold;
}

div.table-row {
    display: table-row;
}

div.table-row:nth-child(odd) {
    display: table-row;
    background-color: var(--background-4a);
    color: var(--text-4a);
}

div.table-row:nth-child(even) {
    display: table-row;
    background-color: var(--background-4c);
    color: var(--text-4c);
}

div.table-row-uncolored {
    display: table-row;
}

div.table-cell {
    display: table-cell;
    padding: 10px;
}

div.table-cell-clickable {
    display: table-cell;
    padding: 10px;
    color: var(--text-4a-link);
    cursor: pointer;
}

div.table-cell-clickable:hover {
    text-decoration: underline;
}

div.grid-adjacent {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

div.grid-adjacent-clickable:nth-child(odd) {
    padding: 10px;
    background-color: var(--background-4a);
    color: var(--text-4a);
}

div.grid-adjacent-clickable:nth-child(even) {
    padding: 10px;
    background-color: var(--background-4c);
    color: var(--text-4c);
}

div.grid-adjacent-cell {
    padding: 10px;
    border: 2px solid darkgrey;
}

div.clickable {
    color: var(--text-4a-link);
    cursor: pointer;
}

div.clickable:hover {
    text-decoration: underline;
}

div.add-new-item {
    padding: 5px;
    margin-bottom: var(--bottom-margin);
    background-color: var(--background-3b);
    color: var(--text-3b);
    cursor: pointer;
    width: fit-content;
}

p.member-name{
    font-weight: bold;
}

div.member-entry > p {
    margin-bottom: var(--bottom-margin);
}

div.dinner {
    padding: 10px;
    cursor: pointer;
    margin-bottom: var(--bottom-margin);
}

div.dinner:nth-child(odd) {
    background-color: var(--background-4a);
    color: var(--text-4a);
}

div.dinner:nth-child(even) {
    background-color: var(--background-4c);
    color: var(--text-4c);
}

.accordion-container {
    width: max-content;
    margin-bottom: var(--bottom-margin);
}

.accordion-header {
    cursor: pointer;
    color: purple;
    margin: 5px 0px 5px 0px;
}

.accordion-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
    margin-bottom: var(--bottom-margin);
}

.accordion-collapse.is-open {
    grid-template-rows: 1fr;
    margin-bottom: 0px;
}

.accordion-content {
    overflow: hidden;
    padding: 0 1rem;
    transition: padding 0.3s ease-out;
}

.accordion-collapse.is-open .accordion-content {
    padding: 1rem;
}

div.datagrid{
    margin-top: 25px;
    width: fit-content;
}

div.warning-block {
    padding: 10px;
    background-color: var(--background-3a);
    color: var(--text-3a);
    border: 3px double var(--background-4b);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    width: fit-content;
}

ol.flush-list {
    margin-left: 0;
    padding-left: 0;
    list-style-position: inside;
}

ol.flush-list li {
    margin-bottom: var(--bottom-margin);
}

.no-border {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent;
    font-family: "Segoe UI", Verdana, sans-serif;
    font-size: 1rem;
}

.my-form-field {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
}

/* Removes the border that re-appears on click/focus */
.no-border:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Blazor adds these for validation - this stops the green/red border */
.no-border.valid.modified,
.no-border.invalid.modified {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.my-form input, .my-form select {
    font-family: sans-serif;
    color: #333;
}