﻿.rTableContainer.rtStyle01 {
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
}

    .rTableContainer.rtStyle01 > table {
        line-height: 1.4;
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        background-color: #FFFFFF; /* base background color */
    }

        /* Heading */
        .rTableContainer.rtStyle01 > table thead {
            border-bottom: 3px solid #ddd;
        }

        /* All cells */
        .rTableContainer.rtStyle01 > table th, .rTableContainer.rtStyle01 > table td {
            padding: 0.35em;
            font-size: 0.9em;
        }

        /* heading cells */
        .rTableContainer.rtStyle01 > table th {
            font-weight: bold;
        }

        /* All Rows */
        .rTableContainer.rtStyle01 > table tr {
            margin: 0;
            padding: 0;
            border: 0;
            box-sizing: border-box;
            vertical-align: baseline;
            font-size: 100%;
            font: inherit;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        /* Highlighted Row */
        .rTableContainer.rtStyle01 > table tr.highlight {
            background-color: #dcf1f0 !important;
        }

        /* Alternated color for rows ==================================== */
        .rTableContainer.rtStyle01 > table.zebra tr:nth-child(even) {
            background-color: #f6f6f6;
        }

        /* Highlighted body cells */
        .rTableContainer.rtStyle01 > table .highlight td {
            font-weight: bold;
        }

        /* All number cells */
        .rTableContainer.rtStyle01 > table .number {
            text-align: right;
        }

@media screen and (max-width: 480px) {
    .rTableContainer.rtStyle01 {
        max-width: 100%;
        margin: 1rem auto;
    }

        /* table must be placed directly inside rTableContainer */
        .rTableContainer.rtStyle01 > table {
            width: 100%;
        }

            /* Heading Part */
            .rTableContainer.rtStyle01 > table > thead {
                display: none;
            }

            /* Body Part */
            .rTableContainer.rtStyle01 > table > tbody {
                width: 100%;
            }

                /* Every rows */
                .rTableContainer.rtStyle01 > table > thead > tr,
                .rTableContainer.rtStyle01 > table > tbody > tr {
                    display: block;
                    margin: 0 0 1em 0;
                    padding: 0.5em;
                    border-bottom: none !important;
                }

                /* Every Cells*/
                    .rTableContainer.rtStyle01 > table > thead > tr > th,
                    .rTableContainer.rtStyle01 > table > tbody > tr > td {
                        display: block;
                        padding: 0.5em;
                    }

            /* Alternated color for rows ==================================== */
            .rTableContainer.rtStyle01 > table.zebra tr:nth-child(even) {
                background-color: transparent;
            }

            /* Alternated color for cells ==================================== */
            .rTableContainer.rtStyle01 > table.zebra td:nth-child(even) {
                background-color: #f6f6f6;
            }

            .rTableContainer.rtStyle01 > table tr:nth-child(even) {
                background-color: transparent;
            }

            /* Cells */
            .rTableContainer.rtStyle01 > table td {
                border-bottom: 1px dotted #ccc;
                text-align: right;
            }

            .rTableContainer.rtStyle01 > table > tbody > tr > td[data-title]:before {
                content: attr(data-title);
                font-weight: bold;
                display: inline-block;
                float: left;
                margin-right: 0.5em;
                font-size: 0.95em;
            }

            .rTableContainer.rtStyle01 > table td:last-child {
                border-bottom: 2px solid #ccc;
            }

            .rTableContainer.rtStyle01 > table td:empty {
                display: none;
            }

            .rTableContainer.rtStyle01 > table .highlight td {
                background-color: inherit;
                font-weight: normal;
            }

                .rTableContainer.rtStyle01 > table .highlight td:last-child {
                    border-bottom: 1px dotted #ccc;
                }
}

@media (min-width: 481px) and (max-width: 767px) {
    .rTableContainer.rtStyle01.w768 {
        max-width: 100%;
        margin: 1rem auto;
    }

        /* table must be placed directly inside rTableContainer */
        .rTableContainer.rtStyle01.w768 > table {
            width: 100%;
        }

            /* Heading Part */
            .rTableContainer.rtStyle01.w768 > table > thead {
                display: none;
            }

            /* Body Part */
            .rTableContainer.rtStyle01.w768 > table > tbody {
                width: 100%;
            }

                /* Every rows */
                .rTableContainer.rtStyle01.w768 > table > thead > tr,
                .rTableContainer.rtStyle01.w768 > table > tbody > tr {
                    display: block;
                    margin: 0 0 1em 0;
                    padding: 0.5em;
                    border-bottom: none !important;
                }

                    /* Every Cells*/
                    .rTableContainer.rtStyle01.w768 > table > thead > tr > th,
                    .rTableContainer.rtStyle01.w768 > table > tbody > tr > td {
                        display: block;
                        padding: 0.5em;
                    }

            /* Alternated color for rows ==================================== */
            .rTableContainer.rtStyle01.w768 > table.zebra tr:nth-child(even) {
                background-color: transparent;
            }

            /* Alternated color for cells ==================================== */
            .rTableContainer.rtStyle01.w768 > table.zebra td:nth-child(even) {
                background-color: #f6f6f6;
            }

            .rTableContainer.rtStyle01.w768 > table tr:nth-child(even) {
                background-color: transparent;
            }

            /* Cells */
            .rTableContainer.rtStyle01.w768 > table td {
                border-bottom: 1px dotted #ccc;
                text-align: right;
            }

            .rTableContainer.rtStyle01.w768 > table > tbody > tr > td[data-title]:before {
                content: attr(data-title);
                font-weight: bold;
                display: inline-block;
                float: left;
                margin-right: 0.5em;
                font-size: 0.95em;
            }

            .rTableContainer.rtStyle01.w768 > table td:last-child {
                border-bottom: 2px solid #ccc;
            }

            .rTableContainer.rtStyle01.w768 > table td:empty {
                display: none;
            }

            .rTableContainer.rtStyle01.w768 > table .highlight td {
                background-color: inherit;
                font-weight: normal;
            }

                .rTableContainer.rtStyle01.w768 > table .highlight td:last-child {
                    border-bottom: 1px dotted #ccc;
                }
}




