#content div.textcell {
	@extend %organism-rte;
}

#content {
    @extend %molecule-inlines-rte;
    @extend %molecule-headings-rte;
    // Design des champs
    @extend %molecule-form-components;
}

#content .customSelectContain .customSelect, #rub_service .customSelectContain
.customSelect, .mseu-main-form .customSelectContain .customSelect,
.generic-form .customSelectContain .customSelect {
	border: 2px solid #dddddd;
}

#rub_service .customSelectContain .customSelect {
	transition: all, 0.5s;
}

#rub_service .customSelectContain.focused .customSelect {
	background: white;
}

/* cancel the width: 1200px from site css */
#content div.cell h1 {
	width: auto;
}

#content a {
	text-decoration: none;
}

/* cancel hyphenation of some elements */
@media screen and (min-width: 500px) {
	#side #steps ol li .label,
	.form-content--title,
	.section-demarches #rub_service h2,
	#content div.textcell h2, #content h2 {
		hyphens: none;
	}
}

/* cancel focus state for input elements on validation page */
div#content div#rub_service div.form-validation {
	input {
		cursor: default;
	}
	input:focus {
		border-color: transparent;
		background-color: #f6f6f6;
	}
}

/* restore [hidden] behaviour for form fields */
#rub_service .widget[hidden] {
	display: none;
}

/* style authentic forms */
%button,
a.pk-button,
div.block form button, div.a2-block form button,
div#content div#columns div.a2-block form input[type=submit],
#content div#login-page div.block form input[type=submit] {
	height: 50px;
	border-radius: 0;
	padding: 0 20px;
	transition: all, 0.5s;
	line-height: 50px;
	display: inline-block;
	width: auto;
	background-color: $second-color;
	border: none;
	color: $core-color;
	border-bottom: 1px solid transparent;
	&:hover, &:focus{
		background-color: $core-color;
		color: $second-color;
		text-decoration: none !important;
	}
	&.submit-button,
	&.delete-button,
	&[value="Valider"],
	&[value="Modifier"] {
		float: right;
		margin-right: 1ex;
	}
	&.cancel-button,
	&[name=cancel] {
		float: left;
		background: white;
		color: $core-color;
		border-bottom: 1px solid $core-color;
		&:hover, &:focus{
			background-color: $core-color;
			color: $second-color;
		}
	}
}

#content div#login-page div.block form button,
#content div#login-page div.block form input[type=submit] {
	/* center */
	display: block;
	margin: 0 auto 1.5rem auto;
}

#content div#login-page div.block form button.cancel-button,
#content div#login-page div.block form button[name=cancel],
#content div#login-page div.block form input[type=submit][name=cancel] {
	display: none;
}

.login-actions {
	clear: both;
}

/* cancel/adjust things */
.section-infos #rub_service .comment-field,
.section-demarches #rub_service .comment-field {
	font-style: inherit;
}

div.hint {
	b { font-weight: bold; }
	i { font-style: italic; }
}

.ui-dialog-titlebar-close::after {
	content: "×";
	color: black;
}

div.ui-dialog .ui-dialog-titlebar .ui-dialog-title {
	font-size: 100%;
}

.section-demarches #rub_service .CheckboxesWidget input[type="checkbox"]:checked + span::after,
.section-demarches #rub_service .CheckboxesWidget input[type="checkbox"] + span::before,
.section-demarches #rub_service .RadiobuttonsWidget input[type="radio"]:checked + span::after,
.section-demarches #rub_service .RadiobuttonsWidget input[type="radio"] + span::before {
	top: 1.5ex;
}

/* style formdata history */
ul#evolutions,
div#content #disclose-dataview,
div#receipt-intro {
	margin: 1em;
	padding: 0;
	display: block;
}

div.qommon-map {
	height: 280px;
}

p.use-file-from-fargo {
	margin-top: 1ex;
	span {
		display: inline-block;
		cursor: pointer;
		font-style: normal;
		text-transform: uppercase;
		color: #7D7D7D;
		border-bottom: 1px solid #7D7D7D;
		transition: all, 0.5s;
		font-size: 1.4rem;
		padding: 1ex;
		&:after {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%237d7d7d' width='31' height='22'%3E%3Cpath d='m21.2 0.3a1.1 1.1 0 1 0-1.6 1.6l8 8 -26.5 0a1.1 1.1 0 0 0-1.1 1.2 1.1 1.1 0 0 0 1.1 1.1l26.6 0 -8 8a1.1 1.1 0 0 0 0 1.6 1.1 1.1 0 0 0 1.6 0l10-10a1.1 1.1 0 0 0 0-1.6l-10.1-9.9z'/%3E%3C/svg%3E");
			content: '';
			display: inline-block;
			width: 20px;
			height: 20px;
			background-size: 14px;
			background-position: center;
			background-repeat: no-repeat;
			vertical-align: middle;
			margin-left: 20px;
		}
		&:hover {
			background: #7D7D7D;
			color: white;
			&:after {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='31' height='22'%3E%3Cpath d='m21.2 0.3a1.1 1.1 0 1 0-1.6 1.6l8 8 -26.5 0a1.1 1.1 0 0 0-1.1 1.2 1.1 1.1 0 0 0 1.1 1.1l26.6 0 -8 8a1.1 1.1 0 0 0 0 1.6 1.1 1.1 0 0 0 1.6 0l10-10a1.1 1.1 0 0 0 0-1.6l-10.1-9.9z'/%3E%3C/svg%3E");
			}
		}
	}
}

