@font-face {
	font-family: "arlesfont";
	src: url('assets/fonts/typo_arles.eot');
	src: url('assets/fonts/typo_arles.eot?#iefix') format('embedded-opentype'), url('assets/fonts/typo_arles.woff') format('woff'), url('assets/fonts/typo_arles.ttf') format('truetype');
}

@mixin form-icon($content) {
	content: $content;
	font-family: FontAwesome;
	font-size: 1.846rem;
	color: $primary-color;
	position: absolute;
	right: 1ex;
}


div#header-wrapper {
	box-sizing: content-box;
	background: linear-gradient(#003362, #0055a4);
	margin: 0 0 40px 0;
	box-shadow: 0 7px 8px #ccc;
	height: 115px;
	@media only screen and (max-width: $width) {
		background: transparent;
		box-shadow: 0 0 0;
	}
	h1#logo {
		background: url('img/bandeau.png') no-repeat;
		height: 90px;
		a {
			text-indent: -9999px;
			display: block;
		}
		@media only screen and (max-width: $width) {
			background: url('img/bandeau-medium.png') no-repeat;;
		}
		@media only screen and (max-width: $small-screen) {
			background: url('img/bandeau-small.png') no-repeat;;
		}
	}
	div.pre-header {
		box-sizing: content-box;
		height: 35px;
		border-bottom: 10px solid #ffffff;
		background: linear-gradient(#bfbfbf, #ededed);
		font-size: 0.846rem;
		div.login {
			a {
				&::before {
					display: inline-block;
					margin-right: 5px;
					content: ' ';
					background: url("img/picto_cadenas.svg") no-repeat top left;
					background-size: 21px 29px;
					height: 29px;
					width: 21px;
					vertical-align: middle;
				}
			}
		}
		div.arles-link {
			margin: 0px 30px;
			float: left;
			@media only screen and (max-width: $small-screen) {
				display: none;
			}
			@media only screen and ($max-mobile-viewport) {
				margin: 0;
			}
			a {
				font-weight: normal;
				display: inline-block;
				padding: 0;
				height: 21px;
				color: #676767;
				&::before {
					content: ". | ";
					font-family: arlesfont;
					font-size: 1.923rem;
					vertical-align: middle;
				}
				&:hover {
					color: #003362
				}
			}
		}
	}
	div#header {
		padding: 0;
	}
}

.gru-nav-wrapper {
	@media only screen and (max-width: $small-screen) {
		margin-top: -56px;
		margin-left: -1px;
	}
}

div#footer-wrapper {
	background: linear-gradient(#bbb, #fff);
	div#footer {
		padding-top: 20px;
		a {
			text-decoration: none;
		}
	}
}

#toplinks {
	box-shadow: 0 0 0;
	background: transparent;
	border: 0;
	width: $width;
	margin: 0 auto;
	position: relative;
	padding: 3px;
	> span {
		float: right;
	}
	a {
		color: #000;
		font-weight: bold;
		font-size: 0.846rem;
		padding: 3px 0px;
	}
	span.logged-in a:first-child::before {
		display: inline-block;
		margin-right: 5px;
		content: ' ';
		background: url("img/picto_identifie.svg") no-repeat top left;
		background-size: 21px 29px;
		height: 29px;
		width: 21px;
		vertical-align: middle;
	}
	span.login a:first-child::before {
		display: inline-block;
		margin-right: 5px;
		content: ' ';
		background: url("img/picto_cadenas.svg") no-repeat top left;
		background-size: 21px 29px;
		height: 29px;
		width: 21px;
		vertical-align: middle;
	}
	span.sep, a.registration {
		display: none;
	}
}

div#nav li.selected > a {
	background: transparent;
	color: $primary-color;
	border-bottom: 3px solid $primary-color;
}

div#login-page {
	width: 60%;
	min-width: 400px;
	margin: 10px auto;
	border: 1px solid #ccc;
	@media screen and ($max-mobile-viewport) {
		width: 80%;
	}
	@media screen and (max-width: 479px) {
		width: 95%;
	}
	&.methods2 {
		> div.block {
			padding: 0 10px;
			border: none;
			width: auto;
			float: none;
			margin: 0;
			div.separator {
				border-bottom: 1px solid #ccc;
				line-height: 0;
				text-align: center;
				margin: 50px 0;
				padding: 0;
				span {
					background: #fff;
					padding: 0 20px;
					font-size: 120%;
				}
			}
		}
		form {
			width: 260px;
			margin: 0 auto;
			input, button {
				width: 100%;
				margin: 3px 0;
			}
			button.cancel-button {
				background: #ccc;
				color: #4d4d4d;
			}
		}
	}
	h3 {
		color: $primary-color;
		font-size: 1.538rem;
	}
	div.login-actions p {
		text-align: center;
	}
	a.register {
		background: $primary-color;
		color: white;
		width: 260px;
		display: inline-block;
		text-align: center;
		padding: 10px 15px;
	}
}

