* {
	position: relative;
	margin: 0;
	padding: 0;
}

.jqx-grid-header > div {
	z-index: 0 !important;
}

body { 
    background: white url("../images/payslip-bg.png") no-repeat fixed center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
	box-sizing: border-box !important;
}
#listBoxddTheme{
	z-index: 999991;
}
/* FONTS */

@font-face {
	font-family: fontITC;
	src: url("../fonts/ITC Franklin Gothic Book Compressed.otf");
}

/* HEADER */

header {
	font-family: fontITC;
	background: rgba(0,49,113,0.8) url(../images/glass-pattern.png) top left repeat;
	overflow: hidden;
}
	
	section#feapLogo {
		margin-top: 15px;
		margin-left: 15px;
		margin-bottom: 15px;
		float: left;
	}
	
		section#feapLogo > img {
			cursor: pointer;
		}
	
	section#title {
		color: white;
		margin-top: 15px;
		margin-right: 15px;
		margin-bottom: 15px;
		float: right;
	}

	/* Navigator */

	section#nav {
		text-align: right;
		font-size: 1em;
		z-index: 999;
	}

		nav#top-nav {
			font-family: fontITC;
			text-transform: uppercase;
			clear: both;
			display: inline-block;
		}

			nav#top-nav ul {
				list-style: none;
			}

				nav#top-nav ul:before, nav#top-nav ul:after {
					content: "";
					display: table;
				}

				nav#top-nav ul:after {
					clear: both;
				}

				nav#top-nav > ul > li {
					position: relative;
				}
				nav#top-nav > ul > li > ul {
					z-index: 999999 !important;
				}


			nav#top-nav a {
				display: block;
				padding: 10px 15px;
				line-height: 1.2em;
				color: #555;
				text-decoration: none;
			}

				nav#top-nav a:before {
					content: "";
					position: absolute;
					width: 0;
					height: 1px;
					transition: all 0.2s linear;
				}

					nav#top-nav > ul > li > a:before {
						bottom: 7px;
						background-color: #555;
						margin: auto;
					}

					nav#top-nav > ul > li > ul > li > a:before,
					nav#top-nav > ul > li > ul > li > ul > li > a:before {
						bottom: 7px;
						right: 15px;
					}

						nav#top-nav a:hover:before {
							width: 50%;
						}

					nav#top-nav > ul > li > ul > li,
					nav#top-nav > ul > li > ul > li > ul > li {
						width: 180px;
					}

					nav#top-nav > ul > li > ul > li > a,
					nav#top-nav > ul > li > ul > li > ul > li > a {
						border: none;
					}

				nav#top-nav > ul > li > ul > li.with-sub-menu:before {
					position: absolute;
					top: 8px;
					left: 5px;
				}

					nav#top-nav > ul > li > ul > li.with-sub-menu:hover:before {
						animation: arrowMove 0.5s linear infinite;
					}

/* MAIN */

#secMISTips {
	display: flex;
    background-color: #f5f7ff;
	min-height: 80px;
	border-radius: 3px;
	margin-bottom: 25px;
	padding: 8px 5px 5px 15px;
	justify-content: flex-start;
	align-items: center;
	border-left: 1px solid #279a01;
	border-bottom: 1px solid #279a01;
	box-shadow: -3px 3px 10px #747d8c;
}

	#icoTips {
		height: 80px;
	}

	#txtTips {
		margin: 0 15px;
		font-size: 1.3em;
		font-style: italic;
		color: #555;
	}

