/*GLOBAL*/
.no-horz-scroll {
	overflow-x: hidden;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
	padding-right: 0;
	padding-left: 0;
}
.wrapper {
	max-width: 1400px;
	min-width: 296px;
	margin: 0 auto;
}
body {
	background-color: #f5f8fa;
	color: #484848;
}
.onboard{
	background-color: #fff;
	margin-bottom: 80px;
	border: 1px solid #d3e0e9;
	height: 621px;
}
.onboard-steps-wrapper h6{
	color: #484848;
	opacity: .5;
	margin-bottom: 2px;
}
.line {
	border-left: 1px solid #d3e0e9;
}

.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
	background-color: #0372bc;
	border: #0372bc;
	color: #fff;
}
.next-show {
	display:none;
}
.moble-next-show {
	display:none;
}
/*INTRO*/
.onboard-intro {
	padding: 20px 0px;
}
.onboard-intro a {
	text-decoration: underline;
}
.onboard-intro-mobile {
	display: none;
}
/*STEPS*/
.onboard-steps-wrapper {
	border-bottom:1px solid #d3e0e9;
	height: 60px;
	float: left;
	width: 100%;
}
.onboard-steps {
	margin-left: 20px;
	height: 50px;
	width: 200px;
}
.onboard-steps.push {
	padding-left:15px; 
}
.mobile-back {
	display: none;
}

/*DEPARTMENT*/
.department {
	width: 190px;
	float: left;
	padding: 0px;
	border-right:1px solid #d3e0e9;
	height: 560px;
}
.onboard-departments button {
	width: 100%;
	background-color: #fff;
	border:none;
	outline: none;
	padding: 10px 10px 10px 0px;
	border-bottom: 1px solid #d3e0e9;
}
.onboard-departments .active{
	background: #f5f8fa
}
.department-button {
	float: left;
	color: #484848;
	padding-left: 15px;
	width: 100%;
	text-align: justify;
}
.department-button.active {
	color: #0372bc;
	opacity: 1;
}
.department-button:hover {
	color: #0372bc;
	opacity: 1;
}
.department-button p {
	margin-right: 10px;
	float: left;
	padding: 0px;
	margin-bottom: 0px;
	margin-top: 3px;
}
.department-button img {
	margin-right: 10px;
	margin-top: 7px;
	float: left;
}
.onboard-departments button:hover {
	background: #f5f8fa;
}
/*TREE*/
.tree {
	width: 320px;
	float: left;
    border-right: 1px solid #d3e0e9;
    height: 559px;
}
.onboard-tree {
	height: 560px;
	overflow-x: hidden;
	overflow-y: auto;
	border-bottom: 1px solid #d3e0e9;
	position: relative;
	z-index: 0;
}
.tree-line {
	height: 39px;
	width: 2px;
	background: #d3e0e9;
	margin-left: 12px;
	margin-top: -21px;
	position: absolute;
	z-index: 1;
}
.tree-line-middle {
	height: 90px;
	width: 2px;
	background: #d3e0e9;
	margin-left: 12px;
	margin-top: -21px;
	position: absolute;
	z-index: 1;
}
.onboard-tree button{
	border: none;
	float: left;
	outline: none;
	background: #fff;
	padding: 20px 0px 20px 30px;
	height: auto;
}
.onboard-tree-item {
	padding-left: 20px;
	border-bottom: 1px solid #d3e0e9 !important;
	position: relative;
}
.onboard-tree-item.active{
	background: #f5f8fa;
} 
.onboard-tree-item.inactive{
	background: #ffffff;
} 
.onboard-tree-item:hover{
	background: #f5f8fa;
} 
.onboard-tree button .fa {
	color: #0372bc;
}
.onboard-tree-item {
	width: 100%;
	height: 53px;
	float: left;
}
.tree-description {
	float: left;
    width:230px;
}
.badge-wrapper {
	width: 100%;
	margin-left: 10px;
	float: left;
	margin-bottom: 5px;
}
.badge-wrapper img {
	float: left;
}
.tree-description h5 {
	margin-bottom: 5px;
	margin-top: 0px;
	margin-left: 10px;
	float: left;
	width: 100%;
	text-align: justify;
}
.tree-description h6 {
	color: #484848;
	margin-top: 5px;
	opacity: .8;
	margin-left: 10px;
	width: 100%;
	text-align: justify;
}
.tree-description.active h5, .tree-description.active h6  {
	color: #0372bc !important;
	opacity: 1;
}
.position-add {
	float: left;
	height: 24px;
	width: 24px;
	border-radius: 12px;
	position: relative;
	z-index: 5;
	padding: 2px 0px 0px 1px;
	margin-top: 15px;
}
.position-add.active {
	background: #f7f7f7 !important;
}
/*BRANCHES*/
.tree-line.top {
	margin-top: 35px;
}
.tree-line-full {
	height: 91px;
	width: 2px;
	background: #d3e0e9;
	margin-left: 12px;
	margin-top: -21px;
	position: absolute;
	z-index: 1;
}
.tree-top-branch {
	height: 42px;
	background: none;
	width: 12px;
	border-left: 2px dotted #0372bc;
	border-top: 2px dotted #0372bc;
	position: absolute;
	top: 68px;
	left: 12px;
}
.tree-middle-branch {
	height: 100%;
	background: none;
	width: 40px;
	border-left: 2px dotted #0372bc;
	position: absolute;
	top: 22px;
	left: 12px;
}
.tree-line-middle-top {
	height: 40px;
	background: none;
	width: 40px;
	border-left: 2px dotted #0372bc;
	position: absolute;
	top: -2px;
	left: 24px;
}
.tree-line-middle-bottom {
height: 40px;
background: none;
width: 40px;
border-left: 2px dotted #0372bc;
position: absolute;
top: 52px;
left: 24px;
}
.middle.position-add {
	left: -18px;
}
.tree-bottom-branch {
height: 49px !important;
background: none;
width: 12px;
border-left: 2px dotted #0372bc;
border-bottom: 2px dotted #0372bc;
position: absolute;
top: 21px;
left: 12px;
}
.tree-line.bottom {
	height: 39px; 
}
.no-bottom {
    border-bottom:none;
}