/* journal */

ul#evolutions {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}

#evolutions:after {
	/* the vertical timeline itself */
	content: "";
	background: #bbb;
	position: absolute;
	width: 1px;
	top: 40px;
	left: 30px;
	height: calc(100% - 40px);
	z-index: 0;
	border-radius: 3px;
}

ul#evolutions li {
	list-style-image: none;
	margin: 1em 0 2em 0;
	z-index: 10;
	position: relative;
}

ul#evolutions li:after {
	/* li:after, horizontal line, from the timeline to the item */
	content: "";
	background: #bbb;
	position: absolute;
	width: 100px;
	left: 30px;
	top: 39px;
	height: 1px;
	z-index: -10;
}

ul#evolutions div.evolution-metadata {
	width: auto;
	display: inline-block;
	background: white;
	margin-left: 60px;
	padding: 1ex;
	padding-top: 22px;
	padding-bottom: 0;
	margin-bottom: 0;
}

ul#evolutions span.time {
	display: block;
	color: #aaa;
}

ul#evolutions li div.msg span.time {
	padding-left: 0;
}

ul#evolutions span.status {
	font-weight: bold;
	display: inline-block;
}

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

ul#evolutions span.user span {
	font-size: 80%;
}

ul#evolutions li div.msg {
	padding: 1ex;
	padding-top: 0;
	position: relative;
	background: white;
	margin-left: 60px;
	margin-right: 30px;
}

ul#evolutions li.msg-in div.msg {
}

ul#evolutions li.msg-out div.msg {
}

ul#evolutions li div.msg div.comment {
	padding: 1ex 1em;
	background: #EEEEEE;
}

#evolutions .msg-system {
	margin-bottom: 30px;
}

ul#evolutions li span.item {
	/* left circle icon */
	position: absolute;
	text-align: center;
	line-height: 36px;
	font-family: FontAwesome;
	width: 40px;
	height: 40px;
	display: block;
	left:  10px;
	border-radius: 20px;
	border: 1px solid #888;
	top: 20px;
	background: $button-color !important;
	color: $button-background !important;
}

ul#evolutions li:first-child span.item:before {
	content: "\f067"; /* plus */
}

ul#evolutions li.msg-system span.item:before {
	content: "\f141"; /* ellipsis-h */
}

ul#evolutions li.endpoint span.item::before {
	content: "\f00c"; /* check */
}

ul#evolutions li span.item:before {
	content: "\f075"; /* comment */
}

div.dataview {
	div.field {
		margin-bottom: 1ex;
	}
	span.label {
		color: inherit;
		font-weight: bold;
		white-space: normal;
	}
	.value {
		display: block;
		margin-left: 1ex;
	}
}

div#columns div#rub_service div#summary h2,
div#columns div#rub_service div#evolution-log h2 {
	@extend %atom-h3-rte;
	margin-bottom: 1rem;
}

div#columns div#rub_service div#evolution-log h2 {
	margin-top: 2em;
}

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

ul#evolutions li span.item {
	background: $primary-color !important;
	color: white !important;
	border: none;
	line-height: 40px;
}

#evolutions::after {
	height: calc(100% - 40px - 30px);
}

div.timetable-widget button,
div#content form#wf-actions button {
	padding: 15px 20px;
	text-decoration: none;
	position: relative;
	display: inline-block;
	border-color: rgba(0, 0, 0, 0);
	transition: all, 0.5s;
	overflow: hidden;
	background-color: $second-color;
	color: $core-color;
	font-family: $site-font;
	text-transform: uppercase;
	font-size: 1.4rem;
	&:hover, &:focus{
		background-color: $core-color;
		color: #FFFFFF;
	}
}

