/*******************************Calendar Top Navigation*********************************/
div#calendar{
  margin:0 auto;
  padding:0;
  width: 100%;
}
 
div#calendar div.box{
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:40px;
    background-color: #000;      
}
 
div#calendar div.header{
    line-height:40px;  
    vertical-align:middle;
    position:absolute;
    left: 0;
    top: 0;
    width:100%;
    height:40px;   
    text-align:center;
}

div#calendar div.header a.prev,div#calendar div.header a.next{ 
    position:absolute;
    top:0;
    display:none;
    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:10px;
}
 
div#calendar div.header a.next{
    right:10px;
}

.current-day-label{ 
	display: block; 
	background-color: #eaecee; 
	color: #000; 
	padding: 4px;
}

.current-day-label-empty{
	display: block; 
	background-color: #f5f5f5; 
	color: #999; 
	padding: 4px;
	text-align: right;
}

/*******************************Calendar Content Cells*********************************/
div#calendar div.box-content{ border-top:none; }

div#calendar ul.days-label{
    float: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #dbeaef;
}

div#calendar ul.days-label li{
    margin:0;
    padding:0; 
    float:left;
    list-style-type:none;
    width:14.285714285714286%;
    height: 40px;
    line-height: 40px;
    vertical-align:middle;
    text-align:center;
    color:#000;
    font-size: 14px;
    background-color: transparent;
    font-family: "AvenirMedium", Arial;
    font-weight: 500;
}

div#calendar table.dates{
    float:left;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #fff;
    border-collapse: collapse;
}

div#calendar table.dates td{
    margin:0;
    padding:0;
    line-height: 1.3em;
    vertical-align: top;
    list-style-type:none;
    width: 100%;
    font-size:14px;
    height: auto;
    color:#000;
    text-align: left; 
    border: 1px solid #e1e1e1;
    border-collapse: collapse;
    font-family: "AvenirMedium", Arial;
    font-weight: 500;
	display: block;
}

div#calendar .current-day-event{ padding: 5px 4px; display: block; position: relative; color: #444; background-color: #fafafa; border-bottom: 1px solid #e1e1e1; }
div#calendar .current-day-event:hover{ color: #000; text-decoration: none; background-color: #f0f0f0; }
div#calendar .current-day-event-divider{ height: 1px; border: 0; background-color: #e1e1e1; margin: 0; padding 0; display: none;  }
div#calendar table.dates td .current-day-event-divider:last-of-type{ display: none; }

div#calendar table.dates td .current-day-event:last-of-type{ border-bottom: 1px solid #fafafa; }

div#calendar .current-day-event.all-day-event{ border-right: 3px solid blue; } 

.events-legend{ margin: 0 0 10px 0 !important; padding: 0 !important; }
.events-legend li{ float: left; margin: 0; padding: 0; list-style: none; }
.all-day-event-legend{ padding: 4px 6px; border-left: 3px solid blue; }


div#calendar .current-day-event.type-event{ background-color: #dbeaef; transition: all .1s ease-out; -moz-transition: all .1s ease-out; -webkit-transition: all .1s ease-out; -o-transition: all .1s ease-out; }
div#calendar .current-day-event.type-event:hover{ background-color: #a4c1cb; }

div#calendar table.dates td .current-day-event.type-event:last-of-type{ border-bottom: 1px solid #dbeaef; }
div#calendar table.dates td .current-day-event.type-event:last-of-type:hover{ border-bottom: 1px solid #a4c1cb; }

div#calendar table.dates td span.current-day-lable-mobile{  } 
div#calendar table.dates td span.current-day-lable-desktop{ display: none; }

div#calendar table td.day-has-no-events{ display: none; }

.event-icon{ position: absolute; left: -72px; top: -9000px; border: 3px solid #a4c1cb; padding: 3px; background-color: #fff; width: 80px; height: 80px; opacity: 0; transition: opacity .2s ease-out; -moz-transition: opacity .2s ease-out; -webkit-transition: opacity .2s ease-out; -o-transition: opacity .2s ease-out; }

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

div#calendar .event-month-year-dropdown{ cursor: pointer; background-color: #dbeaef; color: #000; width: 100px; text-align: center; font-family: "AvenirMedium", Arial; font-weight: 500; font-size: 16px; border: 1px solid #000; }
div#calendar .event-month-year-dropdown:hover{ background-color: #fff; }
div#calendar .event-month-year-submit{ display: inline-block; width: 30px; height: 30px; border-radius: 50%; background-color: #dbeaef; color: #000; text-align: center; font-family: "AvenirMedium", Arial; font-weight: 500; font-size: 16px; padding: 0; margin: 0; }
div#calendar .event-month-year-submit:hover{ color: #000 !important; background-color: #fff; }

div#calendar table td.li-not-in-month{ display: none; }

@media all and (min-width: 768px)
{
	div#calendar table.dates td{
		height: 140px;
		width: 14.285714285714286%;
		display: table-cell; 
	}
	div#calendar table td.li-not-in-month, div#calendar table td.day-has-no-events{ 
		display: table-cell; 
	}
	div#calendar table.dates td span.current-day-lable-mobile{ display: none; }
	div#calendar table.dates td span.current-day-lable-desktop{ display: inline-block; } 
	div#calendar div.header a.prev,div#calendar div.header a.next{ display: block; }
	.current-day-label{ text-align: right; }
}


@media all and (min-width: 768px) and (max-width: 991px)
{
	div#calendar .current-day-event-time{ display: block; }
}

@media all and (min-width: 1024px)
{
	div#calendar .current-day-event:hover .event-icon{ opacity: 1; }
	div#calendar .current-day-event.type-event:hover{ padding-left: 8px; margin-left: -4px; }
}