/*******************************
Calendar Container
*********************************/
div#calendar{
  margin: 0 auto;
  padding-top: 40px;
  width: 100%;
  max-width: 602px;
  font-family: Helvetica, "Times New Roman", Times, serif;
}

/*******************************
Top Navigation
*********************************/
div#calendar div.box{
  position: relative;
  width: 100%;
  height: 40px;
  background-color: #787878;
}

div#calendar div.header{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

div#calendar div.header span.title{
  color: #FFF;
  font-size: 18px;
}

div#calendar div.header a.prev,
div#calendar div.header a.next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
  color: #FFF;
  cursor: pointer;
}

div#calendar div.header a.prev{
  left: 12px;
}

div#calendar div.header a.next{
  right: 12px;
}

/*******************************
Calendar Content
*********************************/
div#calendar div.box-content{
  border: 1px solid #787878;
  border-top: none;
  padding: 5px;
}

/*******************************
Day Labels
*********************************/
div#calendar ul.label{
  display: flex;
  padding: 0;
  margin: 5px 0;
  list-style: none;
}

div#calendar ul.label li{
  flex: 1;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 15px;
}

/*******************************
Dates Grid
*********************************/
div#calendar ul.dates{
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}

div#calendar ul.dates li{
  flex: 1 0 calc(100% / 7);
  height: 35px;
  line-height: 35px;
  margin: 2px 0;
  font-size: 18px;
  background-color: #DDD;
  text-align: center;
}

  /* alternate code, with vertical separators */
div#calendar ul.dates li{
  flex: 1 0 calc(100% / 7);
  height: 35px;
  line-height: 35px;
  font-size: 18px;
  background-color: #DDD;
  text-align: center;

  /* separators */
  border: 1px solid #bbb;
  box-sizing: border-box;
}



/*******************************
Accessibility
*********************************/
:focus{
  outline: none;
}

/*******************************
Mobile Adjustments
*********************************/
@media (max-width: 480px){
  div#calendar div.header span.title{
    font-size: 16px;
  }

  div#calendar ul.label li{
    font-size: 12px;
  }

  div#calendar ul.dates li{
    font-size: 14px;
    height: 32px;
    line-height: 32px;
  }
}