/*Light - 100*/
@font-face {
  font-family: 'DINPro';
  src: url('assets/fonts/DINPro-Light.eot');
  src: url('assets/fonts/DINPro-Light.woff2') format('woff2'),
       url('assets/fonts/DINPro-Light.woff') format('woff'),
       url('assets/fonts/DINPro-Light.ttf') format('truetype'),
       url('assets/fonts/DINPro-Light.svg#DINPro-Light') format('svg'),
       url('assets/fonts/DINPro-Light.eot?#iefix') format('embedded-opentype');
  font-weight: 100;
  font-style: normal;
}
/*Regular - 400*/
@font-face {
  font-family: 'DINPro';
  src: url('assets/fonts/DINPro-Regular.eot');
  src: url('assets/fonts/DINPro-Regular.woff2') format('woff2'),
       url('assets/fonts/DINPro-Regular.woff') format('woff'),
       url('assets/fonts/DINPro-Regular.ttf') format('truetype'),
       url('assets/fonts/DINPro-Regular.svg#DINPro-Regular') format('svg'),
       url('assets/fonts/DINPro-Regular.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
/*Medium - 500*/
@font-face {
  font-family: 'DINPro';
  src: url('assets/fonts/DINPro-Medium.eot');
  src: url('assets/fonts/DINPro-Medium.woff2') format('woff2'),
       url('assets/fonts/DINPro-Medium.woff') format('woff'),
       url('assets/fonts/DINPro-Medium.ttf') format('truetype'),
       url('assets/fonts/DINPro-Medium.svg#DINPro-Medium') format('svg'),
       url('assets/fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype');
  font-weight: 500;
  font-style: normal;
}
/*Bold - 700*/
@font-face {
  font-family: 'DINPro';
  src: url('assets/fonts/DINPro-Bold.eot');
  src: url('assets/fonts/DINPro-Bold.woff2') format('woff2'),
       url('assets/fonts/DINPro-Bold.woff') format('woff'),
       url('assets/fonts/DINPro-Bold.ttf') format('truetype'),
       url('assets/fonts/DINPro-Bold.svg#DINPro-Bold') format('svg'),
       url('assets/fonts/DINPro-Bold.eot?#iefix') format('embedded-opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
	font-family: 'Icons';
	src: url('assets/fonts/Icons.eot?-acgfst');
	src: url('assets/fonts/Icons.eot?#iefix-acgfst') format('embedded-opentype'),
	     url('assets/fonts/Icons.woff?-acgfst') format('woff'),
	     url('assets/fonts/Icons.ttf?-acgfst') format('truetype'),
	     url('assets/fonts/Icons.svg?-acgfst#Icons') format('svg');
	font-weight: normal;
	font-style: normal;
}

div#header {
	padding-top: 20px;
	background: transparent url(assets/img/logo-tournai.png) no-repeat 100% 20px;
	height: 142px;
	padding: 0;
}

#logo a {
	background: url(assets/img/logo-my-tournai-be.png) no-repeat left bottom;
	display: inline-block;
	height: 132px;
	width: 491px;
	background-size: 100%;
	max-width: 100%;
	color: transparent;
}

div#nav {
	margin-top: 25px;
}

div#nav > ul > li a {
	text-transform: uppercase;
	font-weight: normal;
	padding-bottom: 3px;
	padding-top: 1em;
	padding-bottom: 1em;
}

div#nav > ul > li:last-child {
	float: right;
	border-left: 15px solid white;
	a {
		color: #fff;
		background: #555555;
		font-weight: bold;
		text-transform: none;
		&:hover {
			background: #555555;
		}
		&:after {
			font-family: Icons;
			font-weight: normal;
			content: "  \e6df"; /* redo-3 */
		}
	}
}

div#footer-wrapper {
	background: transparent;
	padding: 0;
}

div#footer {
	padding: 1ex 0;
	background: $footer-background url(assets/img/logo-ville-de-tournai.png) 10px 10px no-repeat;
	padding-left: 250px;
	min-height: 190px;
	a {
		color: white;
		&:hover {
			text-decoration: underline;
		}
	}
}

#toplinks {
	box-shadow: none;
	border: none;
	top: 1em;
	left: 0;
	right: auto;
	padding-left: 0;
	padding-top: 0;

	span.login span.sep,
	a.registration {
		display: none;
	}
}

#toplinks a.logout {
	margin-left: 1em;
	color: #565656;
	&:before {
		font-family: Icons;
		content: "\e80f  "; /* lock-3 */
	}
}

