/*---RESET---*/
	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,
	pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,
	small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,
	form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,
	details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,
	summary,time,mark,audio,video{margin:0;padding:0;border:0;font-family:"Arial";;vertical-align:baseline;}
	article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
	ol,ul{margin:0px;padding:0px;}
	blockquote,q{quotes:none;}
	blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
	table{border-collapse:collapse;border-spacing:0;}

	html{
		height: 100%;
		width: 100%;
		padding: 0;
		margin:0;
	}

	@font-face {
	    font-family: 'Arial';
	    src: url('http://lorde.cabitech.co.za/assets/fonts/Arial.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal;


	}

	body{
		height: 100%;
		width: 100%;
		padding: 0;
		-webkit-touch-callout: none; 
		    -webkit-user-select: none; 
		     -khtml-user-select: none; 
		       -moz-user-select: none; 
		        -ms-user-select: none; 
	}

	input {
	    outline: none;
	}

	button{
		outline: none;
	}

	#mainBackground{
		height: 100%;
		width: 100%;
		padding: 0;
		background-color: gainsboro;
	}
/*---Loading---*/
	#loading {
	    width: 100%;
	    height: 100%;
	    top: 0px;
	    left: 0px;
	    position: fixed;
	    display: block;
	    z-index: 9999;
	    background-color: gainsboro;
	}

	#loading-image {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    z-index: 100;
	    margin-left: -16px;
    	margin-top: -16px;
	}
/*---Employees---*/
	#employeeBox{
		height: calc(100% - 30px);
		width: calc(100% - 40px);
		background-color: white; 
		box-shadow: 0px 0px 2px 1px lightgrey;
		margin-left: 20px;
		margin-top: 20px;
		float: left;
	}

	#employeeBar{
		height: 60px;
	}

	#employeeTitle{
		padding: 10px;
		font-size: 1.4em;
		font-weight: bold;
		float: left;
	}

	.employeeButton{
		width: 200px;
		background-color: #cdc7af;
		height: 40px;
		border: none;
		border-radius: 10px;
		float: right;
		margin-right: 10px;
		margin-top: 10px;
		box-shadow: 0px 0px 2px 1px lightgray;
		color: black;
		font-size: 14px;
		cursor: pointer;
	}

	#employeeSearchBox{
		width: 350px;
		height: 30px;
		border: 1px solid lightgrey;
		border-radius: 10px;
		margin: 0px 0px 20px 10px;
		float: left;
	}

	#employeeSearchInput{
		width:314px;
		border: none;
		height: 28px;
		margin-left: 10px;
	}

	#employeeSearchInputImg{
		float: right;
		margin: 7px 7px 0px 0px;
		width: 15px;
		height: 15px;
	}

	#employeeDropdown{
		font-size: 10px;
		position: relative;
		display: inline-block;
		float: right;
		margin-right: 10px;

	}

	#employeeDropdown select {
		outline: none;
		-webkit-appearance: none;
		-moz-appearance:none;
		display: block;
		margin: 0;
		width: 120px;
		height: 30px;
		transition: border-color 0.2s;
		border: none;
		border-radius: 5px;

		background: #fff;
		color: black;
		line-height: normal;
		font-family: inherit;
		font-size: 12px;
		line-height: inherit;
		cursor: pointer;
	}

	#employeeDropdown .arr {
		background: #fff;
		position: absolute;
		right: 5px;
		width: 50px;
		pointer-events: none;
	}

	#employeeDropdown .arr:before {
		content: '';
		position: absolute;
		top: 50%;
		right: 0px;
		margin-top: 12px;
		pointer-events: none;
		border-top: 5px solid black;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
	}

	#employeeDropdown .arr:after {
		content: '';
		position: absolute;
		top: 50%;
		right: 28px;
		margin-top: -5px;
		pointer-events: none;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
	}

	.employeeTableHeadings{
		table-layout: fixed;
		cursor: pointer;
		vertical-align: middle;
	}

	.employeeSort{
		height: 5px;
	    border-left: 5px solid transparent;
	    border-right: 5px solid transparent;
	    float: right;
	    margin-right: 5px;
	}

	#employeeTable{
		width: calc(100% - 20px);
		height: 40px;
		background-color: whitesmoke;
		border-bottom: 1px solid lightgrey;
		table-layout: fixed;
		margin-left:10px;
		margin-top:20px;
	}

		
	#employeecccountNo{
		width: 20%;
		text-align: center;
	}

	#employeename{
		width: 20%;
		text-align: center;
	}

	#employeeenrollment{
		width: 20%;
		text-align: center;
	}

	#employeetype{
		width: 20%;
		text-align: center;
	}

	#employeestatus{
		width: 20%;
		text-align: center;
	}

	.employeeTable{
		height: 40px;
		border-bottom: 1px solid lightgrey;

	}

	.employeeAccountNo{
		width: 20%;
		text-align: center;
		vertical-align: middle;

	}
		
	.employeeName{
		width: 20%;
		text-align: center;
		vertical-align: middle;
	}

	.employeeEnrolmentDate{
		width: 20%;
		text-align: center;
		vertical-align: middle;
	}

	.employeeType{
		width: 20%;
		text-align: center;
		vertical-align: middle;
	}

	.employeeStatus{
		width: 20%;
		text-align: center;
		vertical-align: middle;
	}

	#employeeContainer{
		width: calc(100% - 20px);
		margin-left: 10px;
		height: calc(100% - 162px);
		overflow: hidden;
	}

	#employeeContainerInner{
		width: calc(100% + 20px);
		height: 100%;
		overflow-y: scroll;
	}

	#employeeList{
		table-layout: fixed;
		width: 100%;
		background-color: white;
		cursor: pointer;
		text-align: center;
	}

	.employeeSpace{
		width: 20px;
		float: right;
		height: 20px;
	}
