@charset "utf-8";


/* --------------------------------------------------------------------------
   Variables
-------------------------------------------------------------------------- */

	:root {
		--header-height: 6rem;
		--content-padding-inline: 10%;
		--content-padding-top: 3.75rem;
	}

	body {
		background: #FFF;
	}


/* --------------------------------------------------------------------------
   Dialog extend
-------------------------------------------------------------------------- */

	section {

		.recovery-pass {

			display: flex;
			justify-content: space-between;

			a {
				font-weight: 500;
				color: var(--green-color);
				text-decoration: none !important;
			}

		}

		.position-relative {

			position: relative;
			display: inherit;

			span {
				cursor: pointer;
				position: absolute;
				top: 50%;
				right: .8rem;
				transform: translateY(-50%);
				height: 1.825rem;
				width: 1.825rem;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			svg {

				height: 1.825rem;
				width: 1.825rem;
				color: var(--grey-80-color);
				transition: all 300ms ease-in-out;

				&:hover {
					color: var(--green-color);
					transform: rotate(180deg);
				}

			}

		}

	}

	.agreement.checkbox {

		color: var(--grey-64-color);
		font-size: .9rem;

		a {
			color: var(--green-color);
			text-decoration: underline;
		}

	}


/* --------------------------------------------------------------------------
   Registration Form
-------------------------------------------------------------------------- */

	#registration-dialog {

		width: 60rem;

		form {

			display: grid;
			grid-template-columns: 1fr 1fr;

			.agreement {
				grid-row: 5;
				grid-column: 1 / span 2;
			}

			.button {
				grid-row: 6;
				grid-column: 1 / span 2;
			}

		}

	}


/* --------------------------------------------------------------------------
   Activation Form
-------------------------------------------------------------------------- */

	#activation-form .repeat {

		display: inherit;

		span {
			font-weight: 500;
			padding-block: .5rem;
			color: var(--blue-color);
			display: block;
		}

	}


/* --------------------------------------------------------------------------
   Header
-------------------------------------------------------------------------- */

	header#top-header {

		background: #FFF;
		padding-inline: 2.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		z-index: 100;
		box-sizing: border-box;
		height: var(--header-height);
		box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .015);
		border-bottom: var(--line-width) solid rgba(0, 0, 0, .04);

		> div {
			display: flex;
			gap: 1rem;
		}

		> nav {

			display: flex;
			gap: 0;

			a {

				color: var(--grey-b4-color);
				border-radius: .5rem;
				padding: .875rem 1.75rem;
				letter-spacing: .01rem;
				font-weight: 500;

				&:hover {
					background: var(--black-4-opacity);
				}

				&.selected {
					color: #000;
					background: no-repeat;
				}

			}

		}

	}


/* --------------------------------------------------------------------------
   Main
-------------------------------------------------------------------------- */

	main[data-container="main"] {

		width: 100%;
		height: calc(100% - var(--header-height));
		box-sizing: border-box;

		.error-activation {

			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			gap: .5rem;
			box-sizing: border-box;
			color: var(--grey-b4-color);

			h3 {
				margin: 0;
				color: #000;
			}

			a {
				margin-top: 1rem;
				width: min-content;
			}

		}

	}


/* --------------------------------------------------------------------------
   Footer
-------------------------------------------------------------------------- */

	footer#bottom-footer {

		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: center;
		gap: 1rem;
		color: var(--grey-64-color);
		padding: 2.25rem var(--content-padding-inline);
		margin-top: var(--content-padding-top);
		box-sizing: border-box;
		background: linear-gradient( 180deg, #FFF 0%, #F8FCFB 45%, #EEF8F5 72%, #E3F4EF 100% );

		> div {

			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: .75rem;
			color: var(--grey-64-color);
			font-size: 1rem;
			line-height: 1.35;
			font-weight: 500;
			white-space: nowrap;

			> span {
				margin-left: .75rem;
			}

			a {

				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 2rem;
				height: 2rem;
				border-radius: .5rem;
				background: rgba(255, 255, 255, .75);
				box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .035);
				transition: var(--transition);

				&:hover {
					background: #FFF;
					transform: translateY(-.125rem);
				}

			}

		}

		> a {

			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 2.5rem;
			padding: 0 1.125rem;
			border-radius: .625rem;
			background: rgba(255, 255, 255, .72);
			color: var(--grey-64-color);
			text-decoration: none;
			font-size: .9375rem;
			line-height: 1.25;
			font-weight: 500;
			white-space: nowrap;
			box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .025);
			transition: var(--transition);

			&:hover {
				background: #FFF;
				color: #000;
				transform: translateY(-.125rem);
			}

		}

	}

	#cookie-dialog {

		padding: 1.5rem;
		border-radius: .75rem;
		position: fixed;
		bottom: 2%;
		right: 1.5%;
		background: #FFF;
		box-shadow: 0 0 2.5rem 0 rgba(0, 0, 0, .08);
		display: flex;
		flex-direction: column;
		gap: 1rem;
		z-index: 3;
		max-width: 40%;

		header {
			font-size: 1.25rem;
			font-weight: 500;
		}

		div {

			line-height: 150%;

			a {
				color: var(--green-color);
			}

		}

		footer {
			margin-top: 1.5rem;
			display: flex;
			gap: 1.25rem;
		}

	}


/* --------------------------------------------------------------------------
   Mobile
-------------------------------------------------------------------------- */

	html[data-device="mobile"] {

		--footer-height: 4rem;

		#registration-dialog form {

			display: flex;

		}

		#activation-form footer {

			gap: 1rem;
			flex-direction: column;

		}

		header#top-header {

			a.button {
				height: 1.5625rem;
			}

			div[data-role="menu"] {

				display: flex;
				flex-direction: column;
				gap: .3rem;
				width: 1.5rem;
				cursor: pointer;

				div {
					border-radius: 1rem;
					width: 100%;
					height: .1875rem;
					background: #000;
				}

			}

		}

		main[data-container="main"] {

			margin-inline: 1.25rem;
			height: inherit;
			width: inherit;

		}

		#page > footer {

			background: linear-gradient(
				180deg,
				#FFF 0%,
				#F8FCFB 45%,
				#EEF8F5 72%,
				#E3F4EF 100%
				);
			display: flex;
			flex-direction: column;
			gap: .625rem;
			color: var(--grey-80-color);
			padding: 1.75rem 1.25rem 2rem;
			margin: 2rem 0 0;
			text-align: center;
			box-sizing: border-box;

			a {

				color: var(--grey-64-color);
				text-decoration: none;
				font-size: .9375rem;
				line-height: 1.35;
				font-weight: 500;
				transition: var(--transition);

				&:hover {
					color: var(--green-color);
				}

			}

			div {

				margin-top: .875rem;
				padding-top: 1rem;
				color: var(--grey-b4-color);
				font-size: .875rem;
				line-height: 1.3;
				position: relative;

				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 3.5rem;
					height: var(--line-width);
					border-radius: 1rem;
					background: rgba(0, 150, 136, .25);
				}

			}

		}

		#page footer#bottom-footer {

			display: none;

		}

		#cookie-dialog {

			max-width: 99%;
			left: 1%;
			bottom: 1%;

			footer {
				justify-content: right;
				flex-direction: row-reverse;
			}

		}

	}