.calendar {
  font-size: 14px;
  color: #303030;
  padding: 20px;
  vertical-align: top;
}

.calendar td {
  text-align: center;
}
.calendar .days {
  padding: 5px;
}
.calendar-title {
  text-align: center;
  margin: 0 0 20px;
}
.calendar-year{
  font-weight: bold;
  color: #333;
}
.menstruation {
  background: #ffc8c8;
  border: #f00 2px solid !important;
}
.ovulation{
  background: #c8ffc8;
  border: #0f0 2px solid;

}
.fertility {
  background: #0f0;
  border: #0f0 2px solid;
}

.box {
  display: inline-block;
  font-size: 12px;
  padding: 5px 8px;
  margin-bottom: 5px;
}
.box-text {
  font-size: 13px;
  color: #222222;
  font-weight: normal;

}

.line-bottom {
  border-bottom: 1px dashed #1f9ef8;
}

th.calendar-head {
  font: bold 14px/1.2 Arial, sans-serif;
  padding: 5px;
  text-align: left;
  border-bottom: 1px solid #c0c0c0;
}

.calendar-np {
  padding: 5px;
}

.calendar-day {
//padding: 8px 5px;
//text-align: left;
}

.calendar-weekend {
  color: red;
}

.calendar-arrow {
  cursor: pointer;
  font-size: 26px;
}


.calendar table{
  display: table;
  font-size: 14px;
}
.calendar thead {
  display: table-header-group;
}
.calendar thead th,
.calendar th
{
  display: table-cell;
}
.calendar tbody {
  display: table-row-group;
}
.calendar thead tr {
  display: table-row;
  position: relative;
  top: 0;
  left: 0;

}
.calendar tr {
  display: table-row;
}
.calendar td{
  padding-left: 0;
  display: table-cell;
  font-weight: normal;
}
.calendar td.current {
  font-weight: bold;
  color: #1bbc9b;
}