table.cal {
  width: 200px;
  display: inline;
  display: inline-table; /* for Safari */
  float: left;
  font-size: 80%;
  margin: 6px;
}

.calmonth {
  text-align: center;
}

tr.caldays {
  color: #ccc;
}

td.calnote {
  color: #000;
}

td.calother {
  background: #fff; 
}

td.calavailable {
  color: #000;
  background: lightgreen;
  text-align: center;
  width: 30px;
  height: 30px;
}

td.calnotavailable {
  color: #fff;
  text-align: center;
  background: lightpink;
  width: 30px;
  height: 30px;
}

td.calnotavailableprov {
  color: #ccc;
  text-align: center;
  background: lightyellow;
  width: 30px;
  height: 30px;
}

.calendar {
  width: 212px;
  height: 225px;
}

.month.active {
  display: block;
}

.month.inactive {
  display: none;
}

.month th.month_full {
  font-size: 14px;
  color: #fff;
}

.month .previous {
  font-size: 14px;
}

.month .next {
  font-size: 14px;
}

.month th {
  margin: 0;
  padding: 0;
  text-align: center;
}

.month th a {
  text-align: center;
  margin: auto;
}

.calendar th.weekday {
  color: #deff61;
}

.legend {
  margin: auto;
}

.legend td {
  color: #fff;
  padding: 4px;
  font-size: 14px;
}