// -----------------------------------------------------
//                 ENTETE DE PAGE
// -----------------------------------------------------

#nav-skip a[href="#nav"],
.site-nav {
	display: none;
}

#header-wrapper {
	height: 28px;
	margin-bottom: 90px;
}

#header {
	@media (max-width: $mobile-limit) {
		margin-top: 5em !important;
	}
}

#rub_service  {
	a {
		text-decoration: underline;
	}
}

a:hover {
	text-decoration: underline;
}

// Liens de connexion / vos démarches / déconnexion
#toplinks {
	background: black;
	padding: 0.8em;
	border-radius: 0;
	border: 0;
	box-shadow: none;
	.logged-in {
		.toplinks--list-item:first-child a::after {
			content: "|";
		}
		.logout {
			margin-left: 0.7em;
		}
	}
	a {
		color: white !important;
	}

	@media (max-width: $mobile-limit) {
		top: -5em;
	}
}

// Bouton "Portail agent" décalé en bas à droite
a#publik-portal-agent {
	color: black;
	background: $ds44-LA;
	border: 1px solid grey;
	top: 33px;
}

#bandeau {
	background-image: url('images/loire_atlantiquefr.png');
	background-repeat: no-repeat;
	background-position: 0 0;
	width: 304px;
	height: 35px;
}

div.to-the-right {
	text-align: right;
	padding-right: 0;
}

#logo-demarches {
	margin-top: 20px !important;
	img {
		height: 3em;
	}
	@media (max-width: $mobile-limit) {
		padding-left: 0 !important;
	}
}

// Portail usager

html, body {
	color: black;
	background-color: white;
}

.central-content div.a2-block h2, .central-content .block h2 {
	border-bottom: 1px solid #ccc !important;
}

#content {

	a {
		text-decoration: underline;
	}

	div.cell a, a.button, a.form-title, div.back-home-button a {
		text-decoration: none;
	}

	div.cell a:hover, a.button:hover, a.form-title:hover, div.back-home-button a:hover {
		text-decoration: underline;
	}

	#sidebar {
		@media screen and (min-width: $mobile-limit) {
			margin-right: 4ex;
			margin-top: 4ex;
		}
	}

	#panneau-code-suivi {
		background-color: $ds44-lightgray !important;
	}

	#panneau-code-suivi, #tracking-code {
		padding: 10px;

		a {
			text-decoration: underline;
		}

		h2:first-child {
			top: 0;
			left: 0;
			width: auto;
		}

		h3:first-child {
			padding: 5px;
		}

		.wcs-tracking-code-input h2:first-of-type, h3:first-of-type {
			background-color: $ds44-lightgray !important;
			font-family: $title-ff;
			font-weight: bold;
			border-bottom: 1px solid #ccc !important;
			font-size: 28px !important;
		}

		button {
			margin-right: 0 !important;
			height: 3em;
			padding: 10px;
		}

		form {
			text-align: center;
			margin-bottom: 10px;
			p {
				text-align: left;
			}
		}
	}
}

#tracking-code {
	margin-bottom: 3ex;
	a:first-of-type {
		display: block;
		text-align: center;
		margin: 10px;
		padding: 0;
	}
	@media (max-width: $mobile-limit) {
		width: 140px;
	}
}

#a2-profile {
	div.field {
		margin-bottom: 20px;
	}
	span.label {
		display: block;
		font-weight: bold;
		margin-bottom: 5px;
	}
}

h1.maintitle, h1.form-content--title {
	font-family: $title-ff;
	font-weight: bold;
	font-size: 35px;
	border-bottom: solid 1px #ccc !important;
}

.demarches-brouillon, .demarches-encours, .demarches-terminees {
	border: solid 2px $ds44-LA !important;
	div {
		h2 {
			background-color: $ds44-lightgray !important;
			background-position: bottom 11px left 10px !important;
		}
	}
}

.demarches-brouillon {
	h2 {
			background-image: url('images/picto_brouillon.png') !important;
	}
}

