:host {
    --color-table-border: var(--palette-color-1, gray);
    --color-table-header-background: var(--palette-color-1);
    --color-table-header-foreground: var(--color-content-foreground);
    --color-table-footer-background: var(--palette-color-1);
    --color-table-footer-foreground: var(--color-content-foreground);
    --color-table-row: var(--palette-color-5);
    --color-table-row-alternate: var(--palette-color-4);
}

h2 {
    margin-top: 0;
}

h3 {
    color: gray;
    font-style: italic;
    font-size: 1em;
    font-weight: normal;
}

.container {
    font-family: 'Fira Sans';
}

a,
a:visited {
    color: var(--color-content-foreground);
}

.groups {
    display: flex;
    flex-direction: row;
}

.subgroup:not(:first-child) {
    padding-left: var(--padding-normal);
}

.group-error {
    font-size: 1em;
    font-style: italic;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
    border: var(--border-normal) solid var(--color-table-border);
}

table.arrow {
    border: 0;
    padding: 0 var(--padding-normal);
}

th {
    text-align: left;
    background-color: var(--color-table-header-background);
    height: 30px;
}

.arrow th {
    background-color: unset;
}
th, td {
    padding: 2px 6px;
    user-select: none;
}
td {
    cursor: default;
}
.arrow td {
    font-size: 1.5em;
}
tbody td {
    height: 28px;
}

.actions {
    text-align: right;
    width: 93px;
}

.actions span {
    font-family: 'Material Icons';
    cursor: pointer;
    padding-right: 5px;
}

.hidden {
    display: none !important;
}

#new .actions {
    padding-right: 32px;
}

.successful {
    border-collapse: collapse;
    animation: border-pulse 4s ease-out;
}

@keyframes border-pulse {
    0%, 100% { outline: 4px solid rgba(0, 255, 0, 0) }
    10%, 50% { outline: 4px solid rgba(0, 255, 0, 255) }
}

tr:nth-child(2n+1) {
    background-color: var(--color-table-row);
}
.arrow tr:nth-child(2n+1) {
    background-color: unset;
}

tr:nth-child(2n) {
    background-color: var(--color-table-row-alternate);
}
.arrow tr:nth-child(2n) {
    background-color: unset;
}

.square {
    width: 72px;
    height: 24px;
}

.drilldownable:hover {
    background-color: var(--palette-color-highlight-dark);
}

.drilldown {
    background-color: var(--palette-color-highlight) !important;
}

table,
crud-form {
    display: inline-block;
}

table {
    vertical-align: top;
}

tfoot td {
    border-top: var(--border-normal) solid var(--color-table-border);
    background-color: var(--color-table-footer-background);
}

.footer {
    padding-top: 20px;
}

input {
    background-color: var(--palette-color-4);
    color: inherit;
    border: var(--border-normal) solid var(--color-content-foreground);
}