/*** Main Styles:
CSS classes universal to jsocal control ***/
.jsocal { /*** main control's additional required styles ***/
	border: 1px solid rgb(128,128,128);
	background-color:AntiqueWhite;
	display:flex;
	flex-direction:column;
	cursor: pointer;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.jsocal rect, .jsocal line { /* default SVG line/fill tyles for all areas */
	stroke:inherit;/*green; */
	stroke-width:1;
	stroke-linecap:butt;
	fill:inherit;/*AntiqueWhite;*/
}
.jsocal text { /* default SVG text style for all areas */
	stroke: none;
	fill:inherited;
	/*fill:rgb(80,80,80);*/
	/* prevent svg labels from being selected */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*** SVG Divider Lines:
global svg divider lines for groups days and day headers in 
day, group, list and day-digest views.
***/
.jsocal .vertDividerLineMajor { /* used as month divider */
	stroke:inherit;
	stroke-width:2;
	stroke-linecap:butt;
	stroke-opacity: 1;
}
.jsocal .vertDividerLineMinor { /* used as day divider */
	stroke:black; 
	stroke-width:1;
	stroke-linecap:butt;
	stroke-opacity: 0.25;
}
.jsocal .horzDividerLineMajor { /* seperates hours */
	stroke:black; 
	stroke-width:1;
	stroke-linecap:butt;
	stroke-opacity: 0.2;
}
.jsocal .horzDividerLineMinor { /* seperates $dayviewtimescale minutes */
	stroke:red; 
	stroke-width:1;
	stroke-linecap:butt;
	stroke-opacity: 0.1;
}

/*** SVG Backgrounds:
svg background fill for days and day-headers 
Styles are listed in order of painting so 'backgroundS' is painted after 'backgroundC'
which is painted after 'backgroundWE'. In this way effects (such as opacity) are accumulated 
***/
.jsocal .background { /* svg background for all days (used as place holders) */
	stroke:none; /* no border */
	fill:none; /* none = use default box background */
}
.jsocal .backgroundWE { /* svg background for weekend days */
	stroke:none; /* no border */	
	fill:rgb(128,0,0);
	fill-opacity:0.1;
}
.jsocal .backgroundHO { /* svg background for holidays */
	stroke:none; /* no border */	
	fill:rgb(128,0,0);
	fill-opacity:0.2;
}
.jsocal .backgroundTD { /*svg background for today day */
	stroke:none; /* no border */	
	fill:lightgreen;
	fill-opacity:0.25;
}
.jsocal .backgroundCD { /*svg background for current/selected day */
	stroke:none; /* no border */	
	fill:yellow;
	fill-opacity:0.1;
}
.jsocal .backgroundNW { /* svg background for non-working hours */
	stroke:none; /* no border */	
	fill:black;
	fill-opacity:0.1;
}
.jsocal .backgroundOM { /* svg background for other month days */
	stroke:none; /* no border */	
	fill:white;
	fill-opacity:0.5;
}
.jsocal .backgroundDIS { /* svg background for disabled days (typically other month days in year view) */
	stroke:none; /* no border */	
	fill:#dba;
	fill-opacity:0.2;
}
.jsocal .backgroundSHDT { /* svg background top shadow for disabled days (typically other month days in year view) */
	stroke:black;
	stroke-opacity:0.1;
	stroke-width:3;
}
.jsocal .backgroundSHDB { /* svg background bottom shadow for disabled days (typically other month days in year view) */
	stroke:white;
	stroke-opacity:0.2;
	stroke-width:3
}



/*** SVG Text:
svg text for other days and day-headers 
WE and TD Styles are listed in order of painting so 'textTD' is painted after 'textWE'. 
In this way effects (such as opacity) are accumulated 
***/
.jsocal .titleBox .textWE { /* svg title text for weekend days in group view */
	stroke:rgb(128,0,0); /* we frame our text red to indicate it is a weekend day */	
	stroke-width:3px;
	stroke-opacity:0.25;
	fill:inherit;
}
.jsocal .titleBox .textTD { /* svg title text for today day in group view */
	stroke:rgb(0,192,0); /* we frame our text green to indicate it is today */	
	stroke-width:3px;
	stroke-opacity:0.25;
	fill:inherit;
}
.jsocal .monthViewBox text { /* svg date text for normal days in month view */
	stroke:none;
	font-size:smaller;
	fill:inherit;
}
.jsocal .monthViewBox .textHO { /* svg date text for holidays in month view */
	/*stroke:none;
	fill:inherit;
	font-size:smaller;
	font-size:x-small;*/
	font-style:italic;
}
.jsocal .monthViewBox .textWE { /* svg date text for weekend days in month view */
	/*stroke:none;
	font-size:smaller;
	fill:inherit;*/
	font-style:normal;
}
.jsocal .monthViewBox .textTD { /* svg date text for today day in month view */
	/*stroke:none;
	font-size:smaller;
	fill:inherit;*/
	font-weight:bold;
}
.jsocal .monthViewBox .textCD { /* svg date text for current/selected day in month view */
	/*stroke:none;
	font-size:smaller;
	fill:inherit;*/
	font-weight:bold;
}
.jsocal .monthViewBox .textOM { /* svg text for dates of other month days in month view */
	/*stroke:none;
	font-size:smaller;
	fill:inherit;*/
	fill-opacity:0.25; /* slightly transparent */
}


/*** DIV Box Styles:
CSS classes that define the appearance and behaviour of the main
calendar views.
***/
.jsocal .titleBox { /* div styles for title box */
	position:relative;
	border-top: none;
	border-right: none;
	border-bottom: inherit;
	border-left: none;
	font-size:larger;
	font-weight:bold;
	text-align:center;
	padding:2px 0 0px 0;
	width:auto;
	flex-grow:0;
}
.jsocal .headerBox { /* div styles for dayview column headers box */
	/*font-family:inherited;
	font-size:inherited;*/
	position:relative;
	border-top: none;
	border-right: none;
	border-bottom: inherit;
	border-left: none;
	padding:1px 0 1px 0;
	width:auto;
	height:1.2em;
	flex-grow:0;
}
.jsocal .allDayViewBox { /* div styles for dayview all-day events box */
	position:relative;
	border-top: none;
	border-right: none;
	border-bottom: inherit;
	border-left: none;
	padding:1px 0 1px 0;
	overflow-y:scroll;
	overflow-x:hidden;
	width:100%;
	height:100px;
	max-height:25%;
	flex-grow:0;
}
.jsocal .dayViewSubBox { /* div styles for day view events box covering 24 hour range */
	position:absolute; 
	border: none;
	padding:1px 0 1px 0;
	overflow:hidden;
	width: 100%;
	flex-grow:0;
}
.jsocal .dayViewBox { /* div styles for day view scroll box showing visible hour range */
	position:relative;
	border: none;
	overflow-y:scroll;
	overflow-x:hidden;
	width: 100%;
	height: auto;
	flex-grow:1; /* this view occupies the space that remains after all other areas (i.e. titleBox, headerBox and allDayViewBox) have been created */
}
.jsocal .monthViewBox { /* div styles for month view showing all days of a month in a grid */
	position:relative;
	border: none;
	overflow-x:hidden;
	overflow-y:scroll;
	width: 100%;
	height: auto;
	flex-grow:1; /* this view occupies the space that remains after all other areas (i.e. titleBox and headerBox) have been created */
}
.jsocal .yearViewMonthBox .monthViewBox { /* div styles for month view showing all days of a month in a grid */
	overflow:hidden;
/*	position:relative;
	border: none;
	width: 100%;
	height: auto;
	flex-grow:1;*/ /* this view occupies the space that remains after all other areas (i.e. titleBox and headerBox) have been created */
}
.jsocal .yearViewBox { /* div styles for year view showing all months of a year in a grid */
	font-size:smaller;
	position:relative;
	border: none;
	overflow:hidden;
	width: 100%;
	height: 100%;
	flex-grow:1; /* this view occupies the space that remains after all other areas (i.e. titleBox) have been created */
}
.jsocal .yearViewMonthBox { /* div styles for month cell within year view */
	border: 1px solid rgb(128,128,128);
	display:flex;
	flex-direction: column;
}
.jsocal .overlayBox { /* div styles for day view overlay box which mainly displays details of holidays */
	position:absolute;
	border:none;
	background-color: transparent;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	flex-grow:0;
	pointer-events: none;
}

/*** DIV Event Styles:
CSS classes that define the appearance and behaviour of the event
div boxes within different main views.
***/
.jsocal .allDayViewBox .eventBox { /* div styles for individual event box within the all-day view */
	position:absolute;
	overflow:hidden;
	white-space:nowrap;
	box-sizing:border-box;
	cursor:inherit;
}
.jsocal .allDayViewBox .eventBoxSelected { /* div styles for individual event box within the all-day view */
	position:absolute;
	overflow:hidden;
	white-space:nowrap;
	box-sizing:border-box;
	cursor:inherit;
	opacity:none;
	z-index:99;
}
.jsocal .dayViewBox .eventBox { /* div styles for individual event box within the all-day view */
	position:absolute;
	overflow:hidden;
	box-sizing:border-box;
	cursor:inherit;
	z-index:0;
}
.jsocal .dayViewBox .eventBoxSelected { /* div styles for individual event box within the day view */
	position:absolute;
	overflow:hidden;
	box-sizing:border-box;
	cursor:inherit;
	opacity:1;
	z-index:99;
}
.jsocal .monthViewBox .eventBox { /* div styles for individual event box within the all-day view */
	position:absolute;
	overflow:hidden;
	white-space:nowrap;
	box-sizing:border-box;
	cursor:inherit;
}
.jsocal .monthViewBox .eventBoxSelected { /* div styles for individual event box within the day view */
	position:absolute;
	overflow:hidden;
	white-space:nowrap;
	box-sizing:border-box;
	cursor:inherit;
	opacity:1;
	z-index:99;
}
.jsocal .eventContentSelected { /* div styles for when event is selected */
	position:relative;
	width:100%;
	height:100%;
	border:2px dotted rgba(0,0,255,0.5);
	border-radius:none;
	padding:0;
	background-color: inherit;
	opacity:1;
	box-sizing:border-box;
	cursor:inherit;
	/*background: linear-gradient(0deg, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);*/
}
.jsocal .eventContent { /* div styles for when event is not selected */
	position:relative;
	width:100%;
	height:100%;
	border:none;
	padding:2px;
	background-color: transparent;
	box-sizing:border-box;
	cursor:inherit;
	/*background: linear-gradient(0deg, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);*/
}

/*** SVG Event Drag Bar Styles:
CSS classes that define the appearance and behaviour of the event
drag bars.
***/
.jsocal .eventDragBar { /* svg line styles for event box drag bars (inactive) */
	pointer-events: auto;
	stroke: rgba(0,0,0,0);
	stroke-width:5;
	stroke-linecap:round;
	background-color: rgba(0, 0, 0, 0);
	position:absolute;
	width:5px;
	height:5px;
}
.jsocal .eventDragBar:hover,.jsocal .eventDragBar:active { /* svg line styles for event box drag bars (when active) */
	stroke: rgba(0,0,0,0.25);
	background-color: rgba(0,0,0,0.25);
}
.jsocal .eventDragBar.top,.jsocal .eventDragBar.bottom { /* svg line styles for event box drag bars (vertical sizing and moving) */
	cursor: row-resize;
}
.jsocal .eventDragBar.left,.jsocal .eventDragBar.right { /* svg line styles for event box drag bars (horizontal sizing and moving) */
	cursor: col-resize;
}
.jsocal .eventDragBar.all { /* svg line styles for event box drag bars (moving all directions) */
	cursor: move;
	user-select:none;
}
.jsocal .eventDragBar.vert { /* svg line styles for event box drag bars (moving vertical only) */
	cursor: ns-resize;
}
.jsocal .eventDragBar.horz { /* svg line styles for event box drag bars (moving horizontal only) */
	cursor: ew-resize;
}

/*** SVG Event Navigate Button Styles:
CSS classes that define the appearance and behaviour of the navigation 
buttons.
***/
.jsocal .navigateButton { /* style for inactive navigation button */
	pointer-events: auto;
	background-color: rgba(0, 0, 0, 0);
	position:absolute;
	height:100%;
	top:0px;
	font-size:inherit;
	font-weight:normal;
	font-style: normal;
	text-align: center;
	border-style: solid;
}
.jsocal .navigateButton:hover,.jsocal .navigateButton:active { /* style for active navigation button */
	background-color: rgba(0,0,0,0.25);
}
.jsocal .navigateButton.prev { /* style for left navigation button */
	cursor: pointer;
	border-width: 0px 2px 0px 0px;
}
.jsocal .navigateButton.next { /* style for right navigation button */
	cursor: pointer;
	border-width: 0px 0px 0px 2px;
}

/*
.jsocal .eventBorderContinueLeft {
	border-left:2px dotted rgba(0,0,0,0.25);
	padding-left:1px;
}
.jsocal .eventBorderContinueRight {
	border-right:2px dotted rgba(0,0,0,0.25);
	border-right:2px dotted rgba(0,0,0,0.25);
}*/


/*** Day View Text Styles:
CSS classes that define the appearance of holiday and time column text 
displayed in the calendar day-view.
***/
.jsocal .dayViewBox text.timeColumn {
	font-size:smaller;
	fill:rgb(0,0,0);
	fill-opacity:0.5;
	text-anchor:end;
	-ms-transform: translate(0,0.25em);
	-webkit-transform: translate(0,0.25em);
	transform: translate(0,0.25em);
}
.jsocal .dayViewBox text.holidays {
	font-size:smaller;
	fill:red;
	fill-opacity:0.5;
}



.dayViewBox .evTimedView,.dayViewBox .evListView,.dayViewBox .evDigestView  {
/*	evTimedView: single-day svg background area for displaying timed events
	evListView: single-day svg background area for displaying events in list form
	evDigestView: single-day svg background area for displaying events in digest mode */

}