div.timetable-widget button {
	padding: 0;
	&.next,
	&.prev {
		position: relative;
		text-indent: -10em;
		&::after {
			text-indent: 0;
			position: absolute;
			content: "<";
			display: block;
			top: 0;
			line-height: 3em;
			left: 0;
			width: 100%;
			cursor: pointer;
		}
		&.next::after {
			content: ">";
		}
	}
}

main {
	z-index: 10;
}

#rub_service > h2 {
	text-align: center;
	&::before {
		content: '';
		display: block;
		height: 40px;
		background-size: 50px;
		background-position: top;
		background-repeat: no-repeat;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  fill='%23dddddd' width='371.9' height='82.2'%3E%3Cpath fill='none' d='M-1-1h582v402H-1z'/%3E%3Cg%3E%3Cpath d='M351.926 42.6c-13.2 0-20.6-5.8-31.8-16.2-11.3-10.3-26.4-26.4-50.9-26.4h-4.4c-22 1.9-35.8 16.6-46.5 26.4-9.7 8.8-16.6 14.8-27.4 16.2-1.4 0-3 .5-4.9.5-13.2 0-20.6-5.8-31.8-16.2-3-2.5-5.8-5.4-9.3-8.8-10.3-8.8-23-18.1-41.6-18.1h-4.4c-22 1.9-35.8 16.6-46.5 26.4-9.8 8.8-16.6 14.7-27.4 16.2-1.4 0-3 .5-4.9.5-2.5 0-5.4.5-7.4 1.4-1 .5-2.5 1-3.4 1.9-5.4 3.4-9.3 9.8-9.3 16.2 0 2.5.5 5.4 1.4 7.4 1 2.5 2.5 4.4 4.4 6.4 1 1 1.9 1.9 3 2.5 1 .5 1.9 1.4 3.4 1.9 1.4.5 2.5 1 3.9 1 1.5.4 2.5.4 4 .4h4.9c24.5-1.9 42.1-15.7 53.8-26.4 10.8-9.8 16.6-15.2 22-16.2 1 0 1.4-.5 1.9-.5 1.4 0 3 .5 4.4 1 3 1.4 6.9 3.9 11.3 8.3 2.5 1.9 5.4 4.4 8.3 7.4 12.3 11.3 31.4 26.4 58.7 26.4h4.9c24.5-1.9 42.1-15.7 53.8-26.4 10.8-9.8 16.6-15.2 22-16.2 1 0 1.4-.5 1.9-.5 1.4 0 3 .5 4.4 1 1.4.5 3.4 1.9 5.4 3 3.9 2.5 8.3 6.9 14.7 12.2 12.3 11.3 31.4 26.4 58.8 26.4h1.9c10.3-.5 19.6-10.3 18.6-20.5.7-10.3-9.6-19.1-19.9-18.6z'/%3E%3C/g%3E%3C/svg%3E");
	}
}

#side {
	border-top: none;
	padding-top: 0;
}

div.buttons,
div.dataview > p,
div.dataview div.page {
	clear: both;
}

form div.page::after,
div.dataview div.page::after {
	content: "";
	display: block;
	clear: both;
}

div.widget div.content div.error {
	@extend .errornotice;
	margin-top: 0;
}

#steps.steps-1 {
	display: none;
}

/* give a different style to page titles in validation page */
.section-demarches #rub_service div.form-validation div.page > h3 {
	@extend %atom-h2-rte;
	margin-top: 60px;
}

/* restyle elements in comment fields */
div.comment-field {
	ul {
		@extend %atom-ul-rte;
		li:before {
			top: 10px;
		}
	}
	ol {
		@extend %atom-ol-rte;
		li:before {
		}
	}
}

.section-demarches div#content div#rub_service .comment-field {
	p {
		margin: 10px 0;
	}
}

.wcs-step {
	&--marker {
		border-bottom: 0 none !important;
		text-decoration: none;
		cursor: pointer;
		&-total {
			display: none;
		}
	}
}
/* reduce size of steps when there are too many of them; this is a copy of the
 * responsive part from src/02-particules/02-modules/forms/main-form/
 * _molecule-form-progressbar.scss
 */
%small-steps {
	ol {
		&:before {
			top: 14px;
		}

		li {
			&.first {
				&::before {
					display: none;
				}
			}
			&.last {
				&::after {
					display: none;
				}
			}
			width: unset;
			.marker {
				&::before {
					top: -1px;
				}
				height: 30px;
				width: 30px;
				font-size: 1.4rem;
			}
			.label {
				display: none;
			}
		}
	}
}

@mixin small-steps-list {
	@for $i from 7 through 40 {
		#side #steps.steps-#{$i} {
			@extend %small-steps;
		}
	}
}

@include small-steps-list;

div#seu-grid-carrefour div.wcsformsofcategorycell ul > li {
	border: none;
}

