input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active
{
	-webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
	-webkit-transition-delay: 9999s;
}

body
{
	margin: 0;
	padding: 0;
}

.main_login
{
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 60dvw 1fr;
	height: 100%;
	margin: 0;
	padding: 0;

	.news
	{
		position: relative;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #7A4AEB;
		background-image: url( '../images/gui/iso.svg' );
		scroll-snap-type: x mandatory;
		background-repeat: repeat-x;
		background-size: auto 120%;
		background-position: center right -300%;

		article
		{
			position: relative;
			display: block;
			max-height: 50%;
			overflow-y: scroll;
			margin: 5rem;
			padding: 0.2rem 1rem;
			color: white;
			background: rgba( 255, 255, 255, 0.3 );
			border-radius: 10px;
			scrollbar-width: none;

			&::-webkit-scrollbar
			{
				display: none;
			}

			h3
			{
				font-size: 1.4em;
				text-transform: uppercase;

				span
				{
					display: inline-block;
					font-size: 0.7em;
					padding: 0.1rem 0.3rem;
					background: rgba( 0, 0, 0, 0.1 );
					border-radius: 5px;
				}

				strong
				{
					display: block;
					margin-top: 10px;
					text-decoration: underline;
					text-underline-offset: 10px;
					text-decoration-thickness: 1px;
					letter-spacing: 1.2px;
				}
			}

			p
			{
				font-size: 1.2em;
				font-weight: 100;
				letter-spacing: 1.2px;
			}

			img
			{
				width: 100%;
				border-radius: 20px;
			}

			a
			{
				position: sticky;
				bottom: 0;
				left: 50%;
				transform: translateX( -50% );
				display: block;
				width: 50%;
				border-radius: 20px;
				padding: 1rem 0;
				background: white;
				text-align: center;
				text-transform: uppercase;
				background: var( --thk_purple );
				color: white;
				box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.3 );
				transition: all 0.3s ease;

				&:hover
				{
					background: #333333;
				}
			}
		}

		.pager
		{
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX( -50% );
			z-index: 200;

			a
			{
				cursor: pointer;
				
				&.active
				{
					li
					{
						background-color: white;
					}
				}
			}

			li
			{
				display: inline-block;
				margin: 0 10px;
				font-size: 0;
				height: 10px;
				width: 10px;
				background: rgba( 255, 255, 255, 0.3 );
				border-radius: 50%;
			}
		}
	}

	.form
	{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80%;
		margin: 0 auto;
		background: white;

		.container
		{
			width: 100%;
			padding: 1rem 3rem;
		}

		.error
		{
			padding: 1rem 0;
		}

		form
		{
			display: block;
			width: 100%;

			.header
			{
				img
				{
					position: relative;
					top: -5dvh;
					display: block;
					width: 200px;
					margin: 2rem auto;
				}
			}

			.button
			{
				float: right;

				button
				{
					background: var( --thk_purple );
					padding: 0.5rem 2rem;
					color: white;
					border: 0;
					border-radius: 5px;
					text-transform: uppercase;
					transition: all 0.3s ease;

					&:hover
					{
						background: #333333;
					}
				}
			}
		}
	}
}

@media( max-width: 1000px )
{
	.main_login
	{
		.news
		{
			article
			{
				margin: 1rem;
			}
		}
	}
}

@media( max-width: 600px )
{
	.main_login
	{
		background: #7A4AEB;
		grid-template-columns: none;
		grid-template-rows: 1fr 1fr;
		height: 50dvh;
		z-index: 1;

		.news
		{
			height: auto;
			margin-top: -20px;
			z-index: 2;

			article
			{
				height: 50dvh;
				max-height:50dvh;
				margin: 0;
				background: none;
				padding-bottom: 20dvh;

				a
				{
					display: block;
					position: static;
					margin: 30px auto;
					transform: none;
					width: 70%;
				}
			}
		}

		.form
		{
			height: 50dvh;
			order: -1;
			border-radius: 0 0 20px 20px;
			margin-bottom: 10px;
			z-index: 3;
			box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.3 );
			width: 100%;

			.header
			{
				img
				{
					position: static;
					top: 0;
					display: block;
				}
			}
		}

		.pager
		{
			background: rgba( 30, 30, 30, 0.9 );
			border-radius: 10px;
			padding: 5px 5px;

			a
			{
				position: relative;
				top: -7px;
			}
		}
	}
}

input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly])
{
	border-bottom: 1px solid var( --thk_purple );
}