div.dashboard-title h1 {
	@extend %title;
}

$dashboard_items: profil, demandes, paiements, porte-documents;

#content div.dashboard-menu ul li {
	font-size: 1.071rem;
	a:hover {
		background: transparent;
		color: $primary-color;
		span {
			color: $primary-color;
		}
	}
	@each $dashboard_class in $dashboard_items {
		&.menu-#{$dashboard_class} {
			background: url(assets/menu-#{$dashboard_class}.png) left center no-repeat;
			background-size: auto 100%;
			a {
				padding-left: 40px
			}
		}
		span {
			color: #2b2b2b;
			padding-left: 10px;
			font-weight: 500;
		}
	}
}

#sidebar {
	border-right: 2px solid #d6d6d6;
	margin-right: 10px;
}

div#gauche + div#rub_service {
	border-left: 2px solid #d6d6d6;
	padding-left: 10px;
}

// Steps
.wcs-step {
	@include desktop-vertical-steps() {
		border-bottom: 1px solid #b4b4b4 !important;
	}
	&--marker {
		font-weight: bold;
	}
	&:not(.current) & {
		&--marker {
			border: 1px solid #b4b4b4;
		}
	}
}

div#tracking-code {
	margin-bottom: 2em;
}

div#tracking-code a {
	display: block;
	font-weight: bold;
	border: 2px solid $primary-color;
}

div#rub_service div.submit-button {
	float: right;
}

.form-content--title,
div#rub_service h2 {
	text-align: left;
	color: $primary-color;
	font-size: 1.857rem;
	font-weight: 500;
	padding-left: 0;
	text-transform: none;
}

#evolutions:after {
	border: none;
	background: none;
	border-left: 1px dashed #aaa;
}

div#content #disclose-dataview {
	color: $primary-color;
	border: 2px solid $primary-color;
	padding: 1ex 3ex;
	display: inline-block;
	font-weight: bold;
	&:hover {
		background: $primary-color;
		color: white;
	}
}

div#evolution-log h2:first-child,
div#summary h2:first-child {
	color: #000;
	font-weight: normal;
	font-size: 1.429rem;
}

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

#content ul#evolutions li span.item {
	border-color: transparent !important;
	background: white !important;
}

ul#evolutions li:after {
	display: none;
}

div#content div.cancel-button button,
div#content div.cancel-button input {
	color: black;
	border-color: black;
	&:hover {
		background: black;
		color: white;
	}
}

input, input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea, select {
	&:focus,
	&:active {
		border-color: $primary-color;
	}
}

div#welcome {
	width: 50%;
	float: left;
	div {
		width: 80%;
	}
	h1 {
		margin: 0;
		font-size: 1.786rem;
		font-weight: 500;
		color: #414042;
		line-height: 110%;
	}
	p#accueil-text {
		text-transform: uppercase;
		margin: 0;
	}
	p.intro {
		margin: 0;
		margin-top: 1ex;
		font-size: 1.286rem;
		font-weight: 100;
		color: #9c9999;
	}

	a {
		font-weight: 500;
	}
	a.button {
		@extend %button;
		margin-left: 2em;
	}
}

div#login-form {
	box-sizing: content-box;
	margin-top: 5ex;
	float: right;
	width: 48%;
	border-left: 2px solid #d6d6d6;
	padding-left: 10px;
	h3 {
		margin-top: 0;
		font-size: 1.571rem;
		font-weight: 500;
	}
	p input {
		width: 90%;
	}
	button,
	input[type=submit] {
		font-weight: 600;
	}
	a {
		color: inherit;
		font-weight: 500;
	}
}

div#login-page input[name=cancel] {
	display: none;
}

form#csam-login img {
	display: none;
}

form#csam-login p {
	font-size: 1.071rem;
}

form#csam-login input {
	background: transparent;
	border: transparent;
	box-shadow: none;
	font-weight: bold;
	padding-left: 0;
	&:hover {
		color: $primary-color;
	}
}

$category-slugs: urbanisme, agenda, associations, commerces, demande-d-actes-et-certificats, emploi, etat-civil, fiscalite, mobilite, population, vie-citoyenne;