div#seu-grid-carrefour div.wcsformsofcategorycell ul > li:hover > a {
	color: white;
	text-decoration: none;
	background-color: transparent;
}

$category-slugs: commerces, contact, enquete_pub, environment_nok, environmnt_ok, familles, orga-evenements, papiers, sante-social, security, sport-culture, stationnement, travaux, vie_pratique, voirie, signalements, culture;

@each $category in $category-slugs {
	div.#{$category} .demarche-topic__background {
		background-image: url(img/demarches_#{$category}.jpg);
	}
}

.seu header .seu-nav-top .seu-scrolled-logo {
	@include RWD(mobile) {
		margin-left: 10px;
	}
}

a#bottom-logo {
	padding-top: 8px;
}

#content div.cell h2.layout-demarche__title:first-child {
	@extend .layout-demarche__title;
	white-space: pre;
}

#content div.home {
	width: 100%;
	div.cell {
		margin: 0;
	}
}

#content .demarche-list,
#content .demande-list {
	a:hover {
		text-decoration: none;
	}
	.demande-teaser .btn-text strong {
		color: inherit;
	}
}

body.anonymous #nav-side {
	display: none;
}

#messages li,
div.infonotice,
div.successnotice,
div.warningnotice,
div.errornotice {
	&::before {
		top: auto;
	}
}

.mes-informations {
	div.actions {
		display: flex;
		@include RWD(mobile) {
			display: block;
		}
		justify-content: space-around;
		width: 100%;
	}
	h1 {
		margin-top: 2em;
	}
	&.suppression {
		margin-top: 4em;
		border-top: 2px solid #F6F6F6;
		padding-top: 4em;

		.btn-square--filled--core {
			border-color: #FF1F53;
			background-color: #FF1F53;
		}
	}
}

div.webform-layout-box {
	display: flex;
	@include RWD(mobile) {
		display: block;
	}
	justify-content: space-between;
	width: 100%;
	div.form-group {
		.form-field {
			padding-right: 1em;
		}
		&:last-child {
			.form-field {
				padding-right: 0;
			}
		}
		&.address,
		&.mobile,
		&.phone {
			width: 50%;
			@include RWD(mobile) {
				width: auto;
			}
		}
	}
}

.interests-list {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	.type {
		text-transform: uppercase;
		color: #2da192;
		font-size: 1.4rem;
	}
	.name {
		text-transform: uppercase;
		color: $core-color;
		font-size: 1.8rem;
		font-weight: bold;
	}
	li {
		margin-bottom: 2rem;
		display: inline-block;
		width: 20em;
		@include RWD(mobile) {
			width: auto;
		}
	}
}

#interests,
#interests-edit-form {
	padding: 4rem 6rem;
	@include RWD(mobile) {
		padding: 1rem;
	}
	.interests-list {
		display: block;
		li {
			display: block;
			.name {
				text-transform: none;
				color: #5c5c5c;
				font-weight: normal;
			}
			margin-bottom: 0.5ex;
		}
	}
	.interests-types {
		width: 40em;
		display: flex;
		@include RWD(mobile) {
			width: auto;
			display: block;
		}
		h3 {
			font-family: $montserrat;
			font-weight: 700;
			font-size: 1.7rem;
			color: #505050;
			margin-bottom: 10px;
			text-transform: uppercase;
		}
	}
}

#favorite-dlg,
#interests,
#interests-edit-form {
	.actions {
		margin-top: 3rem;
		text-align: center;
		#favorite-cancel-button,
		#interests-cancel-button {
			float: left;
			@include RWD(mobile) {
				display: none;
			}
		}
		#favorite-login-button,
		#interests-edit-button {
			float: right;
		}
	}
}

#interests {
	.interests-types {
		width: 100%;
		& > div {
			width: 50%;
			@include RWD(mobile) {
				width: auto;
			}
			h3 {
				color: $core-color;
				text-transform: none;
			}
		}
		li {
			width: auto;
		}
	}
}

div.ui-dialog.dlg-favorites .ui-dialog-titlebar,
div.ui-dialog.dlg-interests .ui-dialog-titlebar {
	display: none;
}

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

#content .registration_frontend h3 {
	font-size: 2rem;
}

#content .registration_frontend {
	margin-bottom: 4rem;
	.buttons {
		text-align: right;
	}
	&::after {
		content: "";
		clear: both;
		display: block;
	}
}

#content div.a2-block h3.email-sent {
	text-align: center;
	font-family: $montserrat;
	font-weight: 700;
	font-size: 1.7rem;
	color: #505050;
	margin-bottom: 10px;
	text-transform: uppercase;

	@include RWD(mobile){
		font-size: 1.5rem;
	}
}