/*---Add Employee---*/
	.addEmployeeOverlay{
		width: 810px;
		height: 519px;
		background-color: white;
		box-shadow: 0px 5px 20px #888888;
		overflow: hidden;
		margin-top: 20px;
	}

	#addEmployeeTitle{
		padding: 10px;
		font-size: 1.4em;
		font-weight: bold;
	}

	#addEmployeeSearchList{
		display: none;
		width: 212px;
		position: absolute;
		background-color: white;
		z-index: 1;
		border-left: 1px solid lightgrey;
		border-right: 1px solid lightgrey;
		border-bottom: 1px solid lightgrey;
		margin: -10px 0px 0px 3px;
	}

	.addEmployeeSearchList:hover{
		background-color: whitesmoke;
		cursor: pointer;
	}

	#addEmployeeLeft{
		float: left;
		width: 171px;
		height: 412px;
		margin-left: 4px;
	}

	#addEmployeeCenter{
		float: left;
		width: 230px;
		height: 412px;
	}

	#addEmployeeRight{
		display: none;
		float: right;
		width: 380px;
		height: 363px;
	}

	.addEmployeeInputTitle{
		float: left;
    	padding: 6px;
		width: 180px;
		margin-bottom: 10px;
	}

	#addEmployeeDropdown{
		font-size: 10px;
		position: relative;
		display: inline-block;
		margin-bottom: 10px;
	}

	#addEmployeeDropdown select {
		outline: none;
		-webkit-appearance: none;
		-moz-appearance:none;
		display: block;
		margin: 0;
		width: 220px;
		height: 30px;
		transition: border-color 0.2s;
		border: none;
		border-radius: 5px;

		background: #fff;
		color: black;
		line-height: normal;
		font-family: inherit;
		font-size: 12px;
		line-height: inherit;
		cursor: pointer;
		border: 1px solid lightgrey;
	}

	#addEmployeeDropdown .arr {
		background: #fff;
		position: absolute;
		right: 5px;
		width: 50px;
		pointer-events: none;
	}

	#addEmployeeDropdown .arr:before {
		content: '';
		position: absolute;
		top: 50%;
		right: 0px;
		margin-top: 12px;
		pointer-events: none;
		border-top: 5px solid black;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
	}

	#addEmployeeDropdown .arr:after {
		content: '';
		position: absolute;
		top: 50%;
		right: 28px;
		margin-top: -5px;
		pointer-events: none;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
	}

	.addEmployeeInput{
		width: 214px;
		height: 28px;
		border: none;
		border-radius: 5px;
		background: #fff;
		color: black;
		line-height: normal;
		font-family: inherit;
		font-size: 12px;
		border: 1px solid lightgrey;
		margin-bottom: 10px;
	}

	.addEmployeeButtons{
		width: 150px;
		background-color: #cdc7af;
		height: 40px;
		border: none;
		border-radius: 10px;
		float: right;
		margin-right: 10px;
		margin-top: 10px;
		box-shadow: 0px 0px 2px 1px lightgray;
		color: black;
		font-size: 14px;
	}

