.page_readData
{
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow-y: auto;
    background-color: #ebebeb;
    padding: var(--heading_top_height) 0px 15px 0px;
    transition-duration: var(--pageFadeInTime);
    box-shadow: var(--boxshadow_forFadedPages);
    color: #313131;
}

/* Für PC-Navigation: */
.page_readData .pcNavigation
{
    display: none;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 100%;
    height: 0;
    z-index: 1;
}

    .page_readData .pcNavigation svg
    {
        position: absolute;
        cursor: pointer;
    }

    .page_readData .pcNavigation svg:first-child
    {
        left: 0;
    }

    .page_readData .pcNavigation svg:last-child
    {
        transform: rotate(180deg);
        right: 0;
    }
/* -ENDE- PC-Navigation */

.page_readData .infoBanner
{
    width: 100%;
    text-align: center;
    background-color: #c73228;
    color: white;
    border-top: 2px solid darkred;
    padding: 2px;
    font-size: 85%;
}

.page_readData .heading
{
    text-align: center;
    margin-top: 15px;
}

    .page_readData .heading img
    {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 15px;
        transform: translateY(-100%);
        cursor: pointer;
    }

    .page_readData .heading #pageReadData_borrowID
    {
        font-size: 70%;
    }

.page_readData .content
{
    margin-top: 10px;
    padding-bottom: 20px;
    display: flex;
    place-items: center;
    scroll-snap-type: x mandatory;
    overflow: auto hidden;
}

    .page_readData .content table
    {
        margin-bottom: 20px;
        flex: 1;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        -webkit-overflow-scrolling: touch; /* Für iOS */
        overflow: visible; /* Für iOS */
    }

        .page_readData .content table tbody tr
        {
            width: calc(100vw - 30px);
            display: block;
            margin: 0 15px 0 15px;
        }

        .page_readData .content table tbody tr td
        {
            padding: 20px 10px 20px 20px;
            border-bottom: 1px solid grey;
            width: calc(50vw - 15px);
        }

        /* ALLGEMEIN - BEARBEITUNGSMODUS: */
        .page_readData .content table tbody span.editMode, .page_readData .content table select.editMode
        {
            border: 3px solid grey;
            border-radius: 5px;
            padding: 4px;
        }
        /* -ENDE- BEARBEITUNGSMODUS */

        /* Werte für das "Name"-Feld: */
        .page_readData .content table tbody tr:nth-child(2) td:nth-child(2) input[type="text"]
        {
            outline-color: #1874CD;
            border: none;
            padding-left: 2px;
        }
        /* -ENDE- "Name"-Feld */

        /* Werte für das Paket-Feld definieren: */
        .page_readData .content table tbody tr:nth-child(3) td:nth-child(2) span:nth-child(2)
        {
            padding: 3px;
            margin-left: 1.4em;
        }
        .page_readData .content table tbody tr:nth-child(3) td:nth-child(2) select
        {
            max-width: calc(100vw / 2 - 50px);
            outline-color: #1874CD;
            border: none;
            background-color: white;
        }
        /* -ENDE- Paket-Feld */

        /* Style-Attribute für das "Wie viel?"-Feld: */
        .page_readData .content table tbody tr:nth-child(4) td:nth-child(2) input[type="number"]
        {
            min-width: 40px;
            outline-color: #1874CD;
            border: none;
            padding-left: 2px;
        }

            .page_readData .content table tbody tr:nth-child(4) td:nth-child(2) img
            {
                vertical-align: middle;
                width: 1em;
                height: 1em;
                margin-left: 7px;
                cursor: pointer;
            }
        /* -ENDE- "Wie-viel?"-Feld */

            .page_readData .content table tbody tr td img
            {
                width: 25px;
                vertical-align: middle;
                margin-right: 10px;
            }

    .page_readData .footer
    {
        text-align: center;
    }

        .page_readData .footer #pageReadData_indexDIV
        {
            text-align: center;
            margin-bottom: 25px;
        }

            .page_readData .footer #pageReadData_indexDIV span
            {
                display: inline-block;
                margin: 2px;
                width: 15px;
                height: 15px;
                border-radius: 50%;
            }

            .page_readData .footer #pageReadData_indexDIV span#pageReadData_pageIndicator
            {
                position: absolute;
                left: 0;
                transition-duration: .4s;
                background-color: var(--themeColor);
                z-index: 1;
            }

            .page_readData .footer #pageReadData_indexDIV span.fixed
            {
                background-color: #10B1E3;
                position: relative;
            }

            /* Der Index (1-X) sollin den Kreis hereingeschrieben werden: */
            .page_readData .footer #pageReadData_indexDIV span.fixed::after
            {
                color: white;
                content: attr(index);
                font-size: 65%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
            }

    .page_readData .footer button
    {
        width: calc(100% - 30px);
        height: auto;
        padding: 6px;
        background-color: white;
        color: white;
        font-size: 1.1em;
        outline: none;
        text-transform: uppercase;
        cursor: pointer;
    }

    .page_readData .footer button#pageReadData_submitBtn
    {
        display: none;
        border: 3px solid darkgreen;
        background-color: forestgreen;
    }

    .page_readData .footer button#pageReadData_deleteBtn
    {
        display: none;
        border: 3px double indianred;
        background-color: darkred;
    }

    .page_readData .footer button#pageReadData_closeBtn
    {
        border: 3px dashed #1564B3;
        background-color: #1874CD;
    }