html,body {
        width: 100%;
        margin: 0;
        padding: 0;
        max-width:100% !important;
        overflow-x: hidden;
        margin-top: 50px;
      /*  font-family: Arial, Helvetica, sans-serif;*/
    }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color:mediumslateblue;
            color: white;
            text-align: center;
        }
        td {
            text-align: center;
        }
        .highlight {
            background-color: #f2f2f2da;
        }
        .category {
            background-color: #00BFFF;
            color: white;
            font-weight: bold;
        }
        .empty {
            height:20px;  background-color:#a583b6; color:#fff; font-size: 1em;
        }
        .gi { background-color:#a583b6; color:#fff; }

@media only screen and (max-width: 600px) {
            html,body {
                width: 100%;
                margin: 0;
                padding: 0;
                /*max-width:100% !important;*/
                overflow-x: auto;
                margin-top: 50px;
               /* font-family: Arial, Helvetica, sans-serif; */
            }

            table {
                width: 100%;
                border-collapse: collapse;
                margin: 0;
            }
            th, td {
                border: 1px solid #ddd;
                padding: 4px;
            }

            .plus { margin:0; padding:0; margin-left: 5px; }

            .grostitresmall { font-size:2rem; }

          }