section[role=main] {
	padding: 20px 15px;
}

	section.gridNav,
	section.payslip,
	section.attendance,
	section.overtime,
	section.leave,
	section.loan-inquiry,
	section.gallery-container,
	section.container  {
		font-family: fontITC;
		margin-bottom: 30px !important;
		box-sizing: border-box;
	}

	section.gallery-container {
		overflow: hidden !important;
	}

		section.gridNav h1,
		section.payslip h1,
		section.attendance h1,
		section.overtime h1,
		section.leave h1,
		section.loan-inquiry h1,
		section.gallery-container h1,
		section.container h1 {
			color: #1F4788;
			font-weight: bold;
			text-transform: uppercase;
		}

		section.request-container h2 {
			color: #1F4788;
			font-weight: bold;
			text-transform: uppercase;
		}

		section.gridNav > div {
			display: inline-block;
			background-color: rgba(0,0,0,0.5);
			min-height: 200px;
			cursor: pointer;
			margin: 1px;
		}

			section.gridNav > div:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				margin: auto;
				background-color: rgba(31,71,136,0.8);
				height: 100%;
				width: 0;
				overflow: hidden;
				transition: all 0.4s ease;
			}

				section.gridNav > div:hover:before {
					width: 100%;
				}

		section.gridNav > div > div.img-container {
			display: inline-block;
			padding: 15px;
  			text-align: center;
			position: absolute;
			right: 0;
			left: 0;
			top: 0;
			margin: auto;
			height: calc(50px - 30px);
			width: calc(100% - 30px);
		}

			section.gridNav > div > div.img-container > img {
				height: 120px;
				width: 120px;
			}

		section.gridNav > div > span {
			display: inline-block;
			padding: 15px;
  			text-align: center;
			position: absolute;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
			color: #fff;
			text-transform: uppercase;
			height: calc(50px - 30px);
			width: calc(100% - 30px);
			background-color: rgba(0,0,0,0.5);
		}

	div.gridForm {
		background-color: rgba(0,0,0,0.7);
		padding: 10px;
		margin-bottom: 10px;
		border-radius: 5px;
	}

		div.gridForm fieldset.gridFieldSet {
			border-width: 0;
		}

		div.gridForm label[for=dateFrom], 
		div.gridForm label[for=dateTo], 
		div.gridForm label[for=inpEmpNo] {
			font-size: 1.2em;
			color: #fff;
			margin: 5px;
		}

		div.gridForm input#dateFrom,
		div.gridForm input#dateTo {
			font-size: 0.8em;
			border-radius: 5px;
			color: #757D75;
			border: 1px solid #4B77BE;
			height: 25px !important;
			padding: 2px;
			z-index: 99;
		}

			div.gridForm input#dateFrom:focus,
			div.gridForm input#dateTo:focus {
				outline: none !important;
    			box-shadow: 0 0 3px #4B77BE;
			}

		div.gridForm input#inpEmpNo,
		div.gridForm input#inpEmpName,
		div.gridForm input#inpDepartment,
		div.gridForm input#inpEnt,
		div.gridForm input#inpInOut,
		div.gridForm input#inpLocation,
		div.gridForm input#inpSection ,
		div.gridForm input#inpFiledBy  {
			font-size: 0.8em;
			border-radius: 5px;
			color: #757D75;
			border: 1px solid #4B77BE;
			height: 30px !important;
			padding: 2px;
			margin: 5px;
		}

			div.gridForm input#inpEmpNo:focus,
			div.gridForm input#inpEmpName:focus,
			div.gridForm input#inpDepartment:focus,
			div.gridForm input#inpEnt:focus,
			div.gridForm input#inpInOut:focus,
			div.gridForm input#inpLocation:focus,
			div.gridForm input#inpSection:focus,
			div.gridForm input#inpFiledBy:focus {
				outline: none !important;
    			box-shadow: 0 0 3px #4B77BE;
			}

		div.gridForm input#go {
			font-family: fontITC;
			font-size: 1.1em;
			display: inline-block;
			position: relative;
			font-weight: bold;
			text-transform: uppercase;
			border: none;
			color: #fff;
			cursor: pointer;
			background: #4B77BE;
			border: 1px solid #4B77BE;
			border-radius: 5px;
			height: 35px !important;
			margin: 5px;
			transition: background 0.2s linear;
		}

		#btnExport {
			font-family: fontITC;
			font-size: 1.1em;
			display: inline-block;
			position: relative;
			font-weight: bold;
			text-transform: uppercase;
			border: none;
			color: #fff;
			cursor: pointer;
			background: #4B77BE;
			border: 1px solid #4B77BE;
			border-radius: 5px;
			height: 35px !important;
			margin: 5px;
			transition: background 0.2s linear;
		}

		div.gridForm input.btn-summary {
			font-family: fontITC;
			font-size: 1.1em;
			padding: 0 20px !important;
			display: inline-block;
			position: relative;
			font-weight: bold;
			text-transform: uppercase;
			border: none;
			color: #fff;
			cursor: pointer;
			background: #4B77BE;
			border: 1px solid #4B77BE;
			border-radius: 5px;
			height: 35px !important;
			margin: 5px;
			transition: background 0.2s linear;
		}

			div.gridForm input#go:hover,
			div.gridForm input.btn-summary:hover {
				background: transparent;
			}

	/* Log In */

	section#logIn,
	section#resetPassSection {
		font-family: fontITC;
		background-color: rgba(236,240,241,0.8);
		border: 1px solid #000;
		border-radius: 8px;
		box-shadow: 0 0 5px #252525;
		padding: 20px;
		text-align: center;
	}

		section#resetPassSection span.icon {
			font-size: 1.3em;
			font-weight: bold;
			position: absolute;
			top: 10px;
			right: 5px;
		}

			section#resetPassSection span.check-icon::before {
				content: "\2714";
				color: #16A085;
			}

			section#resetPassSection span.ekis-icon::before {
				content: "\2718";
				color: #C3272B;
			}

	section#resetPassSection{
		margin: 20px auto 0 auto;
	}

		section#resetPassSection section#newPassword{
			display: none;
		}

			section#resetPassSection section#newPassword > div#emailVerification {
				background-color: #BDC3C7;
				color: #264348;
				font-size: 1.2em;
				padding: 10px;
				margin-bottom: 20px;
			}

		section#logIn label,
		section#resetPassSection label {
			font-size: 1.3em;
			color: #003171;
		}

		section#logIn input[type=text],
		section#logIn input[type=password],
		section#resetPassSection input[type=text],
		section#resetPassSection input[type=date],
		section#resetPassSection input[type=password]{
			font-size: 1.1em;
			text-align: center;
			border: none;
			border-radius: 5px;
			color: #757D75;
			width: 100%;
			height: 30px;
			margin: 8px 0;
			padding: 2px;
			transition: all 0.2s linear;
		}

		section#resetPassSection input[type=date]::-webkit-inner-spin-button,
		section#resetPassSection input[type=date]::-webkit-outer-spin-button,
		section#resetPassSection input[type=date]::-webkit-calendar-picker-indicator,
		section#resetPassSection input[type=date]::-webkit-clear-button {			
			-webkit-appearance: none;
			display: none;
		}

			section#logIn input[type=text]:focus,
			section#logIn input[type=password]:focus,
			section#resetPassSection input[type=text]:focus,
			section#resetPassSection input[type=date]:focus,
			section#resetPassSection input[type=password]:focus {
				outline: none !important;
    			box-shadow: 0 0 3px #003171;
			}

		section#logIn div.warning {
			font-size: 1.1em;
			color: #F22613;
		}

		section#logIn div.divider,
		section#resetPassSection div.divider {
			border-bottom: 1px solid #ABB7B7;
			margin: 20px 0;
		}

		section#logIn button#submit,
		section#logIn button#resetPassword,
		section#resetPassSection button.my-button{
			font-family: fontITC;
			font-size: 1.1em;
			display: inline-block;
			position: relative;
			background: none;
			font-weight: bold;
			text-transform: uppercase;
			border: none;
			color: #fff;
			cursor: pointer;
			background: #003171;
			transition: background 0.2s linear;
		}

		section#logIn button#resetPassword,
		section#resetPassSection button#backToLogin {
			background: #252525 !important;
		}

		section#resetPassSection button.my-button:disabled {
			background: #BDC3C7 !important;
			color: #555 !important;
			cursor: default !important;
		}

			section#logIn button#submit span,
			section#logIn button#resetPassword span,
			section#resetPassSection button.my-button span{
				display: block;
				width: 135px;
				padding: 15px 20px;	
			}

				section#logIn button#submit::before,
				section#logIn button#resetPassword::before,
				section#resetPassSection button.my-button::before{
					left: 0;
					top: 0;
				}
				section#logIn button#submit::after,
				section#logIn button#resetPassword::after,
				section#resetPassSection button.my-button::after{
					left: 0;
					bottom: 0;
				}
				section#logIn button#submit span::before,
				section#logIn button#resetPassword span::before,
				section#resetPassSection button.my-button span::before{
					left: 0;
					bottom: 0;
				}
				section#logIn button#submit span::after,
				section#logIn button#resetPassword span::after,
				section#resetPassSection button.my-button span::after{
					right: 0;
					bottom: 0;
				}

				section#logIn button#submit::before, section#logIn button#submit::after,
				section#logIn button#resetPassword::before, section#logIn button#resetPassword::after,
				section#resetPassSection button.my-button:not(:disabled)::before, section#resetPassSection button.my-button:not(:disabled)::after{
					content:"";
					width: 0;
					height: 1px;
					position: absolute;
					transition: all 0.2s linear;
					background: #003171;
				}

				section#logIn button#resetPassword::before, section#logIn button#resetPassword::after,
				section#resetPassSection button#backToLogin::before, section#resetPassSection button#backToLogin::after {
					background: #252525 !important;
				}

					section#logIn button#submit span::before, section#logIn button#submit span::after,
					section#logIn button#resetPassword span::before, section#logIn button#resetPassword span::after,
					section#resetPassSection button.my-button:not(:disabled) span::before, section#resetPassSection button.my-button:not(:disabled) span::after{
						content:"";
						width: 1px;
						height: 0;
						position: absolute;
						transition: all 0.2s linear;
						background: #003171;
					}

					section#logIn button#resetPassword span::before, section#logIn button#resetPassword span::after,
					section#resetPassSection button#backToLogin span::before, section#resetPassSection button#backToLogin span::after {
						background: #252525 !important;
					}

						section#logIn button#submit:hover,
						section#logIn button#submit:focus,
						section#logIn button#resetPassword:hover,
						section#logIn button#resetPassword:focus,
						section#resetPassSection button.my-button:hover,
						section#resetPassSection button.my-button:focus {
							outline: none !important;
							color: #003171;
							background: transparent;
						}

						section#logIn button#resetPassword:hover,
						section#logIn button#resetPassword:focus,
						section#resetPassSection button#backToLogin:hover,
						section#resetPassSection button#backToLogin:focus {
							color: #252525 !important;
							background: transparent !important;
						}

						section#logIn button#submit:hover::before, section#logIn button#submit:hover::after,
						section#logIn button#submit:focus::before, section#logIn button#submit:focus::after,
						section#logIn button#resetPassword:hover::before, section#logIn button#resetPassword:hover::after,
						section#logIn button#resetPassword:focus::before, section#logIn button#resetPassword:focus::after,
						section#resetPassSection button.my-button:hover::before, section#resetPassSection button.my-button:hover::after,
						section#resetPassSection button.my-button:focus::before, section#resetPassSection button.my-button:focus::after{
							width: 100%;
						}

						section#logIn button#submit:hover span::before, section#logIn button#submit:hover span::after,
						section#logIn button#submit:focus span::before, section#logIn button#submit:focus span::after,
						section#logIn button#resetPassword:hover span::before, section#logIn button#resetPassword:hover span::after,
						section#logIn button#resetPassword:focus span::before, section#logIn button#resetPassword:focus span::after,
						section#resetPassSection button.my-button:hover span::before, section#resetPassSection button.my-button:hover span::after,
						section#resetPassSection button.my-button:focus span::before, section#resetPassSection button.my-button:focus span::after{
							height: 100%;
						}

						section#logIn button#submit:hover span::before, section#logIn button#submit:hover::after,
						section#logIn button#submit:focus span::before, section#logIn button#submit:focus::after,
						section#logIn button#resetPassword:hover span::before, section#logIn button#resetPassword:hover::after,
						section#logIn button#resetPassword:focus span::before, section#logIn button#resetPassword:focus::after,
						section#resetPassSection button.my-button:hover span::before, section#resetPassSection button.my-button:hover::after,
						section#resetPassSection button.my-button:focus span::before, section#resetPassSection button.my-button:focus::after{
							transition-delay: 0s;
						}
						section#logIn button#submit:hover::before, section#logIn button#submit:hover span::after,
						section#logIn button#submit:focus::before, section#logIn button#submit:focus span::after,
						section#logIn button#resetPassword:hover::before, section#logIn button#resetPassword:hover span::after,
						section#logIn button#resetPassword:focus::before, section#logIn button#resetPassword:focus span::after,
						section#resetPassSection button.my-button:hover::before, section#resetPassSection button.my-button:hover span::after,
						section#resetPassSection button.my-button:focus::before, section#resetPassSection button.my-button:focus span::after{
							transition-delay: 0.2s;
						}

						section#logIn button#submit span::before, section#logIn button#submit::after,
						section#logIn button#resetPassword span::before, section#logIn button#resetPassword::after,
						section#resetPassSection button.my-button span::before, section#resetPassSection button.my-button::after{
							transition-delay: 0.2s;
						}
						section#logIn button#submit::before, section#logIn button#submit span::after,
						section#logIn button#resetPassword::before, section#logIn button#resetPassword span::after,
						section#resetPassSection button.my-button::before, section#resetPassSection button.my-button span::after{
							transition-delay: 0s;
						}

	/* Album Gallery */

	section.gridGallery > div > div.album-container {
		font-family: fontITC;
		min-height: 220px;	
		/*min-width: 360px;	*/
		width: 400px;
		display: inline-block;
		background-color: #fff;
		margin: 10px;
		border: 1px solid rgba(22,160,133,1);
	}

		section.gridGallery > div > div.album-container > div.thumbnail-back {
			display: inline-block;
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background-color: rgba(22,160,133,0.3);
			box-shadow: -2px -2px 10px rgba(0,0,0,0.5);
			border: 1px solid rgba(22,160,133,1);
			opacity: 0;
			z-index: -1;
		}

		section.gridGallery > div > div.album-container > div.album-title {
			position: absolute;
			top: 0;
			left: 0;
			font-size: 1.1em;
			height: calc(100% - 30px);
			width: calc(100% - 20px);
			color: #264348;
			text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff;
			background-color: rgba(255, 255, 255, 0.1) !important;
			padding: 15px 10px;
			text-align: center;
			text-transform: uppercase;
			background-color: transparent;
		}

		section.gridGallery > div > div.album-container > div.button-container {
			display: inline-block;
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background-color: rgba(0,0,0,0.6);
			border: 1px solid rgba(22,160,133,1);
			box-shadow: -2px -2px 10px rgba(0,0,0,0.5);
			opacity: 0;
		}

			section.gridGallery > div > div.album-container > div.button-container > a {
				position: absolute;
				top: calc(50% - 15px);
				left: calc(50% - 30px);
				color: #16A085;
				vertical-align: middle;
				padding: 8px 20px;
				text-transform: uppercase;
				text-decoration: none;
				border: 1px solid #16A085;
				border-radius: 5px;
				background: transparent;
				cursor: pointer;
				transition: all 0.2s linear;
			}
				section.gridGallery > div.album-container > div.button-container > a:hover {
					color: #fff;
					background: #16A085;
				}

	section.gridEventGallery > a.image-container {
		font-family: fontITC;
		display: block;
		float: left;
		height: 200px;
		width: 400px;
		background-color: #fff;
		margin: 3px;
		border: 1px solid rgba(22,160,133,1);
		cursor: zoom-in;
		overflow: hidden;
	}

		section.gridEventGallery > a.image-container > img {
			object-fit: cover;
			float: left;
			height: 200px;
			display: none;
		}


		section.gridEventGallery > a.image-container > div.img-zoom {
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			height: 100%;
			width: 100%;
			background-color: rgba(0,0,0,0.5);
			display: none;
		}

			section.gridEventGallery > a.image-container > div.img-zoom > img {
				position: absolute;
				top: calc(50% - 15px);
				left: calc(50% - 15px);
				display: inline-block;
				height: 30px;
				width: 30px;
			}

	/*section.gridEventGallery > div.image-container {
		font-family: fontITC;
		display: inline-block;
		min-height: 200px;
		background-color: #fff;
		margin: 3px;
		border: 1px solid rgba(22,160,133,1);
		cursor: zoom-in;
	}

		section.gridEventGallery > div.image-container > div.img-zoom {
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			height: 100%;
			width: 100%;
			background-color: rgba(0,0,0,0.5);
			display: none;
		}

			section.gridEventGallery > div.image-container > div.img-zoom > img {
				position: absolute;
				top: calc(50% - 15px);
				left: calc(50% - 15px);
				display: inline-block;
				height: 30px;
				width: 30px;
			}*/

	section#zoomedInImage {
		position: fixed;
		display: block;
		text-align: center;
		height: 100%;
		width: 100%;
		background-color: rgba(38,67,72,0.8);
		cursor: zoom-out;
		z-index: 9999;
		display: none;
	}
	
		section#zoomedInImage > img {
			object-fit: contain;
			height: 100%;
			width: 100%;
		}
	
