@import '../includes/fonts/roboto';
@import '../includes/fonts/josefinsans';

$categories: administration, dechets, eau-potable, eaux-usees, economie, logement, rh, solidarite, urbanisme, voirie, autres-questions, deplacements, environnement, participation, proxi-communes, mobilites;

@mixin hover-animation($background-color: $primary-color, $background-image: none, $hover-background-image: none, $text-color: #000000, $hover-text-color: $primary-color) {
	font-family: Roboto !important;
	font-size: 1.1rem;
	font-weight: normal;
	background-color: $background-color;
	color: $text-color;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-right: 1rem;
	@include vendor-prefix(transform, translateZ(0px));
	@if $background-image != none {
		background-image: url($background-image);
		background-repeat: no-repeat;
		background-position: 0.5rem center;
		background-size: 1.8rem;
	}
	&::before {
		height: auto;
		width: auto;
		background: #000000;
		bottom: -1px;
		content: " ";
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		@include vendor-prefix(transform, scaleX(0));
		@include vendor-prefix(transform-origin, 0 50%);
		transition: transform 0.3s ease-out;
		@include vendor-prefix(backface-visibility, hidden);
		z-index: -1;
		@if $hover-background-image != none {
			background-image: url($hover-background-image);
			background-repeat: no-repeat;
			background-position: 0.5rem center;
			background-size: 1.8rem;
		}
	}
	&:hover {
		color: $hover-text-color;
		&::before {
			@include vendor-prefix(transform, scaleX(1));
		}
	}
}

%gam-cell-button {
	font-weight: bold;
	background-color: $gam-button-background-color;
	color: #ffffff;
	padding: 5px 20px;
}

%gam-link {
	background: $primary-color;
	padding: 0.5em 10px 0.5em 10px;
	text-decoration: none;
	border: 2px solid #000;
}

%item-with-icon {
	padding: 10px 5px 10px 55px;
	background-repeat: no-repeat;
	background-size: auto 27px;
	background-position: 10px center;
}

%custom-radio-checkbox-widget {
	input + span {
		&::before {
			height: 0.86rem;
			width: 0.86rem;
			top: 0.1rem;
		}
		&::after {
			height: calc(0.86rem - 4px);
			width: calc(0.86rem - 4px);
			top: calc(0.1rem + 2px);
		}
	}
}

div#columns > div {
	&.column {
		width: 100%;
		float: none;
	}
	&.column:last-child {
		clear: both;
	}
}

div#main-content-wrapper {
	z-index: 1;
	margin-bottom: 5ex;
	div.textcell,
	div.comment-field,
	div.drafts-recall {
		ol, ul {
			list-style-type: initial;
			margin: 1em auto;
			padding-left: 40px;
		}
	}
	div.cell {
		overflow: visible;
	}
}

/* restore site's search form styles */
form#champRecherche input {
	background-color: #ffffff;
	padding: 0;
	transition: none;
	margin: 0;
	box-shadow: none;
}

/* hide site's "go to top" button */

img#hautDePage {
	@media screen and ($max-mobile-viewport) {
		display: none !important;
	}
}

#toplinks {
	display: none;
	z-index: 10;
	border: 0;
	padding-top: 0;
	padding-left: 1em;
	box-shadow: none;
	border-radius: 0;
	@media screen and ($max-mobile-viewport) {
		display: block;
	}
	a {
		display: none;
		&.logout {
			display: block;
			text-decoration: none;
			&::after {
				margin-left: 5px;
				content: '\f08b'; /* fa-sign-out */
				font-family: FontAwesome;
			}
		}
	}
}

.green-button, .lightblue-button {
	padding: 10px 25px;
	color: #000000;
	text-decoration: none;
	font-weight: bold;
	display: inline-block;
	@media screen and ($max-mobile-viewport) {
		display: block;
	}
	&:hover {
		background-color: #000000;
	}
}

.green-button {
	background-color: $ternary-color;
	&:hover {
		color: $ternary-color;
	}
}

.lightblue-button {
	background-color: $secondary-color;
	&:hover {
		color: $secondary-color;
	}
}

