$header-width: 1650px;
$header-height: 109px;

%button {
	@extends %button;
	height: 40px;
	border-bottom: 4px solid $secondary-color;
	font-weight: 600;
	font-family: 'Open Sans', sans-serif;
	text-shadow: 1px 1px 1px rgba(0,0,0,.4);
	&:hover {
		border-bottom: 4px solid $primary-color;
	}
	&::before {
		margin-right: 5px;
	}
	&::after {
		margin-left: 5px;
	}
}

body {
	font-family: $font-family;
	background: $third-color;
}

div#main-content-wrapper,
div#nav{
	max-width: $header-width;
}

div#header {
        height: $header-height;
        transition: all 0.3s ease;
        @media screen and (min-width: $header-width) {
                max-width: $header-width;
                left: 50%;
                margin-left: -$header-width/2;
        }
        @media screen and (max-width: $header-width) {
                width: calc(100% + #{$header-width / 19});
                overflow: hidden;
                left: 0;
        }

        @media screen and ($max-mobile-viewport) {
                height: $header-height + 51px;
                left: -78px;
        }
}

#logo {
	display: flex;
	align-items: center;
	height: $header-height;
	a {
		display: inline-block;
		padding-left: 130px;
		height: $header-height - 20px;
		max-width: 421px;
		color: $primary-color;
		font-weight: normal;
		display: flex;
		align-items: center;
		&:hover {
			text-decoration: none;
			font-weight: bold;
		}
	}
	&.has-logo a {
		text-indent: 0;
	}
}

div#nav {
	margin-top: 0;
	margin-bottom: 0;
	> ul {
		margin-top: 0;
		margin-bottom: 0;
	}
	background-color: $primary-color;
	border-top: 2px solid $primary-color;
	border-left: 1px solid $primary-color;
}

div#nav #nav-button .icon-bar{
	background-color: $third-color;
}

div#nav #nav-button + ul li a{
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
	font-size: 1.1rem;
	padding: 15px 15px 15px;
	color: $third-color;
	background-color: $primary-color;
	border-left: 1px solid $primary-color;
	border-right: 1px solid $primary-color;
	border-bottom: 1px dotted $third-color;
}

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

span.required {
	background: transparent url(images/required.png) 0px 0.5ex no-repeat;
	color: transparent;
	margin-left: 1ex;
}

div.widget {
	margin-bottom: 15px;
}

div.widget div.title{
	margin-bottom: 5px;
	font-weight: bold;
}

div#nav #nav-button + ul li {
	&.selected > a {
		background-color: $third-color;
		color:$primary-color;
	}
	&:hover > a {
		background-color: $secondary-color;
		color:$third-color;
		border: 1px dotted $third-color;
		border-top: none;
	}
}

div.message{
	font-style: italic;
	font-size: smaller;
	color: #333333;
}

form h4{
	margin-bottom: 10px;
	margin-left: 5px;
	border-bottom: 2px solid $primary-color;
}

div.gru-content div#rub_service h3,
div#rub_service h3 {
	background-color: $secondary-color;
	color: $third-color;
	padding: 5px;
	font-size: 1.1em;
	margin-top: 0;
}

#footer-wrapper{
	box-sizing: content-box;
	background-color: $primary-color;
	height: 50px;
	color: $third-color;
	a {
		color: $third-color;
	}
}

div#rub_service div.dataview, div#rub_service dl#evolutions,
div#rub_service .drafts-recall, div#rub_service form {
	padding: 0 0.5rem;
}

div.infonotice::before, div.warningnotice::before, div.errornotice::before {
	content: url(dialog-warning.png);
}

@if ($field-on-error-style == custom) {
	div.error{
		font-size: 0.95em;
		color:red;
	}

	.widget-with-error {
		textarea, input, ul input {
			border: 1px solid red;
		}
	}
}

div.widget div.title {
	padding-left: 2px;
	border-left: 2px solid $primary-color;
	padding: 5px 0 5px 15px;
	margin-bottom: 0;
}

div.widget.CheckboxWidget {
	border-left: 2px solid $primary-color;
	padding-left: 5px;
	div.title, div.content {
		border: 0;
	}
	div.title {
		padding: 0 0 0 5px;
	}
}

