.main-titles {
	text-align: center;

    h2 {
		@include rfs($h1-font-size);
		display: inline-block;
		border-bottom: 4px solid $primary;
		margin-bottom: 3rem;

				body.company & {
					border-bottom-color: $secondary;
				}
    }
}

.content--header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: white;
	margin-bottom: 2rem;

	h1 {
		color: inherit;

		@include media-breakpoint-up(xl) {
			max-width: 600px;
		}
	}

	&-options {
		display: flex;
		flex-wrap: wrap;
		margin-right: -1rem;

		div {
			margin-right: 1rem;
		}
	}

	&-feedback {
		display: inline-flex;
		align-items: center;

		button {
			flex: 0 0 auto;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.5rem;
			height: 1.5rem;
			background: transparent;
			border-radius: 50%;
			border: 1px solid transparent;
			padding: 0;
			margin-left: .25rem;
			cursor: pointer;

			&.feedback-yes {
				color: $primary;
				border-color: $primary;
			}
			&.feedback-no {
				color: $red;
				border-color: $red;
			}

			svg {
				width: .75rem;
				height: .75rem;
			}
		}
	}

	&-share {
		display: inline-flex;
		align-items: center;

		a {
			flex: 0 0 auto;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.5rem;
			height: 1.5rem;
			background: white;
			border-radius: $border-radius;
			margin-left: .5rem;
			color: $dark;
		}
	}
}

@include media-breakpoint-down(sm) {
	.ad-block {
		margin-top: 2rem;
	}
}

//	Main background
.background-image {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 600px;
	z-index: -1;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.filter-checkboxes-inline {
	display: inline-flex;

	.custom-checkbox {
		& + .custom-checkbox {
			margin-left: .5rem;
		}
	}
}

//	Notification
.notification {
	padding: .75rem 0;
	background-color: $red;
	color: white;

	@include media-breakpoint-down(md) {
		z-index: 100;
		position: relative;
	}

	&--inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		span {
			flex: 1 1 auto;
			margin-bottom: 1rem;
		}

	}

	&.n-break-line {
		.notification--inner {
			flex-direction: row !important;

			span {
				margin-bottom: 0;
			}
		}
	}

	&--actions {
		display: inline-flex;
		flex: 0 0 auto;

		button {

			& + button {
				margin-left: .5rem;
			}

			&.btn-close {
				flex: 0 0 auto;
				background-color: transparent;
				padding: 0;
				width: 3rem;
				height: 3rem;
				border: 1px solid rgba(white, .4);
				color: white;
			}
		}
	}

	@include media-breakpoint-up(md) {
		&--inner {
			flex-direction: row;
			align-items: center;

			span {
				margin-bottom: 0;
			}
		}

		&--actions {
			margin-left: 1rem;
		}
	}
}

// Links
.link {
	&-back {
		display: inline-flex;
		align-items: center;

		@include rfs(.875rem);
		font-weight: normal;
		color: $gray-lighter;

		margin-bottom: .5rem;

		svg {
			width: .75rem;
			height: .75rem;
			margin-right: .5rem;
		}
	}

	&-more {
		display: inline-flex;
		align-items: center;

		svg {
			width: .675rem;
			height: .675rem;
			margin-left: .5rem;
		}
	}
}

// Timeline
.timeline {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;

	li {
		display: flex;
		align-items: center;
		position: relative;

		& + li {
			margin-top: 2rem;

			&::before {
				content: '';
				position: absolute;
				height: 2rem;
				left: 1.75rem;
				top: 0;
				transform: translateY(-100%);

				border-left: 1px solid $gray-light;
			}
		}
	}

	&-date {
		flex: 0 0 auto;
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		width: 3.5rem;
		height: 3.5rem;
		border-radius: $border-radius;

		color: white;
		background-color: $primary;
		font-weight: normal;
		text-align: center;
		padding-top: .25rem;

		margin-right: 1rem;
		@include rfs(1rem);

		span {
			border-radius: $border-radius;
			background-color: #79AD2B;
			@include rfs(.75rem);
			padding: .25rem;
			text-align: center;
		}

		@include media-breakpoint-up(md) {
			margin-right: 1.5rem;
		}

	}
}

.img-left {
	margin-bottom: 1rem;

	@include media-breakpoint-up(md) {
		float: left;
		margin-right: 2rem;
	}
}

