:root {
	--login-width: 400px;
	--login-width-mobile: 100%;
}

div#page {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 0.9fr;
}

	div#page > div.left-column {
		background-image: url('../../images/v2/login-image_no-drone_alt.svg');
		background-repeat: no-repeat;
		background-position: center center;
		padding: 1.5rem;
		display: flex;
	}

		div#page > div.left-column > div.left-column-inner {
			position: relative;
			flex: 1;
		}

			div#page > div.left-column > div.left-column-inner > div.header {
				display: grid;
				gap: 3rem;
			}

				div#page > div.left-column > div.left-column-inner > div.header > img {
				}

				div#page > div.left-column > div.left-column-inner > div.header > div.banner {
					display: grid;
					gap: 1.5rem;
				}

					div#page > div.left-column > div.left-column-inner > div.header > div.banner > h1 {
						font-size: 1.5rem;
						color: var(--secondary-75);
						font-weight: normal;
					}

						div#page > div.left-column > div.left-column-inner > div.header > div.banner > h1 > span {
							color: var(--secondary-ar-brand);
						}

					div#page > div.left-column > div.left-column-inner > div.header > div.banner > div {
						display: flex;
						align-items: center;
					}

						div#page > div.left-column > div.left-column-inner > div.header > div.banner > div > a {
						}

							div#page > div.left-column > div.left-column-inner > div.header > div.banner > div > a > svg {
								height: 14px;
							}

			div#page > div.left-column > div.left-column-inner > img#drone {
			}

			div#page > div.left-column > div.left-column-inner > img#atkinsrealis-logo {
				position: absolute;
				left: 0;
				bottom: 0;
				height: 24px;
			}

	div#page > div.right-column {
		padding: 1.5rem;
		padding-left: 0;
		display: flex;
	}

		div#page > div.right-column > div.right-column-inner {
			flex: 1;
			background-color: #fff;
			padding: 3rem;
			border-radius: 1.5rem;
			display: flex;
			flex-direction: column;
			gap: 3rem;
		}

			div#page > div.right-column > div.right-column-inner > div.header {
				display: flex;
				justify-content: center;
			}

				div#page > div.right-column > div.right-column-inner > div.header > div.header-inner {
					display: flex;
					justify-content: center;
					width: var(--login-width);
				}

					div#page > div.right-column > div.right-column-inner > div.header > div.header-inner > img.app-logo {
						height: 72px;
					}

			div#page > div.right-column > div.right-column-inner > div.main {
				flex: 1;
				align-content: center;
				display: grid;
				justify-content: center;
			}

				div#page > div.right-column > div.right-column-inner > div.main > div.main-inner {
					display: grid;
					gap: 1.5rem;
					width: var(--login-width);
				}

			/*moved out to partial css files*/

			div#page > div.right-column > div.right-column-inner > div.footer {
				display: grid;
				justify-content: center;
			}

				div#page > div.right-column > div.right-column-inner > div.footer > div.footer-inner {
					display: grid;
					gap: 1.5rem;
					width: var(--login-width);
				}

@media only screen and (max-width: 768px) {
	div#page {
		grid-template-columns: 1fr;
	}

		div#page > div.left-column {
			display: none;
		}

		div#page > div.right-column {
			padding-left: 1.5rem;
		}

			div#page > div.right-column > div.right-column-inner {
				padding: 1.5rem;
				gap: 1.5rem;
			}

				div#page > div.right-column > div.right-column-inner > div.header > div.header-inner > img.app-logo {
					height: 64px;
				}

				div#page > div.right-column > div.right-column-inner > div.header > div.header-inner {
					width: var(--login-width-mobile);
				}

				div#page > div.right-column > div.right-column-inner > div.main > div.main-inner {
					width: var(--login-width-mobile);
				}

				div#page > div.right-column > div.right-column-inner > div.footer > div.footer-inner {
					width: var(--login-width-mobile);
				}
}