/* fonts */
@font-face{
	font-family:"FrutigerR";
	src:url("../fonts/af97a512-f55a-4f61-b2ce-659c883930fc.eot?#iefix");
	src:url("../fonts/af97a512-f55a-4f61-b2ce-659c883930fc.eot?#iefix") format("eot"),
	url("../fonts/9b1fae67-8764-448a-a926-54b09bd0b06b.woff2") format("woff2"),
	url("../fonts/3fbbd6b1-cfa7-4ff0-97ea-af1b2c489f15.woff") format("woff"),
	url("../fonts/076311f8-a01b-4389-a5eb-334a62e62d45.ttf") format("truetype"),
	url("../fonts/c59a36ab-4ef8-4ee1-a2f8-48aa79d4f877.svg#c59a36ab-4ef8-4ee1-a2f8-48aa79d4f877") format("svg");
}
@font-face{
	font-family:"FrutigerI";
	src:url("../fonts/fcbab1a3-9659-4b39-8479-cc1f50d18f55.eot?#iefix");
	src:url("../fonts/fcbab1a3-9659-4b39-8479-cc1f50d18f55.eot?#iefix") format("eot"),
	url("../fonts/a6f5a1fe-91d0-4bde-bf50-4fc4e2d24f7e.woff2") format("woff2"),
	url("../fonts/e2ade8a9-bd48-45e7-95e6-9dc917ba4f74.woff") format("woff"),
	url("../fonts/19fe9614-8825-4e7d-b8c3-230d2561e0e2.ttf") format("truetype"),
	url("../fonts/c2f8e3aa-1c1a-49ee-9ec7-30f61a5e96d3.svg#c2f8e3aa-1c1a-49ee-9ec7-30f61a5e96d3") format("svg");
}
@font-face{
	font-family:"FrutigerB";
	src:url("../fonts/fbd7c0fb-f004-4e83-81d2-1d400413a873.eot?#iefix");
	src:url("../fonts/fbd7c0fb-f004-4e83-81d2-1d400413a873.eot?#iefix") format("eot"),
	url("../fonts/6e7f04cb-3b30-43a5-b79d-25b4c1178700.woff2") format("woff2"),
	url("../fonts/9aa32a81-1124-4c43-b3db-15bfb1f7aed2.woff") format("woff"),
	url("../fonts/6faffbf4-f8e8-4817-b24b-a390e166be7e.ttf") format("truetype"),
	url("../fonts/fc09de64-de25-425e-90dc-a0cae29b02c4.svg#fc09de64-de25-425e-90dc-a0cae29b02c4") format("svg");
}
@font-face{
	font-family:"FrutigerBI";
	src:url("../fonts/f334dc11-1de8-4ae2-9c2a-a1cfa665263b.eot?#iefix");
	src:url("../fonts/f334dc11-1de8-4ae2-9c2a-a1cfa665263b.eot?#iefix") format("eot"),
	url("../fonts/c3eb6646-2557-4ced-8a71-fd9c6eb83c59.woff2") format("woff2"),
	url("../fonts/f74530f5-a39c-47e3-97d9-6821fc4df8c0.woff") format("woff"),
	url("../fonts/aa626e7f-57dd-4084-9486-3eeb921333c0.ttf") format("truetype"),
	url("../fonts/8f91ebb0-2b00-4a50-baa9-865a6502384e.svg#8f91ebb0-2b00-4a50-baa9-865a6502384e") format("svg");
}


body {
	background: #fff;
	color: #4b4b4b;
	font: 14px/16px FrutigerR, Arial, Helvetica, sans-serif;
}