/*DESCRIPTION*/
.description-content {
	float: left;
	padding-left: 15px;
	width: calc(100% - 510px);
}
.onboard-job-description {
	padding: 20px;
	padding-right: 20px;
	overflow-x: hidden;
	overflow-y: auto;
	float: left;
	background: #f5f8fa;
	min-height: 558px !important;
}
.onboard-job-description h3 {
	margin-top: 0px; 
}
.onboard-job-description h5 {
	margin-top: 20px; 
	font-weight: 500;
}
.onboard-job-description .badge-wrapper{
	margin-left: 0px;
	margin-bottom: 10px;
}
/*IINFORMATION*/
.onboard-information {
	height: 560px;
	padding:20px;
	float: right
}
.onboard-information form input {
	margin-bottom: 10px ;
	margin-right: 10px;
}
.onboard-information h4{
	margin-top: 0px;
}
.onboard-information h6 {
	margin-bottom: 10px;
}
.onboard-information button{
	float: left;
}
.onboard-information button:hover {
	background: #065f9a !important;
	color: #fff !important;
}
.wage {
	width: 90%;
}
.salary{
	color: #0372bc;
	font-weight: 500;
}
/* SCROLLBAR */
::-webkit-scrollbar {
	width: 10px;
	background-color: #f0f0f0;
}
::-webkit-scrollbar-thumb {
	background-color: #e3e3e3;
}

/*DEPARTMENT UP / DOWN BUTTONS*/
.department-switch {
	background: #0372bc !important;
	padding:0px !important;
	color: #fff;
}
.onboard-tree .department-switch .fa{
	color: #fff;
	float: left;
	padding: 10px;
}
.department-switch h5 {
	float: left;
}
.department-switch:hover {
	background: #065f9a !important;
}


