// Job-Room-result - Badges!
.badge-yellow,
.badge-green,
.badge-blue,
.badge-gray {
	color: $body-color;
	font-weight: 400;
}

.badge-blue {
	@include badge-variant($main-accent-color-100);
}
.badge-gray {
	@include badge-variant($main-color-gray-100);
}
.badge-green {
	@include badge-variant($additional-accent-green-100);
}
.badge-yellow {
	@include badge-variant($additional-accent-amber-100);
}

// Job-Room-detail
.detail__map {
	width: 100%;
	height: 300px;
}

.detail__title {
	h2 {
		height: 2rem;
		margin-bottom: 1rem;
	}

	.detail__date {
		margin-left: $margin-y-general;
	}
}

.detail__subtitle {
	margin-bottom: $margin-x-narrow;

	font-weight: $text-weight-light;
	font-size: 1.125rem;
}



.detail__content {
	margin-bottom: $margin-x-general;
	line-height: 2rem;

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

	> .detail__content__title {
		padding: .25rem .125rem;
		background: $main-color-gray-100;
		margin-bottom: 0;
	}

	.content__item {
		display: flex;
		flex-direction: row;

		strong {
			width: 40%;
			text-align: right;
			hyphens: auto;
		}

		span {
			width: 66%;
			margin-left: .5rem;
		}
	}
}

.detail__features {
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	.detail__map {
		width: 50%;
	}

	.features {
		margin-left: $margin-y-general;
		width: 50%;

		display: flex;
		flex-direction: column;
		align-content: stretch;

		.logo-box {
			width: 100%;

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

.detail__applications  {
	margin: $margin-x-general 0;
}

.detail--occupation:nth-child(even) {
	background-color: rgba($main-color-gray-100,.5);
}

@media screen and (max-width: 767px) {

	.detail__title {
		h2 {
			height: auto;
		}
	}

	.detail__references {
		order: 1;
	}
	.detail__body {
		order: 0;
	}
	.detail__actions {
		order: 2;
	}

	.detail__company,
	.detail__pes {
		&.alv-logo-box {
			border-radius: 0 !important;
			padding: 0;
			background: transparent;
			font-size: inherit;
		}

		&.md-whiteframe-1dp {
			box-shadow: none;
		}
	}

	.detail__content {
		.content__item {
			display: flex;
			flex-direction: column;

			strong {
				width: 100%;
				text-align: left;
			}

			span {
				width: 100%;
				margin-left: 0;
			}
		}
	}
	.detail__features {
		flex-direction: column;

		.detail__map,
		.features {
			width: 100%;
			margin-bottom: .5rem;
			margin-left: 0;

			.logo-box,
			.logo-box:last-child {
				margin-bottom: .5rem;
			}
		}

		.md-whiteframe-1dp {
			border-radius: 0 !important;
			box-shadow: none;
		}
	}
}