body {
font-family: Arial, helvetica, sans-serif;
font-weight: 400;
background-color: #000000;
color:#ffffff;
}

.tab-cont {
  border: 1px solid white;
}

.tab-row {
    max-width: 355px;
    padding: 5px;
    }
    
.tab-row:after{
    content: " ";
    clear: both;
}

.cal-row {
    max-width: 200px;
    }
    
.cal-row:after{
    content: "";
    clear: both;
}

.th, .bgn, .mid, .end{
width: 39px;
margin-left: 3px;
float: left;
padding: 3px;
padding-bottom: 0px;
margin-bottom: 3px;
padding-right: 4px;
text-align: center;
}

.th {
vertical-align: top;
background-color: black;
color: white;
}

.bgn{
background-color: red;
color:black;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
vertical-align: bottom;
}

.mid{
background-color:#0000ff;
color: #fff;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
vertical-align: bottom;
}

.end, .jclock{
background-color: #333333;
color: yellow;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
vertical-align: bottom;
}

.dark{
margin:0px;
color:#b00000;
font-size:10px;
}
  
.cal-head{
width: 200px;
text-align: center;
float: left;
}

.cday{
width: 18px;
float: left;
margin-left: 3px;
padding: 3px;
padding-bottom: 0px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
text-align: center;
vertical-align: bottom;
}
  
.foot{
clear: both;
padding-top: 10px;
padding-bottom: 10px;
}

.calcell{
width: 18px;
margin-left: 3px;
float: left;
padding: 3px;
padding-bottom: 0px;
margin-bottom: 3px;
text-align: center;
background-color: #333333;
color: yellow;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
vertical-align: bottom;
}

.caltoday{
width: 18px;
margin-left: 3px;
float: left;
padding: 3px;
padding-bottom: 0px;
margin-bottom: 3px;
text-align: center;
background-color: red;
color:black;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
vertical-align: bottom;
}

@media screen and (min-width: 600px) {
  .main {
    margin: auto;
    width: 375px;
  }
}