@charset "UTF-8";

@import "../../publik-base-theme/static/includes/fonts/opensans";

/* First for IE 4–8 */
@font-face {
	font-family: DINWeb;
	src: url("fonts/DINWeb.eot");
}

/* Then for WOFF-capable browsers */
@font-face {
	font-family: DINWeb;
	src: url("fonts/DINWeb.woff") format("woff");
}

div#page div#main-content-wrapper {
	margin-top: 0px;
	@media screen and ($max-mobile-viewport) {
		margin-top: 10px;
	}
}

footer {
	div.textcell a {
		color: #b3b3b3;
		&:hover {
			text-decoration: none;
			border-bottom: 1px solid white;
		}
		&.logo-together-footer,
		&.logo-liege-footer {
			&:hover {
				border: none;
			}
		}
	}
	@media screen and ($max-mobile-viewport) {
		div.textcell.bloc-adresse {
			padding: 0 40px;
		}
	}
}

#receipt-intro a {
	color: $href-color;
	font-weight: bold;
	text-decoration: underline;
}

div#content a#disclose-dataview {
	display: none;
}

div.dataview {
	display: block;
}

/* Nouvelle class*/
#main-content ul li a:hover {
	color: $highlight-text-color !important;
}

a {
	text-decoration: none;
}

/* surcharge*/
div#services > ul > li,
div.a2-block,
#content div.cell,
div.block {
	text-align: left;
	background: white;
	border-radius: 3px;
	border: 0px;
}

/* resize text input for "nb_exemplaire" field*/
.nb_exemplaire input {
	width: 60px;
}

/* surcharge*/
div#rub_service div.category ul a,
div#services > ul > li > ul a,
div#account-management ul a,
div.categoriescell ul a,
div.wcsformsofcategorycell ul a,
div.wcscurrentdraftscell ul a,
div.wcscurrentformscell ul a {
	padding: 1em;
	display: block;
	border-bottom: 0px !important;
	position: relative;
}

div#gauche,
div#rub_service,
div#rub_service h2,
div#gauche + div#rub_service {
	margin-top: 0px;
}

div#tracking-code h3 {
	border: 0;
	background: none;
	display: inline-block;
	text-transform: uppercase;
	font-size: 100%;
	font-weight: bold;
	color: #666;
	padding-bottom: 0;
	&::after {
		content: " :";
	}
}

div#tracking-code a {
	display: inline-block;
	font-size: 130%;
}

label[for="id_username"]::before,
label[for="id_email"]::before {
	content: url("images/icone_user.png");
	visibility: visible;
}

label[for="id_username"] {
	visibility: hidden;
	width: 54px;
	height: 1px;
}

[for="id_username"],
#id_username {
	float: left;
}

label[for="id_password"]::before {
	content: url("images/icone_cadenas.png");
	visibility: visible;
}

label[for="id_password"],
label[for="id_email"] {
	visibility: hidden;
	width: 54px;
	height: 1px;
}

[for="id_password"],
#id_password,
[for="id_email"],
#id_username {
	float: left;
}

input[value="Connexion"] {
	background: url("images/fleche_epaisse_droite.png") no-repeat top center
		transparent;
	color: #ed226c;
	font-size: 70%;
	box-shadow: none;
	border: none;
	float: right;
	padding-top: 35px;
	text-transform: uppercase;
	position: absolute;
	right: 0;
	bottom: 1ex;
	height: auto;
}

input[value="Connexion"]:hover {
	box-shadow: none;
}

label[for="id_username"]::before,
label[for="id_password"]::before,
label[for="id_email"]::before {
	margin-left: 31px;
	margin-top: 8px;
	position: relative;
	visibility: visible;
	z-index: 1;
}

.form-field-required label:after {
	content: "*";
	color: #d90024;
	padding-left: 1ex;
	font-size: 80%;
}

div#rub_service div.form-validation div.page {
	background: transparent;
	padding-left: 0;
	> h3 {
		color: #be0d67;
		border-bottom: 2px solid #e2e2e2;
		font-size: 120%;
		margin-bottom: 0.5em;
	}
}

#messages li,
div.infonotice,
div.warningnotice,
div.errornotice {
	background: #e6f5fc;
	color: #f2f2f2;
}

#messages li,
div.infonotice,
div.warningnotice,
div.errornotice {
	background: #e6f5fc;
	color: #666768;
}

#messages li::before,
div.infonotice::before,
div.warningnotice::before,
div.errornotice::before {
	font-family: FontAwesome;
	font-size: 2em;
	left: 0.5em;
	position: absolute;
	top: 0.25em;
	color: $highlight-text-color;
}

div#rub_service h2 {
	text-align: left;
	border-radius: 0px 0px 0px 10px;
	background: linear-gradient(to right, #f6f6f6, white);
}

/* Remove border on fields validate form page */
input[readonly],
select[readonly],
textarea[readonly] {
	border-width: 0;
	padding-left: 0;
	padding-top: 0;
}

label {
	font-size: 1.2em;
	margin-bottom: 0;
}