/* FOOTER */

footer {
	font-family: fontITC;
	background-color: rgba(236,240,241,0.8);
	height: 64px;
	border-top: 1px solid #000;
	width: 100%;
	overflow: hidden;
	z-index: 999999999;
	position: fixed;
	left: 0;
	bottom: 0;
}

	section#copyright {
		color: #000;
		text-align: center;
		font-size: 1.1em;
		margin-top: 20px;
		margin-bottom: 20px;
	}

/* Page Loader */

section#pageLoader {
	background: #EEEEEE url(../images/glass-pattern.png) repeat fixed center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}
	
	div.loader,
	div.loader2,
	div.loader3 {
		border-radius: 50%;
		width: calc(100% - 10px);
		height: calc(100% - 10px);
		border: 5px solid transparent;
	}
	
	div.loader {
		position: fixed;
		border-radius: 50%;
		border-top: 5px solid #003171;
		width: 50px;
		height: 50px;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		-webkit-animation: spin 2s linear infinite; /* Safari */
		animation: spin 2s linear infinite;
	}
	
	div.loader2 {
		border-top: 5px solid #4B77BE;
		-webkit-animation: spin 2s linear infinite; /* Safari */
		animation: spin 0.8s linear infinite reverse;
	}
	
	div.loader3 {
		border-top: 5px solid #59ABE3;
		-webkit-animation: spin 2s linear infinite; /* Safari */
		animation: spin 0.5s linear infinite;
	}

	/* Safari */
	@-webkit-keyframes spin {
		0% { -webkit-transform: rotate(0deg); }
		100% { -webkit-transform: rotate(360deg); }
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

/*--------------------------*/
.alert-drawer {
  overflow: hidden;
  background-color: #F2C5C5;
  box-sizing: border-box;
  box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.25); }
  .alert-drawer .alert-count {
    background: #db7777;
    display: inline-block;
    height: 100%;
    padding-top: 27px;
    padding-bottom: 27px;
    padding-left: 50px;
    padding-right: 50px;
    margin-right: 25px;
    color: #ffffff;
    box-sizing: border-box;
    position: relative; }
    .alert-drawer .alert-count img {
      float: left;
      margin-top: 5px; }
    .alert-drawer .alert-count h2, .alert-drawer .alert-count h5 {
      color: inherit;
      text-shadow: 0 1px rgba(0, 0, 0, 0.5); }
    .alert-drawer .alert-count h2 {
      margin-left: 25px; }
    .alert-drawer .alert-count h5 {
      text-transform: uppercase; }
    .alert-drawer .alert-count:after {
      position: absolute;
      display: block;
      content: " ";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 50px 0 50px 20px;
      border-color: transparent transparent transparent #db7777;
      top: 0;
      right: -20px; }