#content div.wcsformsofcategorycell {
	position: relative;
	h2:first-child {
		font-size: 1.429rem;
		text-transform: none;
	}
	@each $category in $category-slugs {
		&.#{$category} {
			h2 {
				background: url(img/#{$category}.png) 1ex 50% no-repeat;
				padding-left: 60px;
			}
		}
	}
	li {
		margin: 0 1em;
		a {
			padding-left: 0;
			padding-right: 0;
			&:hover {
				background: transparent;
			}
		}
	}
	div.description,
	div.intro,
	p {
		display: none;
		background: $primary-color;
	}
	ul {
		width: 100%;
		z-index: 1000;
	}
	ul > li:last-child > a {
		border: none;
	}
}

#content div.wcscurrentdraftscell,
#content div.wcscurrentformscell {
	h2:first-child {
		margin-top: 10px;
		font-size: 1.429rem;
		text-transform: none;
		background: url(assets/img/picto-demandes-en-cours.png) bottom left no-repeat;
		padding-left: 60px;
	}
	&.terminees h2:first-child {
		background-image: url(assets/img/picto-demandes-terminees.png);
	}
	a {
		color: #333;
	}
}

#content div.wcscurrentdraftscell {
	h2:first-child {
		background-image: url(assets/img/picto-brouillons.png);
	}
}

@media screen and ($max-mobile-viewport) {
	div#nav {
		margin-top: 10px;
	}
	#logo a {
		height: 100px;
		max-width: calc(100% - 80px);
	}
	#columns-wrapper {
		padding: 0 2ex 0 0;
	}
	div#header {
		height: 100px;
		background-size: 60px;
		background-position: 98% 80%;
	}
	#toplinks {
		left: 1em;
		max-width: none;
	}
	div#nav #nav-button.toggled + ul > li:last-child {
		display: none;
	}
	div#welcome,
	div#login-form {
		float: none;
		width: auto;
	}
	div#login-page.methods2 > div.block:first-child,
	div#login-page.methods2 > div.block {
		float: none;
		width: auto;
	}
}

div.fileinfo a.remove:before {
	color: $primary-color;
}

body.page-bienvenue {
	div#main-content {
		width: 80%;
		margin: 0 auto;
		@media screen and ($max-mobile-viewport) {
			width: auto;
		}
	}
	#content div.textcell h2:first-child {
		text-transform: none;
		font-weight: bold;
	}
	#content #columns div.cell.bloc {
		height: 240px;
		background: #F3F1F1;
		margin-left: 10px;
		margin-right: 30px;
		width: 260px;
		position: relative;
		padding: 20px 40px;
		text-align: center;
		text-transform: uppercase;
		h2 {
			text-transform: uppercase;
			font-size: 1.857rem;
			color: #414042;
		}
		p {
			font-size: 80%;
		}
		a {
			box-sizing: content-box;
			font-size: $font-size;
			text-transform: none;
			width: 160px;
			display: block;
			position: absolute;
			bottom: 30px;
			background: $primary-color;
			color: white;
			padding: 1ex;
		}

		@media screen and ($max-mobile-viewport) {
			width: 100%;
			height: auto;
			a {
				position: static;
				margin: 0 auto;
			}
		}
	}
}

#content div.a2-block.registration {
	width: 80%;
	margin: 2em auto;
	max-width: 80%;
	h2 {
		background: #F3F1F1;
		text-transform: none;
		font-weight: bold;
	}
	form p label {
		margin-right: 2ex;
	}
	form input[type=email] {
		width: 60ex;
	}
	form p,
	div.buttons {
		text-align: center;
	}
	div.buttons {
		input {
			background: $primary-color;
			color: white;
		}
	}
}

div#content div#login-page {
	width: 80%;
	margin: 2em auto;
	max-width: 80%;
	h2 {
		background: #F3F1F1;
		text-transform: none;
		font-weight: bold;
		text-align: left;
	}
	> div.block {
		margin-right: 0;
		margin-bottom: 3em;
		float: none;
		width: 100%;
		form p label {
			display: inline-block;
			margin-right: 1rem;
			width: 20ex;
		}
		form p input {
			width: 60ex;
		}
		> div {
			padding: 0;
		}
	}
	div.buttons {
		text-align: center;
		a {
			display: block;
			margin-bottom: 1em;
		}
		button {
			margin-right: 0;
		}
		button[name="login-password-submit"] {
			background: $primary-color;
			color: white;
			margin-right: 0;
		}
	}
}

div.timetable-widget {
	span.timetable-cell.selectable {
		background: #ffebf6;
		&:hover {
			background: #ffebf6;
			outline: 1px solid $primary-color;
		}
		&.on {
			background: $primary-color;
			color: white;
		}
	}
}