.demarches-encours {
	h2 {
		background-image: url('images/picto_encours.png') !important;
	}
}

.demarches-terminees {
	h2 {
		background-image: url('images/picto_terminee.png') !important;
	}
}

.demarches-brouillon, .demarches-encours, .demarches-terminees {
	border: solid 2px $ds44-LA !important;
	h2 {
		font-family: $title-ff;
		font-weight: bold;
		font-size: 28px !important;
		border-bottom: 0 !important;
		border-bottom: 2px solid $ds44-LA !important;
		background-size: 30px !important;
		background-repeat: no-repeat !important;
		background-position: bottom 19px left 10px !important;;
		padding-left: 50px !important;
		display: block !important;
	}
	p.zero-form {
		padding: 1rem;
	}
	.list-of-forms {
		a {
			.form-number {
				position: absolute;
				right: 1ex;
				opacity: 1;
			}
			.form-status {
				margin-top: 2em;
			}
		}
	}
}

button.cell-items-pagination-prev:disabled, button.cell-items-pagination-next:disabled {
	background-color: #BBBBBB !important;
}

div.buttons.submit {
	div.submit-button {
		float: right;
	}
	div.cancel-button {
		display: none;
	}
	button {
		font-size: 15px;
	}
}

// -----------------------------------------------------
//             INTRODUCTION SI NON CONNECTE
// -----------------------------------------------------
#intro-text-non-connecte {
	p {
		text-align: center;
		margin-top: 30px;
	}
}

// -----------------------------------------------------
//                 PAGE DE CONNEXION
// -----------------------------------------------------

#login-page {

	background-color: $ds44-LA;
	@media ($min-desktop-viewport) {
		padding: 10px;
	}

	.connexion-title {
		padding: 10px;
		img { height: 30px; }
		h1 {
			display: block;
			font-family: $title-ff;
			font-weight: bold;
			font-size: 32px;
			font-weight: bold;
			margin: 7px;
			padding-bottom: 10px;
			border-bottom: 1px solid #ccc;
		}
	}

	.block {
		background-color: $ds44-LA;

		h2 {
			background-color: transparent;
			font-weight: bold;
			border-bottom: none !important;
		}
	}

	@media ($min-desktop-viewport) {
		&.methods1 > .block {
			width: 50%;
			width: calc(50% - 2em);
			margin: 0;
			margin-right: 2em;
			float: left;
		}
		&.methods2 > .block {
			width: calc(33% - 2em);
		}
	}

	// hack to remove duplicate title
	.block-password > h2 + h2 {
		display: none;
	}

	// Separator
	& > .block + .block {
		@media ($min-desktop-viewport) {
			border-left: dotted 1px black;
			padding-left: 2rem;
		}
	}

	button.submit-button:hover {
		text-decoration: underline !important;
	}

	button.cancel-button {
		display: none;
	}

	#register-account {
		p {
			display: block;
			margin: 10px auto;
		}
	}

	// Bouton connexion agent
	#oidc-a-keycloak-agents {
		display: block;
		height: 35px;
		background-color: white;
		color: black;
		border: solid 1px black;
	}
}

#login-page-encart {
	padding: 10px;
	margin-top: 30px;
	margin-bottom: 30px;
	border: solid 1px $ds44-LA !important;
}

// Création d'un compte
// Suppression des puces devant les listes (ex. sur civilité)

ul#id_title {
	list-style: none;
}

#registration-blocks h2 {
	font-size: 1.4rem;
	font-family: $title-ff;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
}

// -----------------------------------------------------
//                 CORPS DE LA PAGE
// -----------------------------------------------------

@media (max-width: $mobile-limit) {
	input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], textarea, select {
		width: 100% !important;
	}
}

