@import "theme.css";

#authentication-systems {
	display: grid;
	grid-template-columns: 0.5fr min-content min-content 0.5fr;
	grid-template-rows:
		min-content
	;
	grid-template-areas:
		"header header header header"
		"space1 icon-1 icon-2 space2"
	;
	grid-gap: 0 128px;
	margin-top: 128px;


	.header {
		grid-area: header;
		justify-self: center;
		margin-bottom: 64px;
		font-size: 2em;
		font-weight: bold;
	}

	.icon {
		cursor: pointer;
		padding: 16px;
		border: 1px solid rgba(0, 0, 0, 0);

		&.col-1 { grid-area: icon-1 }
		&.col-2 { grid-area: icon-2 }
		&.selected {
			border: 1px solid #ccc;
		}

		img {
			height: 256px;
		}
	}
}

#internal-authentication {
	display: grid;
	grid-template-columns: 0.5fr min-content min-content 0.5fr;
	grid-template-rows: min-content;
	grid-gap: 8px 16px;
	margin-top: 128px;

	.header {
		grid-column: 2 / span 2;
		font-size: 1.5em;
		font-weight: bold;
		border-bottom: 2px solid #aaa;
		width: 100%;
		text-align: center;
		padding-bottom: 8px;
		margin-bottom: 16px;
	}

	.label {
		grid-column: 2;
		align-self: center;
		font-weight: bold;
		padding-left: 32px;

	}

	.input {
		grid-column: 3;
		padding-right: 32px;

		input {
			font-size: 1.2em;
			padding: 8px;
		}
	}

	.submit {
		justify-self: center;
		text-align: center;
		margin-top: 16px;
		padding-top: 16px;
		grid-column: 2 / span 2;
		width: 100%;
		border-top: 2px solid #aaa;

		button {
			font-size: 1.2em;
			padding: 8px;
		}
	}

	.error {
		justify-self: center;
		text-align: center;
		padding-top: 16px;
		grid-column: 2 / span 2;
		color: #a00;
		font-weight: bold;
	}
}

#process-ms365 {
	display: grid;
	grid-template-columns: 0.5fr min-content 0.5fr;
	grid-template-rows: min-content;
	margin-top: 128px;

	.header {
		grid-column: 2;
		font-weight: bold;
		white-space: nowrap;
		font-size: 1.2em;
		color: #666;
	}

	.spinner {
		grid-column: 2;
		justify-self: center;
	}
}