td cDay {
    font-size: 1rem;
    float: left;
    display: inline;
}

cc {
    font-size: 0.8rem;
    float: right;
    color: darkgreen;
    display: inline-block;
}

cc:hover {
    font-size: 1.1rem;
}

cst {
    font-size: 0.9rem;
    float: right;
    color: green;
    display: inline-block;
}

cst:hover {
    font-size: 1.1rem;
}

ph {
    font-size: 0.9rem;
    color: red;
    text-align: center;
    display: block;
}

ph:hover {
    font-size: 1.1rem;
}

div.tblHead {
    width: 100%;
    height: 2rem;
    font-size: 2rem;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    text-shadow: 0 0 0.5rem #80FFEA;
    background-color: transparent;
    border: 0;
    display: grid;
    grid-template-columns: auto auto auto;
}
.grid-container {
    font-family: 'Noto Sans HK', sans-serif;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
    background-color: transparent;
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
}

.grid-item {
    background-color: transparent;
    padding: 0.1rem;
    color: aqua;
    font-size: 0.9rem;
    font-weight: bolder;
    text-align: center;
    height: 1.8rem;
    vertical-align: middle;
    padding: 0.1rem;
    
    border: 0.1rem solid #FFFF80;

    -webkit-border-radius: 0.8rem 0.8rem 0.8rem 0.8rem;
    -moz-border-radius: 0.8rem 0.8rem 0.8rem 0.8rem;
    border-radius: 0.8rem 0.8rem 0.8rem 0.8rem;
    
    -webkit-box-shadow: 0 0 0.2rem 0.1rem #FFFF80; 
    box-shadow: 0 0 0.2rem 0.1rem #FFFF80; 
}

