/*******************************Calendar Top Navigation*********************************/
div#calendar{
  margin:0px auto;
  padding:0px;
  width: 100%;
  font-family: 'Open Sans', sans-serif;

  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
 
div#calendar div.box{
    position:relative;
    /* top:0px; */
    left:0px;
    width:100%;
    height:40px;
    background-color: #0c65ed;
}
 
div#calendar div.header{
    line-height:40px;
    vertical-align:middle;
    position:absolute;
    left: 0;
    top:0px;
    width: 100%;
    height:40px;
    text-align:center;
}
 
div#calendar div.header a.prev,div#calendar div.header a.next{
    position:absolute;
    top:0px;
    height: 40px;
    display:block;
    cursor:pointer;
    text-decoration:none;
    color:#FFF;
}
 
div#calendar div.header span.title{
    color:#FFF;
    font-size:18px;
}
 
 
div#calendar div.header a.prev{
    left: 5px;
}
 
div#calendar div.header a.next{
    right: 5px;
}
 
 
 
 
/*******************************Calendar Content Cells*********************************/
div#calendar div.box-content{
    border: 1px solid #1772ff;
    margin-bottom: 10px;
    padding-bottom: 15px;
    padding-top: 15px;
    border-radius: 0 0 10px 10px;	
}
 
 
 
div#calendar ul.label{
    float:left;
    margin: 0px;
    padding: 0px;
    margin-top:5px;
    margin-left: 5px;
    width: calc(100% - 10px);
    margin-right: 5px;
	display: none;	
}
 
div#calendar ul.label li{
    margin:0px;
    padding:0px;
    float:left;
    list-style-type:none;
    width: calc(14.28%);
    height:40px;
    line-height:40px;
    vertical-align:middle;
    text-align:center;
    color:#000;
    font-size: 15px;
    background-color: transparent;
}
 
 
div#calendar ul.dates{
    float:left;
    margin: 0px;
    padding: 0px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    width: calc(100% - 5px);
    border-radius: 10px;
}
 
/** overall width = width+padding-right**/
div#calendar ul.dates li{
    margin:0px;
    padding:0px;
    margin-right:5px;
    margin-top: 5px;
    line-height:80px;
    vertical-align:middle;
    float:left;
    list-style-type:none;
    min-height: 155px;
    font-size:25px;
    background-color: #fff;
    color:#000;
    text-align:center;
    width: calc(14.28% - 5px);
    position: relative;
    border: 1px solid #ddd;
    border-radius: 7px;
    padding-top: 21px;
    border-bottom: 1px solid rgba(184, 184, 184, 0.1);
}
 
:focus{
    outline:none;
}
 
div.clear{
    clear:both;
}  

.day_indicator{
	position: absolute;
	top: 0;
	width: 33px;
	height: 23px;
	color: #0065ff;
	line-height: 26px;
	font-size: 24px;
	text-align: center;
	padding-right: 7px;
	box-sizing: border-box;
}

.day_indicator_literal{
	
width: auto;
	
font-size: 14px;
	
float: left;
	
height: 24px;
	
position: absolute;
	
top: 0;
	
right: 0;
	
line-height: 27px;
	
padding-right: 9px;
}

.weekend-day-event-box, .mask, .past-day-event-box, .vacation-day-event-box  {
	background:#ececec !important;
	opacity:0.5;
	-webkit-opacity:0.3;
}

.calendar-day-box{
	transition:0.2s;
	-webkit-transition:0.2s;
}

.calendar-day-box:hover{
    background: #f9fdff;
    background: -moz-linear-gradient(-45deg, #f9fdff 0%, #e9f7ff 47%, #d7f0ff 100%);
    background: -webkit-linear-gradient(-45deg, #f9fdff 0%,#e9f7ff 47%,#d7f0ff 100%);
    background: linear-gradient(135deg, #f9fdff 0%,#e9f7ff 47%,#d7f0ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fdff', endColorstr='#d7f0ff',GradientType=1 );
    cursor:pointer;
    transform: scale(1.03);
    -webkit-transform: scale(1.03);
    z-index: 2;
    border: 1px solid #79aeff !important;
}

.cal-day-box-ss{
	    min-height: 155px !important;
	    height: 155px;
	    overflow-y: scroll;
	    padding-bottom: 2px !important;
	    box-shadow: inset 0px -6px 10px rgba(0,0,0,0.07);
}


@media(max-width:767px){
	
	div#calendar ul.label {
		display: none;
	}

	div#calendar ul.dates li {
		width: calc(100% - 25px);
		min-height: 25px;
		margin-left: 10px;
		border: 1px solid rgba(23, 114, 255, 0.7);
	}
	div#calendar ul.label li {
		display:none;
	}
	
	#calendar div.box{
		position: fixed !important;
		opacity: 1;
		z-index: 10;
		bottom: 0px !important;
		top: unset;
	}
	
	div#calendar div.box-content {
		border-radius: 10px;
	}	
	
	div#calendar {
		border-radius: 10px;
	}
	
	.cal-day-box-ss {
		min-height: 25px !important;
		height: auto;
		overflow-y: visible;
	    padding-bottom: 0px !important;
	    box-shadow: none;
	}
	
}

/* width */
::-webkit-scrollbar {
  width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(255,255,255,0); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}