/*---Date/time---*/
		#ui-datepicker-div{
				background-color: white;
				width: 258px;
				border: 1px solid lightgrey;
				display: none;
			}

			.ui-datepicker-title{
				border-top: 1px solid lightgrey;
				border-left: 1px solid lightgrey;
				border-right: 1px solid lightgrey;
			}

			.ui-datepicker-next{
				float: right;
				margin-right: -20px;
				margin-top: 6px;
				cursor: pointer;
				border: solid black;
			    border-width: 0 3px 3px 0;
			    display: inline-block;
			    padding: 3px;
			    transform: rotate(-45deg);
			    -webkit-transform: rotate(-45deg);
			}

			.ui-datepicker-next span{
				display: none;
			}

			.ui-datepicker-prev{
				float: right; 
				margin-right: 17px;
				margin-top: 6px;
				cursor: pointer;
				border: solid black;
			    border-width: 0 3px 3px 0;
			    display: inline-block;
			    padding: 3px;
			     transform: rotate(135deg);
			    -webkit-transform: rotate(135deg);
			}

			.ui-datepicker-prev span{
				display: none;
			}

			.ui-datepicker-calendar{
				width: 259px;
				height: 132px;
				table-layout: fixed;
			}

			.ui-datepicker-calendar th{
				border: 2px solid lightgrey;
				cursor: pointer;
				height: 1px;
				color: #808080;
			}

			.ui-timepicker-div{
				height: 100px;
				background: white;
				border: 1px solid lightgrey;
			}

			.ui-state-active{
				background: gainsboro;
				display: inline-block;
				width: 36px;
			}

			.ui-state-default{
				color: #808080;
				text-decoration: none;
			}


			.ui-datepicker-calendar td{
				border: 1px solid lightgrey;
				cursor: pointer;
				width: 29px;
				text-align: center;
			}

			.ui-datepicker-calendar td:hover{
				border: 1px solid lightgrey;
				cursor: pointer;
				width: 29px;
				text-align: center;
				background-color: gainsboro;
			}

			.ui-slider {
				position: relative;
				text-align: left;
				border: 1px solid lightgrey;
				height: 10px;
				top: 5px;
				width: 85px;
				padding-right: 20px;
				cursor: pointer;

			}

			.ui-slider .ui-slider-handle {
				position: absolute;
				z-index: 2;
				width: 10px;
				height: 1.2em;
				cursor: default;
				-ms-touch-action: none;
				touch-action: none;
				margin-top: -6px;
				margin-left: -6px;
				border: 2px solid lightgrey;
				background: white;
				cursor: pointer;
			}


			.ui-slider .ui-slider-range {
				position: absolute;
				z-index: 1;
				font-size: .7em;
				display: block;
				border: 0;
				background-position: 0 0;
			}

			.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
			.ui-timepicker-div dl { text-align: left; }
			.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
			.ui-timepicker-div dl dd { margin: 0 10px 17px 40%; }
			.ui-timepicker-div td { font-size: 90%; }
			.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
			.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }

			.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
			.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }

			.ui-timepicker-rtl{ direction: rtl; }
			.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
			.ui-timepicker-rtl dl dt{ float: right; clear: right; }
			.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }

			.ui-datepicker-buttonpane{
				background: white;
				border: 1px solid lightgray;
				height: 22px;
			}

			.ui-datepicker-close{
			    background: none;
			    border-radius: 10px;
			    border: none;
			    border: 1px solid lightgrey;
			    font-family: inherit;
			    float: right;
			    margin-top: 3px;
			    height: 16px;
			    cursor: pointer;
			    margin-right: 3px;
			}

			.ui-datepicker-close:hover{
			    background: gainsboro;
			    border-radius: 10px;
			    border: none;
			    border: 1px solid lightgrey;
			    font-family: inherit;
			    float: right;
			    margin-top: 3px;
			    height: 16px;
			    cursor: pointer;
			    margin-right: 3px;
			}

			.ui-datepicker-current{
			    background: none;
			    border-radius: 10px;
			    border: none;
			    border: 1px solid lightgrey;
			    font-family: inherit;
			    margin-top: 3px;
			    height: 16px;
			    cursor: pointer;
			    margin-left: 3px; 
			    position: absolute;
			}
			.ui-datepicker-current:hover{
			    background: gainsboro;
			    border-radius: 10px;
			    border: none;
			    border: 1px solid lightgrey;
			    font-family: inherit;
			    margin-top: 3px;
			    height: 16px;
			    cursor: pointer;
			    margin-left: 3px; 
			    position: absolute;
			}