#jsCalendarScreen,#jsCalendarClearScreen {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
	z-index:13000;
}
#jsCalendarClearScreen {
    opacity: 0;
    filter: alpha(opacity=0);
}
.jsCalendarArea {
	border:1px solid yellow;
	display:inline-block;
	position:absolute;
	z-index:0;
}
.jsCalendar {
	display:inline-block;
	border:2px solid black;
	border-collapse:collapse;
	background:white;
	position:absolute;
	z-index:13001;
}
.jsCalendarObj[data-calactive='1'] {
	box-shadow: 0px 0px 4px darkslategrey;
}
.jsCalendar .calCloseBtn,.jsCalendarIcon,.jsCalendarCbox {
	cursor: pointer;
	font-family: 'Font Awesome 5 Pro';
	font-weight: 900;
	font-size:16px;
	display:inline-block;
}
.jsCalendar .calCloseBtn,.jsCalendarCbox {
	position:absolute;
}
.jsCalendar .calCloseBtn {
	right:-10px;
	top:-10px;
	border-radius:18px;
	width:19px;
	height:19px;
	background:crimson;
	color:white;
}
.jsCalendar .calCloseBtn:hover {
	background:gold;
	color:black;
}
.jsCalendar .calCloseBtn::before {
	display:inline-block;
	content: "\f00d"; 
	position:relative;
	left:4px;
	top:1px;
}
.jsCalendarIcon::after {
	border-radius:4px;
	padding:2px;
	margin-left:5px;
	color:darkslategrey;
	cursor: pointer;
	content: "\f073"; 
}
.jsCalendarIcon:hover::after {
	color:gold;
	background:darkslategrey;
}
.jsCalendar[data-popup='1'] {
	position:fixed;
}
.jsCalendar .dtrow { 
	border-top:1px solid darkslategrey;
	background:lavender;
	text-align:center;
	padding:3px;
}
.jsCalendar .row { border-bottom:1px solid darkslategrey; }
.jsCalendar .row:last-child { border-bottom:none; }
.jsCalendar .cell,.jsCalendar .hcell,.jsCalendar .fwcell {
	box-sizing:border-box;
	border-right:1px solid darkslategrey;
	display:inline-block;
	width:35px;
	height:35px;
	font-size:18px;
	line-height:35px;
	text-align:center;
	background:lavender;
}
.jsCalendar .dtcell {
	box-sizing:border-box;
	height:25px;
	font-weight:bold;
	line-height:21px;
	padding-left:10px;
	padding-right:10px;
	font-size:15px;
	border-radius:5px;
	border:2px solid darkslategrey;
	background:white;
	display:inline-block;
	cursor: pointer; 
}
.jsCalendar .dtcell_apm {
	font-weight:normal;
	color:silver;
}
.jsCalendar .dtcell_apm[data-on='1'] {
	background:darkslategrey;
	color:white;
}
.jsCalendar .dtcell_apm[data-type='am'] {
	border-radius: 5px 0px 0px 5px;
	border-right:none;
	padding-left:2px;
	padding-right:4px;
}
.jsCalendar .dtcell_apm[data-type='pm'] {
	padding-left:4px;
	padding-right:2px;
	border-radius: 0px 5px 5px 0px;
	border-left:none;
}
.jsCalendar .dtcell:hover {
	background:gold;
	color:black;
}
.jsCalendar .clockNumber {
	font-weight:bold;
	position:absolute;
	text-align:center;
	display:inline-block;
	font-size:14px;
	line-height:30px;
	width:30px;
	height:30px;
	margin-left:-15px;
	margin-top:-15px;
	border-radius:35px;
	background:silver;
	color:darkslategrey;
	cursor: pointer; 
}
.jsCalendar[data-short='1'] .clockNumber {
	line-height:24px;
	width:24px;
	height:24px;
	margin-left:-12px;
	margin-top:-12px;
}
.jsCalendar .clockNumber[data-on='1'] {
	background:darkslategrey;
	color:white;
}
.jsCalendar .clockNumber .hrselect,.jsCalendar .clockNumber .minselect {
	display:inline-block;
	position:relative;
	z-index:2;
}
.jsCalendar .clockNumber[data-mode='h'] .hrselect,.jsCalendar .clockNumber[data-mode='m'] .minselect {
	display:inline-block;
}
.jsCalendar .clockNumber[data-mode='m'] .hrselect,.jsCalendar .clockNumber[data-mode='h'] .minselect {
	display:none;
}