.alert-drawer {
  position: relative; }
  .alert-drawer:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: url("../images/diagonal-pattern.png");
    background-repeat: repeat;
    opacity: 0.2; }
  .alert-drawer .alert-card {
    z-index: 2; }
  .alert-drawer .alert-count > * {
    position: relative;
    z-index: 2; }

.alert-drawer .alert-card {
  display: inline-block;
  vertical-align: top;
  margin-top: 6px;
  cursor: pointer; }

.alert-drawer .alert-card + .shadow {
  width: 180px;
  height: 10px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.1), transparent);
  opacity: 0;
  display: inline-block;
  position: relative;
  left: -190px;
  vertical-align: bottom;
  top: -5px; }

.alert-drawer {
  transition: height 0.5s; }

.alert-drawer.open {
  height: 100px; }

.alert-drawer.closed {
  height: 0; }
  /*-------------------------------------*/
.card {
border-style: solid;
border-size: 5px;
background-color: #c44569;
width: 120px;
height: 80px;
border-style: solid;
border-color: #f5f6fa;
box-shadow: 0 0 5px #000;
margin-right: 5px;
text-align: center;
}
.card p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

/* Change Password */

#changePassDialog > fieldset {
	border-width: 0;
}

	#changePassDialog > fieldset > label,
	#changePassDialog > fieldset > input[type='password'] {
		display: block;
	}

	#changePassDialog > fieldset > label {
		font-family: fontITC;
		font-size: 1.2em;
		color: #555;
		padding-top: 5px;
		padding-bottom: 3px;
	}

	#changePassDialog > fieldset > input[type='password'] {
		font-size: 1.1em;
		color: #555 !important;
		border: 1px solid #555 !important;
		border-radius: 0;
		padding: 5px !important;
		width: 100% !important;
		height: auto !important;
		transition: all 0.2s linear;
	}

		#changePassDialog > fieldset > input[type='password']:focus {
			outline: none !important;
			border: 1px solid #003171 !important;
			border-radius: 5px !important;
			box-shadow: 0 0 3px #003171 !important;
		}

#changePassDialog > span,
div#resetPassStrength > span {
	display: block;
	font-size: 1.1em;
	text-align: center;
	padding: 8px;
	margin-top: 15px;
	transition: all 0.2s linear;
}

#changePassDialog > span.short,
div#resetPassStrength > span.short {
	background-color: #BE90D4;
	color: #5B3256;
}

#changePassDialog > span.weak,
div#resetPassStrength > span.weak {
	background-color: #F47983;
	color: #8F1D21;
}

#changePassDialog > span.good,
div#resetPassStrength > span.good {
	background-color: #19B5FE;
	color: #1F4788;
}

#changePassDialog > span.strong,
div#resetPassStrength > span.strong {
	background-color: #36D7B7;
	color: #006442;
}

/* Generate Report */

#GenReport > fieldset {
	border-width: 0;
}

	#GenReport > fieldset > label,
	#GenReport > fieldset > input[type='date'],
	#GenReport > fieldset > select {
		display: block;
	}

	#GenReport > fieldset > label {
		font-family: fontITC;
		font-size: 1.2em;
		color: #555;
		padding-top: 5px;
		padding-bottom: 3px;
	}

	#GenReport > fieldset > input[type='date'],
	#GenReport > fieldset > select {
		font-size: 1.1em;
		color: #555 !important;
		border: 1px solid #555 !important;
		border-radius: 0;
		padding: 5px !important;
		width: 100% !important;
		height: auto !important;
		transition: all 0.2s linear;
	}

		#GenReport > fieldset > input[type='date']:focus,
	#GenReport > fieldset > select:focus {
			outline: none !important;
			border: 1px solid #003171 !important;
			border-radius: 5px !important;
			box-shadow: 0 0 3px #003171 !important;
		}



.swal2-container {
  z-index: 10000;
}

/* Health Check Questionaire */

fieldset {
	border: 0;
}

section.content-container {
    background: #fff;
    border: 1px solid rgba(0,49,113,1);
    border-radius: 10px;
    width: calc(100% - 60px) !important;
    min-height: 300px;
    padding: 30px;
}