#content {
	div.topbanner-wrapper, div.configjsoncell.user {
		margin-bottom: 20px;
		margin-right: 0;
	}
	flex-direction: column;
	div.bandeau {
		background-repeat: no-repeat;
		padding: 80px 0;
		h2 {
			font-size: 250%;
			font-weight: normal;
			margin-bottom: 0;
		}
		@media screen and ($max-mobile-viewport) {
			padding: 10px 0;
			h2 {
				font-size: 180%;
			}
		}
	}
	div.bandeau div {
		box-sizing: content-box;
		background: #fff;
		width: 75%;
		margin: 0 auto;
		padding: 1ex 1em;
		h2::before {
			display: none;
		}
	}
	div.content-wrapper div.columns {
		display: flex;
		justify-content: space-between;
		@media screen and ($max-mobile-viewport) {
			flex-direction: column;
		}
		div.right {
			width: 30%;
			div.cell {
				margin-left: 0;
				margin-right: 0;
			}
		}
		div.left {
			width: 65%;
			div.categories {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				&::after {
					display: none;
				}
			}
		}
		div.right, div.left {
			@media screen and ($max-mobile-viewport) {
				width: 100%;
			}
		}
		div.left-header {
			margin: 0 10px;
			background: #f1f1f1;
			> div {
				padding: 5px;
			}
		}
	}
	div.wcsformsofcategorycell {
		flex: 0 0 calc(50% - 0.5rem);
		margin: 0.3ex 0 1.35ex 0;
		@media screen and ($max-mobile-viewport) {
			flex: 0 0 100%;
		}
		h2:first-child {
			margin-bottom: 0;
		}
		@each $category in $categories {
			&.#{$category} {
				&.foldable {
					> div h2:first-child {
						padding-left: 3rem;
						@include hover-animation($primary-color, "img/#{$category}.svg", "img/#{$category}-hover.svg", $primary-color);
						&::before {
							@include vendor-prefix(transform, scaleX(1));
						}
					}
					&.folded {
						> div h2:first-child {
							@include hover-animation($primary-color, "img/#{$category}.svg", "img/#{$category}-hover.svg", #000000);
							&::before {
								@include vendor-prefix(transform, scaleX(0));
							}
						}
					}
				}
			}
		}
		&.foldable {
			> div {
				h2:first-child {
					padding-left: 1rem;
					@include hover-animation($primary-color, none, none, $primary-color);
					&::before {
						@include vendor-prefix(transform, scaleX(1));
					}
				}
				> div {
					position: relative;
					padding: 0;
				}
			}
			&.folded {
				> div h2:first-child {
					@include hover-animation($primary-color, none, none, #000000);
					&::before {
						@include vendor-prefix(transform, scaleX(0));
					}
					&::after {
						content: '\f105'; /* chevron-right */
					}
				}
			}
			ul {
				position: absolute;
				@media screen and ($max-mobile-viewport) {
					position: relative;
				}
				z-index: 10;
				background: white;
				width: 100%;
				box-shadow: 0px 0px 5px #888888;
				left: 0;
				top: 0;
				li a {
					text-decoration: none;
					border-color: #edece7;
					padding-left: 1.5em;
					&:hover {
						background: #f2f2f0;
					}
					&::after {
						content: '\f105'; /* fa-angle-right */
						font-family: FontAwesome;
						position: absolute;
						left: 0.7em;
						top: 1rem;
					}
				}
			}
		}
	}
	div.wcsformcell.proxi {
		@media screen and ($min-desktop-viewport) {
			width: calc(50% - 1.35em);
			float: left;
		}
		a {
			padding-left: 1rem;
			text-decoration: none;
			display: block;
			@include hover-animation($ternary-color, none, none, #000000, $ternary-color);
			&::after {
				content: '\f105'; /* fa-angle-right */
				font-family: FontAwesome;
				position: absolute;
				right: 0.7em;
				top: 1rem;
				font-size: 120%;
			}
		}
	}
	div.trackingcodeinputcell {
		box-shadow: 0px 0px 10px #888888;
		padding: 0.5ex;
		@media screen and ($max-mobile-viewport) {
			background-color: #f5f5f5;
		}
		h2 {
			margin-left: 0.5em;
			padding-bottom: 0;
			&::before {
				content: '';
				width: 50px;
				height: 50px;
				background-color: transparent;
				background-image: url("img/suivi.png");
				background-repeat: no-repeat;
				display: block;
				top: -40px;
				background-size: contain;
				@media screen and ($max-mobile-viewport) {
					display: none;
				}
			}
		}
	}
	div.textcell.info {
		padding: 1.5em 1em 10px 1em;
		border: 4px solid $primary-color;
		position: relative;
		@media screen and ($max-mobile-viewport) {
			margin-top: 30px;
		}
		p {
			margin: 0;
		}
		&::before {
			content: '';
			width: 50px;
			height: 50px;
			background-image: url("img/info.svg");
			background-repeat: no-repeat;
			display: block;
			top: -30px;
			background-size: contain;
			position: absolute;
		}
	}
	div.cell + div.textcell.info {
		margin-top: 3em;
	}
	div.cell p {
		margin-left: 0;
		margin-right: 0;
	}
}

div.user-menu {
	width: 30%;
	@media screen and ($max-mobile-viewport) {
		display: none;
	}
	div.menucell {
		margin: 0;
		min-width: 300px;
		a {
			background: $primary-color;
			border: 1px solid #ffffff;
			text-decoration: none;
			&::after {
				content: '\f105'; /* fa-angle-right */
				font-family: FontAwesome;
				position: absolute;
				right: 0.7em;
				top: 1rem;
				font-size: 120%;
			}
			&:hover {
				background: #000000;
				color: $primary-color;
			}
		}
		li.menu-logout {
			a::after {
				content: '\f08b'; /* fa-sign-out */
			}
		}
		li.selected a {
			background: #000000;
			color: $primary-color;
		}
	}
	span.badge {
		font-weight: bold;
		display: inline-block;
		background: $nav-mobile-bottom-bar-badge-background;
		color: $nav-mobile-bottom-bar-badge-color;
		width: 23px;
		height: 23px;
		line-height: 23px;
		text-align: center;
		border-radius: 100%;
		font-size: 1em;
		margin-left: 1em;
		&::before, &::after {
			display: none;
		}
	}
}

label {
	font-weight: bold;
	span {
		font-weight: normal;
		&.required {
			color: #f00;
		}
	}
}

.gru-content div.notificationscell {
	h2:first-child {
		text-transform: uppercase;
	}
	div.notifications {
		padding: 0;
		column-count: 2;
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-gap: 1.35em;
		@media screen and ($max-mobile-viewport) {
			column-count: 1;
			-moz-column-count: 1;
			-webkit-column-count: 1;
		}
	}
	div.notification {
		background-color: #f1f1f1;
		margin: 10px 0 2ex 0;
		padding: 0;
		page-break-inside: avoid;
		-webkit-column-break-inside: avoid;
		break-inside: avoid;
		break-inside: avoid-column;
		display: inline-block;
		width: 100%;
		div {
			position: relative;
		}
		div.summary {
			text-transform: uppercase;
			background-color: #e4e4e4;
			font-family: Roboto, sans-serif;
			font-weight: bold;
			@extend %item-with-icon;
		}
		a {
			text-decoration: none;
		}
		a.ack {
			position: absolute;
			right: -10px;
			top: -10px;
			background-image: url('img/notification-ack.svg');
			background-repeat: no-repeat;
			background-size: contain;
			width: 20px;
			height: 20px;
		}
		div.description, div.date {
			padding: 10px 10px 5px 10px;
		}
		div.date {
			padding-top: 0;
			font-size: 1em;
			color: #969696;
			margin-bottom: 5px;
			.label {
				font-weight: bold;
			}
		}
	}
}

.pwa-navigation {
	left: 0;
	div > ul li a {
		padding-top: 40px;
		background-size: auto 30px;
		span span.badge {
			top: 25px;
		}
	}
}

div.trackingcodeinputcell {
	h2:first-child {
		font-family: Roboto !important;
		&::before {
			display: none;
		}
	}
	div.wcs-tracking-code-input {
		padding-top: 10px;
		padding-bottom: 5px;
	}
	input {
		background: #f1f1f1;
		width: 10em;
	}
	button {
		background: #2a2a2a;
		color: $primary-color;
	}
}

div.linkcell.gam-button {
	text-decoration: none;
	font-weight: bold;
	background: $primary-color;
	margin: 0.5ex 0;
	position: relative;
	display: inline-block;
	a {
		@extend %gam-link;
		&:hover {
			background: #000000;
			color: $primary-color;
		}
	}
}

div#nav {
	width: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	background: #ffffff;
	transition: width 0.3s ease;
	> ul {
		background: $primary-color;
		display: none;
		> li {
			display: block;
			line-height: 3em;
			padding: 0 1em;
			&::after {
				content: '';
				border-bottom: 1px solid #ffffff;
				display: block;
			}
			&.selected {
				background: #000000;
				a {
					color: $primary-color;
				}
			}
			&.selected, &:last-child {
				&::after {
					display: none;
				}
			}
			a {
				padding-left: 1em;
				padding-right: 1em;
				position: relateive;
				&::after {
					content: '\f054'; /* chevron-right */
					font-family: FontAwesome;
					position: absolute;
					right: 15px;
					font-size: 90%;
				}
			}
		}
	}
	&.toggled {
		@media screen and ($max-mobile-viewport) {
			width: 50%;
			> ul {
				display: block;
			}
		}
	}
}