.header {
	padding: 27px 0;
}
.logo {
	display: inline-block;
	margin: 11px 0 0;
}
.search {
	border: 1px solid #e5e5e5;
	position: relative;
	margin: 4px 0 0;
	overflow: hidden;
}
.search input[type=text]{
	border: 0;
	background: none;
	padding: 0 15px;
	float: left;
	width: calc(100% - 36px);
	width: -webkit-calc(100% - 36px);
	font: 14px FrutigerR, Arial, Helvetica, sans-serif;
	height: 36px;
	margin: 0;
}	
.search input[type=submit]{
	width: 36px;
	height: 36px;
	border: 0;
	cursor: pointer;
	float: right;	
	text-indent: -9999px;
	background: none;
	cursor: pointer;
	position: relative;
	z-index: 10;
}
.search:after{
	position: absolute;
	right: 0;
	content: "\f002";
	font-family: "FontAwesome";
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
}
.loginArea {
	border-left: 2px solid #e3e4e6;
	padding: 0 18px 0 20px;
	position: relative;
}	
.loginArea p {
	margin: 0;
	color: #000;
	font: 18px/18px FrutigerR, Arial, Helvetica, sans-serif;
}
.loginArea .time {
	display: block;
	font: 12px/14px FrutigerR, Arial, Helvetica, sans-serif;
}	
.showAddNav {
	color: #5c5c5c;
	position: absolute;
	right: 0;
	top: 18px;
	font: 18px/20px Arial, Helvetica, sans-serif;
}
.getFused {margin: 10px 23px 0 0;}

ul.mainNav {
	margin: 0;
	padding: 0;
	list-style: none;
	background: url('../images/bg-nav.png') no-repeat 50% 50%; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display: table;
	table-layout: fixed;
	height: 67px;
	width: 100%;
}
ul.mainNav li {
	display: table-cell;
	padding: 0 20px;
	font: 16px/67px FrutigerR, Arial, Helvetica, sans-serif;
}
ul.mainNav .fa {
	font-size: 26px;
	margin-right: 10px;
	vertical-align: sub;
}
ul.mainNav a {
	color: #fff;
	display: inline-block;
}	


.mainCnt {
	padding: 27px 0 40px;
}

.sideNav {
	border: 1px solid #e5e5e5;
}
.sideNav .heading {
	padding: 9px 15px;
	background: #e8e8e8;
}	
.sideNav .heading a {
	font: 18px/24px FrutigerR, Arial, Helvetica, sans-serif;
	color: #000;
}
.sideNav .heading h2 {
	font: 14px/24px FrutigerR, Arial, Helvetica, sans-serif;
	margin: 0 15px;
}
.badge {
	color: #fff;
	background: #8fc53e !important;
	display: inline-block;
	/*width: 24px;*/
	font: 12px/18px FrutigerR, Arial, Helvetica, sans-serif;
	text-align: center;
}
.sideNav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sideNav ul li {
	border-top: 1px solid #e5e5e5;
	padding: 12px;
	font: 14px/24px FrutigerR, Arial, Helvetica, sans-serif;
}
.sideNav ul a {
	color: #4b4b4b;
	display: block;
}	
.sideNav .infoLabel {
	width: auto;
	padding: 0 5px;
	min-width: 24px;
}
.sideNav .fa {
	min-width: 25px;
}

.btn-default {
	text-align: center;
	background: #909090;
	
	color: #fff;
	font: FrutigerR, Arial, Helvetica, sans-serif;
}
.btn-default:hover {
	text-decoration: none;
	color: #fff;
}



.nav-tabs > li > a {
	background: #f5f5f5;
	line-height: 24px;
	margin-right: 10px;
	border-bottom: 1px solid #e5e5e5;
}
.nav-tabs .infoLabel {
	position: relative;
	top: -1px;
	margin: 0 0 -1px;
}
.tab-pane {
	border: solid #e5e5e5;
	border-width: 0 1px 1px;
	padding: 27px 0;
}

.filterArea {
	padding: 0 0 18px;
}
.btn-primary {
	background: #69bbe3;
	color: #fff;
	padding: 0 15px;
	font: 14px/38px FrutigerB, Arial, Helvetica, sans-serif;
}
.btn-primary:hover {
	text-decoration: none;
	color: #fff;
}
.filterArea form:before {
	content: "\f073";
	font-family: "FontAwesome";
	color: #ababab;
	position: absolute;
	right:245px;
	top: 0;
	line-height: 38px;
	font-size: 14px;
}
.filterArea input[type=text]{
	width: 220px;
	padding: 0 36px 0 15px;
	float: left;
	font: 14px FrutigerR, Arial, Helvetica, sans-serif;
	border: 1px solid #e5e5e5;
	height: 38px;
	margin: 0 24px 0 0;
}
.manageColumns a {
	color: #fff;
	display: block;
	background: #909090;
	font: 14px/38px FrutigerB, Arial, Helvetica, sans-serif;
	padding: 0 15px;
}