#content div.a2-block h3.email-address {
	@extend %text-form-label;
	text-align: center;
	color: $core-color;
	text-transform: none;
	margin-top: 0;
}

/* logout page elements */
#continue-link {
	display: none;
}

ul.logout-list {
	&::before {
		content: "Déconnexion en cours...";
		display: inline-block;
		position: relative;
		top: 16px;
		padding-right: 1ex;
	}
	div {
		display: inline-block;
		width: 16px;
		text-indent: -10000px;
		img, iframe {
			display: block;
		}
	}
}

.mseu #nav-side #nav-notifications .notif-list .notif-item,
.mseu #nav-side #nav-notifications .notif-list .notif-last {
	background: white;
}

.CheckboxWidget {
	input[type="checkbox"]{
		@extend %atom-form-checkbox;
	}
	label span {
		font-weight: 600;
	}
}

.template-address input[type="checkbox"] {
	@extend %atom-form-checkbox;
}

.mseu #nav-side #nav-notifications #trigger-notifications .notif-amount {
	width: 18px;
}

#user-files {
	table {
		thead th {
			text-transform: uppercase;
			color: $core-color;
			font-weight: bold;
			padding-bottom: 1ex;
		}
		tbody tr.odd, tbody tr.even {
			background: white;
		}
		tbody tr {
			border-top: 2px solid #f6f6f6;
			&:first-child,
			&.description-row {
				border-top: none;
			}
			&.description-row td {
				padding-bottom: 2ex;
			}
			td {
				padding-left: 0.5ex;
			}
			td.title {
				color: $core-color;
				text-decoration: underline;
			}
			td.action-column {
				vertical-align: top;
				a {
					padding: 0.5ex 1ex
				}
			}
		}
		@include RWD(mobile) {
			th.creation, td.creation,
			th.expiration, td.expiration {
				display: none;
			}
		}
		tr::before {
			content: none !important;  // hide file type icon
		}
		a.icon-remove::before, a.icon-edit::before {
		}

		tr.empty td {
			padding: 1em 0.5ex;
			font-size: 120%;
		}
	}

	button {
		margin-right: 2em;
		float: right;
		@include RWD(mobile) {
			margin-right: 0;
			float: none;
		}
		display: inline-block;
		cursor: pointer;
		font-style: normal;
		text-transform: uppercase;
		color: $core-color;
		border-bottom: 1px solid $core-color;;
		transition: all, 0.5s;
		font-size: 1.4rem;
		padding: 1ex;
		&:after {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%237d7d7d' width='31' height='22'%3E%3Cpath d='m21.2 0.3a1.1 1.1 0 1 0-1.6 1.6l8 8 -26.5 0a1.1 1.1 0 0 0-1.1 1.2 1.1 1.1 0 0 0 1.1 1.1l26.6 0 -8 8a1.1 1.1 0 0 0 0 1.6 1.1 1.1 0 0 0 1.6 0l10-10a1.1 1.1 0 0 0 0-1.6l-10.1-9.9z'/%3E%3C/svg%3E");
			content: '';
			display: inline-block;
			width: 20px;
			height: 20px;
			background-size: 14px;
			background-position: center;
			background-repeat: no-repeat;
			vertical-align: middle;
			margin-left: 20px;
		}
		&:hover {
			background: $core-color;
			color: white;
			&:after {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='31' height='22'%3E%3Cpath d='m21.2 0.3a1.1 1.1 0 1 0-1.6 1.6l8 8 -26.5 0a1.1 1.1 0 0 0-1.1 1.2 1.1 1.1 0 0 0 1.1 1.1l26.6 0 -8 8a1.1 1.1 0 0 0 0 1.6 1.1 1.1 0 0 0 1.6 0l10-10a1.1 1.1 0 0 0 0-1.6l-10.1-9.9z'/%3E%3C/svg%3E");
			}
		}

	}
}

td.thumbnail {
	display: table-cell;
	margin: auto;
	background: transparent;
	padding: 1rem 0;
}

div.ui-dialog {
	p {
		margin: 1rem 0;
	}
	label {
		display: block;
		padding-bottom: 3px;
	}
}

div.ui-dialog-buttonset button {
	padding: 1rem 1rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: white;
	&.submit-button {
		background: $button-background;
		color: $button-color;
	}
	&.delete-button {
		background: #ff1f53;
		color: $button-color;
	}
}

td.action-column a {
	display: block;
	padding: 1ex;
	margin: 0.5ex 0;
	border-bottom: 1px solid transparent;
	&:hover {
		border-bottom: 1px solid $core-color;
	}
}

.fargo-pick-popup td.description {
	font-size: 90%;
	color: #444;
}

