.calendar {
  border: 1px solid var(--blue-grey);
  display: inline;
  width: 100%;
	float:left;
}
.calendar > .header {
  padding: .75rem;
  font-size: 1.25rem;
}
.calendar > .header > span {
  flex: 1;
  text-align: center;
}
.calendar > .header button {
  border: none;
  background: var(--white);
  margin: 0 1rem;
  padding: .25rem .5rem;
}
.calendar > .header button:hover {
  background: var(--grey);
  transition: background 150ms;
}
.calendar  {
  align-items: center;
      display: flex;
    float: left;
    vertical-align: inherit;
}

.dayx{    text-align: center;
    display: flex;
    float: left;
    overflow: hidden;
    max-width: 1720px; margin: 0 auto;width: 1720px; }
.dayx .day {
 
  font-size: 13px;
	float: left;
display: none;
	    padding:3px 0.2%;
}
.dayx .day.selected {

	    background: #f00;
}
.dayx .day.current {
  color: #fff;
	 display: block;
}
.dayx .day::before {
  content: "";
  height: 0;

}
.previousMonth{ float:left;    font-size: 12px !important;}
.nextMonth{ float:right;    font-size: 12px !important;}

.nextBtn i{font-size: 22px !important;}
.prevBtn i{font-size: 22px !important;}
.calendar button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: none;
    border: none;
    color: #fff;
	outline: none;
}

.calendar > .day button {
  color: inherit;
  background: transparent;
  border: none;
  height: 100%;
  width: 100%;
}
.calendar > .day button:hover {
  background: var(--grey);
  transition: background 150ms;
}
.calendar > .today {
  background: var(--grey);
  border-radius: 2px;
}

.text-center {
  text-align: center;
}