div#calendar{
      margin: 0px auto;
    padding: 10px;
    width: 100%;
    max-width: 1000px;
    font-family: 'Helvetica Neue LT Std Roman55', Arial, sans-serif;
    font-size: 14px;
}
 
div#calendar div.box{
    position:relative;
    top:0px;
    left:0px;
    width:100%;   
}
 
div#calendar div.header{
   line-height: 1;
    vertical-align: middle;
    left: 11px;
    top: 0px;
    width: 582px;
    text-align: center;
    margin: 0px;
    padding-top: 2px;
	border-bottom: 1px solid var(--bg_grey);
    margin-bottom: 15px;
}
 
div#calendar div.header a.prev,div#calendar div.header a.next{ 
    position:absolute;
    top:0px;   
    height: 17px;
    display:block;
    cursor:pointer;
    text-decoration:none;
    color:#FFF;
	display:none;
}
 
div#calendar div.header span.title{
    color:var(--text-purple_light);
    font-size:1.3em;
	display:block;
	width:100%;
	text-align:center;
	line-height:2;
}
 
 
div#calendar div.header a.prev{
    left:0px;
}
 
div#calendar div.header a.next{
    right:0px;
}
 
 
 
 
/*******************************Calendar Content Cells*********************************/

 
 
div#calendar ul.label{
    float: left;
    margin: 0px;
    padding: 0px;
    /* margin-top: 5px; */
    margin-left: 5px;
  /*  border-bottom: 1px solid var(--bg_grey);*/
}
 
div#calendar ul.label li{
    margin:0px;
    padding:0px;
    margin-right:5px;  
    float:left;
    list-style-type:none;
    
    vertical-align:middle;
    text-align:center;
    color:#000;
    background-color: transparent;
	text-transform:uppercase;
}
 

div#calendar ul.dates{
    float:left;
    margin: 0px;
    padding: 0px;
    margin-left: 5px;
    margin-bottom: 5px;
}
 
/** overall width = width+padding-right**/
div#calendar ul.dates li{
    margin:0px;
    padding:0px;
    margin-right:5px;
    margin-top: 0px;
    line-height:30px;
    vertical-align:middle;
    float:left;
    list-style-type:none;
    width:13%;
    color:#000;
    text-align:center; 
	position: relative;
}
div#calendar ul.dates li .daycontent{
	    font-family: 'Abel-Regular';
	position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: #000000;
    text-align: center;
    display: grid;
    align-content: center;
    border-radius: 50%;
    /* background-color: var(--bg_grey); */
    margin: 10%;
    font-size: 14px;
}
div#calendar ul.dates li.selected .daycontent{
	background-color:var(--text_purple);
	color:#ffffff;
	cursor:pointer;
}
div#calendar ul.dates li.empty .daycontent{
	display:none;
}
div#calendar ul.dates li::before {
  content: "";
  padding-bottom: 100%;
  display: block;
}
div#calendar ul.dates,div#calendar ul.label{
	width:calc( 100% - 5px );
}
div#calendar div.header{
	width:calc( 100% - 20px ); 
}
div#calendar ul.dates li,div#calendar ul.label li{
	width:calc( ( 100% / 7 ) - 5px );
}
 
:focus{
    outline:none;
}
 
div.clear{
    clear:both;
}