a#publik-mobile-menu {
	@media screen and ($max-mobile-viewport) {
		background-color: #2a2a2a;
		background-image: url('img/mobile-menu.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 45px auto;
		width: 50px;
		height: 80px;
		display: table-cell;
	}
}

a.gam-button {
	@extend %gam-link;
}

div.linkcell.lien-accueil {
	display: inline-block;
	font-weight: bold;
	div {
		width: auto;
	}
	li {
		width: auto;
	}
	a {
		@extend %gam-link;
		padding-left: 2em;
		&::before {
			position: absolute;
			left: 0;
			content: '';
			display: block;
			margin: 0 10px;
			height: 1em;
			width: 2em;
			background: url("img/accueil.svg") no-repeat;
			background-position: center left;
		}
		&:hover {
			background: $primary-color;
		}
	}
}

div.configjsoncell.user {
	box-shadow: 0px 0px 5px #888888;
	min-width: 250px;
	> div {
		display: flex;
		justify-content: space-between;
	}
	div.user-profile {
		font-weight: bold;
		font-size: 125%;
		display: inline-block;
		padding: 45px 0px 45px 150px;
		position: relative;
		&.no-avatar {
			background-image: url('img/user-avatar.svg');
			background-repeat: no-repeat;
			background-size: 125px auto;
		}
		img {
			width: 130px;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 100%;
		}
	}
	div.user-profile {
		margin: 10px;
	}
	div.user-infos {
		flex-grow: 2;
	}
	a.user-dashboard-item {
		background: $primary-color;
		font-weight: bold;
		font-size: 110%;
		text-decoration: none;
		padding: 10px 30px 10px 30px;
		position: relative;
		margin: 0 15px 0 20px;
		display: inline-block;
		min-width: 5em;
		div.dashboard-item-label, div.dashboard-item-value {
			text-align: center;
		}
		@media screen and ($max-mobile-viewport) {
			padding: 30px 10px 10px 10px;
			margin: 10px 0;
		}
		@each $item in (drafts, demands, payments) {
			&.#{$item}::before {
				content: '';
				left: -23px;
				width: 46px;
				height: 46px;
				position: absolute;
				background-image: url('img/user-#{$item}.svg');
				background-repeat: no-repeat;
				background-size: contain;
				@media screen and ($max-mobile-viewport) {
					left: calc(50% - 23px);
					top: -23px;
				}
			}
		}
	}
	div.user-dashboard {
		margin: 2ex 1ex 0 150px;
		@media screen and ($max-mobile-viewport) {
			margin: 3ex 1ex 0 1ex;
			justify-content: center;
		}
		@media screen and (max-width: $very-small-screen) {
			margin: 3ex 0 0 0;
		}
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
}

