/*******************************Calendar Top Navigation*********************************/
div#calendar{
  margin:0px auto;
  padding:0px;
  width: 100%;
  font-family:Helvetica, "Times New Roman", Times, serif;
  
  border:1px solid #cccccc ;
  border-radius:5px;
  
  -webkit-box-shadow: 0 10px 6px -6px #cccccc;
     -moz-box-shadow: 0 10px 6px -6px #cccccc;
          box-shadow: 0 10px 6px -6px #cccccc;

 margin-bottom: 15px;
}
 
div#calendar div.cal_box{
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    background-color:   #999999 ;  
	
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	
	background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px 0 rgb(0 0 0 / 5%) inset;    
}
 
div#calendar div.cal_header{
    height: 30px;
    line-height:30px;  
    vertical-align:middle;
    /*position:absolute;
    left:11px;
    top:0px;*/
    width:100%; 
    text-align:center;
}
 
div#calendar div.cal_header a.cal_prev,div#calendar div.cal_header a.cal_next{ 
    position:absolute;
    top:0px;   
    height: 17px;
    display:block;
    cursor:pointer;
    text-decoration:none;
    color:#666666;
}
div#calendar div.cal_header a.cal_reset
{ 
    text-decoration:none;
}

div#calendar div.cal_header span.cal_title{
    color:#666666;
    font-size:16px;
}
 
 
div#calendar div.cal_header a.cal_prev{
    left:10px;
}
 
div#calendar div.cal_header a.cal_next{
    right:10px;
}
 
 
 
 
/*******************************Calendar Content Cells*********************************/
div#calendar div.cal_box_content{
/*
    border:1px solid #999999 ;
    border-top:none;
*/
}
 
 
 
div#calendar ul.cal_label{
    float:left;
    margin: 0px;
    padding: 0px;
    margin-top:5px;
    margin-left: 5px;
	width: calc(100% - 5px);
}
 
div#calendar ul.cal_label li{
    margin:0px;
    padding:0px;
    margin-right:2px;  
    float:left;
    list-style-type:none;
    width: calc(100% / 7 - 2px); /**/
    height:20px;
    line-height:20px;
    vertical-align:middle;
    text-align:center;
    color:#666666;
    font-size: 14px;
    /*background-color: transparent;*/
	background-color:#eeeeee;
	cursor:default;
}
 
 
div#calendar ul.cal_dates{
    float:left;
    margin: 0px;
    padding: 0px;
    margin-left: 5px;
    margin-bottom: 5px;
	width: calc(100% - 5px);
}
 
/** overall width = width+padding-right**/
div#calendar ul.cal_dates li{
    margin:0px;
    padding:2px;
    margin-right:2px;
    margin-top: 2px;
    height:20px;
    line-height:20px;
    vertical-align:middle;
    float:left;
    list-style-type:none;
    width: calc(100% / 7 - 2px - 0px); /* - this.margin-right(+ this.padding*2 cu box-sizing:content-box) */
    font-size: 16px; /*Fallback for browsers that doesn't support vw*/
    background-color: #DDD;
    color:#bbbbbb;
    text-align:center; 
	
	position: relative;
	
    /*font-size:6vw;*/ /*1vw = 1% of viewport width*/
    /*padding-top: calc(100% / 7 - 2px - 2px);*/ /* 1:1 - this.margin-right + this.padding (+ this.height cu box-sizing:content-box)*/
	
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 
}
div#calendar ul.cal_dates li a,
div#calendar ul.cal_dates li span{
	position:  absolute;
	top: 2px;
	left: 2px;
	bottom: 2px;
	right: 2px;
	
	/*padding-top: calc(50% - 10px - 2px);*/  /* 1:1 -  center - (height/2 + this.top)*/
}
div#calendar ul.cal_dates li a{
	display: block;
    background: #cceecc;
    border-radius: 50%;
    text-decoration: none;
    color: #666666;
	
	box-shadow: 0px 0px 2px 1px #cceecc; /*98fa5f*/
}

div#calendar ul.cal_dates li a:hover{
	box-shadow: none;
}


div#calendar ul.cal_dates li a small{
	font-size:8px;
	line-height:8px;
	position:absolute;
	right:-2px;
	top:-2px;
	color:#bbbbbb;
}
div#calendar ul.cal_dates li span{
	cursor:default;
}

:focus{
    outline:none;
}
 
div.cal_clear{
    clear:both;
}