.clndr {
  width : 100%;
  background-color : #F4F5FA;
  box-shadow : 0 4px 0 #272727;
}
.clndr .clndr-controls {
  padding : 14px;
  background-color : #666EE8;
  color : white;
  text-align : center;
}
.clndr .clndr-controls .clndr-previous-button {
  float : right;
  text-align : right;
}
.clndr .clndr-controls .clndr-next-button {
  float : left;
  text-align : left;
}
.clndr .clndr-controls .clndr-previous-button, .clndr .clndr-controls .clndr-next-button {
  width : 30px;
  cursor : pointer;
}
.clndr .clndr-controls .clndr-previous-button:hover, .clndr .clndr-controls .clndr-next-button:hover {
  opacity : 0.5;
}
.clndr .clndr-grid {
  float : right;
  width : 65%;
  background-color : #FFFFFF;
}
.clndr .clndr-grid .days-of-the-week {
  width : 100%;
  background-color : #8990ED;
}
.clndr .clndr-grid .days-of-the-week .header-day {
  float : right;
  width : 14.2857%;
  padding : 14px;
  text-align : center;
  color : white;
}
.clndr .clndr-grid .days {
  width : 100%;
}
.clndr .clndr-grid .days .day, .clndr .clndr-grid .days .empty {
  float : right;
  width : 14.2857%;
  padding : 12px 0;
  text-align : center;
  color : #4F4F4F;
}
.clndr .clndr-grid .days .day.event .day-number, .clndr .clndr-grid .days .empty.event .day-number {
  border : 1px solid #666EE8;
  border-radius : 50%;
  padding : 6px 9px;
}
.clndr .clndr-grid .days .day.adjacent-month .day-number, .clndr .clndr-grid .days .day.inactive .day-number, .clndr .clndr-grid .days .empty.adjacent-month .day-number {
  opacity : 0.3;
  cursor : pointer;
}
.clndr .clndr-grid .days .day.selected {
  background-color : #FF4961;
  color : white;
}
.clndr .clndr-grid .days .today {
  background-color : #666EE8;
  color : white;
  background-image : none;
}
.clndr .event-listing {
  float : right;
  width : 35%;
}
.clndr .event-listing .event-listing-title {
  padding : 15.5px;
  font-size : 0.88rem;
  background-color : #A9ADF2;
  text-align : center;
  color : white;
  letter-spacing : 1px;
}
.clndr .event-listing .event-item {
  padding : 6px 14px;
  color : #4F4F4F;
}
.clndr .event-listing .event-item-location {
  font-weight : 400;
}

@media only screen and (max-width: 457px) {
  .clndr .clndr-grid, .clndr .event-listing {
    width : 100%;
  }
  .clndr .clndr-grid .days .day.event .day-number, .clndr .clndr-grid .days .empty.event .day-number {
    padding : 5px 6px;
  }
}