
.calendar-container{
  /* margin: 5px; */
}

.header{
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items:center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}
.header button{
  height: 100%;
}
.header i{
  padding-left: 10px;
  padding-right: 10px;
}
.header div{
  flex-basis: 100%;
  text-align:center;
}
.header p{
  margin: auto;
  line-height: 40px;
}
.days{
  height: 40px;
  display: flex;
  flex-direction: row;
  color: white;
  background-color: #333333;
}
.days div{
  flex-basis: 100%;
  text-align:center;
  line-height: 40px;
  overflow:hidden;
}

.month-selection{
  /*fallback for display grid */
  display: flex;
  flex-wrap: wrap;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.month-selection button{
  /*part of the fallback for display grid */
  min-width: 90px;

  padding: 10px;
  margin: 5px;
  text-align:center;
  /* border-radius: 3px; */
  /* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); */
}
.month-selection button.current{
  color: white;
  background-color: #333333;
}


.cells{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
  grid-gap: 1px;
  /* 5 rows of 40px height elements */
  min-height: 200px;
  background-color: #f2f2f2;
  background-color: rgba(0,0,0,0.07);
}

.cells>div{
  position: relative;
  background-color: white;
  color: black;
}
/* keep the aspect ratio of the cells to 1:1 */
/* https://stackoverflow.com/a/54927248 */
.cells>div::before{
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}
.cells .prev>div, .cells .next>div{
  opacity: .3;
}
/* striketrough effect */
/* https://stackoverflow.com/questions/14593415/how-to-strike-through-obliquely-with-css/14593540 */
.cells div.in-past div:first-child::before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 2px solid;
  border-color: rgba(0,0,0,0.2);
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
}
.cells div.in-past div:first-child::after {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  /* set to 2px to have a full cross on the cells */
  border-top: 0px solid;
  border-color: rgba(0,0,0,0.4);
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

.cells div div{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}
.cells div div.primary{
  background-color: transparent;
  z-index: 5;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cells div div.primary p{
  /* background-color: white; */
  /* padding: 2px; */
  /* border-radius: 3px; */
}
