.calendar {
    position: relative;
    overflow: hidden;
    text-transform: capitalize;
    text-align: center;
    font: 15px/1em inherit;
    color: #545A5C; }
    .calendar a {
      text-decoration: none;
      color: inherit; }
    .calendar header .btn {
      display: inline-block;
      position: absolute;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #CBD1D2;
      border-radius: 50%;
      border: 2px solid #CBD1D2; }
    .calendar header .btn:hover {
      background: #CBD1D2;
      color: white; }
    .calendar header .btn-prev {
      left: 0;
      top: 0; }
    .calendar header .btn-next {
      right: 0;
      top: 0; }
    .calendar header .month {
      padding: 0;
      margin: 0; }
    .calendar table {
      width: 100%;
      margin: 20px 0;
      border-spacing: 0px; }
    .calendar thead {
      font-size: 1.2em;
      font-weight: 600; }
    .calendar td {
      padding: 0.8em 0.1em; }
    .calendar .day {
      display: inline-block;
      width: 2em;
      height: 2em;
      line-height: 1.9em;
      border-radius: 50%;
      border: 2px solid transparent; }
    .calendar .day:hover {
      border: 2px solid #6691CC; }
    .calendar .day.today {
      background: #6691CC;
      color: white; }
    .calendar .day.wrong-month {
      color: #CBD1D2; }
    .calendar .day.wrong-month:hover {
      border: 2px solid transparent; }
    .calendar .event-container {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #545A5C; }
    .calendar .filler {
      position: absolute;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: #545A5C;
      transform: translate(-50%, -50%); }