.tableArea {
	overflow: auto;
	margin: 0 0 27px;
}
.tableArea table {
	width: 100%;
	white-space: nowrap;
	border: solid #e5e5e5;
	border-width: 1px 0;
}
.tableArea th {
	padding: 18px 35px 18px 20px;
	border-right:1px solid #e5e5e5; 
	font: 14px/16px FrutigerB, Arial, Helvetica, sans-serif;
}
.tableArea th a,
.tableArea th a:hover {
	text-decoration: none;
	color: #212121;
} 
.tableArea th .option {margin-right: -20px;}

.tableArea td {
	padding: 18px 20px;
	border-right:1px solid #e5e5e5; 
	font: 14px/16px FrutigerR, Arial, Helvetica, sans-serif;
}
.tableArea tr:nth-child(even) {background: #f1f1f1;}
.tableArea th:last-child,
.tableArea td:last-child {
	border-right: 0;
}
.tableArea td a {color:#2995d3;}

.navArea p {
	margin: 0 25px 0 0;
	font: 14px/38px FrutigerR, Arial, Helvetica, sans-serif;
}
.navArea .pagination {
	border-radius: 0;
	margin: 0 25px 0 0;
}
.navArea .pagination > li:first-child > a, .navArea .pagination > li:first-child > span,
.navArea .pagination > li:last-child > a, .navArea .pagination > li:last-child > span {border-radius: 0;}
.navArea .pagination > li > a, .navArea .pagination > li > span {
	padding: 9px 12px;
}

.navArea input[type=number]{
	width: 60px;
	border:1px solid #e5e5e5;
	height: 38px;
	font: 14px FrutigerR, Arial, Helvetica, sans-serif;
	padding: 0 0 0 15px;
}

.footer {
	background: #1d1d1d;
	color: #fff;
	padding: 39px 0;
	font: 12px/14px FrutigerR, Arial, Helvetica, sans-serif;
}
.footer a {color: #fff;}
.footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer ul li {
	float: left;
	padding: 0 16px 0 17px;
	background: url(../images/separator01.png) no-repeat;
}
.footer ul li:first-child {background: none;}
.footer ul img {
	position: relative;
	top: -3px;
}
.footer p {margin: 0;}	

/* job landing */

.page-header {
	background: #ebebeb;
}
.page-header h1 {
	margin: 0;
	font: 16px/50px FrutigerR, Arial, Helvetica, sans-serif;
	/*padding: 0 20px;*/
}
.tagsArea ul {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}
.tagsArea ul li {
	display: inline-block;
	background: #909090;
	color: #fff;
	font: 14px/38px FrutigerB, Arial, Helvetica, sans-serif;
	margin: 0 20px 20px -5px;
}
.tagsArea ul a {
	padding: 0 12px;
	color: #fff;
	display: inline-block;
}	
.tagsArea p {
	margin: 0 0 30px;
	font: 16px/18px FrutigerR, Arial, Helvetica, sans-serif;
}

.jobsAction .search {
	width: 30%;
	margin: 0 0 20px;
}
.jobsAction .tableArea table tr:hover td {
	background: #eef4f8;
	border-top: 2px solid #bfddf2;
	border-bottom: 2px solid #bfddf2;
}
.jobsAction .tableArea table tr:hover td:first-child {box-shadow: inset 2px 0 0 0 #bfddf2;}
.jobsAction .tableArea table tr:hover td:last-child {box-shadow: inset -2px 0 0 0 #bfddf2;}

.tableArea table .btn-default,
.tableArea table .btn-primary {
	display: inline-block;
	color: #fff;
	padding: 0 12px;
	margin: -15px 0;
	font: 14px/38px FrutigerB, Arial, Helvetica, sans-serif;
}	


/* job approval */
.mainTitle .info {
	padding: 15px 0;
}
.mainTitle .info h1 {
	font: 16px/18px FrutigerR, Arial, Helvetica, sans-serif;
	padding: 0 20px;
}
.mainTitle .info h2 {
	padding: 0 20px;
	color: #7b7b7b;
	font: 16px/18px FrutigerR, Arial, Helvetica, sans-serif;
	margin: 0;
}

.breadcrumbs {
	/*centering*/
	display: inline-block;
	overflow: hidden;
	/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
	background: #efeeed;
	border: 1px solid #e5e5e5;
	margin: 0 0 20px;
}
.breadcrumbs a {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font: 14px/38px FrutigerR, Arial, Helvetica, sans-serif;
	color: #3d3d3d;
	/*need more margin on the left of links to accomodate the numbers*/
	padding: 0 10px 0 35px;
	position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumbs a:first-child {padding-left: 20px;}
.breadcrumbs a:last-child {padding-right: 20px;}

/*hover/active styles*/
.breadcrumbs a.active, .breadcrumbs a:hover,
.breadcrumbs a.active:after, .breadcrumbs a:hover:after {background: #fff;}

/*adding the arrows for the breadcrumbss using rotated pseudo elements*/
.breadcrumbs a:after {
	content: '';
	position: absolute;
	top: 0; 
	right: -18px; /*half of square's length*/
	/*same dimension as the line-height of .breadcrumbs a */
	width: 36px; 
	height: 38px;
	/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
	transform: scale(0.707) rotate(45deg);
	/*we need to prevent the arrows from getting buried under the next link*/
	z-index: 1;
	/*background same as links but the gradient will be rotated to compensate with the transform applied*/
	background: #efeeed;
	/*stylish arrow design using box shadow*/
	box-shadow: 
		1px -1px 0 1px #e5e5e5, 
		1px -1px 0 1px #e5e5e5;
	/*
		5px - for rounded arrows and 
		50px - to prevent hover glitches on the border created using shadows*/
	border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumbs a:last-child:after {
	content: none;
}

.approveBox {
	border: 1px solid #e5e5e5;
	margin: 0 0 30px;
}
.approveBox .heading {
	padding: 0 20px;
}
.approveBox .heading h2 {
	margin: 0;
	font: 14px/42px FrutigerB, Arial, Helvetica, sans-serif;
	padding: 0 0 0 30px;
	background: url(../images/ico02.png) no-repeat 0 50%;
}
.approveBox .heading h2 a,
.approveBox .heading h2 a:hover {
	color: #212121;
	display: block;
	text-decoration: none;
}
.approveBox .tableArea {margin: 0;}
.approveBox .tableArea table {border: 0;}

.tableArea .odd tr:nth-child(even) {background: none;}
.tableArea .odd tr:nth-child(odd) {background: #f1f1f1;}

.approveBox .cnt {
	border-top: 1px solid #e5e5e5;
}
.approveBox .btnBox {
	padding: 12px;	
}
.approveBox .btn-default {
	display: inline-block;
	padding: 0 15px;
}
.approveBox table p {
	margin: 0;
	white-space: normal;
}
.approveBox table ul.list {
	list-style-position: inside;
	margin: 0;
	white-space: normal;
	padding: 0;
	font: 14px/16px FrutigerB, Arial, Helvetica, sans-serif;
}
.approveBox .addBox01 {
	padding: 15px 0;
}
.approveBox .addBox01 table {
	border: 1px solid #e5e5e5;
}
.approveBox .addBox01 tr:nth-child(odd) {background: none;}
.approveBox .addBox01 tr:nth-child(even) {background: #f1f1f1;}
.approveBox .fa-check-circle-o {color: #96c84b;}
.approveBox h3 {
	font: 14px/16px FrutigerR, Arial, Helvetica, sans-serif;
	padding: 18px 0;
	margin: 0;
	border-bottom: 1px solid #e5e5e5;
}
ul.btnsList {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.btnsList li {
	padding: 0 0 10px;
}
ul.btnsList .btn-default,
ul.btnsList .btn-primary {
	display: inline-block;
	text-align: left;
	padding: 0 15px;
	font: 14px/38px FrutigerB, Arial, Helvetica, sans-serif;
}

/* job form */

.approveBox .formRow {
	padding: 0 5px;
	margin: 20px 0;
}
.approveBox .formRow.odd {
	background: #f8f8f8;
	border: 1px solid #e5e5e5;
	padding: 15px 5px 18px;
}
.require {margin-right: 10px;}
.required {
	font: 12px/16px FrutigerR, Arial, Helvetica, sans-serif;
	display: inline-block;
	margin: 0 34px 0 0;
}
.approveBox label {
	font: 14px/16px FrutigerB, Arial, Helvetica, sans-serif;
	margin: 0 15px 15px 0;
	display: block;
}
.approveBox label.inline {display: inline-block;}
.approveBox input[type=text],
.approveBox select,
.approveBox textarea {
	width: calc(100% - 34px);
	width: -webkit-calc(100% - 34px);
	border: 1px solid #e5e5e5;
	height: 36px;
	padding: 0 12px;
}
.approveBox textarea {
	overflow: auto;
	resize:none;
	height: 130px;
	padding: 10px 12px
}	
.approveBox input.size01[type=text] {
	width: 40%;
	margin-right: 18px;
}
.approveBox input[type=radio]{
	margin: 0;
	padding: 0;
}


.approveBox .question {
	font-size: 20px;
	color:#909090;
	line-height: 36px;
	display: inline-block;
}
.approveBox .question.inline {
	line-height: 16px;
	position: relative;
	bottom: -2px;
}
ul.formList {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.formList li {padding: 0 0 15px;}
.approveBox .date {
	position: relative;
}
.approveBox .date input[type=text]  {padding-right: 30px;}
.approveBox .date:before {
	content: "\f073";
	font-family: "FontAwesome";
	color: #ababab;
	position: absolute;
	right:45px;
	top: 0;
	line-height: 38px;
	font-size: 14px;
}
.approveBox .contact {
	height: 38px;
	border: 1px solid #e5e5e5;
	width: calc(100% - 34px);
	width: -webkit-calc(100% - 34px);
	background: #fff;
}
.approveBox .contact input[type=text] {
	border: 0;
	background: none;
	width: calc(100% - 61px);
	width: -webkit-calc(100% - 61px);
}
.approveBox .contact span {
	border-left: 1px solid #e5e5e5;
	width: 60px;
	text-align: center;
	margin: 6px 0 0;
	font: 12px/24px FrutigerR, Arial, Helvetica, sans-serif;
}
.approveBox .formRow p {margin: 0;}
.approveBox .formRow .btn-default {
	line-height: 36px;
	margin-right: 15px;
}
.approveBox .requesition {
	height: 38px;
	border: 1px solid #e5e5e5;
	width: calc(100% - 34px);
	width: -webkit-calc(100% - 34px);
	background: #fff;
}
.approveBox .requesition select {
	border: 0;
	width: 52px;
}
.approveBox .requesition input[type=text] {
	border: 0;
	background: none;
	width: calc(100% - 54px);
	width: -webkit-calc(100% - 54px);
}
.approveBox .editor {
	width: calc(100% - 34px);
	width: -webkit-calc(100% - 34px);
	border:1px solid #e5e5e5;
	background: #fff;
}
.approveBox .editor .btn-toolbar {
	border-bottom:1px solid #e5e5e5;
	margin: 0;
}
.approveBox .editor .btn-toolbar a {
	color: #242424;
}
.approveBox .editor .btn-group {
	border-right: 1px solid #e5e5e5;
}
.approveBox .editor .btn-group.open .dropdown-toggle {box-shadow: none;}



.approveBox .editor textarea {
	width: 100%;
	border: 0;
	height: 180px;
}




.approveBox p.remaining {
	margin: 15px 0 0;
	font: 12px/14px FrutigerR, Arial, Helvetica, sans-serif;
}









.request {
	border:1px solid #e5e5e5;
	margin: 0 0 30px;
}
.request h2 {
	border-bottom:1px solid #e5e5e5;
	font: 14px/42px FrutigerR, Arial, Helvetica, sans-serif;
	padding: 0 20px;
	margin: 0;
}
.request .info {
	padding: 20px;
}
.request .progress {
    background-color: #ebebeb;
    border-radius: 0;
    box-shadow: none;
    height: 38px;
    margin-bottom: 20px;
}
.progress-bar {
    background-color: #8fc53e;
    box-shadow: none;
}
.request h3 {
	font: 14px/16px FrutigerB, Arial, Helvetica, sans-serif;
	margin: 0 0 10px;
}
.request ul.list {
	list-style-position: inside;
	margin: 0;
	padding: 0;
}
.request ul.list li {
	font: 14px/30px FrutigerR, Arial, Helvetica, sans-serif;
}
ul.btnsList p {
	margin: 2px 0 5px;
	font: 12px/14px FrutigerR, Arial, Helvetica, sans-serif;
}