$notification-producer-circle-radius: 35px;
$place-title-height: 152px;
$mobile-place-title-height: 100px;

body.page-connect {
	@media screen and (min-width: $width) {
		div#columns div#carrousel {
			margin-left: calc(10px - (100vw - #{$width}) / 2);
			margin-right: calc(10px - (100vw - #{$width}) / 2);
		}
	}
	@media screen and (min-width: 1800px) {
		div#columns div#carrousel {
			margin-left: -300px;
			margin-right: -300px;
		}
	}
	div.carrousel-item-content {
		font-family: Oswald;
		a {
			color: white;
			text-decoration: underline;
			&:hover {
				text-decoration: none;
			}
		}
		a.pk-button {
			color: $red;
			&:hover {
				color: white;
			}
			&.black {
				border-color: black;
				background: black;
				color: white;
				&:hover {
					background: $red;
				}
			}
			text-decoration: none;
		}
	}
	div#content {
		div#toodego-pourquoi {
			text-align: center;
			h3 {
				font-size: 2rem;
				font-family: Oswald;
				text-transform: uppercase;
				@media screen and (max-width: $desktop-limit) {
					font-size: 1.8rem;
				}
			}
			p {
				font-size: 1.1rem;
				font-weight: 700;
			}
			margin: 30px 100px;
			@media screen and (max-width: $desktop-limit) {
				margin: 30px 0;
			}
		}
		div.grid-1-3 {
			text-transform: none;
			overflow: hidden;
			img {
				max-width: 100%;
			}
			div {
				padding: 0 2rem;
			}
			h4 {
				font-family: Oswald;
				font-size: 1.2rem;
				font-weight: 500;
				line-height: 120%;
				text-transform: uppercase;
			}
			border: 1px solid #cccccc;
			height: 400px;
			line-height: 140%;
			background: white;
			@media screen and (max-width: $very-small-limit) {
				position: absolute;
				background: transparent;
				border: none;
				height: auto;
				& > div {
					opacity: 0;
					transition: opacity 0.5s ease;
				}
				&.newline {
					position: relative;
				}
				&.active > div {
					opacity: 1;
				}
				&.newline,
				&.end-of-line {
					&::before {
						color: $red;
						z-index: 1000;
						font-size: 1.25rem;
						font-family: FontAwesome;
						content: "\f053";  // chevron-left;
						position: absolute;
						left: -10px;
						top: calc(200px - 1.5rem);
						width: 3rem;
						height: 3rem;
						line-height: 3rem;
						text-align: center;
						cursor: pointer;
					}
				}
				&.end-of-line {
					&::before {
						left: auto;
						content: "\f054";  // chevron-right;
						right: -10px;
					}
				}
				& > div {
					background: white;
					border: 1px solid #cccccc;
					height: 400px;
				}
			}
		}
	}
}

