/* Listviews */

.rt-collection-container {
    padding-left: 0px;
}

li.rt-item {
    list-style: none;
}

.rt-collection-container > li:first-child {
    background-color: var(--main-color);
    color: var(--secondary-color);
}

    .rt-collection-container > li:first-child .rt-attribute {
        border-left: 1px solid var(--secondary-color);
        border-right: 1px solid var(--secondary-color);
        border-bottom: 1px solid var(--secondary-color);
        border-top: none;
    }

/* 2 Column Card Layout */
@media screen and (max-width: 736px) {
    .rt-collection-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }

    .rt-item {
        border: 1px solid var(--tertiary-color2);
        border-radius: 20px;
        padding: 20px;
    }

    /* Don't display the first item, since it is used to display the header for tabular layouts*/
    .rt-collection-container > li:first-child {
        display: none;
    }

    .rt-attribute::before {
        content: attr(data-name);
        font-family: TitilliumWeb-SemiBold, Arial, sans-serif;
    }

    /* Attribute name for first column, and attribute value for second column. */
    .rt-attribute {
        display: grid;
        grid-template-columns: minmax(9em, 30%) 1fr;
    }
}

/* 1 Column Card Layout */
@media screen and (max-width:580px) {
    .rt-collection-container {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Tabular Layout */
@media screen and (min-width: 737px) {
    .rt-actions-item {
        min-width: 50px;
    }

    /* The maximum column width, that can wrap */
    .rt-item-container {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: 1.4fr 20fr;
    }

    .rt-attribute-container {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
    }

    /* Definition of wrapping column width for attribute groups. */
    .rt-group1, .rt-group2, .rt-group3, .rt-group4, .rt-group5, .rt-group6, .rt-group7, .rt-group8 {
        --column-width-min: 10em;
        grid-auto-flow: row;
    }

    .rt-collection {
        border-top: 0px solid var(--tertiary-color2);
    }

    /* In order to maximize row lines, only display one line for a cell */
    .rt-attribute {
        border-right: 1px solid var(--tertiary-color2);
        border-bottom: 1px solid var(--tertiary-color2);
        padding: 10px;
        overflow: visible;
        border-left: 1px solid var(--tertiary-color2);
    }

    .rt-attribute-text {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 1.5em;
        width: 100%;
        max-width: none;
    }

    .rt-collection-container > .rt-item-container:first-child {
        font-family: TitilliumWeb-SemiBold, Arial, sans-serif;
        border-radius: 10px 10px 0px 0px;
        border: none;
    }

        /* Center header labels */
        .rt-collection-container > .rt-item-container:first-child .rt-attribute {
            display: flex;
            align-items: center;
            padding: 10px;
            text-overflow: initial;
            overflow: auto;
            white-space: normal;
        }
}