:root {
    --color-warn: rgb(200, 75, 75);
    --color-bg-selected: #999;
    --color-selected: #e9e9e9;
    --width-card-wide: var(--width-content);
}
main {
    padding: 1rem;
}
nav {
    margin-bottom: 1em;
}
nav ul li {
    margin: 0 1rem 0 0;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 120;
}
h1 {
    margin-bottom: 0;
}
input[type="password"] {
    width: calc(100% - 1.6rem);
}
table tr:nth-child(2n) {
    background-color: transparent;
}
table td {
    border-bottom: 1px solid var(--color-bg-secondary);
}
table tr:last-child td {
    border-bottom: none;
}
table input {
    margin-bottom: 0;
}
a {
    font-weight: normal;
}
form {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
}
a b,
a em,
a i,
a strong,
button,
input[type="submit"] {
    padding: 0.5rem 2rem;
}
table td,
table th,
table tr {
    text-align: left;
}
input.warn {
    background-color: var(--color-warn);
    border: 2px solid var(--color-warn);
}
span.warn, p.warn {
    color: var(--color-warn);
}
.form_header {
    margin-top: 0;
}
input.standard {
    width: auto;
}

/*Datepicker*/
.datepicker-picker {
    border-radius: var(--border-radius);
    background-color: var(--color-bg-secondary);
}
.datepicker-dropdown .datepicker-picker {
    box-shadow: none;
}
.datepicker-footer {
    box-shadow: none;
    background-color: transparent;
}
.datepicker-title {
    box-shadow: none;
    background-color: transparent;
}
.datepicker-header .datepicker-controls .button,
.datepicker-controls .button {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-text);
}
.datepicker-controls .button:active,
.datepicker-header .datepicker-controls .button:hover,
.datepicker-header .datepicker-controls .button:active,
.datepicker-controls .button:focus,
.datepicker-controls .button:hover,
.datepicker-cell:not(.disabled):hover,
.datepicker-cell.focused:not(.selected) {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-bg-secondary);
    color: var(--color-text);
}
.datepicker-controls .button:focus:not(:active) {
    box-shadow: none;
}
.datepicker .week {
    color: var(--color-text);
}
.datepicker-cell.selected,
.datepicker-cell.selected:hover,
.datepicker-cell.prev.selected,
.datepicker-cell.next.selected {
    background-color: var(--color-bg-selected);
    color: var(--color-selected);
}
.datepicker-cell.disabled {
    color: var(--color-text-secondary);
}
.datepicker-cell.prev:not(.disabled),
.datepicker-cell.next:not(.disabled) {
    color: var(--color-text-secondary);
}
.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
    background-color: var(--color-bg);
}
.datepicker-cell.today:not(.selected) {
    background-color: var(--color-bg);
}
.datepicker-cell.today:not(.selected):not(.disabled) {
    color: var(--color-text);
}
.datepicker-cell.today.focused:not(.selected) {
    background-color: var(--color-bg);
}

.datepicker-controls .button:active,
.datepicker-header .datepicker-controls .button:active {
    filter: brightness(var(--active-brightness));
}
.datepicker-cell:hover:not(.disabled),
.datepicker-cell.selected:hover,
.datepicker-header .datepicker-controls .button:hover,
.datepicker-controls .button:focus,
.datepicker-controls .button:hover {
    filter: brightness(var(--hover-brightness));
}
/*Table sort*/
[data-sort]:hover {
    cursor: pointer;
    filter: brightness(var(--hover-brightness));
}

[data-dir="asc"]:after {
    content: ' ↓';
}

[data-dir="desc"]:after {
    content: ' ↑';
}