.menucell .selected {
	font-weight: bold;
}


#profile {
	span.label {
		font-weight: bold;
		font-size: 100%;
	}
}

div.cell.searchcell {
	border: 0;
	input {
		margin-right: 0;
	}
	input, button {
		font-size: 1rem;
		height: 32px;
		line-height: 24px;
		margin: 0.2em 0px;
	}
}

form.combo-search-form {
	box-sizing: content-box;
	width: 300px;
	margin: 0 auto;
	input {
		border: 1px solid #ccc;
		border-radius: 4px 0 0 4px;
		color: #676767;
		font-size: 1rem;
		transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
		&:focus {
			border-color: rgba(82, 168, 236, 0.8);
			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
			outline: 0 none;
		}
	}
	button {
		border-radius: 0 4px 4px 0;
		width: 40px;
		background: linear-gradient(#fff, #e6e6e6);
		border: 1px solid #a2a2a2;
		color: #000;
		overflow: hidden;
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
		border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #a2a2a2;
		padding: 4px 10px;
		&::before {
			font-size: 1.4em;
			content: '\f002';
			font-family: FontAwesome;
			margin-right: 20px;
			color: #555;
		}
	}
}

.combo-search-results {
	width: 60%;
	margin: 0 auto;
	div.links-list ul > li {
		border: 0;
	}
	li div p {
		margin: 0 0 0 2rem;
		font-style: italic;
		color: #4d4d4d;
	}
}

div.error {
	background: transparent url('img/dialog-warning.png') top left no-repeat;
}

.required {
	color: red;
}

div.gru-content {
	.cell.noborder {
		border: none;
	}
	div.cellhome {
		h2:first-child {
			color: #333;
			padding-left: 10px;
			text-decoration: none;
			vertical-align: 5px;
			font-size: 1.154rem;
			font-weight: normal;
			line-height: 22px;
			text-align: left;
			text-transform: uppercase;
			font-family: Georgia,'Times New Roman',Times,serif;
			background: none;
			margin-bottom: 1em;
		}
		grid-1-4 {
			.home-img {
				color:white;
				margin: -7px 0 0 0;
				text-align:center;
				img { width: 50px; height: 50px; }
			}
			@media screen and ($max-mobile-viewport) {
				margin-bottom: 1em;
				&:nth-child(2n) { clear: left; }
			}
		}
		.reg-buttons {
			text-align: center;
			clear: left;
			.bouton {
				width:30%;
				min-width: 170px;
			}
			@media screen and ($max-mobile-viewport) {
				span { display: block; }
			}
		}
	}
	.cancel-button button, .previous-button button,
	.btn-secondaire, button.cancel-button {
		background: #ccc;
		color: #4d4d4d;
		&:hover, &:focus {
			box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.21);
			color: #000;
		}
	}
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	iframe, object, embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/* wheel animation */

@-webkit-keyframes wheel { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); -ms-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
@-moz-keyframes wheel { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); -ms-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
@-ms-keyframes wheel { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); -ms-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
@keyframes wheel { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); -ms-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } }

.wheel {
	animation: 2s linear 0s normal none infinite wheel;
	display: inline-block;
	font-family: arlesfont;
}

.largewheel {
	@extend .wheel;
	font-size: 2.692rem;
	display: block;
	text-align: center;
	margin: 10px;
}

/* custom widget */

div.enquete_satisfaction {
	& div.title {
		margin-bottom: 10px;
	}
	input[type="radio"] {
		margin: 45px 0 0 13px;
	}
	.content {
		& br {
			display: none;
		}
		& label {
			width: 20%;
			display: inline-block;
			background: url('img/satisfaction-0.svg');
			background-repeat: no-repeat;
			background-size: contain;
			height: 40px;
			&:hover, &:focus, &:active {
			  background-image: url('img/satisfaction-0A.svg');
			}
			& span { visibility: hidden; }
		}
		& label ~ label {
			background-image: url('img/satisfaction-1.svg');
			&:hover, &:focus { background-image: url('img/satisfaction-1A.svg'); }
		}
		& label ~ label ~ label {
			background-image: url('img/satisfaction-2.svg');
			&:hover, &:focus {
				background-image: url('img/satisfaction-2A.svg');
			}
		}
		label ~ label ~ label ~ label {
			background-image: url('img/satisfaction-3.svg');
			&:hover, &:focus {
				background-image: url('img/satisfaction-3A.svg');
			}
		}
	}
}

