:root {
    --vertical-spacing-above: 10px;
    --vertical-spacing-below: 6px;
}

p {
    margin-top: var(--vertical-spacing-above);
    margin-bottom: var(--vertical-spacing-below);
    line-height: 120%;
    text-align: justify;
    font-size: var(--font-size-regular);
}
    p.note,
    .note {
        margin-top: 0pt;
        margin-bottom: 0pt;
        font-size: var(--font-size-small);
        font-style: italic;
        text-align: right;
    }
    p.warning,
    .warning {
        font-weight: bold;

    }
    p.small,
    .small {
        font-size: var(--font-size-small);
    }
    p.large,
    .large {
        font-size: calc(1.2 * var(--font-size-regular));
    }

img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

a {
    color: var(--palette-primary-main);
    text-decoration: underline;
    cursor: pointer;
}

    a:hover {
        color: var(--palette-primary-dim);
        text-decoration: none;
    }

    small {
        font-size: var(--font-size-small);
    }

ul,
ol {
    --list-indent: 1.5em;

    font-size: var(--font-size-regular);
    padding: 0;
    padding-bottom: var(--vertical-spacing-below);
    margin: 0;
}
ul {
    list-style: none;
}
    ul > ul {
        padding-left: var(--list-indent);
    }
ol {
    padding-left: var(--list-indent)
}
    ul li,
    ol li {
        position: relative;
        margin-top: var(--vertical-spacing-above);
        margin-bottom: var(--vertical-spacing-below);
        text-align: justify;
    }
    ul li {
        padding-left: var(--list-indent);
    }
        ul li::before {
            position: absolute;
            content: '';
            display: inline-block;
            width: var(--font-size-large);
            height: var(--font-size-large);
            left: 0em;
            background-image: url('gfx-2020/style/list-item-bullet.svg');
            background-repeat: no-repeat;
            background-size: 8px auto;
            background-position: center center;
        }

h1 {
    position: relative;
    font-family: var(--header-font);
    font-weight: bold;
    font-size: 36px;
}

h2 {
    font-family: var(--header-font);
    font-weight: bold;
    font-size: 30px;
    margin-top: 28px;
    margin-bottom: 10px;
}

legend,
.fieldset-legend,
h3 {
    font-family: var(--header-font);
    font-weight: bold;
    font-size: 23px;
    margin-top: 20px;
    margin-bottom: 10px;
}

h4 {
    font-family: var(--header-font);
    font-weight: bold;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 4px;
}

    h1 p,
    h2 p,
    h3 p,
    h4 p {
        font-size: inherit;
        color: inherit;
        margin: 0;
        padding: 0;
    }


hr {
    position: relative;
    overflow: visible;
    display: block;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 6px;
    margin-bottom: 6px;
    height: 2px;
    border: none;
    background-color: var(--palette-background-divider);
}


/** TABLE **/
.table-container-view {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    margin-top: var(--vertical-spacing-above);
    margin-bottom: var(--vertical-spacing-below);
}
    .table-container-view.no-scroll {
        overflow: hidden;
    }

    .table-container-view .table-container {
        display: inline-block;
        margin: 0;
        padding: 0;
    }
    .table-container-view .table-container > table {
        margin-top: 0;
        margin-bottom: 0;
    }
        .table-container-view .table-container.wide {
            min-width: 100%;
        }


table {
    --table-border: 1px solid var(--palette-primary-main);

    color: var(--palette-background-text);
    font-family: var(--regular-font);
    font-size: var(--font-size-regular);
    border-collapse: separate;
    border-spacing: 0px 0px;
    margin-top: var(--vertical-spacing-above);
    margin-bottom: var(--vertical-spacing-below);
    border: none;
}
    table.wide {
        min-width: 100%;
    }


table td,
table th {
    font-family: var(--regular-font);
    font-size: var(--font-size-regular);
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    border: none;
    border-right: var(--table-border);
}
table th {
    border-color: var(--palette-primary-bright);
}
    table tr td:last-child {
        border-right: var(--table-border);
    }
    table tr td:first-child {
        border-left: var(--table-border);
    }

    table tr:first-child td {
        border-top: var(--table-border);
    }
        table tr:first-child td:last-child {
            border-top-right-radius: var(--border-radius);
        }
        table thead + tbody tr:first-child td {
            border-top: none;
        }

        table tr:first-child td:first-child {
            border-top-left-radius: var(--border-radius);
        }
            table thead + tbody tr:first-child td:first-child {
                border-top-left-radius: 0;
            }
        table tr:first-child td:last-child {
            border-top-right-radius: var(--border-radius);
        }
            table thead + tbody tr:first-child td:last-child {
                border-top-right-radius: 0;
            }
    table tr:nth-child(even) td {
        background-color: var(--palette-background-dim-1);
    }
    table tr:nth-child(odd) td {
        background-color: var(--palette-background-dim-2);
    }
    table tr:last-child td {
        border-bottom: var(--table-border);
    }

    table th {
        font-weight: bold;
        color: var(--palette-primary-text);
        background-color: var(--palette-primary-main);
        vertical-align: middle;
        text-align: center;
    }
        table th a {
            color: var(--palette-primary-text);
        }
            table th a:hover {
                color: var(--palette-primary-dim);
            }
        table th:last-child {
            border-right: none;
        }
        table th:first-of-type:last-of-type {
            text-align: right;
        }
            table tr:nth-child(even) th {
                background-color: var(--palette-primary-dim);
            }
                table tr:nth-child(even) th a:hover {
                    color: var(--palette-primary-main);
                }
        table tr:first-child th:first-child {
            border-top-left-radius: var(--border-radius);
        }
        table tr:first-child th:last-child {
            border-top-right-radius: var(--border-radius);
        }

        table th.sortable {
            position: relative;
            padding-right: 26px;
            cursor: pointer;
        }
            table th.sortable::after {
                position: absolute;
                content: '';
                display: block;
                width: 20px;
                height: 100%;
                right: 2px;
                top: 0px;
                background-repeat: no-repeat;
                background-size: 14px auto;
                background-position: center center;
                background-image: url('gfx-2020/style/table-sortable-none.svg');
            }

            table th.sortable.asc::after {
                background-image: url('gfx-2020/style/table-sortable-asc.svg');
            }

            table th.sortable.desc::after {
                background-image: url('gfx-2020/style/table-sortable-desc.svg');
            }

        table th.sortable:focus {
            outline: none;
        }

        table th.sortable:hover {
            background-color: var(--palette-primary-dim);
        }

        table th > p {
            font-size: var(--font-size-small);
        }


        table tbody .ordering-handle {
            background-repeat: no-repeat;
            background-size: auto 27px;
            background-position: center center;
            background-image: url('gfx-2020/style/action-move-up-down.svg');
            cursor: pointer;
        }
            table tbody .ordering-handle:hover {
                background-image: url('gfx-2020/style/action-move-up-down-hover.svg');
            }