#page.place {
	div.tile.is-place {
		position: relative;
	}
	#content {
		display: block;  // cancel display: flex;
		box-shadow: 0 0 5px #888;
		@media screen and (max-width: $desktop-limit) {
			margin: 1rem;
			&.gru-content div.cell {
				margin-left: 0;
				margin-right: 0;
				max-width: 100%;
			}
		}
	}
	#columns > div:first-child {
		overflow: hidden;
	}
	div.tile.is-place > .tile-head h2 {
		height: $place-title-height;
		font-size: 120%;
		font-weight: bold;
		padding-top: 50px;
		line-height: 2rem;
		@media screen and (max-width: $desktop-limit) {
			height: $mobile-place-title-height;
			padding-top: 1.5rem;
		}
		a {
			color: white;
			text-shadow: 0 0 2px black;
		}
	}
	.place-data {
		display: inline-block;
		margin-left: 10%;
		width: 40%;
		float: left;
		padding-right: 5%;
		margin-top: 2rem;
		margin-bottom: 2rem;
		> div {
			margin-bottom: 2rem;
		}
	}
	.place-info {
		float: right;
		padding: 0 1rem;
		display: inline-block;
		width: 40%;
		margin-top: 2rem;
		margin-right: 10%;
		margin-bottom: 2rem;
	}
	.place-info a.share-email {
		display: inline-block;
		float: right;
		background: url(img/share-email.png) top left no-repeat;
		background-size: auto 100%;
		width: 24px;
		height: 24px;
	}

	.place-data, .place-info {
		@media screen and (max-width: $desktop-limit) {
			margin: 0;
			padding: 0.5rem 1rem;
			clear: both;
			width: 100%;
			float: none;
			display: block;
		}
	}

	span.producer {
		display: none;
	}

	div.tile-picture {
		height: $place-title-height;
		@media screen and (max-width: $desktop-limit) {
			height: $mobile-place-title-height;
		}
		width: 100%;
		background: $title-background;
		background-position: center;
		background-size: cover;
		position: absolute;
	}
	h2:first-child {
		background: transparent;
	}

	div.adresse,
	div.phone,
	div.horaires {
		padding-left: 40px;
	}

	div.adresse {
		background: url(img/adresse.png) top left no-repeat;
	}

	div.phone {
		background: url(img/contact.png) top left no-repeat;
	}

	div.horaires {
		background: url(img/horaires.png) top left no-repeat;
		h3 {
			display: inline-block;
			width: 7rem;
		}
		div.badge {
			display: inline-block;
			text-transform: uppercase;
		}
		tr th {
			width: 7rem;
		}
	}
	a.action-call,
	a.action-goto {
		display: inline-block;
		margin-left: 0;
		margin-top: 0.5rem;
		background: none;
		@extend %button;
	}

	h3 {
		font-size: 120%;
		font-weight: 500;
		margin-top: 0;
		margin-bottom: 0;
		text-transform: uppercase;
		color: #949599;
	}

	div.cell.map {
		clear: both;
		margin: 2rem 0 0 0;
		border: 0;
		height: 350px;
	}

	div.combo-cell-map.leaflet-container {
		height: 350px !important;
	}
}

