.calendar .days .day_name {
  text-align: center;

  width: 35px;
  height: 35px;
    margin: 1%;
  padding: 9px 0px;
  text-transform: uppercase;

  font-family: 'Muli';
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 3px;
  color: #181d39;
}

.calendar {
  display: flex;
  flex-flow: column;
  width: 290px;
}

.month-year {
  font-size: 20px;
  color: #445C84;
  padding: 20px 0;
}

.calendar .fleche-mois-precident, .calendar .fleche-mois-suivant{
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  color: #1C3053;
  cursor: pointer;
}

.calendar2 .fleche-mois-precident:hover,
.calendar1 .fleche-mois-suivant:hover {
  background-color: #F0F3F8;
}

.calendar .days {
  display: flex;
  flex-flow: wrap;
}

.calendar .days .day_name:nth-child(7) {
  border: none;
}

.calendar .days .day_num {
  display: flex;
  flex-flow: column;
  font-weight: bold;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  padding: 9px;
  line-height: 15px;
  margin: 1%;
  text-align: center;
  font-family: 'Muli';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;

  
  /* identical to box height */

  /* Gris 5 */

  color: #445c84;
}

.calendar .days .day_num.available-day,
.hours .hour_num.available-hour {
  background-color: #20b5b6 !important;
  color: #fff;
  cursor: pointer;
}
.calendar .days .day_num.available-day:hover,
.hours .hour_num.available-hour:hover {
  background-color: #20b5b6 !important;
  color: #fff !important;
  
}

.calendar .days .day_num span {
  display: inline-block;
  width: 100%;
  font-size: 14px;
  text-align: center;
}

.calendar .days .day_num .event {
  margin-top: 10px;
  font-weight: 500;
  font-size: 14px;
  padding: 3px 6px;
  border-radius: 4px;
  background-color: #f7c30d;
  color: #fff;
  word-wrap: break-word;
}

.calendar .days .day_num .event.green {
  background-color: #51ce57;
}

.calendar .days .day_num .event.blue {
  background-color: #518fce;
}

.calendar .days .day_num .event.red {
  background-color: #ce5151;
}

.calendar .days .day_num:hover {
  background-color: rgba(32, 181, 182, 0.1);
  color: #445C84 !important;
}

.calendar .days .day_num.ignore, .calendar .days .day_num.prevDay{
  background-color: #fdfdfd !important;
  color: #B6C5DE;
  cursor: not-allowed;
}

.calendar .days .day_num.prevDay:hover {
  background-color: #fdfdfd !important;
  color: #B6C5DE !important;
  cursor: not-allowed;
}

.calendar .days .day_num.selected {
  background-color: #f7ab34 !important;
  cursor: inherit;
  color: #fff;
  cursor: pointer;
}

.hours{
  max-height: 280px;
  overflow: scroll;
  -ms-overflow-style: none;/* IE 11 */
  scrollbar-width: none;/* Firefox 64 */
}

.hours .hour_num{
  height: 42px;
  border-radius: 5px;
  border: 1px solid #D4E3F1;
  width: 100%;
  max-width: 160px;
  text-align: center;
  padding-top: 12px;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 10px;
  cursor: pointer;
}

.hours .hour_num:hover{
  background-color: rgba(32, 181, 182, 0.1) !important;
  color: #445c84;
}

@media screen and (min-width: 767px) {
  .calendar .days .day_num {
      padding: 9px;
    }
}