@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 
#dna { width: 390px !important; overflow-x: auto !important; display: inline-block; width: fit-content; }
#dna td.left { display: table-row!important; float: left!important; width: 100px!important; font-size: 16px!important; }
}

#dna { width:100%; margin: 0em; border-collapse: separate; border: 1px solid #CCCCCC; }
#dna tr { background-color: #FFFFFF; }
#dna tr.alt { background-color: #ece8da; }
#dna tr.alt2 { background-color: #efe7d7; }
#dna tr.alt3 { background-color: #C3D4DB; }
#dna td { font-size: 13px; text-align: center; padding: 5px; }
#dna th { font-size: 17x; text-align: center; padding: 5px; vertical-align: middle; }
#dna th:hover { background-color: #eeeeee; }
#dna th.period { font-size: 16px; text-align: center; padding: 5px; vertical-align: middle; background-color: #177298; color: #ffffff; }
#dna td.left { font-size: 13px; font-weight: bold; color: #000066; text-align: left; padding: 5px; }

.A1 { color: #E84905; }
.A2 { color: #9699B5; }
.A3 { color: #46ADC2; }
.A11 { color: #96B886; }
.A23 { color: #009900; }
.A24 { color: #CF640C; }
.A25 { color: #EBBA1C; }
.A26 { color: #A86942; }
.A29 { color: #A34326; }
.A30 { color: #8F5509; }
.A31 { color: #F07000; }
.A32 { color: #7D7D7D; }
.A33 { color: #67AD24; }
.A68 { color: #B5A857; }
.A74 { color: #663300; }

.DR1 { color: #657c97; }
.DR3 { color: #009470; }
.DR4 { color: #088ac0; }
.DR7 { color: #526595; }
.DR8 { color: #1592bb; }
.DR9 { color: #8b21d6; }
.DR10 { color: #4b8500; }
.DR11 { color: #1b9007; }
.DR12 { color: #dd8892; }
.DR13 { color: #b1a58a; }
.DR14 { color: #b47810; }
.DR15 { color: #e85811; }
.DR16 { color: #b27e01; }