div.widget div.content {
	border-left: 1px solid $primary-color;
	padding-left: 5px;
	padding-top: 5px;
}

div.buttons div.widget div.content {
	border: none;
}

div.RadiobuttonsWidget div.content {
	padding-left: 20px;
}


div.widget div.content div.widget div.content,
div.widget div.content div.widget div.title,
div.blocChamp div.content div.widget div.content div.widget div.content {
	border: none;
}

div.datetimepicker {
	border:1px solid $primary-color;
}

div.PasswordWidget + br.content {
	display: none;
}

div.a2-block form button {
	min-width: 0px;
}

div.buttons .submit-button button::after {
	content: "➡️";
}
div.buttons .previous-button button::before {
	content: "⬅️";
}
div.buttons .cancel-button button::before {
	content: "⏹️";
}
div#login-page button.cancel-button::before {
	content: "⏹️";
}
div#login-page button.submit-button::before {
	content: "↪️";
}
div.wcs-tracking-code-input button::before,
div#frontend-registration-email button.submit-button::before {
	content: "➡️";
}
div.widget-optional .content button {
	content: "➕";
	padding-right: 10px;
}

/* Bloc & widget */
div.gru-content div.blocChamp button {
	padding-left: 5px;
	height: 25px;
}
div.widget div.content {
	border-width: 2px;
}

div.BlockSubWidget {
	margin-left: 20px;
}

div.BlockSubWidget div.content {
	border-left: 1px solid $primary-color;
}

.form-content--title,
div#rub_service h2 {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-size: 1.2em;
}

div.blocChamp div.content div.widget div.content {
	border-left: 1px solid $primary-color;
}
div.blocChamp div.content div.SubmitWidget div.content {
	border: none;
}

div#toplinks {
	background-color: $primary-color;
	color: $third-color;
}
div#toplinks a {
	color: $third-color;
	font-weight: bold;
}
.gru-content #columns > .cell[class*="grid-"] {
	padding-right: 0px;
}

div.radio-inline {
	overflow: hidden;
}

div.radio-inline div.content {
	float: left;
	clear: none;
}

div.radio-inline div.content label {
	float: left;
	clear: none;
	display: block;
	padding: 0;
	margin-right: 0.5em;
}

div.radio-inline div.content br {
	display: none;
}

div.radio-inline div.content input[type="checkbox"], input[type="radio"] {
	margin-right: 0.2em;
	margin-top: 0.2em;
}

div.CheckboxesWidget.vjf-hidden, div.CheckboxesWidget.hidden {
	display: none;
}

span.bold {
	font-weight: bold;
}

span.colorRed {
	color: red;
}

div.catalogue div.element,
div.ateliers div.atelier {
	clear: both;
	overflow: hidden;
	max-width: 46%;
	margin: 0 1% 20px 1%;
	border-left: 4px solid $primary-color;
	border-top: 4px solid $primary-color;
	display: inline-block;
	min-height: 350px;
}

div.catalogue div.code,
div.ateliers div.code {
	float: left;
	background-color: $primary-color;
	color: $third-color;
	padding: 12px;
	font-weight: bold;
	margin-right: 10px;
}

div.catalogue div.element div.element-title,
div.ateliers div.atelier div.atelier-title {
	min-height: 44px;
	padding-left: 10px;
}

div.catalogue div.element div.element-content,
div.ateliers div.atelier div.atelier-content {
	margin-left: 10px;
}

div.catalogue div.element div.element-content ul,
div.ateliers div.atelier div.atelier-content ul {
	padding-left: 10px;
}

div.catalogue div.element div.atelier-content img,
div.ateliers div.atelier div.atelier-content img {
	max-width: 150px;
	max-height: 150px;
	float: right;
	margin-left: 5px;
}

div.BlockWidget {
	border-left: 2px solid $primary-color;
	div.title, div.content {
		border-left: none;
	}
}

div.link-cell {
	&.pk-button {
		border: none;
	}
	&.vjf-button-bleu ul > li > a {
		border-bottom-color: #003388;
		background-color: #386ede;
		&:hover {
			border-bottom-color: #386ede;
			background-color: #003388;
		}
	}
}