/* profile page */
.page-profil ul#id_title > li {
	list-style-type: none;
}

.authentic-page.account-page #content {
	.column:first-child {
		float: right;
		width: calc(100% - 350px);
	}
	.column:last-child {
		float: left;
		width: 300px;
	}
	@media screen and ($max-mobile-viewport) {
		.column {
			float: none;
			width: auto;
		}
	}
	#account-management {
		h2 {
			background: $primary-color;
			color: white;
		}
		ul > li {
			a {
				background: #f5f6f6;
			}
			margin: 4px 0;
		}
	}
	#a2-profile {
		span.label {
			clear: both;
			float: left;
			width: 15rem;
			display: inline-block;
			@media screen and ($max-mobile-viewport) {
				float: none;
				width: auto;
			}
		}
	}
}

.page-profil .form-field-required {
	margin: 0 auto;
	padding-bottom: 1ex;
}

.page-profil .a2-block p {
	display: block;
	margin: 1em auto;
}

/* Libellé du profile (auth) et valeur alignée*/
#profile dt {
	color: #666666;
	float: left;
	font-size: 100%;
	width: 40%;
}

#profile dd {
	font-weight: bold;
}

/*Boutton "commander un autre document"*/
a#workflow-button-command {
	vertical-align: middle;
	float: left;
	display: block;
	font-size: 1.2em;
	font-weight: normal;
	color: #be0d67;
	background-color: white;
	width: 200px;
	height: 3em;
	line-height: 1.5em;
	padding: 1px;
	border: solid #be0d67 1px;
	border-radius: 10px;
	text-align: center;
	text-decoration: None;
}

/*Bouton "Valider votre commande"*/
a#workflow-button-paid {
	vertical-align: middle;
	float: left;
	margin-right: 20px;
	margin-left: 24%;
	display: block;
	font-weight: normal;
	color: white;
	background-color: #be0d67;
	width: 200px;
	height: 3em;
	line-height: 2.5em;
	padding: 1px;
	border: solid #be0d67 1px;
	border-radius: 10px;
	text-align: center;
	text-decoration: None;
	@media screen and ($max-mobile-viewport) {
		margin-left: 0;
	}
}

/* Keep border style solid for table presentation in last forms validation page*/
.form-validation .TableListRowsWidget table td {
	border: 1px solid black;
}

/* Align label for error connexion*/

.page-profil input[type="submit"]:hover {
	box-shadow: none;
	opacity: 0.7;
}

/* When a profile data is empty, we create a new line for next "print field"*/
#profile dl > dd > ul {
	display: inline;
}

/* In forms title*/
div.widget div.title {
	font-weight: bold;
}

/* In forms h4 style (see first word "Traitement" in certif cohab legale)*/
h4 {
	font-weight: normal;
	text-transform: uppercase;
}

/* Change size for button => usefull for "delete" draft form button*/
.fargo-pick-popup button,
div#content button {
	height: 100%;
}

/* Class css qui peut servir à rendre invisible un champs en fonciton d'une valeur testée dans extra.js*/
.invisible {
	display: None;
}

/*Style for new undo BUTTON with 'submit' class*/
div.a2-block .submit {
	background: #be0d67 none repeat scroll 0 0;
	border: 1px solid transparent;
	box-shadow: 1px 0 5px rgba(0, 0, 0, 0.21);
	color: white;
	cursor: pointer;
	height: 2.5em;
	margin-right: 2ex;
	padding: 5px 15px;
	transition: all 0.2s ease 0s;
	vertical-align: middle;
	width: 12em;
}

/* in forms' page : format word "TRAITEMENT" */
form.quixote > div > p > u:first-child {
	text-transform: uppercase;
	text-decoration: none;
}

.page-profil #Mot_de_passe input[name="cancel"] {
	display: None;
}

/*Formulaire*/

div.a2-block form input[type="submit"] {
	margin-top: 1.5em;
}

div#gauche {
	width: 25.5%;
}

div#gauche + div#rub_service {
	padding-left: 2em;
	width: 74.5%;
}

.comment-field {
	margin-bottom: 2em;
}

.comment-field li {
	line-height: 1.5em;
	margin-bottom: 1em;
}

#var_rb_concerne .content {
	margin-top: 0.75em;
}

.title > label {
	display: inline-block;
	padding-bottom: 0em;
}

#content #columns {
	max-width: 100%;
}

/* correct a bug in first eId connexion with profile form */
.form-field-required label[for="id_email"]::before {
	content: None;
	visibility: hidden;
}

.form-field-required #id_email {
	border: 1px solid #aaa;
	border-radius: 0px;
	margin-top: 6px;
	padding-left: 2em;
	width: 100%;
}

.form-field-required label[for="id_email"] {
	height: 20px;
	visibility: visible;
	width: 100%;
}
/* END correct a bug in first eId connexion with profile form */

/* Style alert if error on field*/
.form_field_alert {
	background: url("images/alert.jpg") no-repeat left top;
	background-size: 13px 13px;
	padding-left: 18px;
	color: red;
}
/* END Style alert if error on field*/