#page.search-page {
	div#main-content-wrapper {
		max-width: $width + 150px;
	}
	@media screen and (max-width: $desktop-limit) {
		#content {
			margin-top: 0;
		}
		div#columns {
			position: fixed;
			width: 100%;
			bottom: $mobile-navigation-height;
		}
		div#recherche {
			margin: 0;
		}
		div#mapsearch {
			position: absolute;
			top: 20px;
			width: 100%;
			z-index: 1000;
		}
		footer {
			display: none;
		}
	}
	div.combo-cell-map.leaflet-container {
		min-height: 500px;
		@media screen and (max-width: $desktop-limit) {
			// will be recomputed from javascript as blink/webkit
			// may include the location bar into the 100vh.
			height: calc(100vh - 60px - #{$mobile-navigation-height});
			min-height: auto;
		}
	}
	.gru-content #sidebar {
		flex: 0 0 $sidebar-width + 150px;
		max-width: $sidebar-width + 150px;
		margin-top: calc(0.4em + 60px);
		overflow: auto;
		height: 60vh;
		min-height: 500px;
		margin-right: 20px;
		@media screen and (max-width: $desktop-limit) {
			overflow: hidden;
			overflow-y: hidden;
			padding-top: 0;
			position: fixed;
			height: 0;
			min-height: 0px;
			transition: min-height linear 0.3s;
			bottom: $mobile-navigation-height;
			opacity: 1;
			z-index: 10000;
		}
		div.cell {
			margin-right: 0;
			position: relative;
			@media screen and (max-width: $desktop-limit) {
				margin-right: 0.5rem;
			}
		}
		@media screen and (min-width: $desktop-limit) {
			div.cell.selected::before {
				position: absolute;
				content: "";
				width: 5px;
				height: 100%;
				background: $red;
				display: block;
				z-index: 1;
			}
			position: relative;
		}
	}

	div#mapsearch {
		@media screen and (max-width: $desktop-limit) {
			position: absolute;
			z-index: 10000;
		}
		margin-top: 10px;
		margin-bottom: 10px;
		padding-top: 0px;
		position: relative;
		@media screen and (max-width: $desktop-limit) {
			padding: 0 20px;
			width: 100%;
		}
		form {
			width: 100%;
			display: flex;
			input {
				flex: 1;
				border-right: 0;
				padding: 9px 1ex 11px 1ex;
				margin: 0;
			}
			button.search-button {
				margin-right: 0;
				border-width: 1px 1px 1px 0;
				background: $red url(img/loupe-white.png) center center no-repeat;
				box-shadow: none;
				text-indent: -10000px;
				overflow: hidden;
				width: 40px;
			}
			button.filter-button {
				margin-left: 10px;
				margin-right: 0;
				&.on {
					background: $red;
					color: white;
				}
				text-transform: none;
				z-index: 50000;
				position: absolute;
				top: 80px;
				right: 20px;
				@media screen and (max-width: $desktop-limit) {
					top: 50px;
					right: 20px;
				}
				border: none;
				color: black;
				&:hover {
					background: white;
				}
				&:focus, &:active {
					outline: none;
				}
				&.on {
					outline: none;
					border: none;
					background: white;
					color: black;
					&::after {
						content: " ×";
						color: $red;
						font-size: 200%;
						position: absolute;
						top: 0;
						@media screen and (max-width: $desktop-limit) {
							top: 2px;
						}
						right: 8px;
					}
				}
			}
		}
		div.suggestions {
			padding: 1rem 0 0.5rem 3px;
			@media screen and (max-width: $desktop-limit) {
				padding-top: 0.5rem;
			}
			a,
			span {
				display: inline-block;
				background: black;
				white-space: pre;
				cursor: pointer;
				color: white;
				border-radius: 5px;
				padding: 2px 5px;
				margin-bottom: 0.5ex;
				font-size: 80%;
			}
		}
	}
	#filtres-carte,
	#filtres-autour-de-moi {
		display: none;
		padding: 1em;
		h4 {
			font-family: Oswald;
			text-transform: uppercase;
		}
		ul, li {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		li {
			display: inline-block;
			margin-right: 0.5em;
			line-height: 200%;
		}
		li a {
			background: black;
			padding: 3px 7px;
			color: white;
			border-radius: 20px;
			&.on {
				background: $red;
				color: white;
			}
		}
	}

	.combo-cell-map #filtres-carte,
	.combo-cell-map #filtres-autour-de-moi {
		z-index: 800;  // less than search input
		background: white;
		position: absolute;
		top: 10px;
		left: 19px;
		right: 19px;
		bottom: 10px;
		@media screen and (max-width: $desktop-limit) {
			top: 78px;
		}
	}
}

body.focus-in #page.search-page {
	@media screen and (max-width: $desktop-limit) {
		div#columns {
			bottom: 0;
		}
	}
}

.page-404 {
	#main-content-wrapper {
		background: transparent url(img/404-top.png) 100% 0% no-repeat;
	}
	#main-content {
		background: transparent url(img/404-bottom.png) 80% 100% no-repeat;
	}
	#content {
		.cell {
			border: 0;
			background: transparent;
		}
		h1 {
			font-size: 7.5rem;
			color: $red;
			margin: 0;
		}
		h2 {
			text-align: left;
		}
		p, ul, li {
			margin: 1rem 0;
			padding: 0;
			list-style: none;
		}
		li {
			margin: 0.5rem 0;
		}
	}
}

.section-mon-compte,
.page-notifications,
.page-signaler,
.section-bienvenue,
.section-services,
.section-documents,
.page-m-y-rendre {
	div.intro-text {
		background: $red;
		color: white;
		text-align: center;
		border: none;
		@media screen and (max-width: $desktop-limit) {
			margin-top: -2rem;
		}
		h1 {
			font-family: Oswald;
			text-transform: uppercase;
			margin: 0;
			padding: 3rem 0;
			font-size: 1.5rem;
		}
	}
}

