.calendar-wrapper {
 margin: 0 auto;
}
.calendar-item {
 width: 200px;
 display: inline-block;
 vertical-align: top;
 margin: 0 1.1rem;
 font: 1rem/1.1 sans-serif;
}
.calendar-head {
 text-align: center;
 padding: 4px;
 font-weight: 500;
 font-size: 1rem;
}
.calendar-item table {
 border-collapse: collapse;
 width: 100%;
}
.calendar-item th {
 font-size: 1rem;
 padding: 4px;
 text-align: center;
 color: #333;
 font-weight: normal;
}
.calendar-item td {
 font-size: 1rem;
 padding: 4px;
 text-align: center;
 border: 1px solid #ddd;
}
.calendar-item tr th:nth-child(6), .calendar-item tr th:nth-child(7),
.calendar-item tr td:nth-child(6), .calendar-item tr td:nth-child(7)  {
 color: #f00;
} 
.calendar-day.past {
 color: #777 !important;
} 
.calendar-day.today {
 text-decoration: underline;
}
.calendar-day.event {
 background: #fea;
 position: relative;
 cursor: pointer;
}
.calendar-day.event:hover .calendar-popup {
 display: block;
}
.calendar-popup {
 display: none;
 position: absolute;
 top: 45px;
 left: 0;
 min-width: 200px;
 padding: 15px;
 background: #fff;
 text-align: left;
 font-size: 0.9rem;
 z-index: 9999;
 box-shadow: 0 0 10px rgba(0,0,0,0.25);
 color: #000;
}
.calendar-popup:before {
 content: ""; 
 border: solid transparent;
 position: absolute;    
 left: 8px;    
 bottom: 100%;
 border-bottom-color: #fff;
 border-width: 8px;
 margin-left: 0;
}