div#tracking-code {
	background: #000000;
	padding: 1.5ex 1.75ex 1ex 1.75ex;
	margin-bottom: 3em;
	color: $primary-color;
	font-family: 'Josefin Sans', sans-serif;
	@media screen and ($max-mobile-viewport) {
		margin-bottom: 1em;
	}
	h3, a {
		color: $primary-color;
		font-size: 1.2em;
		padding: 0;
	}
	h3 {
		font-size: 1.2em;
		text-transform: uppercase;
		&::after {
			content: ':';
			padding-left: 5px;
		}
	}
	div.text-tracking-code-short-text {
		font-size: 0.75em;
		padding: 0;
		p {
			margin: 0;
		}
	}
	form button {
		margin: 0;
	}
}

div#rub_service {
	h2 {
		text-transform: uppercase;
		text-align: left;
		@media screen and ($max-mobile-viewport) {
			font-size: 120%;
		}
		&::before {
			display: none;
		}
	}
	form {;
		border: 1px solid #f1f1f1;
		h3 {
			text-transform: uppercase;
			padding: 0.75rem 0.5rem 0.5rem 0.5rem;
			background: $primary-color;
			margin: -0.5rem -0.5rem 0.5rem -0.5rem;
			border: 0;
			clear: both;
		}
		div.page {
			padding: 0;
		}
		button {
			text-transform: uppercase;
			font-weight: bold;
		}
		 }
	div#evolution-log, div#summary {
		h2 {
			&::before {
				left: 0;
			}
		}
	}
	div#evolution-log {
		margin-top: 1em;
		div.evolution-metadata, div.msg {
			background: #f1f1ef;
			display: block;
		}
		div.msg {
			margin-right: 0;
		}
		ul#evolutions {
			span.item {
				background: $ternary-color !important;
				border: 0;
				width: 32px;
				height: 32px;
				&::before {
					content: '\f00c';
					font-family: FontAwesome;
					background: $ternary-color;
					color: #ffffff;
					top: 8px;
					left: 8px;
					width: 8px;
					height: 8px;
				}
			}
			li::after {
				background: #f1f1ef;
				transform: rotate(45deg);
				width: 1em;
				height: 1em;
				top: 32px;
				left: 55px;
			}
			&::after {
				border: 1px dashed #bbb;
				background: transparent;
			}
		}
		div.evolution-metadata {
			padding-top: 20px;
			padding-bottom: 1ex;
			span.status::after {
				content: "|";
				padding: 0 0 0 0.5em;
			}
			span.time {
				display: inline;
				color: #000;
				text-transform: uppercase;
			}
		}
	}
	div#receipt-intro {
		margin: 0;
		p#tracking-code a {
			display: block;
			background: #f1f1ef;
			text-align: center;
			font-size: 1.5em;
			font-weight: bold;
			padding: 1ex;
			margin: 0;
		}
	}
	div#summary {
		div.page {
			h3 {
				display: none;
			}
		}
		a#disclose-dataview {
			background: #f1f1ef;
			padding: 2ex;
			text-transform: uppercase;
			text-decoration: none;
			margin: 0;
			&::after {
				content: '\f107';
				font-family: FontAwesome;
				position: absolute;
				right: 4em;
				font-size: 1.5em;
			}
		}
		div.dataview .value {
			margin-left: 0;
		}
	}
}

