#calendar .calendar-block {
  display: flex;
  justify-content: center;
  align-items: center;
}
.calendar {
  width: 550px;
  min-height: 410px;
}

#month-year {
  margin: 0 10px;
}


.calendar-header #prev {
  font-size: 20px;
}

.calendar-header #next {
  font-size: 20px;
}

.calendar-header {
  text-align: center;
  width: 100%;
  /* display: flex; */
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 24px;
  cursor: pointer;
}

.calendar-weekdays, .calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.calendar-weekdays div {
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
  font-size: 20px;
}

.calendar-weekdays div:first-child {
  color: #E52729;
}

.calendar-days div {
  padding: 8px 6px;
  margin: 9px 20px;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s;
  font-size: 18px;
}

.calendar-days div.sun {
  color: #E52729;
}

.calendar-days div.current {
  color: #9E1F64;
  font-weight: bold;
}

.day-block.has-event {
  border-radius: 50%;
  border: 1px solid #E52729;
}


@media only screen and (max-width: 768px)  {
    #calendar{
        flex-wrap: wrap;
    }

    .calendar {
        width: 100%;
    }

    .calendar-days div {
      padding: 7px;
      margin: 8px;
    }

    #calendar .filter-block {
          padding: 20px 24px;
    }

    #calendar .filter-block .block-submit {
      position: relative;
      left: unset;
      width: 100%;
      bottom: unset;
      transform: none;
    }

    #calendar .filter-block .filter-block-inner {
      height: auto;

      padding: 35px;
    }

    
}


@media only screen and (max-width: 390px) {
     #calendar .filter-block {
          padding: 10px 12px;
    }
}