#content .a2-block form p {
	margin-top: 0;
	margin-left: 0;
}

.a2-block ul.errorlist {
	font-size: 90%;
	color: red;
}

#rub_service .widget.has-file .FileWidget {
	margin-bottom: 0;
}

.fileprogress {
	border: 1px solid #888;
}

.fileprogress .bar {
	background: $button-background;
	color: $button-color;
	line-height: 1.5em;
	padding-left: 1ex;
	white-space: nowrap;
}

.fileinfo {
	line-height: 1.5em;
}

div.fileinfo a.remove {
	text-indent: 0;
	background: none;
	color: transparent;
}

div.fileinfo a.remove:before {
	font-family: FontAwesome;
	content: "\f057";
	color: $button-background;
}

#content section h2 {
	margin-top: 50px;
	text-align: center;
}

#main-content #content section div.form-field > input[readonly] {
	border-color: transparent;
	background: white;
}

.completion-info {
	text-align: center;
	color: $core-color;
	font-size: 1.429rem;
	font-weight: bold;
}

#completion-bar {
	background: #c0bebf;
	width: 80%;
	margin: 1em auto;
	height: 17px;
	border-radius: 10px;
	div {
		position: relative;
		background: #f2a501;
		border-radius: 10px;
		height: 17px;
		&::after {
			content: "";
			position: absolute;
			right: 0;
			top: -12px;
			height: 40px;
			width: 40px;
			background: white;
			border-radius: 100%;
			box-shadow: 0 3px 9px 1px #666;
		}
	}
}

#logo-link {
	height: 48px;
	padding-top: 0px;
	@include RWD(mobile) {
		height: 45px;
		padding-top: 8px;
	}
}

#id_title_0_p .content label {
	display: inline-block;
	margin-right: 2em;
	color: inherit;
	&:not(.option) {
		font-weight: normal;
		color: inherit;
	}
}

a.add-favorites {
	cursor: pointer;
	transition: opacity linear 0.2s;
	&.processing {
		cursor: wait;
		opacity: 0.4;
	}
}

#a2-oidc-authorization-form {
	ul {
		line-height: 3rem;
		li {
			margin-left: 2rem;
			list-style: circle;
		}
	}
	.actions {
		margin-top: 3rem;
		button span.btn-text {
			margin-right: 0;
		}
		button[name=refuse] {
			float: left;
		}
		button[name=accept] {
			float: right;
		}
	}
}

// cancel native publik styling that affects dimensions of the cells as there
// is some masonsry javascript that needs to be run with correct dimensions,
// and it may run before we have time to remove the .wcsformsofcategorycell
// class.
div.wcsformsofcategorycell ul {
	padding: 30px 0;
	& > li > a {
		padding: 15px 20px;
		border-bottom: none;
		display: inline-flex;
	}
}

div.qommon-map {
	opacity: 0.99;  // work around some chrome bug (#23165)
}

div.widget table {
	th {
		padding-right: 10px;
		padding-bottom: 5px;
	}
	td {
		padding-right: 10px;
		.customSelectContain {
			margin-right: 10px;
		}
	}
}

#rub_service table td {
	padding-bottom: 10px;
	.widget {
		margin-bottom: 0;
	}
}

.template-meetings .customSelectContain {
	display: none;
}

div#login-page .login-actions{
	text-align: center;
	a {
		font-weight: normal;
		text-decoration: underline;
	}
}