select {
	background-color: #e4e4e4;
}

#sidebar div.user-menu div.cell {
	margin-right: 0;
}

.gru-content {
	div.cell, div.block {
		h2:first-child {
			margin-bottom: 2ex;
			@media screen and ($max-mobile-viewport) {
				font-size: 120%;
			}
		}
	}
}

.gru-content div.cell {
	&.wcscurrentdraftscell, &.wcscurrentformscell, &.lingobasketcell {
		h2:first-child {
			background-color: $secondary-color;
			font-family: Roboto, sans-serif !important;
			padding: 0.5ex 0.5ex 0.5ex 1ex;
			font-size: 135%;
			&::before {
				display: none;
			}
		}
	}
	&.lingobasketcell {
		background-color: $gam-user-cell-background-color;
		h2:first-child {
			background-color: $notifications-background-color;
		}
		button {
			@extend %gam-cell-button;
		}
	}
	&.wcscurrentdraftscell, &.wcscurrentformscell {
		ul {
			column-count: 3;
			-moz-column-count: 3;
			-webkit-column-count: 3;
			column-gap: 1.35em;
			padding: 1ex 0;
			@media screen and ($max-mobile-viewport) {
				column-count: 1;
				-moz-column-count: 1;
				-webkit-column-count: 1;
			}
			li {
				page-break-inside: avoid;
				-webkit-column-break-inside: avoid;
				break-inside: avoid;
				break-inside: avoid-column;
				display: inline-block;
				width: 100%;
				background-color: $gam-user-cell-background-color;
				margin-bottom: 2ex;
				div.form-name {
					font-family: Roboto, sans-serif;
					font-size: 120%;
					font-weight: bold;
					background-color: $ternary-color;
					@extend %item-with-icon;
				}
				div.form-details {
					font-size: 95%;
					padding: 2ex 1em;
					color: #b0b0b0;
					span.label {
						font-weight: bold;
					}
				}
				div.form-status {
					box-sizing: content-box;
					font-weight: bold;
					color: #000000;
					padding-left: 25px;
					position: relative;
					margin-bottom: 2ex;
					&::before {
						position: absolute;
						left: 0;
						content: '';
						background-image: url('img/arrow-right.svg?toto=test');
						background-repeat: no-repeat;
						background-size: contain;
						border-radius: 100%;
						width: 17px;
						height: 17px;
						padding-left: 7px;
						margin-right: 0.5em;
					}
				}
				div.form-url {
					text-align: center;
					margin: 15px 10px 10px 10px;
					a {
						@extend %gam-cell-button;
						background-color: $ternary-color;
						text-decoration: none;
						color: #000000;
						&:hover {
							color: $ternary-color;
							background: #000000;
							transition: all ease 0.3s;
						}
					}
				}
			}
		}
	}
	&.wcscurrentdraftscell ul li {
		div.form-name, div.form-url a {
			background-color: $secondary-color;
		}
		div.form-url a:hover {
			color: $secondary-color;
		}
	}
	&.wcscurrentformscell {
		h2:first-child {
			background-color: $ternary-color;
		}
		&.demandes-terminees {
			h2:first-child, ul li div.form-name, div.form-url a {
				background-color: #b0b0b0;
			}
			div.form-url a:hover {
				color: #b0b0b0;
			}
			div.form-status::before {
				content: '';
				background-image: url('img/check.svg');
				background-repeat: no-repeat;
				background-size: contain;
			}
		}
	}
}