// Champs input
// Style CSS désactivé, car imppossible de recoder les styles des cases à cocher et boutons radio
// dans le socle Publik, car les champs n'ont pas de balise 'label', or le design system en a besoin :
// "Pour des questions de design, les cases à cocher et boutons radios ont été refaits via CSS. 
// Ce qui impose une façon de coder : les inputs checkbox ou radio doivent obligatoirement être 
// codés à gauche du label dans le HTML, sans aucune balise entre les deux."
// cf https://design.loire-atlantique.fr/components/form.html
// input, textarea,  {
//     border: 1px solid $gray-dark;
//     border-radius: 3px;
// }

#rub_service {
	p, label, input {
		font-size: 15px;
	}
	div.hint p, div.hint ul, div.hint li, div.hint span {
		font-size: 14px !important;
	}

	div.rouge label.field--label {
		color: red;
	}

	div.file-upload-widget div.file-button div.widget-message.upload-done::after {
		color: green;
	}

}

#tracking-code.has-discard-button {
	padding: 0 !important;
}

#content p {
	line-height: 1.5em;
}

.text-check-before-submit p {
	font: normal 18px Arial !important;
}

#evolutions:after {
	background: black;
	top: -1em;
	height: 100%;
}

ul#evolutions li span.item {
	border-color: black;
	background: white !important;
	color: black !important;
	line-height: 36px;
}

ul#evolutions li:after {
	background: $primary-color;
}

ul#evolutions div.evolution-metadata {
	text-transform: uppercase;
}

#evolutions .msg-system {
	padding-top: 0;
}

ul#evolutions span.time {
	color: black;
	line-height: 2.0em;
}

ul#evolutions span.user {
	display: block;
	opacity: 1;
}

// Etapes

.wcs-step {
	margin-bottom: 0;
	border-bottom: 1px solid $gray-dark;
}

.wcs-step.current {
	background-color: $ds44-LA;
}

.wcs-step.current .wcs-step--marker, .wcs-step.current .wcs-step--label {
	color: black
}

.wcs-step.step-before, .wcs-step.step-after, .wcs-step--marker {
	color: black;
}

// Boutons

div#content {
	.submit-button button, .previous-button button, .cancel-button button, .savedraft-button button {
		font-weight: bold;
	}

}

a.button {
	display: block;
	background: black;
	color: white;
	font-weight: bold;
	width: 14rem;
	height: 2.2rem;
	padding-top: 0.5rem;
	text-align: center;
	margin: 1rem auto
}

// CHAMPS DE FORMULAIRE

div#gauche {
	width: 17%;
}

#steps-mobile {
	display: none;
}

div#steps {
	background-color: #ececec;
	padding: 5px;
	border: solid 2px $primary-color;
	ol {
		color: #4e4e4e;
		li span.marker {
			font-size: 18px;
		}
	}
	@media (max-width: $mobile-limit) {
		display: none;
	}
}

div.back-home-button {
	text-align: center;
}

div.back-home-button a, a#disclose-dataview {
	background: black;
	color: white;
	padding: 5px 15px;
	cursor: pointer;
	border: 1px solid transparent;
	transition: all 0.2s ease;
	margin-right: 2ex;
	height: 1.8em;
	vertical-align: middle;
	box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.21);
}

a#disclose-dataview {
	padding-top: 8px !important;
	width: 230px;
	text-align: center;
}

div#rub_service {

	h2:first-of-type {
		text-align: left;
		font-family: $title-ff;
		font-weight: bold;
		font-size: 32px !important;
		font-weight: 400;
		padding: 0 0 0.5ex 0;
		margin-bottom: 20px;
		background: none;
		border-bottom: 1px solid #ccc;
		border-top: 0;
	}

	li {
		margin-bottom: 3px;
		font-size: 15px;
	}

	input[type="radio"] {
		margin: .5em;
	}

	input[type="checkbox"] {
		margin: .5em;
	}

	.title label {
		display: block;
		margin-bottom: 3px;
		font-weight: bold;
	}
}

#rub_service form h3 {
	font-family: Arial;
	font-size: 20px;
	padding-top: 1.5rem;
	margin-top: 1.5rem;
	border-top: 1px solid #ccc !important;
}