/*title bar styles*/
.department-title {
	width: 190px;
	float: left;
	padding: 0px;
	padding-left: 20px;
	border-right:1px solid #d3e0e9;
	height: 61px;
}
.onboard-tree-title {
	width: 300px;
	float: left;
	padding: 0px;
	padding-left: 20px;
	height: 61px;
}
.description-title {
	float: left;
	width: calc(100% - 475px);
	padding-left: 15px;
}
@media (max-width: 1400px){
	.wrapper {
		padding: 0px 20px;
	}
}
@media (max-width: 1100px){
	.position-add, 
	.tree-line, 
	.tree-line-middle-top, 
	.tree-line-middle-bottom, 
	.tree-line-full {
		display: none;
	}
	.tree {
		width: 220px;
	}
	.onboard-tree button{
		padding: 20px 0px 20px 10px;
	}
	.description-content {
		width: calc(100% - 395px);
	}
	.description-title {
		width: calc(100% - 532px);
	}
	.onboard-tree-title {
		width: 200px;
	}
}
@media (max-width: 990px){
	.onboard-intro {
		display: none;
	}
	.onboard-intro-mobile {
		display: block;
	}
	.onboard-intro-mobile h4{
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.onboard-information {
		height: 360px;
		border-bottom: 1px solid #d3e0e9;
		padding: 20px;
		float: left;
	}
	.tablet-wrapper .line{
		border:none;
	}
	.tablet-wrapper {
		overflow-x: hidden;
        overflow-y: scroll;
        height: 559px;
	}
	.onboard-job-description {
		margin-left: 0px;
		overflow-y: hidden;
		float: right;
		width: 100%;
		background: #fff;
		min-width: none;
	}
	.tablet-wrapper .col-md-7 {
		border-top:1px solid #d3e0e9;
	}
    .onboard-steps {
        margin-top: -11px;
        height:61px;
    }
    .onboard-steps h6 {
    	padding-top: 11px;
    }
}
@media (max-width: 768px) {
    .department-button p{
    	font-size: 16px;
    	font-weight: 500;
    	color: #484848;
    }
     .onboard-steps {
        margin-top: 0px;
        height:auto;
    }
    .onboard-steps h6 {
        padding-top:0px;
    }
	.position-add, 
	.tree-line, 
	.tree-line-middle-top, 
	.tree-line-middle-bottom, 
	.tree-line-full {
		display: block;
	}
	.onboard-tree button {
		padding: 20px 20px 20px 30px;
	}
	.tree-description {
		margin-left: 15px;
	}
	h5 {
		font-size: 16px;
	}
	.onboard-steps h6 {
		font-size: 12px;
	}
    .tree {
        height:auto;
    }
	.tree-top-branch {
		height: 55px !important;
	}
	.wrapper {
		padding: 0px;
	}
	.tablet-wrapper {
		overflow-x: visible;
		overflow-y: hidden;
	    background: #fff;
	    width: 100%;
	    padding: 20px;
	}
	.onboard {
		height: 561px;
	}
	.onboard-intro {
    	padding: 20px;
	}
	.department {
		width: 100%;
	}
	.onboard-tree-item .next-show {
		margin-top: 26px;
	}
	.next-show {
		display: block;
		float: right;
		color: #0372bc;
		font-size: 18px;
	}
	.onboard-departments button {
		padding: 20px 20px 20px 0px;
		font-size: 18px;
	}
	.department-button img{
		float: left;
		margin-top: 7px;
	}
	.department-button p{
		float: left;
		margin-top: 0px;
		margin-left: 10px;
	}
	.department-title, .department {
		border-right:none;
	}
	.tablet-wrapper .col-md-7 {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	.tree {
		width: 100%;
	}
	.onboard-tree {
		height: 100%;
	}
	.description-content{
		width: 100%;
	}
	.onboard-job-description {
		padding: 20px;
		min-height: 0px !important;
	}
    .onboard-job-description {
        height:auto;
    }
	.mobile-back {
		background: #0372bc;
		width: 59px;
		height: 59px;
		float: left;
		font-size: 18px;
		padding: 16px 23px;
		border: none;
		display: block;
	}
	.mobile-back .fa {
		color: #fff;
	}
	.onboard-information {
		padding: 0px;
	}
	.department {
		height: auto;
	}
	.onboard {
		height: auto;
	}
	.onboard-tree {
		overflow-y: auto;
		overflow-x: auto;
		height: auto;
		margin-bottom: 40px;
	}
	.onboard-steps-wrapper {
		background: #fff;
	}
	.description-content {
		float: none;
	}
	.tablet-wrapper {
		height: auto;
	}
	.line {
		border-left: 1px solid #fff;
	}
	.onboard-departments {
		margin-bottom: 40px;
	}
	.onboard-steps {
		margin-left: 0px;
	}
	.onboard {
		margin-bottom:40px;
	}
}
@media (min-width: 420px) {
	.mobile-next-show {
		display: none;
	}
}
@media (max-width: 420px) {
	.position-add, 
	.tree-line, 
	.tree-line-middle-top, 
	.tree-line-middle-bottom, 
	.tree-line-full {
		display: none;
	}
	.tree-description {
		margin-left: -15px !important;
		width:100%;
	}
	.mobile-next-show {
		display:block;
		float: right;
		color: #0372bc;
		font-size: 18px;
		margin-top: -37px;
		margin-right: -8px;
	}
	.onboard-steps h5 {
		font-size: 12px;
	}
}