//	Switch form element
.form-switch {
	&--knobs,
	&--layer {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	&--knobs {
		z-index: 2;

		&::before {
			content: 'NE';
			position: absolute;
			top: 4px;
			left: 4px;
			width: 2rem;
			height: 2rem;
			color: $gray;
			font-size: 12px;
			font-weight: normal;

			display: inline-flex;
			align-items: center;
			justify-content: center;

			background-color: white;
			border-radius: 2px;
			transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
		}
	}

	&--layer {
		width: 100%;
		background-color: $gray-light;
		transition: 0.3s ease all;
		z-index: 1;
	}

	&--button {
		position: relative;
		width: 72px;
		height: 40px;
		overflow: hidden;
		border-radius: $border-radius;

		input[type="checkbox"] {
			position: relative;
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
			opacity: 0;
			cursor: pointer;
			z-index: 3;

			&:active + .form-switch--knobs::before {
				width: 46px;
			}

			&:checked:active + .form-switch--knobs::before {
				margin-left: -14px;
			}

			&:checked + .form-switch--knobs::before
			{
				content: 'DA';
				left: 36px;
			}

			&:checked ~ .form-switch--layer {
				background-color: $primary;
			}
		}
	}
}


.form-filter {
	padding: 1rem;
	background: $gray-lightest;
	margin-bottom: 2rem;

	@include media-breakpoint-up(md) {
		padding: 1.5rem;
	}
}

//	Form steps
.form-steps {
	padding: 1.5rem;
	background: $gray-lightest;
	margin-bottom: 2rem;

	div[class^="col-"] {
		display: flex;
		align-items: center;
		@include rfs(.875rem);
		font-weight: normal;
		line-height: 1.3;

		color: #a8acaf;

		span {
			flex: 0 0 auto;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 3rem;
			height: 3rem;
			@include rfs(1.5rem);

			margin-right: 1rem;
			background-color: white;
			color: #a8acaf;
			border-radius: $border-radius;
		}

		&.active {
			color: $black;
			span {
				background-color: $primary;
				color: white;
			}
		}
	}
}


.trigger-facets-groups-wrapper {
	position: sticky;
	top: 0;
	z-index: 99;

	padding: 1rem 0;
	background-color: white;
}

.facets-groups {
	@include media-breakpoint-down(sm) {
		display: none;
		&.show-filters {
			display: block;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			overflow-y: auto;
			background-color: white;
			padding: 2.5rem 1rem 1rem;
			z-index: 1001;

			.trigger-filter-close {
				position: absolute;
				top: 1rem;
				right: 1rem;

				svg {
					width: 1.5rem;
					height: 1.5rem;
				}
			}
		}
	}

	.facets-group {
		padding: 1.5rem 0;

		& + .facets-group {
			border-top: 1px solid $gray-light;
		}
	}
}


.list-underlined {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;

	li {
		padding: .75rem 0;
		@include rfs(1rem);
		border-bottom: 1px solid $gray-light;
	}
}

//	Jobs components
.job {
	&-item {
		padding: 2.5rem 0;
		color: $gray;
		border-bottom: 1px solid $gray-lightest;

		strong {
			color: $black;
		}

		.job-code {
			display: block;
			@include rfs(.875rem);
			margin-bottom: 1rem;
		}

		.description {
			@include rfs(.875rem);
			margin-bottom: 1rem;
		}
	}

	&-attributes {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		overflow: hidden;
		margin: 0;
		padding: 0;

		li {
			display: inline-block;
			@include rfs(.875rem);
			margin-bottom: .5rem;

			svg {
				color: $primary;
				margin-right: .5rem;
				width: 1.5rem;
				height: 1.5rem;
				vertical-align: bottom;
			}

			margin-left: 0;
		}

		& + .job-attributes {
			margin-top: 1rem;
		}

		@include media-breakpoint-up(lg) {
			flex-direction: row;

			li {
				margin-bottom: 0;

				margin-left: 2rem;
				left: -2rem;
				@include list-bullet($gray-light, 4px, 1rem);
			}
		}
	}

	&-actions {
		display: inline-flex;
		flex-direction: column;
		margin-bottom: 2rem;
		button {
			& + button {
				margin-top: .5rem;
			}
		}

		&-col {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-end;
		}
	}

	&-detail {
		background-color: $gray-lightest;
		padding: 2rem;

		position: relative;
		border-top: 2.5rem solid white;

		div[class^="col-"] {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		&-contact {
			margin-bottom: .5rem;
			@include rfs(.875rem);

			strong {
				color: black;
			}
		}

		&-actions {
			display: flex;
			margin-bottom: 1rem;
			flex-wrap: wrap;

			button {
				padding: 0;
				@include rfs(.75rem);
				margin-right: 1.75rem;
			}

			& + button {
				margin-bottom: 1rem;

				@include media-breakpoint-up(md) {
					margin-bottom: 0;
				}
			}
		}
	}
}

.buttons-group {
	display: flex;
	flex-flow: wrap;

	button {
		margin-bottom: .5rem;

		@include media-breakpoint-up(md) {
			margin-right: .5rem;
		}
	}
}


//	Search component in header
.search-area {

	form {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 10;
		display: inline-flex;

		visibility: hidden;
		opacity: 0;
		transition: visibility 0s 0.3s, opacity .3s;

		width: 100%;
		padding: .5rem 0 .5rem 1rem;
		background-color: white;

		height: 48px;

		input,
		button {
			background-color: #eee;
			border: 0;
			width: 2rem;
			height: 2rem;
		}

		input {
			padding: 0 1rem;
		}

		.trigger-search-close {
			flex: 0 0 auto;
			background-color: white;
			color: $primary;
			border-left: 1px solid $gray-border;
			margin-left: 1rem;
			width: 3rem;
			height: 3rem;
			position: relative;
			top: -.5rem;

			// body.company & {
			// 	color: $secondary;
			// }
		}

		@include media-breakpoint-up(md) {
			right: -.5rem;
			top: -.5rem;
			padding: .5rem;

			height: auto;

			input,
			button {
				width: 3rem;
				height: 3rem;
			}

			.trigger-search-close {
				top: 0;
			}
		}
	}

	&.is-shown {
		form {
			visibility: visible;
			opacity: 1;
			transition: visibility .3s 0s, opacity .3s;
		}
	}

	@include media-breakpoint-up(md) {
		position: relative;

		form {
			border-radius: $border-radius;
			@include blockshadows;
			width: 300px;
		}
	}
}

.userLoggedIn {
	.user-navigation {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 10;
		display: inline-flex;
		opacity: 0;
		visibility: hidden;
		transition: visibility 0s 0.3s, opacity .3s;
		width: 100%;
		padding: .5rem 0 .5rem 1rem;
		background-color: white;
		height: 48px;

		.links {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			width: 100%;
			align-items: center;

			height: 3rem;
			margin-top: -.5rem;

			a {
				flex: 1 1 0;
				justify-content: space-between;
				font-weight: normal;
				font-size: 0.875rem;
				align-items: center;
				text-align: center;
				color: $gray-dark;

				&:hover, &:active {
					color: $primary;

					body.company & {
						color: $secondary;
					}
				}
			}

			.separator {
				background: #eee;
				width: 1px;
				height: 100%;
			}

		}

		.trigger-user-close {
			flex: 0 0 auto;
			background-color: white;
			border-left: 1px solid #eee;
			margin-left: 1rem;
			width: 3rem;
			height: 3rem;
			position: relative;
			top: -.5rem;
		}
	}

	&.is-shown {
			.user-navigation {
			visibility: visible;
			opacity: 1;
			transition: visibility .3s 0s, opacity .3s;
		}
	}

	@include media-breakpoint-up(md) {
		display: none;
	}
}

//	Top header navigation
.nav {
	&-contact {
		flex: 1 1 auto;

		a {
			display: inline-flex;
			align-items: center;
			@include rfs(.75rem);
			color: $gray;

			svg {
				flex: 0 0 auto;
				margin-right: .5rem;
			}
		}

		.header--upper & {
			display: inline-flex;
			align-items: center;

			a + a {
				margin-left: .75rem;
			}
		}
	}
	&-social {
		a {
			display: inline-flex;
			width: 2.5rem;
			height: 2.5rem;
			align-items: center;
			justify-content: center;
			color: $gray;

			.ticon {
				width: 1.25rem;
				height: 1.25rem;
			}
		}
	}
	&-entry {
		border-left: 1px solid $gray-border;
		display: inline-flex;

		.btn {
			border: 0;
			text-transform: none;
			border-radius: 0;
			font-weight: normal;
			padding: 1rem .75rem;
			@include media-breakpoint-up(lg) {
				padding: 1rem 1.5rem;
			}

			svg {
				color: $primary;
				margin-right: .5rem;
			}

			body.company & {
				svg {
					color: $secondary;
				}
			}
		}

		.dropdown-menu {
			padding-top: 0;
			padding-bottom: 0;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			border-color: #eee;
			border-top: none;
			margin-top: 1px;
			margin-left: -1px;

			.dropdown-item {
				padding: 16px;
				font-size: 14px;
				font-weight: normal;

				&:hover {
					background: $white;
					color: $primary;
				}
			}
			.dropdown-divider {
				margin: 0;
			}
		}
	}
}

.form-control {
	body.company & {
		&:focus {
			border-color: #88badf;
			box-shadow: 0 0 0 0.2rem rgba(38, 138, 209, 0.2);
		}
	}
}

.disclaimer {
	@include rfs(.75rem);
	color: #666;
}


//	General gray infobox
.infobox {
	display: block;
	border-radius: $border-radius;
	background-color: $gray-lightest;
	padding: 1.5rem;
	margin-bottom: 1.5rem;

	p:last-child {
		margin-bottom: 0;
	}
}

//	Advantages list
.list-advantages {
	flex-wrap: wrap;
	justify-content: center;

	article {
		display: flex;
		align-items: center;
		margin-bottom: 2rem;

		span {
			flex: 0 0 auto;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			margin-right: 1rem;
			width: 4rem;
			height: 4rem;
			border-radius: 50%;
			border: 1px solid $gray-light;

			.ticon {
				width: 2rem;
				height: 2rem;
				color: $primary;
			}
		}

		div {
			h4 {
				@include rfs(1.25rem);
				margin-bottom: .5rem;
			}

			p {
				@include rfs(.875rem);
			}
		}
	}

}

//	News list
.list-news {
	article {
		margin-bottom: 2rem;
		position: relative;
		background-color: white;
		@include blockshadows;

		img {
			border-bottom: 4px solid $primary;

			body.company & {
				border-bottom-color: $secondary;
			}
		}

		div {
			padding: 1rem;

			.date {
				display: block;
				color: $gray-lighter;
				@include rfs(.75rem);
				margin-bottom: .5rem;
			}

			a {
				@include rfs(.875rem);
				@include link-absolute();
			}
		}
	}
}

.search--inline {
	form {
		position: relative;

		.form-group {
			margin-bottom: 0;

			.form-control {
				border-radius: 0;
				height: 3.5rem;
				padding-right: 4rem;
				margin-right: 5rem;
				//border: 0;
			}
		}

		button {
			position: absolute;
			top: 0;
			right: 0;
			background-color: transparent;

			.ticon {
				width: 1rem;
				height: 1rem;
			}
		}
	}

	button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3.5rem;
		height: 3.5rem;
		border: 0;
		background-color: white;
		color: $gray-lighter;
		cursor: pointer;

		.ticon {
			width: 1.5rem;
			height: 1.5rem;
		}

		&.active,
		&:hover {
			color: $secondary;
		}
	}

	&-actions {
		display: inline-flex;
		background-color: white;
		@include blockshadows();
	}
}

.search--header,
.offices--header {
	margin-bottom: 240px;
	@extend .search--inline;

	form {
		@include blockshadows();

		.form-group {

			.form-control {
				border: 0;
			}
		}
	}
}

.login--header {
	.loginHolder {
		padding: 1rem;
		border-top: 5px solid #0083cb;
		position: relative;
		// border-bottom: 5px solid #0083cb;
		background: rgba(255, 255, 255, 0.8);
		min-height:calc(600px - 72px);
		margin-top: -2rem;

		@include media-breakpoint-up(md) {
			padding: 1rem 2rem;
			margin-top: -3.5rem;
		}

		.notification {
			// margin-top: calc(-1rem);
			// margin-left: -1rem;
			// margin-right: -1rem;
			// margin-bottom: 15px;
			position: absolute;
			left: 0;
			margin: 0 15px;
			right: 0;
		}

		hr {
			border-top-color: rgba(0,0,0,.1);
		}
	}
}

.offices--header {
	margin-bottom: 2rem;
}

.list-statistics {
	justify-content: space-around;

	article {
		text-align: center;

		img {
			border-radius: 50%;
			margin-bottom: 1rem;
		}

		span {
			display: flex;
			justify-content: center;
			align-items: center;

			font-weight: 600;
			font-size: 3rem;

			small {
				text-align: left;
				font-weight: 300;
				font-size: .875rem;
				line-height: 1.2;
				margin-left: .5rem;
			}
		}
	}
}

.list-process {
	justify-content: space-around;

	article {
		text-align: center;

		img {
			margin-bottom: 1rem;
		}

		.arrow {
			align-self: center !important;

			img {
				transform: rotate(90deg);
				max-width: 32px;
				margin-bottom: 2rem;

				@include media-breakpoint-up(lg) {
					transform: rotate(0deg);
					margin-bottom: 0;
				}
			}
		}

		span {
			text-align: center;
			display: block;
			font-weight: 600;
			font-size: 1.4rem;
			line-height: 1.6rem;
			margin-bottom: 1rem;

			@include media-breakpoint-up(lg) {
				text-align: left;
			}
		}

		p {
			text-align: center;

			@include media-breakpoint-up(lg) {
				text-align: left;
			}
		}
	}
}

.tooltip--info {
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background-color: $primary;
	font-size: .875rem;
	color: white;
	font-weight: bold;
	padding: 0;
	line-height: 1;
	overflow: hidden;
	cursor: pointer;
}


//	Map background
.offices--map {
	margin-bottom: 2rem;
	iframe {
		width: 100%;
		height: 600px;
	}
	#map {
		width: 100%;
		height: 600px;
	}
}


