* {
    font-family: 'Libre Franklin', sans-serif;
    x-font-family: 'Open Sans', sans-serif;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
    margin: 0;
}

body {
    margin: 0;
}

    body h1:first-child {
        margin-top: 0;
    }

:is(h1, h2, h3, h4, h5, h6) {
    font-weight: bold;
    margin-bottom: 12px;
    margin-top: 32px;
    font-variant: small-caps;
    letter-spacing: 1px;
    text-transform: capitalize;
}

h1 {
    font-size: 18pt;
}

h2 {
    font-size: 16pt;
}

h3 {
    font-size: 14pt;
}

h4 {
    font-size: 12pt;
}

h5 {
    font-size: 11pt;
}

hr {
    width: 100%;
}


/* LINKS */

a {
    color: var(--rz-secondary);
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 3px;
}

    a:hover {
        text-decoration: none;
        background: var(--rz-secondary-lighter);
    }


/* STACK */

.stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .stack.stretch > div {
        justify-self: stretch;
        align-self: stretch;
        border: solid 1px #090;
    }

/* ITEM LIST */

.list-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 8px;
    border: solid 1px #ccc;
    border-left: solid 4px #69c;
    border-radius: 1px;
    box-shadow: rgba(0,0,0,0.1) 1px 2px 4px;
    margin: 8px 0;
}

    .list-item > div {
        flex: 1 1 0;
        padding: 8px 16px;
    }

    .list-item.highlight {
        background: #69c;
        color: #fff;
    }

/* ROW */

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: start;
    margin: 0 !important;
}

    .row.fit {
        justify-content: space-evenly;
    }

    .row.center {
        justify-content: center;
    }

.col {
    flex: 1 1 0;
    justify-content: space-between;
}

    .col > * {
        align-self: start;
    }

.row.nowrap {
    flex-wrap: nowrap;
}

/* GRID */

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-rule: dotted;
    gap: 8px;
}

    .grid.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid.cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid.cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }

.cell {
    column-width: 1fr;
}

    .cell.span-2 {
        grid-column: span 2;
    }

    .cell.span-3 {
        grid-column: span 3;
    }

    .cell.span-4 {
        grid-column: span 4;
    }

    .cell.span-5 {
        grid-column: span 5;
    }


/* COMMANDS */

/* CSS to make commands on right side of line above*/
commands {
}

/* BAR */

.bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

    .bar > * {
    }

.button-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-column: 2;
    margin-top: 16px;
    gap: 8px;
}

.spacer {
    margin: auto;
}

/* CARD */

.rz-tabview-panel {
    padding: 0;
}

.rz-tabview-panels {
    border: solid 1px #bbb;
    border-radius: 2px;
    padding: 12px 16px;
    box-shadow: rgba(0,0,0,0.2) 2px 3px 6px !important;
    background: #fff;
}

.rz-tabview-nav .rz-tabview-selected {
    border: solid 1px #bbb;
    box-shadow: rgba(0,0,0,0.2) 2px 3px 6px !important;
}

    /* remove box-shadow from bottom */
    .rz-tabview-nav .rz-tabview-selected::after {
        background-color: #fff;
        height: 10px;
        content: "";
        position: absolute;
        bottom: -10px;
        left: 0px;
        right: -5px;
    }

/* */

.box {
    border: solid 1px #ccc;
    border-left: solid 4px #69c;
    border-radius: 1px;
    box-shadow: rgba(0,0,0,0.1) 1px 2px 4px;
    padding: 8px 16px;
    margin: 8px 0;
}

    .box > div {
    }

.card {
    border: solid 1px #bbb;
    border-radius: 3px;
    padding: 12px 16px;
    box-shadow: rgba(0,0,0,0.2) 2px 3px 6px;
    background: #fff;
}

    .card :is(h1, h2, h3, h4, h5, h6):first-child {
        margin: 0;
    }

    .card :is(h1, h2, h3, h4, h5, h6) {
        padding-bottom: 4px;
        margin-bottom: 16px !important;
    }

    .card.tight {
        padding: 0px;
    }

    .card.selected {
        border: solid 3px #69c;
        box-shadow: rgba(0,0,0,0.25) 3px 4px 8px;
    }

    .card.info {
        background: #cce8ff;
        font-weight: bold;
    }

    .card.success {
        background: #cfc;
        font-weight: bold;
    }

    .card.warning {
        background: #fe9;
        font-weight: bold;
    }

    .card.error {
        background: #fcc;
        font-weight: bold;
    }

/* FORM */

.form-layout {
    padding: 8px 24px;
}

    .form-layout h1 {
        font-size: 14pt;
        border-bottom: solid 2px #e0e0e0;
        margin-bottom: 24px;
    }

    .form-layout h2 {
        font-size: 14pt;
        font-weight: bold;
        margin: 0 0 16px 0;
    }

    .form-layout fieldset {
        border: none;
        padding: 0;
        margin: 24px 0;
        padding-left: 16px;
    }

    .form-layout > label {
        font-size: 9pt;
        letter-spacing: 0.075em;
        text-transform: uppercase;
        font-family: Arial;
    }

    .form-layout label.required {
        font-weight: bold;
    }

        .form-layout label.required::before {
            content: "*";
            margin-right: 4px;
        }

.form-column {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 4px 16px;
    align-items: center;
}

    .form-column :is(h1, h2, h3, h4, h5, h6) {
        grid-column: span 2;
        font-size: 14pt;
        margin: 16px 0 0 0;
    }

    .form-column > label {
        font-size: 10pt;
        letter-spacing: 0.075em;
        text-transform: uppercase;
        font-family: Arial;
        text-align: right;
        align-self: center;
        margin-bottom: 8px;
    }

    .form-column hr {
        grid-column: span 2;
    }

    .form-column > div {
        margin-bottom: 8px;
    }

    .form-column .buttons {
    }

.align-left > label {
    text-align: left;
}

.form-row {
    display: grid;
    grid-template-columns: auto 3fr;
    gap: 4px 16px;
    align-items: center;
}

    .form-row > label {
        font-size: 10pt;
        letter-spacing: 0.075em;
        text-transform: uppercase;
        font-family: Arial;
        text-align: right;
        max-width: 200px;
        align-self: center;
        margin-bottom: 8px;
    }

.flat {
    box-shadow: none;
}

.scroll {
    overflow-y: scroll;
}

.center {
    align-content: center;
}

label[for] {
    cursor: pointer;
}

.note {
}

.debug {
    border: dashed 2px #f00;
}

.filter-wrapper {
    border: solid 1px #ddd;
    border-radius: 3px;
    padding: 8px;
    box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
    background: #fff;
}

.filter-table {
}

    .filter-table td {
        padding: 8px;
    }

.filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

    .filter-grid > * {
        flex: 1 1 250px;
        width: 250px;
        max-width: 250px;
    }

.filter-buttons {
}

    .filter-buttons > * {
    }