%button {
	@extend %button;
	box-shadow: none;
	font-weight: bold;
	text-transform: uppercase;
	&:hover {
		box-shadow: none;
	}
}

%cancel-button {
	@extend %cancel-button;
	background: white;
	border: 1px solid #ccc;
	color: #666;
	font-weight: normal;
	&:hover {
		background: #eee;
		color: #666;
	}
}

#footer-wrapper {
	background-image: linear-gradient(270deg,#179ad6 40%,#074f78 90%,#053855);
}

div#header-wrapper {
	background: white;
	border-top: 5px solid $darkblue;
	border-bottom: 5px solid #ebedf0;
	div#header {
		position: static;
		height: 101px;
	}
	@media screen and ($max-mobile-viewport) {
		border-top: 0;
	}
	#logo {
		position: absolute;
		left: 10px;
		a {
			display: block;
			background: url(img/logo-header.png) top left no-repeat;
			height: 101px;
			line-height: 101px;
			padding-left: 0px;
			text-indent: -10000px;
			width: 450px;
		}
		@media screen and ($max-mobile-viewport) {
			padding-left: 0px;
			padding-top: 15px;
			a {
				padding-left: 10px;
			}
		}
	}
	#toplinks {
		box-sizing: content-box;
		border: none;
		box-shadow: none;
		border-radius: 0;
		background: $green;
		top: 5px;
		text-transform: uppercase;
		font-size: 0.9rem;
		margin-left: -200px;
		left: 50%;
		right: auto;
		width: 400px;
		text-align: center;
		padding-top: 5px;
		span.logged-in {
			white-space: nowrap;
			display: inline-block;
			a {
				display: inline-block;
				max-width: 200px;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		&::after,
		&::before {
			content: "";
			background: $green;
			transform: skewX(-10deg);
			transform-origin: top left;
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 20px;
			@media screen and ($max-mobile-viewport) {
				content: none;
			}
		}
		&::after {
			left: auto;
			right: -10px;
			transform: skewX(-10deg) scale(1.1);
			background: white;
		}
		@media screen and ($max-mobile-viewport) {
			span.login a {
				display: block;
				padding-bottom: 5px;
			}
		}
		a {
			color: white;
			.connected-user {
				font-weight: bold;
				@media screen and ($max-mobile-viewport) {
					display: block;
				}
			}
		}
		@media screen and ($max-mobile-viewport) {
			top: 0px;
			left: 0;
			right: 0;
			margin: 0;
			width: 100%;
			max-width: none;
			text-align: right;
			.logout {
				padding-left: 1em;
			}
		}
	}
	@media screen and ($max-mobile-viewport) {
		margin-top: 60px;
	}
}

div#nav-wrapper {
	position: absolute;
	top: 5.5rem;
	right: 0rem;
	width: 500px;
	@media screen and ($max-mobile-viewport) {
		width: auto;
		max-width: 100%;
		top: 50px;
		right: auto;
		left: 0px;
	}
	z-index: 1000;
	button {
		background: white;
		position: absolute;
		right: 4rem;
		border-radius: 10px;
		.icon-bar {
			z-index: 10;
		}
		&::after {
			content: "Menu";
			padding-left: 60px;
			font-size: 0.6rem;
			font-weight: normal;
		}
		@media screen and ($max-mobile-viewport) {
			top: 1rem;
			right: auto;
			left: 0;
			&::after {
				content: none;
			}
		}

	}
	#nav > ul {
		border-top: none;
		position: relative;
		top: $nav-menu-side;
		a {
			color: white;
		}
		@media screen and ($max-mobile-viewport) {
			top: 70px;
		}
	}
}

#content {
	margin-top: 1rem;
}

#columns {
	h1 {
		color: $primary-color;
		font-size: 2rem;
		margin: 0 0.5rem;
		@media screen and ($max-mobile-viewport) {
			text-align: center;
		}
	}
}

div#sidebar {
	h1 {
		color: $primary-color;
		font-size: 2.5rem;
		margin: 0 0.5rem;
		line-height: 100%;
	}
}

.gru-content #sidebar div.cell {
	margin-right: 40px;
	@media screen and ($max-mobile-viewport) {
		margin-right: 0rem;
	}
}

#content div.cell.with-borders {
	border: 1px solid #c6c6c6;
	border-radius: 10px;
	h2:first-child {
		padding-left: 1rem;
	}
}

#columns {
	div.textcell {
		h1, h2, h3, h4, p, ul {
			margin-left: 0;
		}
	}
}

div#rub_service {
	form div.buttons {
		display: flex;
		justify-content: space-between;
		button {
			margin-right: 0;
		}
		.submit-button {
			order: 2;
		}
		.savedraft-button {
			display: none;
		}
	}
	form#wf-actions div.buttons {
		display: block;
	}

	div.text-check-before-submit, ul#evolutions, div.gru-content
	#disclose-dataview, div#receipt-intro {
		margin-left: 0.5rem;
	}

	div.section {
		h2 {
			font-size: 180%;
			color: $primary-color;
		}
	}

	ul#evolutions span.status {
		font-weight: normal;
		text-transform: uppercase;
	}

	ul#evolutions li span.item {
		background: white !important;
	}
}

div.back-home-button {
	text-align: center;
	a {
		text-transform: uppercase;
		border: 1px solid #ccc;
		color: #666;
		padding: 0.5rem 1rem;
	}
}

body.has-picture .site-nav::after {
	top: 0;
}

div#rub_service div.dataview, div#rub_service dl#evolutions, div#rub_service form {
	padding: 1ex 0;
}

#footer a {
	color: white;
}

div.dataview span.label,
div.widget div.title label,
form p label {
	font-weight: bold;
	color: $darkblue;
	span.required {
		color: $blue;
	}
}

div.file-upload-widget div.file-button div.widget-message::after {
	color: $darkblue;
}

div#tracking-code {
	h3 {
		margin-bottom: 0;
		padding-bottom: 0;
	}
	a {
		font-size: 100%;
		padding-left: 0;
	}
}

// Steps
@include desktop-vertical-steps {
	.wcs-steps {
		font-size: 1em;
	}
}

/* apa-users cell */
div.apa-user {
	a.apa-user-link {
		background: white url(../somme-cd80/img/profile.png) no-repeat 10px 15px;
		padding-left: 70px;
	}
}

.gru-content {
	%cell-links-list {
		li a:not(.add-more-items--button) {
			padding-left: 1rem;
			&::before {
				position: absolute;
				left: 2px;
				top: 1.2rem;
				content: "\f054";
				font-family: FontAwesome;
				color: $green;
				font-size: 80%;
				padding-right: 0.5em;
			}
		}
	}
}
