.rms-min-req
{
    grid-area: notes;
    margin-bottom: 25px;
    padding-right: 15px;
    padding-left: 15px;
    overflow: auto;
}

.rms-min-req-title
{
    position: relative;
}

/* ########################################################### */
/* RMS Release Notes and Media Queries*/
/* ########################################################### */

ul.min-req-list
{
    margin: 0px;
    padding: 0px;
}

li
{
    list-style: none;
}

a.req-link
{
    text-decoration: underline;
}

    a.req-link:hover,
    a.req-link:focus
    {
        font-weight: 700;
        background: #ededed;
    }

/* 2 Column & Help File Layout */
@media screen and (max-width: 894px)
{
    .grid-areas
    {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "notes";
    }

    .rms-min-req
    {
        padding-left: 15px;
    }

    .min-req-container
    {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
    }

    .min-req-item
    {
        border: 1px solid gray;
        border-radius: 2px;
        padding: 10px;
    }

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

    .min-req-data::before
    {
        content: attr(data-name);
    }

    /* min-req-data name for first column, and min-req-data value for second column. */
    .min-req-data
    {
        display: grid;
        grid-template-columns: minmax(9em, 50%) 1fr;
    }
}

@media screen and (max-width: 724px)
{
    .grid-areas
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "notes";
    }

    .rms-min-req
    {
        padding-left: 15px;
    }

    .min-req-container
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 5px;
    }

    .min-req-item
    {
        border: 1px solid gray;
        border-radius: 2px;
        padding: 10px;
    }

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

    .min-req-data::before
    {
        content: attr(data-name);
    }

    /* min-req-data name for first column, and min-reqe-data value for second column. */
    .min-req-data
    {
        display: grid;
        grid-template-columns: minmax(9em, 50%) 1fr;
    }
}

/* One Column layout */
@media screen and (max-width: 500px)
{
    .grid-areas
    {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "notes";
    }

    .rms-min-req
    {
        grid-area: notes;
    }

    .min-req-container
    {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Tabular Layout */
@media screen and (min-width: 895px)
{
    /* The maximum column width, that can wrap */
    .min-req-item-container
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow: auto;
        /*grid-template-columns: 8fr 4fr 6fr 5fr 10fr;*/
    }

    .min-req-container
    {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
        justify-content: center;
    }

    /* Definition of wrapping column width for min-req-data groups. */
    .min-req-app
    {
        --column-width-min: 35em;
    }

    .min-req-ver
    {
        --column-width-min: 35em;
    }

    /* Row lines */
    .min-req-data
    {
        border-bottom: 1px solid #EFEFEF;
        padding: 2px;
        overflow: hidden;
        white-space: wrap;
        text-overflow: ellipsis;
    }

    .min-req-container > .min-req-item-container:first-child
    {
        background-color: #ededed;
    }

    .min-req-item-container:hover
    {
        background-color: rgb(200, 227, 252);
    }

    /* Center header labels */
    .min-req-container > .min-req-item-container:first-child .rel-note-data
    {
        display: flex;
        align-items: center;
        justify-content: left;
        text-overflow: initial;
        overflow: auto;
        white-space: normal;
    }

    /* .min-req-container > .min-req-item-container:nth-child(4)
    {
        justify-content: center;
    } */
}

/* ########################################################### */