.container {
  margin: 0 auto;
}
#cal, td, th {
  text-align: center
}
#cal, #t1 {
  padding: 5px;
  max-width: 664px;
}
h1 {color: #ffffff;}
.c1 {
  color: #000;
}
.c2 {
  color: red;
}
.c3 {
  /* previous-next dates */
  color: #b0b0b0
}
.c4 {
  /* today's date */
  background-color: #90EE90;
}
.c5 {
  background-color: #ffe805;
}
.c5 input[type=checkbox] { 
    background-color: #ffe805; 
} 
.c6 {
  border: #000000 thin;
  background-color: #9CD0F2;
}
.pay {
  color: red;
  font-weight: bolder;
  background-color: #000
}
p {
  font: 400 12px Arial;
  color: #000
}
table {
  border-collapse: collapse
}
td, th {
  font-family: arial;
  font-size: .9em
}
.mLabel {
  color: #fff;
  background-color: #F57FBC
}
.dLabel {
  color: navy;
  background-color: #eee
}
#t1 {
  background-color: beige;
  display: grid;
	grid-template-columns: repeat(3, 1fr); 
	gap: 2px;
  justify-content: center;
}
#t1 div {
  display: flex;
  justify-content: center;
}
.t2 {
  width: 200px;
  border: 1px solid silver;
  margin: 2px;
  background-color: #FFF
}
.t2 td {
  cursor: pointer;
}
#selMonth {
  float: left;
}
#selYear {
  float: right;
}
#cal {
  margin: 0 auto;
  background-color: beige;
  /*-moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;*/
}

@media screen and (max-width: 768px) {
  #t1 {
    grid-template-columns: repeat(2, 1fr);
  }
}