section.health-check-bg {
	background: white url("../images/health-check-bg.jpg") no-repeat center !important;
	background-size: cover !important;
	-webkit-background-size: cover !important;
}

	.questionaire fieldset.main-question {
		border: 0;
		margin-bottom: 15px;
	}

		fieldset.main-question > label {
			font-size: 1.4em;
			font-weight: bold;
			color: rgba(0,49,113,1);
			text-transform: uppercase;
		}

	.questionaire fieldset.sub-question {
		border: 0;
		padding-left: 20px;
		margin-top: 5px;
	}

		fieldset.sub-question > label {
			font-size: 1.3em;
			font-weight: bold;
			text-transform: uppercase;
		}

		textarea {
			border: 1px solid #555;
		}

			.questionaire textarea,
			.questionaire input[type=text],
			.questionaire input[type=number],
			.questionaire input[type=date] {
				display: block;
				font-family: inherit;
				font-size: 1.3em;
				border: 1px solid #555;
				width: 300px;
				padding: 5px;
				margin-top: 5px;
				resize: none;
				transition: all 0.2s linear;
			}

			.questionaire textarea {
				height: 50px;
			}

				.questionaire textarea:focus,
				.questionaire input[type=text]:focus,
				.questionaire input[type=number]:focus,
				.questionaire input[type=date]:focus {
					outline: none !important;
					border: 1px solid rgba(0,49,113,1);
					border-radius: 5px;
					box-shadow: 0 0 3px #1F4788;
				}

			.questionaire fieldset.rdbtn-panel {
				border: 0;
				padding-left: 20px;
			}

				label.rdbtn {
				    display: inline-block;
				    position: relative;
			    	color: #555;
				    width: 100px;
				    padding-left: 35px;
				    margin-top: 10px;
				    margin-bottom: 12px;
				    cursor: pointer;
				    font-size: 22px;
				    -webkit-user-select: none;
				    -moz-user-select: none;
				    -ms-user-select: none;
				    user-select: none;
				}

					label.rdbtn > input[type='radio'] {
						position: absolute;
					    opacity: 0;
					    cursor: pointer;
					}

					label.rdbtn > span.checkmark {
					    position: absolute;
					    top: 0;
					    left: 0;
					    height: 25px;
					    width: 25px;
						border: 1px solid #555;
					    border-radius: 50%;
						transition: all 0.2s linear;
					}

						label.rdbtn > span.checkmark:after {
							content: "";
						    position: absolute;
						    display: none;
							top: 9px;
							left: 9px;
							width: 8px;
							height: 8px;
							border-radius: 50%;
							background: white;
						}

						label.rdbtn:hover > input ~ span.checkmark {
						    background-color: #ddd;
						}

						label.rdbtn > input:checked ~ span.checkmark {
						    background-color: rgba(0,49,113,1);
						}

							label.rdbtn > input:checked ~ span.checkmark:after {
							    display: block;
							}

				button.submit-button,
				a#btnDownloadPhoto {
					font-family: fontITC;
				    font-size: 1.1em;
				    background-color: rgba(0,49,113,1);
				    color: #fff;
				    border: 1px solid rgba(0,49,113,1);
				    padding: 10px 20px;
				    text-transform: uppercase;
				    cursor: pointer;
				    transition: all 0.2s linear;
				}

					button.submit-button:not([disabled]):focus,
					button.submit-button:not([disabled]):hover,
					a#btnDownloadPhoto:focus,
					a#btnDownloadPhoto:hover {   
						outline: none !important;
						background-color: #fff;
						color: rgba(0,49,113,1);
						border-radius: 5px;
					}

				button.view-button {
					font-family: fontITC;
				    font-size: 1.3em;
				    background-color: rgba(0,49,113,1);
				    color: #fff;
				    border: 1px solid rgba(0,49,113,1);
				    padding: 10px 20px;
				    text-transform: uppercase;
				    cursor: pointer;
				    transition: all 0.2s linear;
				}

					button.view-button:not([disabled]):focus,
					button.view-button:not([disabled]):hover {   
						outline: none !important;
						background-color: #fff;
						color: rgba(0,49,113,1);
						border-radius: 5px;
					}

	.hc-answer {
		font-size: 1.3em;
		color: red;
	}

	.btn-gray {
		background-color: #252525 !important;
		border: 1px solid #252525 !important;
	}

		.btn-gray:focus,
		.btn-gray:hover {
			background-color: #FFFFFF !important;
			color: #252525 !important;
		}

	.swal2-container {
		font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	}


	section.gridNav > div.important-section {
		background-color: rgba(0,0,0,0.5) !important;
		animation: Eventblink 0.5s linear infinite;
	}

		section.gridNav > div.important-section:before {
			background-color: rgb(143,29,33,0.8) !important;
		}

@keyframes Eventblink{
	0%{
		background-color: rgb(242,38,19,0.8);
	}
	50%{
		background-color: rgba(0,0,0,0.5);
	}
	100%{
		background-color: rgb(242,38,19,0.8);
	}
}
@keyframes Eventblink::-moz-{
	0%{
		background-color: rgb(242,38,19,0.8);
	}
	50%{
		background-color: rgba(0,0,0,0.5);
	}
	100%{
		background-color: rgb(242,38,19,0.8);
	}
}


/* Shuttle Manifest */

.passenger-controls {
	font-size: 1.5em;
	margin-bottom: 10px;
}

	.passenger-controls fieldset {
		margin-bottom: 10px;
	}

		.passenger-controls label {
			display: block;
			font-weight: bold;
			color: #1F4788;
			text-transform: uppercase;
			margin-bottom: 5px;
		}

		.passenger-controls input,
		.passenger-controls select {
			font-family: fontITC;
			font-size: 1em;
			display: block;
			background-color: transparent;
			border: 2px solid #555;
			padding: 5px;
			transition: all 0.2s linear;
		}

			.passenger-controls input {
				width: calc(250px - 10px);
			}

			.passenger-controls select {
				width: 250px;
			}

			.passenger-controls input:focus,
			.passenger-controls input:hover,
			.passenger-controls select:focus,
			.passenger-controls select:hover {
				outline: none !important;
				border: 2px solid #003171;
			}

		#fsDrpScanCodeOption {
			display: none;
		}

		#fsManualScanCode {
			display: none;
		}

			#btnSaveWithScanCode,
			#btnSaveWithoutScanCode {
				font-family: fontITC;
				font-size: 1em;
				display: inline-block;
				position: relative;
				background: none;
				font-weight: bold;
				text-transform: uppercase;
				border: 1px solid #003171;
				color: #fff;
				cursor: pointer;
				background: #003171;
				padding: 10px 15px;
				margin-top: 15px;
				transition: all 0.2s linear;
			}

				#btnSaveWithScanCode:focus,
				#btnSaveWithScanCode:hover,
				#btnSaveWithoutScanCode:focus,
				#btnSaveWithoutScanCode:hover {
					outline: none !important;
					color: #003171;
					background: transparent;
				}