.grid-item:hover {    
    background: #2F6971;
    background: -moz-linear-gradient(top, #2F6971 0%, #1A393E 50%, #2F6971 100%);
    background: -webkit-linear-gradient(top, #2F6971 0%, #1A393E 50%, #2F6971 100%);
    background: linear-gradient(to bottom, #2F6971 0%, #1A393E 50%, #2F6971 100%);    
}

.grid-item a {
    color: aqua;
    text-shadow: 0 0 0.2rem #80FFEA;    
}

.grid-item a:hover {
    text-shadow: 0 0 1rem #80FFEA;    
}

table.tblCalendar {
    font-family: 'Noto Sans HK', sans-serif;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    width: 100%;
    overflow-x: auto;
    line-height: 1;
}

table.tblCalendar .prev, .next {
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    text-shadow: 0 0 0.5rem #80FFEA;
}

table.tblCalendar .today {
    font-size: 1.2rem;
    font-weight: bold;
    color: #1966FF;
    text-decoration: none;
    text-align: left;
    vertical-align: top;
    text-shadow: 0 0 1rem #80FFFF;
    opacity: 1;

    -webkit-box-shadow: 0 0 0.2rem 0.1rem yellow; 
    box-shadow: 0 0 0.2rem 0.1rem yellow; 
}

table.tblCalendar th {
    font-weight: bold;    
    font-size: 0.9rem;
    color: #444444;
    width: 14%;
    height: 1.6rem;
    background: transparent;
    text-align: center;
    text-shadow: 0 0 0.1rem black;
    vertical-align: middle;
    padding: 0;  
}

table.tblCalendar td {
    font-family: 'Noto Sans HK', sans-serif;
    font-weight: normal;
    font-size: 1rem;
    color: #222222;
    text-align: left;
    text-shadow: 0 0 0.1rem black;
    background: transparent;
    width: 14%;
    height: 3.6rem;
    vertical-align: top;
    empty-cells: hide;
    border: 0;
    opacity: 0.5;
    padding: 0.2rem;
}


.tblCalendar td:hover {
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 0 0 0.5rem #3333FF;
    opacity: 1;

    -webkit-box-shadow: 0 0 0.2rem 0.1rem #FF5500; 
    box-shadow: 0 0 0.2rem 0.1rem #FF5500; 
}

.tblCalendar hDay {
    color: red;
    text-shadow: 0 0 1rem #3333FF;
}

.tblCalendar .holidays {
    font-size: 0.8rem;
    color: red;
    font-weight: bold;
    border: 0;
    background: transparent;
    text-align: center;
    text-shadow: 0 0 1rem #3333FF;
}

table.tblCalendar .c0 {
    color: #FF1919;
    font-weight: bold;    

    background: #FF8080;
    background: -moz-linear-gradient(left, #FF8080 0%, #FFEA80 100%);
    background: -webkit-linear-gradient(left, #FF8080 0%, #FFEA80 100%);
    background: linear-gradient(to right, #FF8080 0%, #FFEA80 100%);
}

table.tblCalendar .c1 {
    background: #FFEA80;
    background: -moz-linear-gradient(left, #FFEA80 0%, #AAFF80 100%);
    background: -webkit-linear-gradient(left, #FFEA80 0%, #AAFF80 100%);
    background: linear-gradient(to right, #FFEA80 0%, #AAFF80 100%);
}

table.tblCalendar .c2 {
    background: #AAFF80;
    background: -moz-linear-gradient(left, #AAFF80 0%, #80FFBF 100%);
    background: -webkit-linear-gradient(left, #AAFF80 0%, #80FFBF 100%);
    background: linear-gradient(to right, #AAFF80 0%, #80FFBF 100%);
}

table.tblCalendar .c3 {
    background: #80FFBF;
    background: -moz-linear-gradient(left, #80FFBF 0%, #80D4FF 100%);
    background: -webkit-linear-gradient(left, #80FFBF 0%, #80D4FF 100%);
    background: linear-gradient(to right, #80FFBF 0%, #80D4FF 100%);
}

table.tblCalendar .c4 {
    background: #80D4FF;
    background: -moz-linear-gradient(left, #80D4FF 0%, #9580FF 100%);
    background: -webkit-linear-gradient(left, #80D4FF 0%, #9580FF 100%);
    background: linear-gradient(to right, #80D4FF 0%, #9580FF 100%);
}

table.tblCalendar .c5 {
    background: #9580FF;
    background: -moz-linear-gradient(left, #9580FF 0%, #FF80FF 100%);
    background: -webkit-linear-gradient(left, #9580FF 0%, #FF80FF 100%);
    background: linear-gradient(to right, #9580FF 0%, #FF80FF 100%);
}

table.tblCalendar .c6 {
    color: #009933;
    
    background: #FF80FF;
    background: -moz-linear-gradient(left, #FF80FF 0%, #FF8080 100%);
    background: -webkit-linear-gradient(left, #FF80FF 0%, #FF8080 100%);
    background: linear-gradient(to right, #FF80FF 0%, #FF8080 100%);
}

form {
    margin-bottom: 0.5rem;
}

form label {
    font-family: 'Noto Sans HK', sans-serif;    
    font-size: 1.1rem;
    color: lightgreen;
    letter-spacing: 0;
}

form #cYear{
    font-family: 'Noto Sans HK', sans-serif;    
    font-size: 1.1rem;
    margin: 0.4rem;
    padding: 0.2rem;
    background-color: #FFD480;
    width: 4.2rem;
    display: inline;

    -webkit-box-shadow: 0px 0px 0.2rem 0.1rem #3FDCFF; 
    box-shadow: 0px 0px 0.2rem 0.1rem #3FDCFF; 

    border: 0 solid #1C6EA4;
    
    -webkit-border-radius: 0.3rem ;
    -moz-border-radius: 0.3rem ;
    border-radius: 0.3rem ;
}

form #cYear:hover {
    -webkit-box-shadow: 0px 0px 0.6rem 0.1rem #3FDCFF; 
    box-shadow: 0px 0px 0.6rem 0.1rem #3FDCFF; 
}

form #submit {
	border: 0.1rem solid #d02718;
	display:inline-block;
	cursor:pointer;
	color: yellow;
	font-size: 0.8rem;
	padding: 0.3rem;
	text-decoration: none;
	text-shadow:0 0.1rem 0 #810e05;
    
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24437));
	background:-moz-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:-webkit-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:-o-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:-ms-linear-gradient(top, #c62d1f 5%, #f24437 100%);
	background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24437',GradientType=0);
	background-color:#c62d1f;
    
	-moz-box-shadow: 3px 4px 0px 0px #8a2a21;
	-webkit-box-shadow: 3px 4px 0px 0px #8a2a21;
	box-shadow: 3px 4px 0px 0px #8a2a21;
    
	-webkit-border-radius: 1rem;
	-moz-border-radius: 1rem;
	border-radius: 1rem;
}

form #submit:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24437), color-stop(1, #c62d1f));
	background:-moz-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:-webkit-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:-o-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:-ms-linear-gradient(top, #f24437 5%, #c62d1f 100%);
	background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24437', endColorstr='#c62d1f',GradientType=0);
	background-color:#f24437;
}

form #submit:active {
	position:relative;
	top:0.1rem;
}


legend {
    font-family: "Times New Roman", Times, serif;
    font-size: 1rem;
    color: #00CC88;
    font-weight: bold;
    letter-spacing: 0.1rem;
    text-shadow: 0 0 0.2rem #EBFF00;    
}

legend:hover {
    text-shadow: 0 0 0.4rem #EBFF00;        
}

@media screen and (max-width: 1000px) {
    cDay {
        display: block;    
    }
    
    cst, cc, Holiday {
        font-size: 0.8rem;
        display: block;
        text-align: center;
    }
    
    .grid-container {    
        grid-template-columns: auto auto auto auto auto auto;
    }
}

@media screen and (max-width: 500px) {
    .grid-container {    
        grid-template-columns: auto auto auto auto;
    }
}