<style>
/*******************************Calendar Top Navigation*********************************/
div#calendar{
  margin:0px auto;
  padding:0px;
  width: 100%;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
}
 
div#calendar div.box{
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height:40px;
    background-color:   #383838 ;      
}
 
div#calendar div.header{
    line-height:40px;  
    vertical-align:middle;
    position:absolute;
    left:5%;
    top:0px;
    width:90%;
    height:1.5em;   
    text-align:center;
}
 
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;
}
 
div#calendar div.header span.title{
    color:#FFF;
    font-size:18px;
}
 
 
div#calendar div.header a.prev{
    left:0px;
}
 
div#calendar div.header a.next{
    right:0px;
}
 
 
 
 
/*******************************Calendar Content Cells*********************************/
div#calendar div.box-content{
    border:1px solid #787878 ;
    border-top:none;
        background-color: rgba(0,0,0,0.5);

}
 
 
 
div#calendar ul.label{
    float:left;
    margin: 0px;
    padding: 0px;
    margin-top:5px;
    margin-left: 5px;
    display: block;
    width: 100%;
}
 
div#calendar ul.label li{
    margin:0px;
    padding:0px;
    margin-right:1%;  
    float:left;
    list-style-type:none;
    width:13%;
    height:40px;
    vertical-align:middle;
    text-align:center;
    color:#ccc;
    font-size: 15px;
    background-color: transparent;
    display: block;
}
 
 
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:1%;
    margin-top: 1%;
    padding-top: 1%;
    vertical-align:middle;
    float:left;
    list-style-type:none;
    width:13%;
    height:80px;
    background-color: #EEE;
    color:#000;
    text-align:center; 
    display: block;
}
 
:focus{
    outline:none;
}
 
div.clear{
    clear:both;
}     


/* calendar */

.calwrapper {
	max-width: 100% !important;
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: 0px;
	left: 0px;
	overflow-y: scroll !important;
	overflow-x: none !important;
}

table.calendar		{ 
	border-left:1px solid #999; 
		xbackground-color: #eee;
	}
tr.calendar-row	{ 
	vertical-align: top;
	min-height: 14%;
	max-height: 14%;

}
td.calendar-day, td.calendar-day-we	{ 
		height: 80px;

	font-size:11px; 
	position:relative; 
	xbackground-color:   #fff ;      
	xborder-right:1px solid #999; 
	
	width: 14%;
	max-width: 14%;

} 
* html div.calendar-day { height:80px; }
td.calendar-day:hover, td.calendar-day-we:hover	{ 
	background:  rgba(255,246,188,0.3); 
	border: 1px dotted black;
}

@media(prefers-color-scheme: dark) {
	td.calendar-day:hover, td.calendar-day-we:hover	{ 
		background:  rgba(255,255,255,0.2); 
		border: 1px dotted #fff;
	}
	
}


td.day-is-selected {
	border: 2px dotted blue;	
}

td.calendar-day-np	{ xbackground:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }
td.calendar-day-head { 
	background:#ccc; 
	text-align:center; 
	xwidth:120px; 
	padding:5px; 
	padding-bottom: 2px;
	border-bottom:1px solid #999; 
	border-top:1px solid #999; 
	border-right:1px none #999; 
	font-size: 16px;
	font-weight: bold;
}
div.day-number		{ 
	background:#eee; 
	padding-top: 3px; 
	padding-bottom: 3px; 
	color:#000; 
	font-weight:bold; 
	float:right; 
	width: 100%;
	text-align:right; 
	margin-bottom: 3px;
	text-decoration: underline;
	}
	
@media(prefers-color-scheme: dark) {
	div.day-number { background-color: #555; color: #fff;}
}	
	
	
/* shared */
td.calendar-day, td.calendar-day-np, td.calendar-day-we { 
	width: 13%;
	xpadding:5px; 
	padding-top: 0px;
	border:1px solid #999; 
	min-height: 80px !important;
}

.calendar-day a {
}


.calendar-event {
	clear:both;
	text-align: right;
	background-color: #d5d5d5;
	border: 1px solid #aaa;
	border-radius: 8px;
	color: #333;
	xborder-radius: 3px;
	padding: 3px;
	xmargin-bottom: 3px;
	width: 90%;
	float: right;
	padding-right: 5px;
	font-weight: bold;
}
.calendar-event-detail {
	xcolor: #8800ff;
	font-weight: normal;
}
@media(prefers-color-scheme: dark) {
	.calendar-event {
		background-color: #353535;
		color: #eee;
	}
	.calendar-event-detail {
		xcolor: #888;
	}
}

.ecpo_content .calendar-event {
	border-radius: 0px;
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
	background-color: #eee;
	color: #000;
		border: 1px solid #666;

}
.ecpo_content .calendar-event-detail {
	color: #444;
}

.start,
.end {
	background-color: transparent !important;
	height: 100%;
}


/* The element to hover over */
.calpo {
	  display: inline-block;
  position: relative;
  	xheight: 10%;
  	text-align: center;
  	width: 100%;
}

.calpo  .ecpopover {
    background-color: #26c;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    display: none;
    font-size: 12px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
        width: 40%;
    z-index: 4000;
    border: 1px solid rgba(0,0,0,0.90);
    padding-bottom: 5px;
} 

  
.calpo:hover .ecpopover {
        display: block;
        -webkit-animation: fade-in .2s linear 1;
        -moz-animation: fade-in .2s linear 1;
        -ms-animation: fade-in .2s linear 1;
}

.ecpo_title {
	display: inline-block;
	width: 100%;
	background: #26c;
	color: #fff;
	padding-top: 5px;
	padding-bottom: 5px;

	font-size: larger;
	font-weight: bold;
}

.ecpo_header {
	display: inline-block;
	width: 100%;
	background: #444;
	color: #eee;
	padding-top: 5px;
	padding-bottom: 5px;
}

.ecpo_content {
	display: inline-block;
	background-color: #fff;
	width: 100%;
	color: #000;
	xpadding-top: 5px;
	xpadding-bottom: 5px;
	xmargin-top: 3px;
}

.pure-table-striped:nth-child(even)  {
	background: #bbb !important;
	color: #fff !important;
}

.pure-table-striped:nth-child(odd)  {
	color: #000 !important;
}

.ecpo_content .pure-table-striped tr:nth-child(even)  {
	background: #ccc !important;
	color: #000 !important;
}

.ecpo_content .pure-table-striped tr:nth-child(odd)  {
	background: #eee !important;
	color: #000 !important;
}

.calendar-list-event {
	border-bottom: 1px dotted #333;
}

.pure-table-striped:nth-child(even) .calendar-list-event {
	border-bottom: 1px dotted #ddd;
}

@-webkit-keyframes fade-in {
	from   { opacity: 0; }
	to { opacity: 1; }
}
@-moz-keyframes fade-in {
	from   { opacity: 0; }
	to { opacity: 1; }
}
@-ms-keyframes fade-in {
	from   { opacity: 0; }
	to { opacity: 1; }
}
@-webkit-keyframes move-up {
	from   { bottom: 30px; }
	to { bottom: 42px; }
}
@-moz-keyframes move-up {
	from   { bottom: 30px; }
	to { bottom: 42px; }
}
@-ms-keyframes move-up {
	from   { bottom: 30px; }
	to { bottom: 42px; }
}





		</style>