//	Search results
.search--results {
	article {
		margin-bottom: 2rem;
		position: relative;

		h4 {
			margin-bottom: .5rem;

			a {
				@include link-absolute();
			}
		}
	}
}


//	Treeview
@import "~jquery-bonsai/jquery.bonsai.css";
.bonsai {
	padding-left: 1.5rem;
	overflow: visible;

	.bonsai {
		padding-left: 0;

		> li:first-child {
			margin-top: 1rem;
		}

		.thumb {
			left: -.5rem;
		}
	}

	li {
		@extend .custom-control;
		@extend .custom-checkbox;
		overflow: visible;
		margin-bottom: 1rem;

		.thumb {
			left: -.5rem;
		}
	}
	input {
		@extend .custom-control-input;
		margin-right: .25rem;
	}
	label {
		cursor: pointer;
		@extend .custom-control-label;
	}
}

// Excel table
table.excel {
	width:100%;

	th, td {
		padding:1rem 0.5rem;
		border-bottom:1px solid #dee2e6;
		font-size: 0.875rem;
		color: #444;
		font-weight:300;
		vertical-align: middle;
	}

	th {
		background-color:#ffff00;
	}
}

.form-group.has-children {
	a#expand {
		.ticon {
			margin-left: 3px;
			margin-top: -3px;
			height: 13px;
			width: 13px;
			fill: $primary;
			transition: all 3s;
		}
	}

	.collapse {
		.form-group {
			&:first-child {
				margin-top: 1rem;
			}
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

.width-100 {
	.input-group-prepend {
		width: 65px;
	}

	.fl-wrap {
		width: calc(100% - 65px);
		margin-left: -1px;
	}
}

.flatpickr-input.form-control[readonly] {
	background-color: $white;
}

.btn.icon {
	border: 0;
	text-transform: none;
	border-radius: 0;
	font-weight: normal;
	padding: 0;
	vertical-align: top;
	margin-top: 3px;

	svg {
		color: #8BC832;
		margin-left: .5rem;
	}

	&:active, &:focus {
		outline:none;
		box-shadow: none;
	}
}

.regijaexpand {
	padding-left: 1.5rem;
}

.advisors {
	.col-12 {
		strong {
			line-height: 3rem;
		}

		@include media-breakpoint-up(md) {
			p {
				margin-top: 1.5rem;
				text-align: center;
			}
		}
	}

	&.second {
		.col-12 {

		}
	}
}

.show-steps {
	.step {
		padding: 1.5rem;
		background: #F0F3F5;
		margin-bottom: 2rem;

		p {
			font-weight: normal;
			line-height: 1.2;
			color: #000000;
			font-size: 1rem;
			margin-bottom: 1.5rem;

			&:last-child {
				margin-bottom: .5rem;
			}
		}

		h4 {
			margin-top: .5rem;
		}

		h6 {
			font-size: 0.875rem;
			font-weight: normal;
			color: #888;
		}
	}
}