.page-signaler {
	div#columns {
		background: white;
		box-shadow: 0 0 5px #888;
		div.cell.tile {
			margin: 1rem 1rem;
			width: calc(50% - 9rem);
			&:hover {
				background: $red;
				h2 {
					color: white;
				}
			}
			&:nth-child(2n) {
				margin-left: 8rem;
			}
			&:nth-child(2n+1) {
				margin-right: 8rem;
			}
			.tile {
				justify-content: space-around;
			}
			.tile-actions {
				display: none;
			}
			.tile-title h2 {
			}
			.tile-title h3 {
				display: none;
			}
			@media screen and (max-width: $desktop-limit) {
				&:nth-child(n) {
					margin: 0.5rem;
					width: calc(100% - 1rem);
				}
				.tile-title h2 {
					padding-top: 2rem;
				}
			}
		}
	}
}

.page-notifications {
	#content .notificationscell {
		border: none;
		background: transparent;
	}
	.notification-none {
		display: block;
		padding: 3rem;
		text-align: center;
		background: $cell-background;
		border: $cell-border;
	}
	div.notification {
		position: relative;
		background: $cell-background;
		border: $cell-border;
		margin: 1rem 0;
		padding: 0 1rem;
		padding-left: $notification-producer-circle-radius * 4;
		&.hidden {
			display: none;
		}
		h3 {
			font-family: Oswald;
			text-transform: uppercase;
		}
		&.new {
			box-shadow: inset 5px 0 0 $red;
			a {
				color: $red;
			}
		}
		&.acked {
			opacity: 0.6;
			a {
				color: inherit;
			}
		}
		.datetime {
			text-align: right;
		}
		.producer {
			display: block;
			text-indent: -10000px;
			border: 1px solid #c3c3c3;
			background: white center center no-repeat;
			position: absolute;
			background-size:  $notification-producer-circle-radius * 2;
			width: $notification-producer-circle-radius * 2;
			height: $notification-producer-circle-radius * 2;
			border-radius: $notification-producer-circle-radius;
			top: calc(50% - #{$notification-producer-circle-radius});
			left: $notification-producer-circle-radius;
		}
		.delete {
			position: absolute;
			top: 0;
			right: 0;
			padding: 0.5rem 1rem;
		}
		&.hidden + .notification-more {
			display: block;
		}
	}
	div.notification-buttons {
		& > div {
			display: none;
			float: left;
			margin-right: 1rem;
		}
		@media screen and (max-width: $desktop-limit) {
			text-align: center;
			& > div {
				float: none;
				margin-right: auto;
				margin-bottom: 1rem;
			}
		}
	}
}