position:relative;z-index:2
.jsCalendar .clockNumber[data-on='1'],.minNumber[data-on='1'] {
	background:darkslategrey;
	color:white;
}
.jsCalendar .clockh {
	display:inline-block;
	position:absolute;
	height:2px;
	background:darkslategrey;
	opacity:0;
	z-index:0;
}
.jsCalendar .clockh[data-on='1'] {
	opacity:1;
}
.jsCalendar .clockNumber:hover {
	background:gold;
}
.jsCalendar .clockNumber[data-mode='h']:hover .clockhh,.jsCalendar .clockNumber[data-mode='m']:hover .clockhm {
	opacity:1;
	background:gold;
}
.jsCalendar[data-short='1'] .cell,.jsCalendar[data-short='1'] .fwcell {
	font-size:15px;
	height:25px;
	line-height:25px;
}
.jsCalendar .cell { cursor: pointer; position:relative; }
.jsCalendar .celltext { position:relative;display:inline-block;z-index:2; }
.jsCalendar .pillBtn {
	display:inline-block;
	border-radius:18px;
	background:white;
	color:darkslategrey;
	border:2px solid darkslategrey;
	padding:2px 20px;
	line-height:16px;
	font-size:16px;
	cursor: pointer;
}
#subCancel {
	position:absolute;
	top:18px;
	right:2px;
	padding:2px 10px;
	color:crimson;
	margin-top:5px;
	z-index:4;
}
.jsCalendarWrap {
	display:inline-block;
	white-space:nowrap;
	position:relative;
}
.jsCalendarWrap div { vertical-align:center; }
.jsCalendar .pillBtn:hover {
	background:darkslategrey;
	color:white !important;
}
.jsCalendar .highlight {
	display:inline-block;
	position:absolute;
	width:26px;
	height:27px;
	border-radius:5px;
	top:2px;
	left:2px;
	text-align:center;
	line-height:27px;
	border:2px solid rgba(255,255,255,0);
	z-index:1;
}
.jsCalendar .highlight[data-selected='1'] { 
	border:2px solid darkslategrey;
	background:darkslategrey;
}
.jsCalendar[data-short='1'] .highlight {
	height:17px;
}
.jsCalendar .highlight[data-today='1'] { border:2px dotted crimson; }
.jsCalendar .cell[data-selected='1'] .celltext { color:white; }
.jsCalendar .cell[data-selected='0']:hover .highlight { background:gold; }
.jsCalendar .cell[data-selected='0']:hover .celltext { color:black; }

.jsCalendarCbox { position:relative; color:darkslategrey; width:18px; }
.jsCalendarCbox:hover::after {
	font-weight:900;
	content:'\f0c8';
	color:gold;
}
.jsCalendarCbox::after {
	font-weight:400;
	content:'\f0c8';
}
.jsCalendarCbox[data-on='1']::after {
	font-weight:900;
	content:'\f14a';
}

.cell[data-selected='1'] { 
	color:white;
}
.mselect {
	cursor: pointer;
}
.jsCalendar .mcell,.jsCalendar .ycell,.jsCalendar .mccell,.jsCalendar .mycell {
	box-sizing:border-box;
	display:inline-block;
	text-align:center;
	width:35px;
	height:20px;
	line-height:20px;
	font-size:16px;
	color:white;
	background:darkslategrey;
	cursor: pointer;
}
.jsCalendar .mycell { width:140px; }
.jsCalendar .mcell,.jsCalendar .ycell { 
	font-size:14px; 
	line-height: 20px; 
	width: auto; 
	vertical-align:top;
	border-right:1px solid darkslategrey; 
	margin-auto;
	padding-left:2px;
	padding-right:2px;
}
.jsCalendar .mcell:hover,.jsCalendar .ycell:hover,.jsCalendar .mccell:hover {
	background:gold;
	color:black;
}
.jsCalendar .fwcell {
	background:white; 
	width:245px; 
	border:none; 
	text-align:left;
	padding-left:10px;
}
.jsCalendar .ctitle {
	background:black; 
	padding:3px 0px;
	color:white; 
	font-size:12px;
	width:245px; 
	text-align:center;
}
.jsCalendar .hcell[data-we='1'],.jsCalendar .cell[data-we='1'] {
	color:crimson;
}
.jsCalendar .cell[data-m='0'] {
	background:white;
}
.jsCalendar .hcell {
	box-sizing:border-box;
	height:20px;
	line-height:20px;
	font-size:15px;
	background:whitesmoke;
	color:darkslategrey;
}
.jsCalendar .cell:last-child,.jsCalendar .hcell:last-child {
	border:none;
}
.jsCalendarDDC {
	display:inline-block;
	position:absolute;
	top:21px;
	left:0px;
	width:100%;
	z-index:3;
}
.jsCalendarDD {
	width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    box-sizing: content-box;
	position:relative;
	scrollbar-width: thin;
	scrollbar-color: darkslategrey white;
}
.jsCalendarDD::-webkit-scrollbar {
	width: 6px;
}
.jsCalendarDD::-webkit-scrollbar-track {
	background: white;
}
.jsCalendarDD::-webkit-scrollbar-thumb {
	background-color: black;
	border-radius: 20px;
	border: none;
}


.msrow { position:relative; }