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

body {
	font-family: 'Open Sans', Helvetica, sans-serif;
	background: #fff;
}

div#main-content-wrapper,
div#nav{
	max-width: 1140px;
}

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 +10px;
                left: -78px;
        }
}

#logo a {
	display: inline-block;
	background: url(header.png) no-repeat;
	padding-top: 70px;
	min-width: 421px;
	color: white;
	font-weight: normal;
	text-indent: -9999px;
}

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

div#nav #nav-button .icon-bar{
	background-color: $primary-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: 1rem;
	padding: 15px 15px 15px;
	color: #fff;
	background-color: $primary-color;
	border-left: 1px solid $primary-color;
	border-right: 1px solid $primary-color;
	-webkit-border-radius: 0px 25px 0px 0px;
	-moz-border-radius: 0px 25px 0px 0px;
	border-radius: 0px 25px 0px 0px;
}
div#nav #nav-button + ul li.selected > a, div#nav #nav-button + ul li:hover > a {
	background-color: $primary-color;
}

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

span.required {
	background: transparent url(required.png) 0px 0.5ex no-repeat;
	color: transparent;
	padding: 0 0 0 24px;
	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, div#nav #nav-button + ul li:hover > a{
	/*background-color: $primary-color;
	color:#fff;*/
	background-color: #fff;
	color:$primary-color;
}

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: #1ba39c;
	color: #fff;
	padding: 5px;
	font-size: 1em;
}

#footer-wrapper{
	box-sizing: content-box;
	background-color: $primary-color;
	height: 50px;
	padding: 30px 0;
	color: #fff;
}
#footer-wrapper	a{
	color:#fff;
}

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

div.error{
	font-size: 0.95em;
	color:red;
}

div.error + textarea, div.error + input,div.error + 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.buttons .submit-button button,
div.buttons .previous-button button,
div.buttons .cancel-button button,
div.gru-content button,
div.SubmitWidget .content button ,
div#login-page button,
div#frontend-registration-email button,
div.wcs-tracking-code-input button {
	height: 40px;
	background: linear-gradient(to bottom, #23a7a0 0%,$primary-color 100%);
	border: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: relative;
	border-bottom: 4px solid #045d58;
	color: #ffffff;
	font-weight: 600;
	font-family: 'Open Sans', sans-serif;
	text-shadow: 1px 1px 1px rgba(0,0,0,.4);
	text-align: left;
	transition: none;
	text-indent: 5px;
	cursor: pointer;
	margin: 0 auto;
	padding: 0px;
	padding-right: 30px;
}

div.buttons .submit-button button::after,
div.buttons .previous-button button::before,
div.buttons .cancel-button button::before,
div#login-page button::before,
div#frontend-registration-email button.submit-button::before,
div.wcs-tracking-code-input button::before {
	display: block;
	position: absolute;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 0px;
	padding-right: 5px;
	top: 9px;
}
div.a2-block form button {
	min-width: 0px;
}
div.buttons .submit-button button::after ,
div.buttons .previous-button button::before,
div#login-page button.submit-button::before,
div#frontend-registration-email button.submit-button::before,
div.wcs-tracking-code-input button::before {
	background-color: #045d58;
}
div.buttons .submit-button button::after {
	content: "➡️";
	right: 2px;
}
div.buttons .previous-button button::before {
	content: "⬅️";
	left: 2px;
}
div.buttons .cancel-button button::before {
	content: "❌";
	left: 2px;
}
div#login-page button.cancel-button::before {
	content: "🛑";
	left: 2px;
}
div#login-page button.submit-button::before {
	content: "↪️";
	left: 2px;
}
div.wcs-tracking-code-input button::before,
div#frontend-registration-email button.submit-button::before {
	content: "➡️";
	left: 2px;
}
div.widget-optional .content button {
	content: "➕";
	padding-right: 10px;
}

div.buttons .cancel-button button,
div.buttons .previous-button button,
div#login-page button,
div#frontend-registration-email button,
div.wcs-tracking-code-input button {
	padding-left: 25px;
	padding-right: 10px;
}

form.quixote div.buttons {
	display: flex;
}

div.buttons div.cancel-button {
	order: 1;
}

div.buttons div.submit-button {
	order: 2;
}

div.buttons div.previous-button {
	order: 0;
}
div.buttons div.savedraft-button {
	order: 4;
}


/* 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: #ffffff;
}
div#toplinks a {
	color: #ffffff;
	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: #ffffff;
	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;
}