.section-mon-compte {
	div#intro-text {
		h1 {
			display: inline-block;
			background: url(img/avatar-big-white.png) center right no-repeat;
			padding-right: 3rem;
		}
	}
	h3 {
		margin-top: 0;
		margin-bottom: 0.8rem;
		text-transform: uppercase;
		font-family: Oswald;
		&.dim {
			color: #888;
		}
		span.refresh {
			color: $red;
			font-weight: 300;
			text-transform: none;
			animation-name: pulse_opacity_animation;
			animation-iteration-count: infinite;
			animation-duration: 2000ms;
		}
	}
	div.cut-profile div.profile-data {
		padding: 1rem;
		ul, li {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		li:last-child {
			border: none;
		}
		li > span {
			display: block;
			line-height: 35px;
			padding-left: 40px;
			background: center left no-repeat;
			&.name {
				background-image: url(img/avatar-cercle.png);
			}
			&.home {
				background-image: url(img/adresse.png);
			}
			&.email {
				background-image: url(img/email.png);
			}
			&.birthdate {
				background-image: url(img/birthdate.png);
			}
			&.professional-phone,
			&.private-phone {
				background-image: url(img/contact.png);
			}
			&.professional-mobile,
			&.private-mobile {
				background-image: url(img/mobile.png);
			}
			&.private-phone,
			&.professional-phone,
			&.professional-mobile {
				&::before {
					content: "(pro) ";
					font-family: Oswald;
					color: $red;
				}
			}
		}
		span.birthday {
			padding-left: 1ex;
		}
		li a.pk-button {
			margin-top: 1rem;
		}
	}
	.favorite-places {
		.icon-delete {
			&::after {
				content: "×";
			}
		}
		.icon-checkmark {
			&::after {
				content: "✓";
			}
		}
		padding: 1em;
		ul, li {
			margin: 0;
			padding: 0;
			list-style: none;
			position: relative;
		}
		li > span {
			display: inline-block;
			line-height: 35px;
			padding-left: 40px;
			background: url(img/goto.png) center left no-repeat;
			cursor: pointer;
		}
		li > a {
			margin-top: 0.5rem;
		}
		li .delete-place button {
			color: $red;
			background: white;
			box-shadow: none;
			position: absolute;
			right: 0;
			top: 0;
		}
		li .edit-place {
			display: none;
			div.buttons {
				display: block;
				text-align: right;
				button {
					background: $red;
					margin-top: 0.5rem;
					margin-right: 1rem;
					color: white;
				}
			}
		}
	}
	.pn-abonnements--content {
		padding: 1rem;
		ul, li {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.value {
			margin-bottom: 1em;
		}
		.pn-thematiques li {
			margin-left: 0.5em;
		}
		.pn-thematiques li.intertitle {
			margin-left: 0;
			strong {
				font-weight: normal;
			}
		}
		li:last-child {
			border: none;
		}

	}
	div.new-place, div.edit-place {
		div.grid-3-4.ville {
			padding-right: 0;
		}
	}
	div.new-place {
		overflow: hidden;
		max-height: 0;
		transition: all 0.3s ease;
		&.shown {
			max-height: 350px;
		}
	}
	.gru-content div.cell.logout-link {
		font-family: Oswald;
		text-transform: uppercase;
		padding: 0;
		box-shadow: none;
		background: white;
		color: #dc1822;
		border: 1px solid #dc1822;
		transition: all ease 0.2s;
		a {
			display: block;
			text-align: center;
			border: none;
			&::before {
				font-family: FontAwesome;
				content: "\f011";  // power-off
				padding-right: 1ex;
				display: inline-block;
			}
		}
	}
	@media screen and (max-width: $desktop-limit) {
		.gru-content #sidebar {
			order: 1; // after main content
		}
	}
}

.section-bienvenue,
.section-mon-compte {
	div.new-place {
		form {
			padding: 10px 10px 10px 20px;
			label {
				color: #666;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: block;
			}
			> div {
				padding-bottom: 10px;
			}
		}
	}
}

.page-index,
.page-services,
.page-tableau-de-bord {
	div#add-section,
	div#signaler {
		text-transform: uppercase;
		font-family: Oswald, sans-serif;
		a {
			box-sizing: content-box;
			text-align: center;
			display: block;
			background: white;
			height: 19px;
			&:hover {
				background-color: $red;
			}
			@media screen and (max-width: $desktop-limit) {
				padding: 1rem 4rem;
			}
		}
	}
	div#signaler {
		a {
			background: white url(img/porte-voix.png) 5px 50% no-repeat;
			background-size: 45px;
			&:hover {
				background-image: url(img/porte-voix-hover.png);
			}
		}
	}
	div#cell-filter {
		border: none;
		form {
			width: 100%;
			display: flex;
			input {
				flex: 1;
				margin: 0;
				padding: 1rem;
				height: 19px;
				border-right: 0;
				box-sizing: content-box;
			}
			button,
			button:hover {
				margin: 0;
				color: transparent;
				background: $red url(img/loupe-white.png) center center no-repeat;
			}
		}
	}
	div.filter-empty p {
		padding: 0rem 1rem;
	}
	@media screen and (max-width: $desktop-limit) {
		.gru-content #sidebar {
			order: 1; // after main content
		}
	}
}