table.simple,
table.simple tr,
table.simple tr td,
table.simple tr th {
    background-image: none;
    background-color: transparent;
    border: none;
    border-radius: 0px;
    padding: 0px;
    margin: 0px;
}

.no-scroll {
    max-width: 100%;
}

.imageRow {
    text-align: center;
    margin-top: var(--vertical-spacing-above);
    margin-bottom: var(--vertical-spacing-above);
}
    .imageRow > p {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .imageRow img {
        max-width: calc(100%) !important;
        vertical-align: middle;
        margin: 2px;
    }

.alignleft {
    text-align: left;
}

.alignright {
    text-align: right;
}

.aligncenter {
    text-align: center;
}

.alignjustify {
    text-align: justify;
}

.alignTop {
    vertical-align: top;
}

.floatleft{
    display: block;
    text-align: center;
    float: left;
    margin-right: 10px;
}
.floatright{
    display: block;
    text-align: center;
    float: right;
    margin-left: 10px;
}
.center {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


/** INFO KEYS **/
.info-keys {
    white-space: nowrap;
    padding-bottom: 0px;
    overflow: hidden;
}

.info-keys-title {
    display: inline-block;
    font-size: var(--font-size-large);
    font-family: var(--header-font);
    margin-right: 12px;
}
    @media screen and (max-width: 700px) {
        .info-keys-title {
            display: block;
            margin-bottom: 12px;
        }
    }

.info-keys-group {
    position: relative;
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: var(--font-size-regular);
    font-weight: normal;
    font-family: var(--regular-font);
    white-space: normal;
}
    @media screen and (max-width: 700px) {
        .info-keys-group {
            display: flex;
            justify-content: center;
        }
    }

    .info-keys-group .info-key {
        display: flex;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 1;
        width: 150px;
    }
        @media screen and (max-width: 700px) {
            .info-keys-group .info-key {
                width: 100px;
            }
        }

        .info-keys-group .info-key .name {
            opacity: 0.6;
            font-size: 80%;
        }
        .info-keys-group .info-key .gap {
            flex-grow: 1;
            flex-shrink: 1;
        }



/** QUICK LIST **/
#content-quick-list {
    text-align: center;
    white-space: normal;
    margin-bottom: 6px;
    visibility: hidden;
}
    #content-quick-list.hidden {
        display: none;
    }
    #content-quick-list.visible {
        visibility: visible;
    }
    #content-quick-list a {
        line-height: calc(2 * var(--font-size-regular));
        margin-right: 35px;
        white-space: nowrap;
        cursor: pointer;
    }
    .transparent #content-quick-list {
        display: none;
    }
    @media screen and (max-width: 700px) {
        #content-quick-list {
            text-align: center;
        }
            #content-quick-list a {
                margin: 0px 17px;
            }
    }
    @media screen and (max-width: 400px) {
        #content-quick-list {
            text-align: center;
        }
            #content-quick-list a {
                margin: 0px 10px;
            }
    }

/** FORMATTING **/
/* Use Bootstrap-like classes for quick in-code formatting. */
.d-flex {
    display: flex !important;
}
.d-inline-block {
    display: inline-block;
}
    .flex-row {
        flex-direction: row !important;
    }
    .flex-wrap {
        flex-wrap: wrap !important;
    }
    .flex-shrink-0 {
        flex-shrink: 0 !important;
    }
    .flex-shrink-1 {
        flex-shrink: 1 !important;
    }
    .flex-grow-0 {
        flex-grow: 0;
    }
    .flex-grow-1 {
        flex-grow: 1 !important;
    }
    .gap-1 {
        gap: var(--spacing) !important;
    }
        .gap-2 {
            gap: calc(2 * var(--spacing)) !important;
        }
    .justify-content-center {
        justify-content: center;
    }
    .justify-content-between {
        justify-content: space-between;
    }
    .justify-content-end {
        justify-content: flex-end;
    }
    .align-items-center {
        align-items: center;
    }
    .flex-wrap {
        flex-wrap: wrap;
    }
.overflow-hidden {
    overflow: hidden;
}
.text-lowercase {
    text-transform: lowercase;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-nowrap {
    white-space: nowrap;
}
.text-end {
    text-align: right;
}
.text-decoration-line-through {
    text-decoration: line-through;
}
.cursor-pointer {
    cursor: pointer;
}
.opacity-50 {
    opacity: 0.50;
}
.px-1 {
    padding-left: calc(1 * var(--spacing));
    padding-right: calc(1 * var(--spacing));
}