@mixin bottom-border($max-width: 19rem, $height: 0.3125rem) {
	&::after {
		display: block;
		margin: 1.5rem 0;
		content: '';
		max-width: $max-width;
		width: 100%;
		height: $height;
		background-color: $primary-color;
	}
}

hr {
	border: 0;
	height: auto;
	@include bottom-border(100%, 0.2rem);
}

.fa-sign-out::after {
	content: '\f08b'; /* fa-sign-out */
	font-family: FontAwesome;
}

%button {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.87rem;
	padding: 5px 15px;
	line-height: 1rem;
	color: #ffffff;
}

div#nav {
	margin-top: 0;
	margin-bottom: 0;
	> ul {
		margin-top: 0;
		margin-bottom: 0;
	}
}

div.publik-container {
	margin-top: 150px;
	@media screen and ($max-mobile-viewport) {
		margin-top: 80px;
	}
}

#main-content {
	background: white;
	padding: 10px;
	@media screen and ($max-mobile-viewport) {
		padding: 0 0 10px 0;
	}
}

label, div.dataview span.label {
	color: $primary-color;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.125rem;
}

input, select, textarea, span.select2 {
	box-shadow: 1px 2px 8px rgba(23, 23, 22, 0.2);
}

input[type="file"] {
	box-shadow: none;
	padding: 0;
	margin: 0;
}

div#rub_service {
	h2 {
		color: #000000;
		margin: 0;
		text-align: left;
		padding: 0 0.5ex 1ex 0.5ex;
	}
	h3, h4 {
		text-transform: uppercase;
		font-family: "Roboto Condensed", sans-serif;
		font-weight: 700;
	}
	h3 {
		font-size: 1.4rem;
	}
	> h2:first-child {
		@include bottom-border(100%);
	}
	div.back-home-button {
		margin-bottom: 3ex;
		a {
			@extend %button;
			background-color: $button-background;
			border-radius: $button-border-radius;
			&::before {
				content: '\f053'; /* chevron-left */
				font-family: FontAwesome;
				margin-right: 0.5rem;
			}
		}
	}
	textarea {
		width: 100%;
	}
	td {
		padding: 2px;
	}
}


.gru-content {
	div.cell, div.block, div.a2-block {
		box-shadow: 0 0 10px 0 silver;
		padding-bottom: 0.1ex;
		margin-bottom: 1.4rem;
		h2:first-child {
			&::before {
				content: url("images/icon-pause.png");
				position: absolute;
				left: 0;
				top: 30%;
			}
		}
	}
	button {
		@extend %button;
	}
	select {
		margin: 0.2em 0px;
	}
}

div.cell {
	&.trackingcodeinputcell {
		background-color: $primary-color;
		font-family: Roboto, serif;
		color: #ffffff;
		border-color: $primary-color;
		h2:first-child {
			color: #ffffff;
			font-size: 1.875rem;
			padding: 1ex;
			background-color: $primary-color;
			&::before {
				display: none;
			}
		}
		button {
			background: #ffffff;
			color: $primary-color;
		}
		#tracking-code {
			box-sizing: content-box;
			width: 13rem;
			padding: 0 1rem;
			color: $primary-color;
			height: 3.125rem;
			margin-right: 0.325rem;
		}
	}
	&.dashboard-title {
		box-shadow: 0 0 10px 0 silver;
		h2:first-child {
			padding: 1ex;
			background-color: #eeeeee;
			font-size: 1.875rem;
			&::before {
				display: none;
			}
		}
	}
	&.dashboard {
		border: 0;
		padding: 1.5rem;
		background-color: #eeeeee;
		ul {
			li {
				a {
					font-weight: 700;
					font-size: 1.1rem;
					color: #a9aaac;
					border-bottom: 1px solid #a9aaac;
					&:hover {
						color: #00515e;
						text-decoration: underline;
					}
				}
				&.selected a {
					color: #00515e;
					text-decoration: underline;
				}
				@each $item in (profil, demandes, porte-document, alertes, favoris) {
					&.menu-#{$item} a {
						background-image: url('images/#{$item}.png');
						background-size: auto 2.5em;
						background-repeat: no-repeat;
						padding: 1.5rem 0 1.5rem 3.5rem;
						background-position: left center;
						&:hover {
							background-image: url('images/#{$item}-active.png');
						}
					}
					&.menu-#{$item}.selected a {
						background-image: url('images/#{$item}-active.png');
					}
				}
			}
		}
	}
}

div.error {
	font-size: 90%;
}

ul.account-management li {
	padding: 0;
	a {
		font-weight: 700;
	}
}

.field {
	margin-bottom: 0.95rem;
	.label {
		padding: 0;
		text-align: left;
	}
	.value {
		font-weight: 700;
		line-height: 1.125rem;
	}
}