div#welcome-text {
	clear: both;
	float: none;
	width: 100%;
	background: #ffb200;
	padding: 2rem;
	@include RWD(mobile) {
		padding: 2rem 1rem;
	}
	h1 {
		font-size: 2.5rem;
	}
	h1::before {
		/* adjust ~ color */
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  fill='%23ffffff' width='371.9' height='82.2'%3E%3Cpath fill='none' d='M-1-1h582v402H-1z'/%3E%3Cg%3E%3Cpath d='M351.926 42.6c-13.2 0-20.6-5.8-31.8-16.2-11.3-10.3-26.4-26.4-50.9-26.4h-4.4c-22 1.9-35.8 16.6-46.5 26.4-9.7 8.8-16.6 14.8-27.4 16.2-1.4 0-3 .5-4.9.5-13.2 0-20.6-5.8-31.8-16.2-3-2.5-5.8-5.4-9.3-8.8-10.3-8.8-23-18.1-41.6-18.1h-4.4c-22 1.9-35.8 16.6-46.5 26.4-9.8 8.8-16.6 14.7-27.4 16.2-1.4 0-3 .5-4.9.5-2.5 0-5.4.5-7.4 1.4-1 .5-2.5 1-3.4 1.9-5.4 3.4-9.3 9.8-9.3 16.2 0 2.5.5 5.4 1.4 7.4 1 2.5 2.5 4.4 4.4 6.4 1 1 1.9 1.9 3 2.5 1 .5 1.9 1.4 3.4 1.9 1.4.5 2.5 1 3.9 1 1.5.4 2.5.4 4 .4h4.9c24.5-1.9 42.1-15.7 53.8-26.4 10.8-9.8 16.6-15.2 22-16.2 1 0 1.4-.5 1.9-.5 1.4 0 3 .5 4.4 1 3 1.4 6.9 3.9 11.3 8.3 2.5 1.9 5.4 4.4 8.3 7.4 12.3 11.3 31.4 26.4 58.7 26.4h4.9c24.5-1.9 42.1-15.7 53.8-26.4 10.8-9.8 16.6-15.2 22-16.2 1 0 1.4-.5 1.9-.5 1.4 0 3 .5 4.4 1 1.4.5 3.4 1.9 5.4 3 3.9 2.5 8.3 6.9 14.7 12.2 12.3 11.3 31.4 26.4 58.8 26.4h1.9c10.3-.5 19.6-10.3 18.6-20.5.7-10.3-9.6-19.1-19.9-18.6z'/%3E%3C/g%3E%3C/svg%3E");
	}
	div.actions {
		button {
			display: block;
			margin: 1rem auto;
			min-width: 25ex;
			max-width: 100%;
			@include RWD(mobile) {
				min-width: auto;
			}
		}
	}
}

.required-authentication .demarche-teaser .btn-text::before {
	content: "\f023";  // lock
	font-family: FontAwesome;
	padding-right: 1ex;
}

body.profile-photo-edit .a2-block div.profile-photo,
div.configjsoncell.mes-informations div.profile-photo {
	text-align: center;
	margin: 3rem 0 1rem 0;
	> div {
		display: inline-block;
		width: 200px;
		height: 200px;
		background: $primary-color;
		border-radius: 100%;
		overflow: hidden;
	}
}

body.profile-photo-edit .a2-block {
	p.info {
		text-align: center;
	}
	div.profile-photo > div {
		cursor: pointer;
	}
	button.delete-button {
		float: left;
		color: white;
		border-color: #FF1F53;
		background-color: #FF1F53;
	}
	#photo-form {
		display: none;
	}
}

section#banner {
	img {
		margin: 7rem 0;
		@media screen and (max-width: 500px) {
			margin: 3rem 0;
		}
	}
}

footer {
	margin-top: 4rem;
	background: $footer-background;
	color: $footer-color;
	#footer {
		font-size: 1rem;
		max-width: 1140px;
		div.menucell {
			text-align: left;
			a {
				color: $footer-color;
				text-transform: uppercase;
				padding-top: 0;
				padding-bottom: 0;
			}
			ul li:first-child a {
				padding-left: 0.5rem;
			}
			padding-top: 2rem;
			padding-bottom: 2rem;
		}
		div.cell.configjsoncell {
			display: none;
		}
	}
}

.template-evaluation .customSelectContain {
	display: none;
}

div.section.foldable {
	// duplicated from _wcs.scss that cannot be imported due to local
	// custom widgets
	margin-bottom: 1rem;
	> h2:first-child {
		&::after {
			font-family: FontAwesome;
			content: "\f106";  // angle-up
			position: absolute;
			right: 1em;
		}
		cursor: pointer;
		&:focus span.disclose-message,
		&:hover span.disclose-message {
			text-decoration: underline;
		}
	}
	span.disclose-message {
		padding-left: 1ex;
		font-size: 1rem;
		display: none;
	}
	&.folded {
		span.disclose-message {
			display: inline-block;
			@media screen and ($max-mobile-viewport) {
				// never displayed on mobile as the small width
				// makes clear the relation between title and
				// open/close bracket.
				display: none;
			}
		}
		div {
			display: none;
		}
		> h2:first-child::after {
			content: "\f107";  // angle-down
		}
	}
}

.fileprogress {
	border: 1px solid #888;
}

.fileprogress {
	.bar {
		background: $button-background;
		line-height: 1.5em;
		padding-left: 0.7em;
		white-space: nowrap;
		transition: background linear 0.1s;
	}
	&.upload-error .bar {
		background: #FF7575;
		color: black;
		width: 100% !important;
		white-space: normal;
	}
}

.fileinfo {
	line-height: 1.5em;
	height: 100%;
}