.retourVA {
	a {
		text-decoration: none;
		color: #676767;
	}
}

.adresse {
	border-left: 1px solid #666;
	padding: 0 10px;
}

.separation {
	border-bottom: 1px solid #959595;
	padding-top: 10px;
}

div.error {
	background: none;
	padding-left: 0;
	&::before {
		content: "\f06a";
		font-family: FontAwesome;
		font-size: 2em;
		color: #e91c2a;
		vertical-align: middle;
		margin: 0 17px 0 7px;
	}
}

.error + input, .error + textarea {
	border: 1px solid #E91C2A;
	box-shadow: 0 0 0 3px rgba(221, 0, 0, 0.1) inset;
}

span.helptext, div.hint {
	font-size: 90%;
}

#tipi_form {
	margin: auto;
	width: 300px;
	max-width: 100%;
	input[type="email"] {
		width: 240px;
	}
}


.fileprogress {
	border: none;
	border-bottom: 5px solid #ccc;
	.bar {
		background: transparent;
		padding: 0;
		border-bottom: 5px solid $primary-color;
		line-height: 1.5em;
		margin-bottom: -5px;
	}
}

div.file-upload-widget div.title {
	border-bottom: 2px solid $primary-color;
	font-size: 130%;
	font-weight: bold;
	margin: 1em 0 1em 0;
	padding-bottom: 3px;
}

.minutes {
	&::before {
		content: ' ';
		width: 40px;
		height: 35px;
		background: url('img/5min.svg') no-repeat top left;
		background-size: 35px 35px;
		display: inline-block;
		vertical-align: middle;
	}
}

@each $i in 5, 10, 15, 20 {
	.min#{$i}::before {
		background: url('img/#{$i}min.svg');
		background-size: cover;
	}
}

// WCS Steps
.wcs-step {
	font-size: 1.3em;

	@include desktop-vertical-steps() {
		padding-left: 0;
		&--marker {
			font-size: 1.3em;
		}
		&--label {
			margin-left: 0;
			font-size: 0.7em;
		}
	}


	&.current  & {
		&--marker {
			font-weight: normal;
		}

		&--label {
			@media ($mq-min--wcs-steps-horizontal-layout) and ($max-mobile-viewport) {
				color: $primary-color;
			}
		}
	}
}

li.is-redirection a::after {
	content: "\f14c";
	font-size: 1.846rem;
	color: $primary-color;
	font-family: FontAwesome;
	position: absolute;
	right: 1ex;
}

li.keyword-new {
	a::after {
		@include form-icon("\f024");
	}
	&.required-authentication a::after {
		@include form-icon("\f024 \f023");
		letter-spacing: 1ex;
		margin-right: -0.5ex;
	}
}

li.required-authentication a::after {
	@include form-icon("\f023");
}

div#user-files {
	tr.mime-text, tr.mime-image, tr.mime-audio,
	tr.mime-video, tr.mime-application, tr.mime-application-pdf,
	button.icon-remove-sign {
		&::before {
			font-size: 200%;
		}
	}
	@media screen and ($max-mobile-viewport) {
		td {
			padding: 3px;
		}
	}
}

div.meetings_table {
	div.head {
		padding-bottom: 1ex;
		font-weight: 700;
	}
	span.selectable {
		&.on {
			background: $primary-color;
			color: white;
			border: 1px solid $primary-color;
		}
		&::hover, &::focus {
			background: white;
			color: $primary-color;
			border: 1px solid $primary-color;
		}
	}
	div span {
		display: block;
		cursor: pointer;
		padding: 0.8ex 0;
		margin: 15px 20px;
		font-weight: 700;
		border-radius: 3px;
		color: #797979;
		background: #f5f5f5;
		padding: 5px;
		border: 1px solid #f5f5f5;
	}
	.prev, .next {
		height: 40px;
	}
}

#publik-portal-agent {
	display: none;
}