/* New link color to highlight them.*/
a {
	color: #be0d67;
}

a:hover {
	text-decoration: underline;
}
/* END of highlight links*/

/*Mise en apge "porte-documents" sur page d'acceuil*/
a.icone-porte-documents {
	background-image: url("images/icone_porte-documents.png");
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	width: 100%;
	height: 125px;
}
/*END Mise en page "porte-doc..."*/

/*Index page*/
div#columns > div.column:first-child div.jq_txt_connexion > div > div > h2 {
	background-color: transparent !important;
	box-shadow: None !important;
}

/* Form validation page : reduce margin between page*/
div.form-validation div.page {
	margin-bottom: -1.7em;
}
/* End of Form validation page ... */

div#tracking-code {
	display: none;
}
div#tracking-code h3 {
	display: none;
}
div#tracking-code a {
	display: none;
}

div#receipt-intro > p#tracking-code {
	display: none;
}

div.list-of-forms span.form-status {
	position: relative;
	right: 1ex;
	display: block;
	text-align: right;
}

select {
	-moz-appearance: menulist !important;
	-webkit-appearance: menulist !important;
}

/*End Index page*/

a#publik-portal-agent {
	top: 62px;
	right: 0;
}

div.widget table input,
div.widget table select {
	width: 100%;
}

/* Rentre un champs invisible grace aux styles complementaires*/
form.quixote div.hidden,
div.invisible {
	display: none;
}

div.list-of-forms {
	span.form-title {
		width: 100%;
		font-weight: bold;
		padding-left: 20px;
		background: url(images/form_puce.png) 0px 4px no-repeat;
		background-size: 12px;
	}
	span.form-number {
		padding-left: 20px;
		opacity: 0.7;
	}
}

@media screen and ($max-mobile-viewport) {
	body.focus-in .site-nav {
		display: none;
	}
}

div.carrousel {
	strong {
		@extend %title;
		color: white;
	}
	a:hover {
		text-decoration: none;
	}
	margin-bottom: 1rem;
}

div#content div.wcsformsofcategorycell {
	position: relative;
	margin-bottom: 25px;
	@media screen and ($max-mobile-viewport) {
		margin: 0px;
		border-bottom: 3px solid white;
	}
	h2 {
		position: relative;
		z-index: 10;
		background: rgba(0, 0, 0, 0.5);
		color: white;
		padding-top: 50px;
		height: 130px;
	}
	&.foldable {
		@media screen and ($max-mobile-viewport) {
			h2 {
				padding-right: 50px; // for folding arrow
			}
		}
		h2::after {
			font-size: 30px;
		}
	}
	&.folded picture,
	picture {
		display: block;
		position: absolute;
		top: 0;
		width: 100%;
		height: 130px;
		overflow: hidden;
		img {
			padding: 0;
		}
	}
	div.intro,
	div.description {
		display: none;
	}
	ul {
		background: white;
	}
	ul > li {
		background: url(images/form_puce.png) 10px 50% no-repeat;
		background-size: 10px 10px;
		a {
			padding-left: 30px;
		}
		&.add-more-items {
			background: none;
		}
		&.required-authentication a,
		&.required-fedict-authentication a {
			// Add a lock next to required authentication forms
			background: url(images/form_lock.svg) right 10px top 50% no-repeat;
			background-size: 15px;
			padding-right: 30px;
		}
		&.required-fedict-authentication a {
			background-image: url(images/beid_image_mini.png);
			background-size: 30px;
			padding-right: 45px;
		}
	}
	ul > li.add-more-items a {
		padding-left: 0;
	}
	border: none;
	& > div > div {
		position: relative;
		z-index: 10;
		margin: -10px 1rem 0 1rem;
		li {
			margin-bottom: 0px;
			a {
				border: none;
			}
		}
	}
}

@media screen and ($max-mobile-viewport) {
	div.gru-nav span.badge::before {
		content: none;
	}
	div.gru-nav span.badge::after {
		content: none;
	}
}

.back-home-button {
	clear: both;
}

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

	&--label {
		font-weight: normal !important;
	}
	&--marker-nb {
		font-size: 1.2em;
	}
	@include desktop-vertical-steps() {
		padding-left: 0;

		&:not(.current) {
			border: 1px solid #aaa;
		}

		&--label {
			margin-left: 0;
		}
		&--marker-nb {
			font-size: 1.4em;
		}

		// Tie
		&::after {
			z-index: -1 !important;
			top: 50% !important;
			left: calc(
				(#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2
			) !important;
		}
	}
}

/* fix open street map leaflet over pwa menu problem */
@media screen and (max-width: 800px) {
	.site-nav {
		z-index: 1001;
	}
}

// Fix login button

input[value="Connexion"]:hover {
    box-shadow: none;
    background: url("images/fleche_epaisse_droite.png") no-repeat top center transparent;
    color: white;
    background-color: #3a001d;
}

// fix footer href color not visible

#footer-wrapper a {
    color: white;
}

// fix key icon on lock
li.required-authentication a:after {
    content: none;
}