#rub_service form h3:first-of-type {
	border: 0 !important;
	margin-top: 0;
}

#rub_service form h4 {
	font-size: 18px;
}

span.helptext, div.hint {
	font-size: 100%;
	font-style: italic;
}

#colums wcscurrentdraftscell, #colums .wcscurrentformscell, #colums wcscurrentformscell {
	border: solid 2px $primary-color;
}

span.required {
	top: 0 !important;
	color: red !important;
	font-weight: bold !important;
	font-size: 1.5em !important;
	line-height: .5em !important;
}

div.grandlibelle div.title label {
	font-size: 18px !important;
	margin-bottom: 1ex !important;
}

// PAGE RECAPITULATIF DE LA SAISIE

div.form-validation form div.page input {
	color: rgb(40, 40, 40);
}

// PAGE SUIVI DE LA DEMANDE
div.dataview {
	margin-left: 2.5ex;
	margin-bottom: 3ex;
}

div.section.foldable span.disclose-message {
	font-size: 1.5rem !important;
}

#cd44-contact {
	border: 2px solid lightgrey;
	text-align: center;
	width: 400px;
	margin: 30px auto 30px auto;
	@media screen and (max-width: $mobile-limit) {
		width: 100%;
	}
}

.infonotice, .pk-information, .pk-information.cell, #messages {
	background-color: $ds44-LA;
}

// POUR CACHER DES ELEMENTS
.cd44-hidden {
	display: none;
}

// -----------------------------------------------------
//                     MODALES
// -----------------------------------------------------
#cd44-modal-container {
	width:90%;
	height: 90%;
	margin-top: 5%;
	margin-left: 5%;
	background-color: rgba(255, 255, 255, 1);
	border: 1px solid #111111;
	box-shadow: 2px 2px 40px #222;
	z-index: 1;
}
#cd44-modal-block {
	background-color: rgba(100, 100, 100, 0.6);
	position: fixed;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	display:none;
}
#cd44-modal-container h3 {
	font-size: 26px;
	padding:18px;
	border-bottom: 1px solid #CCC;
}

// Modales pour zoom images
.dp44-modal {
	display: none;
}

div.ui-dialog .ui-dialog-titlebar {
	background-color: $primary-color !important;
	color: $title-color !important;
}

.ui-icon, .ui-widget-content .ui-icon {
	background-image: url("/static/xstatic/images/ui-icons_222222_256x240.png") !important;
}

// -----------------------------------------------------
//                   PIED DE PAGE
// -----------------------------------------------------

footer {

	// fond du pied de page
	font-family: $font-family;
	font-size: 12px;
	background: #e6e6e6;
	margin-top: 2ex;

	// par défaut le wrapper une couleur de fond gris sombre
	#footer-wrapper {
		background: none;
		//padding: 0;
	}

	// Liens
	// -----------------------------------------------------

	#logo-loire-atlantique {
		text-align: right;
		padding-right: 0;
		@media (max-width: $mobile-limit) {
			padding: 3ex 3ex 0 0 !important;
		}
	}

	ul {
		list-style-type: none;
		padding-left: 1em;
	}

	li {
		float: left;
		a {
			margin-right: 10px;
			color:black;
			text-decoration: none;
		}
		a:hover  {
			text-decoration: underline;
		}
	}

	// séparateur vertical entre les liens
	li {
		&:before {
			color: #808080;
			content: "|";
			padding-right: 10px;
		}
	}
	// pas séparateur avant le premier lien
	li:first-child {
		&:before {
			content: "";
		}
	}

	//version mobile du pied de page
	// -----------------------------------------------------
	@media screen and (max-width: $mobile-limit) {
		#footer-links {
			background: none;
			border: none;
		}
		#logo-loire-atlantique {
			padding-right: 1ex;
		}
	}
	@media screen and (max-width: $very-small-limit) {
		#logo-loire-atlantique {
			padding-right: 1ex;
		}
	}

 }