div.form-validation div.page {
	background: #ffffff;
}

div.buttons {
	button {
		padding: 15px 25px;
	}
	div.submit-button {
		float: right;
		@media screen and (max-width: $very-small-screen) {
			float: none;
		}
		button {
			margin-right: 0;
		}
	}
	div.cancel-button button {
		background-color: #676767;
		color: #ffffff;
		margin-right: 0.5em;
	}
}

/* wcs progress bar styles */
.wcs-steps.steps-1 { display: none; }
.wcs-steps--list {
	@media ($max-mobile-viewport) {
		justify-content: center;
	}
}
.wcs-step {
	font-size: 1.2em;
	&--label {
		@include desktop-vertical-steps() {
			font-size: 0.65em;
		}
		@media ($max-mobile-viewport) {
			padding-left: 0;
			text-align: center;
			top: calc(100% - #{$wcs-steps-spacing});
			left: 0;
		}
	}
}

div.comment-field {
	&.infobulle {
		border: 2px solid $primary-color;
		margin: 2ex auto 5ex 1.5em;
		padding: 1ex 1em 1ex 3em;
		position: relative;
		font-size: 120%;
		&::before {
			content: '';
			width: 50px;
			height: 50px;
			background-image: url('img/infobulle.svg');
			background-repeat: no-repeat;
			background-size: contain;
			position: absolute;
			left: -25px;
			top: calc(50% - 25px);
		}
		p {
			margin: 0;
		}
		@media screen and ($max-mobile-viewport) {
			padding: 3ex 1em 1ex 1em;
			margin: 2ex auto;
			&::before {
				left: 1em;
				top: -25px;
			}
		}
	}
	&.champs-requis {
		color: #f00;
	}
}

div.back-home-button {
	display: none;
}

/* registration */
body.page-register {
	div#sidebar {
		margin: 4ex 0;
	}
	div#frontend-registration-email, div#frontend-registration-fc {
		display: inline-block;
		width: 48%;
		@media screen and ($max-mobile-viewport) {
			display: block;
			width: 100%;
		}
	}
	#frontend-registration-email {
		padding: 1ex 2ex 0 0;
		text-transform: uppercase;
		vertical-align: top;
		@media screen and ($max-mobile-viewport) {
			padding: 1ex 0;
		}
		p, form {
			margin-left: 0;
			margin-right: 0;
		}
		button {
			border: 2px solid #000000;
			font-weight: bold;
			width: 100%;
			&::after {
				content: '\f061';
				font-family: FontAwesome;
				width: 2em;
				font-size: 0.9em;
				margin-left: 0.75em;
			}
		}
	}
	#frontend-registration-fc {
		h2 {
			display: none;
		}
		margin-left: 3em;
	}
	div#fc-button-wrapper {
		padding: 8ex 0 20px 0px;
	}
	div#columns div.a2-block {
		margin: 0 0 3em 0;
	}
}