div.block {
	flex-wrap: wrap;
	@media screen and ($max-mobile-viewport) {
		padding: 0;
	}
}

div.login-actions {
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.25rem;
	color: #636361;
	margin-bottom: 1.25rem;
}

div#login-page {
	display: flex;
	justify-content: center;
	padding: 3.75rem 0;
	flex-wrap: wrap;
	> div.block {
		max-width: 26.25rem;
		width: 100%;
		background-color: #eeeeee;
		h2:first-child {
			background-color: #eeeeee;
		}
	}
	div#welcome-text {
		display: none;
	}
	p {
		margin-bottom: 1.875rem;
	}
	form {
		input {
			width: 100%;
		}
		@include bottom-border;
	}
}

div#fc-button {
	box-shadow: 0 0 0;
	@media screen and ($max-mobile-viewport) {
		width: 220px;
	}
	a.button {
		height: auto;
		display: block;
		background: transparent;
	}
}
div#fc-button-wrapper p {
	line-height: 1.4;
	font-size: 1.125rem;
}

div.cell.wcsformsofcategorycell {
	box-shadow: 0 0 10px 0 silver;
	ul {
		> li > a {
			border: 0;
			position: relative;
			padding: 0.75rem 0.75rem 0.75rem 2rem;
			&::before {
				position: absolute;
				content: '\f0da'; /* caret-right */
				font-family: FontAwesome;
				margin-right: 0.5rem;
				color: #cccccc;
				left: 1rem;
			}
		}
	}
}

div#tracking-code {
	color: #ffffff;
	background-color: $primary-color;
	h3 {
		background-color: $primary-color;
		color: #ffffff;
		padding-left: 0.5ex;
	}
	a {
		color: #ffffff;
		font-size: 100%;
	}
}

// Steps
.wcs-steps {
	font-size: 1.2em;
	&--list {
		@include desktop-vertical-steps() {
			margin-bottom: 0;
		}
	}
}

.wcs-step {
	&--marker {
		font-weight: bold;
		// reset abbr styles inherited from specific publik.css
		border-bottom: none !important;
		cursor: inherit !important;
		text-decoration: none !important;
	}
	&--label {
		text-transform: uppercase;
		// reset .label styles inherited from specific publik.css
		padding: 0;
		margin: 0;
		white-space: normal;
		text-align: left;
		color: inherit;

		@include desktop-vertical-steps() {
			font-size: 0.63em;
		}
	}

	@include desktop-vertical-steps() {
		&:last-child {
			margin: 0;
		}
	}
}

div.buttons {
	> div {
		@media screen and ($max-mobile-viewport) {
			float: none;
		}
	}
	div.submit-button {
		float: right;
		button::after {
			content: '\f054'; /* chevron-right */
			font-family: FontAwesome;
			margin-left: 0.5rem;
		}
	}
	div.previous-button {
		float: right;
		button::before {
			content: '\f053'; /* chevron-left */
			font-family: FontAwesome;
			margin-right: 0.5rem;
		}
	}
	div.cancel-button {
		float: left;
		@media screen and ($max-mobile-viewport) {
			float: none;
		}
	}
}

div#summary {
	position: relative;
	h2 {
		padding-bottom: 0;
	}
	div.dataview {
		div.page {
			h3 {
				font-family: 'Bitter', sans-serif;
				font-size: 1.25rem;
				font-weight: 700;
			}
			@include bottom-border;
		}
		span.label {
			display: inline-block;
			margin-bottom: 0.625rem;
		}
		div.value, span.value {
			color: #636361;
			font-family: "Roboto", sans-serif;
			font-size: 1.25rem;
			font-weight: normal;
			margin: 0;
		}
		/* last child contains form status */
		> div:last-child {
			span {
				display: inline;
			}
		}
	}
}

ul#evolutions, div#receipt-intro {
	font-size: 1.25rem;
	color: #636361;
}

div#evolution-log h2::before {
	display: block;
	margin: 1.5rem 0;
	content: '';
	max-width: 100%;
	width: 100%;
	height: 0.3125rem;
	background-color: $primary-color;
}

ul#evolutions {
	li span.item {
		background: $primary-color !important;
		color: #ffffff !important;
	}
	&::after, li::after {
		background: $primary-color;
	}
	span.status {
		font-weight: normal;
	}
	div.evolution-metadata {
		padding-top: 15px;
	}
}

input[readonly], select[readonly], textarea[readonly] {
	background: transparent;
	cursor: default;
	box-shadow: none;
	border: 0;
}

input[type="radio"], input[type="checkbox"] {
	& + span {
	margin-left: 0.5rem;
	}
}

.vu-navigation .navigation-line {
	table-layout: fixed;
}

.saml-login-title {
	color: $primary-color;
	font-weight: bold;
}

.saml-login-help-text {
	color: red;
}