#scanApp {
	display: none;
}

	.preview-container {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		display: block;
		width: 250px;
		overflow: hidden;
		margin: 5px 0;
	}

	.scan-controls {
		display: block;
		overflow: auto;
		margin: 5px 0;
	}

		.scan-controls h2 {
			font-size: 1.2em;
			color: #1F4788;
			padding: 10px 0;
			margin: 0;
		}

			.scan-controls ul {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}

			.cameras {
				padding: 5px 0;
			}

			.cameras .active {
				font-weight: bold;
				color: #009900;
			}

			.cameras a {
				font-family: fontITC;
				font-size: 1.1em;
				display: inline-block;
				position: relative;
				background: none;
				font-weight: bold;
				text-transform: uppercase;
				border: 1px solid #003171;
				color: #fff;
				cursor: pointer;
				background: #003171;
				padding: 10px 15px;
				transition: all 0.2s linear;
			}

				.cameras a:focus,
				.cameras a:hover {
					outline: none !important;
					color: #003171;
					background: transparent;
				}

			.scan-result {
				margin: 5px 0;
			}

			.scan-result li {
				padding: 10px 20px;
				border-bottom: 1px solid #ccc;
			}
			.scans-enter-active {
				transition: background 3s;
			}
			.scans-enter {
				background: yellow;
			}
			.empty {
				font-style: italic;
			}

	#scanCode {
		font-size: 1.5em;
		font-weight: bold;
		color: #2ecc71;
	}


	/* Request Form */

	section.request-container {
		background: #fff;
	    border: 1px solid rgb(31 72 137);
	    border-radius: 10px;
	    width: calc(100% - 60px) !important;
	    min-height: 300px;
	    padding: 30px;
	}

	section.request-containerSurvey {
		background: #fff;
	    border: 1px solid rgb(31 72 137);
	    border-radius: 10px;
	    width: 50% !important;
	    min-height: 300px;
	    padding: 30px;
	    margin: 0 auto;
	}

	section.tab-panel {
		font-family: fontITC;
		padding: 30px;
	}

			section.request-container > div#requestForm > fieldset,
			section.tab-panel > div#requestForm > fieldset {
				border-width: 0;
				margin-bottom: 10px;
			}

				section.request-container > div#requestForm > fieldset > label:not(.for-radio),
				section.request-container > div#requestForm > fieldset > input[type='text'],
				section.request-container > div#requestForm > fieldset > input[type='date'],
				section.request-container > div#requestForm > fieldset > input[type='tel'],
				section.request-container > div#requestForm > fieldset > textarea,
				section.tab-panel > div#requestForm > fieldset > label:not(.for-radio),
				section.tab-panel > div#requestForm > fieldset > input[type='text'],
				section.tab-panel > div#requestForm > fieldset > input[type='date'],
				section.tab-panel > div#requestForm > fieldset > input[type='tel'],
				section.tab-panel > div#requestForm > fieldset > textarea {
					display: block;
					font-size: 1.3em;
				}

				section.request-container > div#requestForm > fieldset > label:not(.for-radio),
				section.tab-panel > div#requestForm > fieldset > label:not(.for-radio) {
					font-weight: bold;
				    color: #1F4788;
				    text-transform: uppercase;
				}

				section.request-container > div#requestForm > fieldset > label.rdbtn,
				section.tab-panel > div#requestForm > fieldset > label.rdbtn {
				    display: block;
				    position: relative;
			    	color: #555;
				    width: 150px;
				    padding-left: 35px;
				    margin-top: 10px;
				    margin-bottom: 12px;
				    cursor: pointer;
				    font-size: 22px;
				    -webkit-user-select: none;
				    -moz-user-select: none;
				    -ms-user-select: none;
				    user-select: none;
				}

				section.request-container > div#requestForm > fieldset > label.disabled-radio,
				section.tab-panel > div#requestForm > fieldset > label.disabled-radio {
				    cursor: default	!important;
				}

					section.request-container > div#requestForm > fieldset > label.rdbtn > input[type='radio'],
					section.tab-panel > div#requestForm > fieldset > label.rdbtn > input[type='radio'] {
						position: absolute;
					    opacity: 0;
					    cursor: pointer;
					}

					section.request-container > div#requestForm > fieldset > label.rdbtn > span.checkmark,
					section.tab-panel > div#requestForm > fieldset > label.rdbtn > span.checkmark {
					    position: absolute;
					    top: 0;
					    left: 0;
					    height: 25px;
					    width: 25px;
						border: 1px solid #555;
					    border-radius: 50%;
						transition: all 0.2s linear;
					}

					section.request-container > div#requestForm > fieldset > label.disabled-radio > span.checkmark,
					section.tab-panel > div#requestForm > fieldset > label.disabled-radio > span.checkmark {
						background-color: #ddd !important;
					}

						section.request-container > div#requestForm > fieldset > label.rdbtn > span.checkmark:after,
						section.tab-panel > div#requestForm > fieldset > label.rdbtn > span.checkmark:after {
							content: "";
						    position: absolute;
						    display: none;
							top: 9px;
							left: 9px;
							width: 8px;
							height: 8px;
							border-radius: 50%;
							background: white;
						}

						section.request-container > div#requestForm > fieldset > label.rdbtn:hover > input ~ span.checkmark,
						section.tab-panel > div#requestForm > fieldset > label.rdbtn:hover > input ~ span.checkmark {
						    background-color: #ddd;
						}

						section.request-container > div#requestForm > fieldset > label.rdbtn > input:checked ~ span.checkmark,
						section.tab-panel > div#requestForm > fieldset > label.rdbtn > input:checked ~ span.checkmark {
						    background-color: #1F4788;
						}

							section.request-container > div#requestForm > fieldset > label.rdbtn > input:checked ~ span.checkmark:after,
							section.tab-panel > div#requestForm > fieldset > label.rdbtn > input:checked ~ span.checkmark:after {
							    display: block;
							}

				section.request-container > div#requestForm > fieldset > label.chkbx,
				section.tab-panel > div#requestForm > fieldset > label.chkbx {
				    display: block;
					position: relative;
			    	color: #555;
			    	width: 150px;
					padding-left: 35px;
					margin-top: 10px;
					margin-bottom: 12px;
					cursor: pointer;
					font-size: 22px;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
				}

					section.request-container > div#requestForm > fieldset > label.chkbx > input[type='checkbox'],
					section.tab-panel > div#requestForm > fieldset > label.chkbx > input[type='checkbox'] {
						position: absolute;
					    opacity: 0;
					    cursor: pointer;
					}

					section.request-container > div#requestForm > fieldset > label.chkbx > span.checkmark,
					section.tab-panel > div#requestForm > fieldset > label.chkbx > span.checkmark {
						position: absolute;
						top: 0;
						left: 0;
						border: 1px solid #555;
						height: 25px;
						width: 25px;
						transition: all 0.2s linear;
					}

						section.request-container > div#requestForm > fieldset > label.chkbx > span.checkmark:after,
						section.tab-panel > div#requestForm > fieldset > label.chkbx > span.checkmark:after {
							content: "";
							display: none;
							position: absolute;
							left: 9px;
							top: 5px;
							width: 5px;
							height: 10px;
							border: solid white;
							border-width: 0 3px 3px 0;
							-webkit-transform: rotate(45deg);
							-ms-transform: rotate(45deg);
							transform: rotate(45deg);
						}

						section.request-container > div#requestForm > fieldset > label.chkbx:hover > input ~ span.checkmark,
						section.tab-panel > div#requestForm > fieldset > label.chkbx:hover > input ~ span.checkmark {
						    background-color: #ddd;
						}

						section.request-container > div#requestForm > fieldset > label.chkbx > input:checked ~ span.checkmark,
						section.tab-panel > div#requestForm > fieldset > label.chkbx > input:checked ~ span.checkmark {
						    background-color: #1F4788;
						}

							section.request-container > div#requestForm > fieldset > label.chkbx > input:checked ~ span.checkmark:after,
							section.tab-panel > div#requestForm > fieldset > label.chkbx > input:checked ~ span.checkmark:after {
							    display: block;
							}

				section.request-container > div#requestForm > fieldset > input[type='text'],
				section.request-container > div#requestForm > fieldset > input[type='date'],
				section.request-container > div#requestForm > fieldset > input[type='time'],
				section.request-container > div#requestForm > fieldset > input[type='tel'],
				section.request-container > div#requestForm > fieldset > textarea,
				section.request-container > div#requestForm > fieldset > select,
				section.tab-panel > div#requestForm > fieldset > input[type='text'],
				section.tab-panel > div#requestForm > fieldset > input[type='date'],
				section.tab-panel > div#requestForm > fieldset > input[type='time'],
				section.tab-panel > div#requestForm > fieldset > input[type='tel'],
				section.tab-panel > div#requestForm > fieldset > textarea,
				section.tab-panel > div#requestForm > fieldset > select {
					font-family: fontITC;
				    color: #555;
				    border: 1px solid #555;
				    padding: 5px;
				    margin-bottom: 10px;
				    transition: all 0.2s linear;
				}

				section.request-container > div#requestForm > fieldset > textarea,
				section.tab-panel > div#requestForm > fieldset > textarea {
					resize: none;
					height: 100px;
				}

					section.request-container > div#requestForm > fieldset > input[type='text']:focus,
					section.request-container > div#requestForm > fieldset > input[type='date']:focus,
					section.request-container > div#requestForm > fieldset > input[type='time']:focus,
					section.request-container > div#requestForm > fieldset > input[type='tel']:focus,
					section.request-container > div#requestForm > fieldset > textarea:focus,
					section.request-container > div#requestForm > fieldset > select:focus,
					section.tab-panel > div#requestForm > fieldset > input[type='text']:focus,
					section.tab-panel > div#requestForm > fieldset > input[type='date']:focus,
					section.tab-panel > div#requestForm > fieldset > input[type='time']:focus,
					section.tab-panel > div#requestForm > fieldset > input[type='tel']:focus,
					section.tab-panel > div#requestForm > fieldset > textarea:focus,
					section.tab-panel > div#requestForm > fieldset > select:focus {
						outline: none !important;
						border: 1px solid #1F4788;
						border-radius: 5px;
						box-shadow: 0 0 3px #1F4788;
					}

				section.request-container > div#requestForm > fieldset > button#submitRequest,
				section.request-container > div#requestForm > fieldset > button.submit-button,
				section.tab-panel > div#requestForm > fieldset > button#submitRequest,
				section.tab-panel > div#requestForm > fieldset > button.submit-button {
					font-family: fontITC;
				    font-size: 1.3em;
				    background-color: #1F4788;
				    color: #fff;
				    border: 1px solid #1F4788;
				    padding: 10px 20px;
				    text-transform: uppercase;
				    cursor: pointer;
				    transition: all 0.2s linear;
				}

				section.request-container > div#requestForm > fieldset > button.submit-button:disabled,
				section.tab-panel > div#requestForm > fieldset > button.submit-button:disabled {
				    background-color: #aaa !important;
				    border: 1px solid #aaa !important;
				    cursor: default;
				}

					section.request-container > div#requestForm > fieldset > button#submitRequest:focus,
					section.request-container > div#requestForm > fieldset > button#submitRequest:hover,
					section.request-container > div#requestForm > fieldset > button.submit-button:not([disabled]):focus,
					section.request-container > div#requestForm > fieldset > button.submit-button:not([disabled]):hover,
					section.tab-panel > div#requestForm > fieldset > button#submitRequest:focus,
					section.tab-panel > div#requestForm > fieldset > button#submitRequest:hover,
					section.tab-panel > div#requestForm > fieldset > button.submit-button:not([disabled]):focus,
					section.tab-panel > div#requestForm > fieldset > button.submit-button:not([disabled]):hover {   
						outline: none !important;
						background-color: #fff;
						color: #1F4788;
						border-radius: 5px;
					}