div#login-page {
	div#fc-button-wrapper {
		padding-top: 15ex;
	}
	&.methods2 > div.block-password > div {
		padding: 0;
	}
}

div#login-page, div.a2-block {
	div#fc-button-wrapper {
		@media screen and ($max-mobile-viewport) {
			padding-top: 0;
		}
	}
}

/* profile styles */

.gru-content {
	div.a2-block, div#a2-profile, div#login-page, div#account-management-fc {
		margin: 0;
		h2 {
			text-transform: uppercase;
		}
		button {
			text-transform: uppercase;
			font-weight: bold;
		}
	}
	div#account-management-fc {
		margin-top: 2ex;
	}
}

div#login-page {
	a {
		color: #f95731;
	}
	form {
		input[type="text"], input[type="password"] {
			width: 100%;
			padding: 1ex;
		}
		button{
			margin-right: 0;
			margin-bottom: 1ex;
			&.cancel-button {
				margin-right: 2ex;
				background: $gam-button-background-color;
			}
		}
		div.buttons {
			display: flex;
			flex-direction: row-reverse;
			justify-content: space-between;
			flex-wrap: wrap;
		}
	}
}

div#account-management {
	margin: 0;
	h2 {
		display: none;
	}
	ul > li {
		margin: 0.5ex 0;
		&:nth-child(2n+1) {
			background-color: $gam-user-cell-background-color;
		}
		> a {
			font-weight: bold;
			text-decoration: none;
			padding-left: 2rem;
			&::after {
				content: '\f105';
				font-family: FontAwesome;
				position: absolute;
				left: 1rem;
			}
		}
	}
}

div#profile {
	padding: 0 0 1rem 0;
	span.label {
		font-size: 1.1rem;
		font-weight: bold;
		text-transform: uppercase;
	}
	@include vendor-prefix(column-count, 2);
	@media screen and ($max-mobile-viewport) {
		@include vendor-prefix(column-count, 1);
	}
	div.field {
		page-break-inside: avoid;
		-webkit-column-break-inside: avoid;
		break-inside: avoid;
		break-inside: avoid-column;
	}
	dd {
		font-size: 120%;
	}
}

div.column.profile, div.column.account-management {
	width: 100%;
	float: none;
}

div.account-management div#fc-button {
	display: block;
}

/* porte-doc styles */

div.fileinfo a.remove:before, div#user-files a.icon-remove::before {
	color: #000;
}

body.page-porte-doc {
	#content div.cell {
		h2 {
			text-transform: uppercase;
		}
	}
	div#user-files {
		padding: 1rem 0;
		th a, button, th {
			text-transform: uppercase;
		}
		button {
			border: 2px solid #000;
			float: left;
		}
		tbody {
			tr:nth-child(2n+1) {
				background-color: #f1f1ef;
			}
			tr:nth-child(2n) {
				background-color: #e5e5e5;
			}
		}
		td {
			padding: 0.5ex;
			&.size {
				text-align: left;
			}
		}
	}
}