.page-formdata-status {
	#columns {
		display: flex;
		.buttons {
			display: block;
		}
		@media screen and (max-width: $desktop-limit) {
			flex-direction: column;
		}
		#form-status-sidebar {
			flex: 0 0 $sidebar-width;
			@media screen and (min-width: $desktop-limit) {
				max-width: $sidebar-width;
				overflow: hidden;
			}
			.cell {
				margin-left: 1rem;
				margin-right: 0;
				box-shadow: 0 0 3px #888;
				@media screen and (max-width: $desktop-limit) {
					margin: 1rem 0;
				}
			}
			img {
				max-width: 100%;
			}
		}
		#receipt-intro {
			margin-top: 0;
			margin-right: 0;
			@media screen and (max-width: $desktop-limit) {
				margin-right: 1rem;
			}

			div[class*=grid-] {
				width: 100%;
				padding-right: 0;
				float: none;
			}
			div.field {
				margin: 0.25rem 0;
				.label {
					color: #888;
				}
			}
			div.page {
				clear: both;
			}
			div.page h3 {
				margin: 1rem 0 0.5rem 0;
				font-family: Oswald;
				font-weight: normal;
			}
		}
	}
	ul#evolutions li {
		&::after {
			content: none;  // no horizontal line from timeline to status
		}
		span.item {
			line-height: 28px;
			width: 24px;
			height: 24px;
			left: 18px;
			border: 2px solid $red;
			top: 28px;
			box-shadow: 0 0 0px 10px white;
			background: $red !important;
			&::before {
				content: none;  // no icon in bullets
			}
		}
		&.msg-first span.item {
			background: white !important;
		}
	}
	form#wf-actions {
		textarea {
			width: 100%;
			height: 8rem;
		}
	}
}

// dashboard
#ajouter-service,
#connectez-vous {
	border: 1px dashed #888;
	text-align: center;
	background: white url(img/avatar-plus.png) 50% 10px no-repeat;
	padding-top: 50px;
	&:hover {
		border: 1px solid $red;
		cursor: pointer;
	}
	h3 {
		padding-top: 1rem;
		font-family: Oswald;
		text-transform: uppercase;
		color: $red;
	}
	p {
		margin: 1rem auto;
		max-width: 26rem;
	}
}

#ajouter-service {
	background-image: url(img/coeur-plus.png);
}

#page.goto-page {
	#content {
		display: block;  // cancel display: flex;
		box-shadow: 0 0 5px #888;
		border: 1px solid #ccc;
		background: white;
	}

	#goto-way {
		background: url(img/ic_my_rendre.png) top center no-repeat;
		height: 120px;
	}
	#goto-content {
		max-width: 800px;
		margin: 0 auto;
	}

	.geolocating {
		padding: 1rem 0 2rem 0;
		button {
			margin-right: 0;
		}
		.failed {
			border: 2px solid $red;
			padding: 1rem;
		}
	}

	#goto-destination {
		text-align: center;
		background: transparent;
		border: none;
		box-shadow: none;
		> div > h2,
		> div > h3 {
			color: $font-color;
			font-size: 110%;
			margin-top: 30px;
			padding-top: 30px;
			background: url(img/surtitle.png) top center no-repeat;
			text-transform: uppercase;
			font-family: Oswald;
			font-weight: bold;
		}
		div.cell {
			max-width: 600px;
			margin: 0 auto;
			.tile-actions {
				visibility: hidden;
			}
		}
	}

	div.cell.goto {
		display: inline-block;
		width: 380px;
		background: #efefef;
		border: none;
		border-left: 6px solid #00969c;
		padding: 0;
		&:nth-child(2n) {
			float: left;
		}
		&:nth-child(2n+1) {
			float: right;
		}
		div.mode {
			display: none;
		}
		div.goto-onlymoov {
			padding: 2rem 1rem 2rem 80px;
			@media screen and (max-width: $desktop-limit) {
				padding-left: 70px;
			}
			&.BIKE {
				background: url(img/onlymoov-bike.png) 1ex center no-repeat;
			}
			&.PT {
				background: url(img/onlymoov-pt.png) 1ex center no-repeat;
			}
			&.CAR {
				background: url(img/onlymoov-car.png) 1ex center no-repeat;
			}
			&.WALK {
				background: url(img/onlymoov-walk.png) 1ex center no-repeat;
			}
			div.duration {
				display: inline-block;
				&.loading-duration {
					animation-name: pulse_opacity_animation;
					animation-iteration-count: infinite;
					animation-duration: 2000ms;
				}
			}
			a {
				display: inline-block;
				position: relative;
				top: -0.5ex;
				font-family: Oswald;
				text-transform: uppercase;
				background: black;
				color: white;
				float: right;
				padding: 0.5rem 0.5rem 0.2rem 0.5rem;
			}
		}
	}

	div.textcell {
		border: none;
	}

	@media screen and (max-width: $desktop-limit) {
		#backlink, .backlink {
			margin-top: 0;
		}
	}
}

