/* Global VARS */
:root {

	/*****************************************************************************
	/ COLORS DEFINITION 
	/*****************************************************************************
	
	
		
		/*******************************DARK THEME********************************/
		--MAIN_BACKGROUND_COLOR : linear-gradient(to bottom right, rgb(76, 116, 248),rgb(96,220,255));
		--MAIN_BACKGROUND_COLOR2 : #000;
		--MAIN_FONT_COLOR : #000;
		--MAIN_GREEN_COLOR : rgba(26, 200, 141,0.6);
		--MAIN_RED_COLOR : rgba(204, 104, 104,0.6);
		--MAIN_PANEL_BACKGROUND : rgba(29, 29, 29,1); 
		--MAIN_PANEL_TITEL_BACKGROUND : rgba(40, 40, 40,1); 
	}
	
	.error{
		visibility:hidden
	}
	
	/*********************************************************************************************************************************************************
	Mobile Devices
	**********************************************************************************************************************************************************/
	
	/* for mobile */
	 body, html{
		color: var(--MAIN_FONT_COLOR);
		height: 100%;
		width: 100%;
		background : var(--MAIN_BACKGROUND_COLOR);
		overflow: hidden !important;
		box-sizing: border-box;
	}
	
	
	.background-image {
		position: fixed;
		overflow: hidden;
		top:0;
		left: 0;
		right: 0;
		z-index: -1;
		-webkit-filter: brightness(80%); /* Safari 6.0 - 9.0 */
		filter: brightness(80%);
		display: block;
		background-image: url('/images/Applicant-Flow-Log-HireCentric-1030x687_edited.jpg');
		height: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	  }
	
	h1{
		font-size: 4vh;
	}
	
	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100% ;
		background-color: white;
		color: black;
		height: 20%;
		text-align: center;
	}
	
	#wrapper {
		padding-top: 0px;
		padding-left: 0px;
	}
	
	
	/* Change the white to any color ;) */
	input:-webkit-autofill {
		-webkit-box-shadow: 0 0 0 30px #0295f7 inset;
	}
	/*Change text in autofill textbox*/
	input:-webkit-autofill {
		-webkit-text-fill-color: rgb(0, 0, 0) !important;
	}
	
	legend{
		font-family: "Segoe UI";
		color:white;
	}
	
	#page-wrapper {
		width: 100%;
		padding: 0;
		background-color: var(--MAIN_BACKGROUND_COLOR);
	}
	
	 input[type=text], input[type=password] {
		width: 100%; 
		background-color: white ; 
		color:rgb(0, 0, 0) ;
		padding: 10px 10px 10px 10px;
		margin: 4px 0px 4px 0px;
		display: block;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		font-size:16px;
		
	}
	
	.form{
		border-radius:20px;
		border: solid 1px white;
		padding: 30px;
		width: 40%;
		margin-top: 100px;
		mask-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 1) 100%);
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2) 100%);
		box-shadow: 0 0 50px rgba(0, 0, 0, 0.25), inset 0 0 5px rgba(255, 255, 255, 0.6);
		color: #444466;
	}
	
	.form:hover{
		 background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.1) 100%);
	}
	
	
	.panel-blue {
		border-color: #2b409f;
	 }
	 .panel-blue > .panel-heading {
		background-color: #202977;
		border-color: #3670c7;
		color: #FFFFFF;
		min-height: 150px;
	 }
	 .panel-blue .panel-footer {
		background: #2b599f;
		border-color: #3670c7;
		color: #FFFFFF;
	 }
	 .panel-blue [class^="fa-"]:before,
	 .panel-blue [class*=" fa-"]:before {
		color: rgba(255, 255, 255, 0.8);
		margin-right: 5px;
	 }
	
	
	
	 .panel-grey {
		border-color: #585858;
	 }
	 .panel-grey > .panel-heading {
		background-color: #585858;
		border-color: #b9bfc9;
		color: #FFFFFF;
		min-height: 150px;
	 }
	 .panel-grey .panel-footer {
		background: #585858;
		border-color: #b9bfc9;
		color: #FFFFFF;
	 }
	 .panel-grey [class^="fa-"]:before,
	 .panel-grey [class*=" fa-"]:before {
		color: rgba(255, 255, 255, 0.8);
		margin-right: 5px;
	 }
	
	
	
	.panel-green {
		border-color: #649f2b;
	 }
	 .panel-green > .panel-heading {
		background-color: #4b7720;
		border-color: #7dc736;
		color: #FFFFFF;
		min-height: 100px;
	 }
	 .panel-green .panel-footer {
		background: #649f2b;
		border-color: #7dc736;
		color: #FFFFFF;
	 }
	 .panel-green [class^="fa-"]:before,
	 .panel-green [class*=" fa-"]:before {
		color: rgba(255, 255, 255, 0.8);
		margin-right: 5px;
	 }
	 .panel-yellow {
		border-color: #d0b426;
	 }
	 .panel-yellow > .panel-heading {
		background-color: #a58f1e;
		border-color: #dec64b;
		color: #FFFFFF;
		min-height: 100px;
	 }
	
	 .panel > div > div > div > i {
		font-size: 80px;
	 }
	
	 .panel-yellow .panel-footer {
		background: #d0b426;
		border-color: #dec64b;
		color: #FFFFFF;
	 }
	 .panel-yellow [class^="fa-"]:before,
	 .panel-yellow [class*=" fa-"]:before {
		 color: rgba(255, 255, 255, 0.8);
		 margin-right: 5px;
	  }
	
	.saveButton,
	[contenteditable] .editButton{
		display: none;
	}
	
	.editButton,
	[contenteditable] .saveButton {
		display: inline; /* For IE */
		display: inline-block;
	}
	
	[contenteditable] {
		background: #ddddff;
	}
	
	.centered{
		display: -webkit-flex;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	
	.column {
		float: left;
		width: calc(33.33% - 20px);
		background-color: rgba(20,50,255,0.5);
		margin: 10px;
		border-radius: 5px;
		
	}
	
	.container-fluid{
		;
		
	}
	
	/* Side Navigation */
	
	
		.side-nav {
			position: fixed;
			top: 0px;
			left: -10px;
			width: 200px;;
			border: none;
			border-radius: 0;
			overflow-y: auto;
			background-color: #ffffff;
			color : #fff;
			bottom: 0;
			overflow-x: hidden;
			padding-bottom: 40px;
		}
	
	
		.side-nav>li>a {
			width : inherit;
			font-size:20px;
			vertical-align:text-bottom;
			background-color: #ffffff;
			display: block;
			padding:28px 10px 24px 10px;
			text-decoration: none;
			color: #000000;
			margin-left:5px;
		}
		 .active > a,
		 .active > a:hover,
		 .active > a:focus {
	
		background-color: #3FABD6 !important;
	  }
	  
	  i {
		  font-size: inherit;
	  }
	  
		.side-nav li a:hover,
		.side-nav li a:focus {
			outline: none;
			color : #fff;
			background-color:  #6FBFFF ;
		}
	
		.side-nav>li{
			width :inherit;
		}
	
	
		.side-nav>li>ul {
			padding: 0;
		}
	
		
		table tr td:last-child {
		white-space: nowrap;
		width: 1px;
	}
	
	.tablediv{
		background: white;
		color: black;
		border-radius:15px;
		width:100%;
		
	}
	
	
	/*******************************
	* MODAL AS LEFT/RIGHT SIDEBAR
	* Add "left" or "right" in modal parent div, after class="modal".
	* Get free snippets on bootpen.com
	*******************************/
		.modal.left .modal-dialog,
		.modal.right .modal-dialog {
			position: fixed;
			margin: auto;
			width: 100%;
			height: 100%;
			-webkit-transform: translate3d(0%, 0, 0);
				-ms-transform: translate3d(0%, 0, 0);
				 -o-transform: translate3d(0%, 0, 0);
					transform: translate3d(0%, 0, 0);
		}
	
		.modal.left .modal-content,
		.modal.right .modal-content {
			height: 100%;
			overflow-y: auto;
		}
		
		.modal.left .modal-body,
		.modal.right .modal-body {
			padding: 15px 15px 80px;
		}
	
			
	/*Right*/
		.modal.right.fade .modal-dialog {
			right: -320px;
			-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
			   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
				 -o-transition: opacity 0.3s linear, right 0.3s ease-out;
					transition: opacity 0.3s linear, right 0.3s ease-out;
		}
		
		.modal.right.fade.in .modal-dialog {
			right: 0;
		}
	
	/* ----- MODAL STYLE ----- */
	
	
		.modal-header {
			border-bottom-color: #EEEEEE;
			background-color: #FAFAFA;
		}
	
	.modal-dialog {
	  width: 100%;
	  height: 100%;
	  margin: 0;
	  padding: 0;
	}
	
	.modal-content {
	  height: auto;
	  min-height: 100%;
	  border-radius: 0;
	}
	
	
	
	/* Set a style for all buttons */
	button {
		background-color: #4CAF50;
		color: white;
		padding: 14px 20px;
		margin: 8px 0;
		border: none;
		cursor: pointer;
		width: 100%;
	}
	
	button:hover {
		opacity: 0.8;
	}
	
	/* Extra styles for the cancel button */
	.cancelbtn {
		width: auto;
		padding: 10px 18px;
		background-color: #f44336;
	}
	
	/* Center the image and position the close button */
	.imgcontainer {
		text-align: center;
		margin: 24px 0 12px 0;
		position: relative;
	}
	
	
	
	.container {
		padding: 16px;
	}
	
	span.psw {
		float: right;
		padding-top: 16px;
	}
	
	
	
	/* The Close Button (x) */
	.close {
		position: absolute;
		right: 25px;
		top: 0;
		color: #000;
		font-size: 35px;
		font-weight: bold;
	}
	
	.close:hover,
	.close:focus {
		color: red;
		cursor: pointer;
	}
	
	/* Add Zoom Animation */
	.animate {
		-webkit-animation: animatezoom 0.6s;
		animation: animatezoom 0.6s
	}
	
	@-webkit-keyframes animatezoom {
		from {-webkit-transform: scale(0)} 
		to {-webkit-transform: scale(1)}
	}
		
	@keyframes animatezoom {
		from {transform: scale(0)} 
		to {transform: scale(1)}
	}