fieldset label.field-title {
	font-family: fontITC !important;
    font-size: 1.8em !important;
	font-weight: bold !important;
	color: #1F4788 !important;
	text-transform: uppercase !important;
}
	
	/* Form Panel */

	div.form-panel {
		font-family: fontITC;
   		font-size: 1.3em;
		background: #fff;
	    width: calc(100% - 60px) !important;
	    min-height: 120px;
	    padding: 30px;
		overflow: hidden;
	}

			div.form-panel > form > label,
			div.form-panel > form > input,
			div.form-panel > form > textarea,
			div.form-panel > form > select {
				display: block;
				font-size: 1.3em;
				width: calc(100% - 12px);
			}

			div.form-panel > form > label {
				font-weight: bold;
				color: #555;
				text-transform: uppercase;
				margin-bottom: 5px;
			}

			div.form-panel > form > div > input,
			div.form-panel > form > input,
			div.form-panel > form > textarea,
			div.form-panel > form > select {
				font-family: fontITC;
				color: #555;
				border: 1px solid #555;
				padding: 5px;
				margin-bottom: 10px;
				transition: all 0.2s linear;
			}

			div.form-panel > form > textarea {
				height: 100px;
				resize: none;
			}

				div.form-panel > form > div > input:focus,
				div.form-panel > form > input:focus,
				div.form-panel > form > textarea:focus,
				div.form-panel > form > select:focus {
					outline: none !important;
					border: 1px solid #1F4788;
					border-radius: 5px;
					box-shadow: 0 0 3px #1F4788;
				}

			div.form-panel > form > button,
			div.form-panel > fieldset > button {
				font-family: fontITC;
				font-size: 1.1em;
				background-color: #1F4788;
				color: #fff;
				border: 1px solid #1F4788;
				padding: 10px 20px;
				text-transform: uppercase;
				cursor: pointer;
				transition: all 0.2s linear;
			}

				div.form-panel > form > button[data-submit-type=update] {				
					background-color: #f39c12;
					border: 1px solid #f39c12;
				}

				div.form-panel > form > button:hover,
				div.form-panel > form > button:focus,
				div.form-panel > fieldset > button:hover,
				div.form-panel > fieldset > button:focus {
					outline: none !important;
					background-color: #fff;
					color: #1F4788;
					border-radius: 5px;
				}

					div.form-panel > form > button[data-submit-type=update]:hover,
					div.form-panel > form > button[data-submit-type=update]:focus {
						color: #f39c12;
					}

.emp-photo-window,
.emp-photo-panel {
	height: auto !important;
}

	#empPhotoContainer > img {
		width: 100%;
	}

	.fs-dl-photo {
		text-align: center;
	}

		#btnDownloadPhoto {
			display: inline-block;
			margin-top: 15px;
			text-decoration: none;
		}

.warning-panel {
	background-color: #f6e58d;
	border: 2px solid #f9ca24;
	padding: 10px;
	margin-bottom: 15px;
}

.warning-text {
	font-family: inherit;
	font-size: 1.3em !important;
}

.btn-gray {
	background-color: #252525 !important;
	border: 1px solid #252525 !important;
}

