@import 'variables_new.css';

body.login {
	section {
		background-color: var(--gray-light);
		border-radius: var(--space-xs-s);
		box-shadow: var(--shadow-1);
		/* grid-column: span 6; */
		grid-column-start: 4;
		grid-column-end: 10;
		padding: var(--space-xs-m);
		padding-top: 0;

		.alert {
			color: var(--orange);
			margin-bottom: 0;
		}

		form {
			font-size: var(--step-2);
			margin-bottom: 0;

			input {
				border-radius: var(--space-2xs);
				border: 1px solid var(--gray-med-dark);
				padding: var(--space-3xs) var(--space-2xs);
			}

			button {
				background-color: var(--blue-dark);
				border-color: var(--white);
				border-radius: var(--space-2xs);
				color: var(--white);
				margin-left: var(--space-3xs);
				padding: var(--space-3xs) var(--space-xs);
			}

			button:hover {
				background-color: var(--blue);
			}
		}

		h1 {
			margin-top: var(--space-xs-m);
		}

		p {
			margin-top: 0;
			padding-bottom: var(--space-xs);
		}
	}
}

@media screen and (max-width: 1100px) {
	body.login {
		section {
			grid-column-start: 2;
			grid-column-end: 12;
		}
	}
}

@media screen and (max-width: 680px) {
	body.login {
		section {
			grid-column-start: 1;
			grid-column-end: 13;
		}

		button {
			margin-top: var(--space-3xs);
		}
	}
}
:root.theme-dark {
	body.login {
		section {
			background-color: var(--gray-med-dark);
		}
	}	
}