div.fileinfo a.remove {
	text-indent: 0;
	background: none;
	color: transparent;
	display: inline-block;
	width: 16px;
	text-indent: -10000px;
	&::before {
		font-family: FontAwesome;
		content: "\f057";  // times-circle
		color: $button-background;
		text-indent: 0;
		position: absolute;
		display: block;
		top: 0;
		right: 0;
		width: 2rem;
		height: 2rem;
		line-height: 2rem;
		text-align: center;
	}
}

div#rub_service div.file-upload-widget {
	&:not([class*="grid-"]) {
		div.file-button {
			max-width: 500px;
		}
	}
	div.file-button {
		overflow: hidden;
		background: $widget-background;
		margin: 0;
		border: $widget-border;
		border-radius: $widget-border-radius;
		&:focus-within {
			border: $widget-focus-border;
			@if $widget-focus-outline == none {
				outline: $widget-border;
				outline-style: dotted;
			} @else {
				outline: $widget-focus-outline;
				outline-offset: $widget-focus-outline-offset;
			}
		}
		height: 150px;
		position: relative;
		text-align: center;

		div.widget.FileWidget {
			margin-bottom: 0;
			div.content {
				display: block;
				position: static;
			}
		}
		input {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0.001;
			margin: 0;
			font-size: 0;
			cursor: pointer;
		}
		div.upload-done {
			display: none;
		}
		div.click-to-upload {
			display: block;
		}
		div.widget-message {
			padding-top: 30px;
			&::before {
				pointer-events: none;
				content: "\f016";  // file-o
				font-family: FontAwesome;
				font-size: 2.857rem;
				display: block;
				padding-top: 20px;
				padding-bottom: 10px;
			}
			&::after {
				pointer-events: none;
				content: "\f055";  // plus-circle
				font-family: FontAwesome;
				font-size: 1.429rem;
				display: block;
				position: absolute;
				left: calc(50% + 10px);
				top: 30px;
				color: $button-background;
			}
			&.upload-done::after {
				content: "\f05d";  // check-circle-o
			}
		}
		&.file-image div.widget-message::before {
			content: "\f1c5";  // file-image-o
		}
	}
	&.short div.file-button {
		height: 110px;
		div.widget-message {
			padding-top: 0px;
			&::before {
				padding-top: 10px;
			}
			&::after {
				top: 5px;
			}
		}
	}
	&.has-file {
		div.file-button {
			div.upload-done {
				display: block;
			}
			div.click-to-upload {
				display: none;
			}
		}
	}
	&.widget-readonly {
		div.file-button {
			div.widget-message {
				display: none;
			}
			.fileinfo.thumbnail span.filename {
				display: none;
			}
			span.filename {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				display: block;
				padding-top: 30px;
				&::before {
					pointer-events: none;
					content: "\f016";  // file-o
					font-family: FontAwesome;
					font-size: 2.857rem;
					display: block;
					padding-top: 40px;
					padding-bottom: 10px;
				}
			}
			img {
				max-height: 100%;
				position: relative;
				z-index: 10;
			}
		}
	}
	div.fileprogress {
		position: absolute;
		border: none;
		overflow: hidden;
		width: 100%;
		left: 0;
		bottom: 0;
	}
}

form div.widget {
	margin-bottom: 35px;
}

section.layout-demarche div.cell-items-pagination {
	padding: 1rem;
	.cell-items-pagination-next {
		float: right;
		margin-right: 0;
	}
	button {
		padding: 15px 20px;
		text-decoration: none;
		position: relative;
		display: inline-block;
		border-color: rgba(0, 0, 0, 0);
		transition: all, 0.5s;
		overflow: hidden;
		background-color: $second-color;
		color: $core-color;
		font-family: $site-font;
		text-transform: uppercase;
		font-size: 1.4rem;
		&:hover, &:focus{
			background-color: $core-color;
			color: #FFFFFF;
		}
	}
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	display: none;
}

.a2-password-policy-container {
	font-size: 90%;
}

a.btn-square--bordered--core {
	text-decoration: none !important;
}

div.RadiobuttonsWidget.template-evaluation {
	&::after {
		content: "Rendu pas pris en charge. (#51835)";
		background: red;
		padding: 2px 5px;
		color: white;
	}
	.content {
		display: none !important;
	}
}

.form-content--titlebar {
	display: none;
}

#rub_service .BlockWidget .list-add {
	clear: both;
	.content {
		display: block;
		button {
			@extend %button;
		}
	}
}

.wcs-block-with-remove-button {
	.BlockSubWidget {
		position: relative;
		@include clearfix();
	}
	.remove-button {
		@extend %button;
		position: absolute;
		right: 3px;
		top: -1.5em;
		margin-right: 0;
		&[disabled] {
			display: none;
		}
		span {
			display: none;
		}
		&::after {
			font-family: FontAwesome;
			content: "\f1f8";  // trash
		}
	}
}
