/* These CSS rules should be used for getting
   the styles of a table. */

@media screen, tv, projection {

    .header {
        background-color: #d3d3d3
    }

    .odd {
        background-color: #fafad2
    }

    .even {
        background-color: #98fb98
    }

}

@media handheld, screen, tv, projection, tty, print {

    .table-container > table {        
        padding: .5em;
        border-spacing: 0
    }

    .table-container > table > caption:before {
        display: block;
        padding-top: .5em;
        font: bolder 1.2em "Noto Color Emoji", "Noto Sans Symbols2", Symbola, "System-ui";
        color: teal;
        content: "\1F64F\1F9D8\1F30E\1F5A7\1F4BB\1F4C4\1F4BB\1F5A7\1F30E\1F9D8\1F64F"
    }

    .table-container th, .table-container td  {
        padding: .5em;
        border: inset silver
    }

    .header > * > .left {
        display: block;
        text-align: left
    }
    .header > * > .center {
        display: block;
        text-align: center
    }
    .header > * > .right {
        display: block;
        text-align: right
    }

    .table-container + * {
        margin-top: 1em
    }

}