.section-bienvenue #welcome {
	div.new-place {
		padding: 3rem 6rem;
		@media screen and (max-width: $desktop-limit) {
			padding: 1rem 0;
		}
	}
	& + div.linkcell {
		display: none;
	}
}

// decheteries

ul.allowed-waste {
	margin: 0;
	padding: 0;
	list-style: none;
	li {
		list-style: none;
		margin: 0;
		padding: 0.4ex 0;
		break-inside: avoid;
		page-break-inside: avoid;
	}
	column-count: 2;
	margin-bottom: 1rem;
}

table.allowed-vehicles {
	width: 100%;
	td {
		padding-top: 0.6ex;
	}
}

// login page
#content div#login-page {
	display: flex;
	flex-direction: column;
	div.block-oidc,
	div.block-password {
		width: 100%;
		margin-bottom: 1rem;
	}
	div.block-password {
		order: 2;
		h2 {
			padding-top: 0;
			padding-bottom: 0;
			span {
				display: inline-block;
				padding: 1rem 1rem 0.7rem 0rem;
			}
			a {
				background: white;
				color: $red;
				display: inline-block;
				padding: 1rem 1rem 0.7rem 1rem;
				text-decoration: underline;
				&:hover {
					background: $red;
					color: white;
				}
			}
		}
	}
	&.methods2 { // both password and oidc enabled
		div.block-password.for-unknown,
		div.block-password.for-frontoffice {
			display: none;
		}
		div.block-oidc.for-backoffice {
			display: none;
		}
		div.block-oidc.for-unknown {
			#redirect {
				display: none;
			}
		}
	}
}

// tutorial video
#video {
	padding: 0;
	margin: 0;
	border: none;
	position: relative;
	width: 100%;
	max-width: calc(100% - 1rem);
	height: 0;
	padding-bottom: 56.25%;  // keep aspect ratio
	p {
		padding: 0;
		margin: 0;
	}
	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

// RSJ
.rsj-fiche {
	table, p {
		text-align: center;
		width: 100%;
		max-width: 60em;
		margin-left: auto;
		margin-right: auto;
	}
	table tr:first-child h3 {
		margin-top: 0;
	}
}

.rsj-a-traiter {
	table {
		width: 100%;
	}
}

.gru-content div.cell.pn-home {
	display: none;
	h2 {
		background: transparent;
		color: black;
	}
	div {
		text-align: center;
		p {
			margin: 1em 1em;
			text-align: left;
		}
		a {
			margin-bottom: 1em;
		}
	}
}

#sidebar div.cell.pn-home {
	p {
		display: none;
	}
	h2 {
		background: transparent url(img/magic.png) left 50% bottom 10px no-repeat;
		padding-bottom: 50px;
	}
}