.btn-gray:focus,
.btn-gray:hover { 
	background-color: #fff !important;
	color: #252525 !important;
}

.msgbxMAF {
	font-size: 0.9em;
}

#MAFReportFrame {
	height: 700px;
	width: 100%;
	border: 0px solid black;
}

#RPReportFrame {
	height: 700px;
	width: 100%;
	border: 0px solid black;
}

	span.msgbxListTitle {
		display: block;
		margin-top: 15px;
		font-size: 0.9em;
		font-weight: bold;
		text-decoration: underline;
	}

	ul.msgbxList {
		list-style-type: none;
	}

		ul.msgbxList li {
			font-size: 0.9em;
		}

.swal2-container {
	z-index: 9999999999 !important;
}

#addrowbutton,
#addposrowbutton {
	font-family: fontITC;
	text-transform: uppercase;
	padding: 10px 15px;
	font-size: 1.1em;
}

.has-for-checking-or-approval {
	background-color: rgba(0,0,0,0.5);
	animation: ForCheckingOrApprovalBlink 0.5s linear infinite;
}

@keyframes ForCheckingOrApprovalBlink{
	0%{
		background-color: rgb(241, 196, 15,0.8);
	}
	50%{
		background-color: rgba(0,0,0,0.5);
	}
	100%{
		background-color: rgb(241, 196, 15,0.8);
	}
}
@keyframes ForCheckingOrApprovalBlink::-moz-{
	0%{
		background-color: rgb(241, 196, 15,0.8);
	}
	50%{
		background-color: rgba(0,0,0,0.5);
	}
	100%{
		background-color: rgb(241, 196, 15,0.8);
	}
}

.fs-view-button {
	margin-top: 5px;
	margin-bottom: 10px;
}

.fs-multicontrol fieldset {
	display: inline-block;
}

	.fs-multicontrol fieldset label{
		font-size: 1.3em;
		color: white;
	}

	.fs-multicontrol fieldset #ddlATDName{
		margin: 5px 0;
	}

	.fs-multicontrol fieldset.left-align{
		float: right;
		top: 20px;
	}

.jqxWinTitle {
    font-family: fontITC;
	font-size: 2em;
	font-weight: bold;
	text-transform: uppercase;
}

	.jqxWinTitle > div:first-child {
		display: inline-block !important;
		width: 100% !important;		
		text-align: center !important;
	}

#jqxWindowUpdateEmpInfo,
#jqxWindowEmailChanger,
.emp-info-panel {
	height: auto !important;
}

div.emp-info-panel {
	font-family: fontITC;
	font-size: 1.3em;
	background: #fff;
    width: calc(100% - 40px) !important;
    min-height: 120px;
    padding: 20px;
	overflow: hidden;
}

	#frmEmpInfo {
		display: block;
		width: 100%;
	}

		#frmEmpInfo > div {
			display: flex;
			justify-content: space-between;
			width: 100%;
		}

			#frmEmpInfo > div.margin-bot  {
				margin-bottom: 10px;
			}

			#frmEmpInfo section.emp-info-section {
				width: 49%;
				border: 1px solid black;
			}

				#frmEmpInfo section.emp-info-section > hgroup.emp-info-title{
					background-color: #555;
					color: #fff;
					font-size: 0.7em;
					text-transform: uppercase;
					padding: 3px 0 3px 3px;

				}

					#frmEmpInfo section.emp-info-section > hgroup.emp-info-title h2{
						font-weight: normal !important;
					}

				#frmEmpInfo section.emp-info-section > section.emp-info-fields {
					color: #555;
					font-size: 0.9em;
					font-weight: bold;
					text-transform: uppercase;
					padding: 10px;

				}

					#frmEmpInfo section.emp-info-section > section.emp-info-fields > fieldset > label,
					#frmEmpInfo section.emp-info-section > section.emp-info-fields > fieldset > input,
					#frmEmpInfo section.emp-info-section > section.emp-info-fields > fieldset > textarea,
					#frmEmpInfo section.emp-info-section > section.emp-info-fields > fieldset > select {
						display: block;
						font-size: 1.3em;
						width: calc(100% - 12px);
						box-sizing: content-box;
					}

					#frmEmpInfo section.emp-info-section > section.emp-info-fields > fieldset > label {
						font-weight: bold;
						color: #555;
						text-transform: uppercase;
						margin-bottom: 5px;
					}

					#frmEmpInfo section.emp-info-section > section.emp-info-fields > div > input,
					#frmEmpInfo section.emp-info-section > section.emp-info-fields > fieldset > input,
					#frmEmpInfo section.emp-info-section > section.emp-info-fields > fieldset > textarea,
					#frmEmpInfo section.emp-info-section > section.emp-info-fields > fieldset > select {
						font-family: fontITC;
						color: #1F4788;
						border: 1px solid #555;
						padding: 5px;
						margin-bottom: 10px;
						transition: all 0.2s linear;
					}

					#frmEmpInfo section.emp-info-section > section.emp-info-fields > fieldset > textarea {
						height: 100px;
						resize: none;
					}

						#frmEmpInfo section.emp-info-section > section.emp-info-fields > div > input:focus,
						#frmEmpInfo section.emp-info-section > section.emp-info-fields > fieldset > input:focus,
						#frmEmpInfo section.emp-info-section > section.emp-info-fields > fieldset > textarea:focus,
						#frmEmpInfo section.emp-info-section > section.emp-info-fields > fieldset > select:focuss {
							outline: none !important;
							border: 1px solid #1F4788;
							border-radius: 5px;
							box-shadow: 0 0 3px #1F4788;
						}

					#frmEmpInfo > div > button {
						font-family: fontITC;
						font-size: 1.1em;
						background-color: #1F4788;
						color: #fff;
						border: 1px solid #1F4788;
						padding: 10px 20px;
						text-transform: uppercase;
						cursor: pointer;
						transition: all 0.2s linear;
					}

						#frmEmpInfo > div > button[data-submit-type=update] {				
							background-color: #f39c12;
							border: 1px solid #f39c12;
						}

						#frmEmpInfo > div > button:hover,
						#frmEmpInfo > div > button:focus {
							outline: none !important;
							background-color: #fff;
							color: #1F4788;
							border-radius: 5px;
						}

							#frmEmpInfo > div > button[data-submit-type=update]:hover,
							#frmEmpInfo > div > button[data-submit-type=update]:focus {
								color: #f39c12;
							}

#pageUnderMaintenance {
	text-align: center;
}

#picSignature {
	display: block;
	height: 100px;
	margin: 0 auto;
}

.signature-note {
	font-weight: normal !important;
}

#empClearanceTitle {
	font-style: revert-layer;
	align-content: center;
	font-family: "Arial";
	font-size: 50px;
	color: darkslategrey;
}

#empClearanceName {
	font-style: revert-layer;
	align-content: center;
	font-family: "Arial";
	font-size: 30px;
	color: darkslategrey;
}

/*
.jqx-menu-ul {
	position: static;
}

.jqx-menu-item-top{
	position: relative !important;
	left: 0 !important;
	top: 0 !important;
}

.jqx-menu-vertical {
	height: auto !important;
}

.filter {
	position: relative !important;
}*/