:root {
	--field-margin: 16px;
	--element-height: 48px;
	--corner-radius: 8px;
	--margin-between-fields: 8px;
}

iframe {
	border-radius: var( --corner-radius );
}

@media screen and ( max-width: 460px ) {
	.centerContainer__left {
		margin-bottom: var( --field-margin );
	}
}

@media screen and ( min-width: 461px ) {
	.cardRowCenter {
		display: flex;
	}

	.centerContainer__left {
		flex-grow: 1;
		margin-right: var( --margin-between-fields );
	}

	.centerContainer__right {
		flex-grow: 1;
		margin-left: var( --margin-between-fields );
	}

	.cardRowBottom {
		display: flex;
	}

	.rowBottomWrapper__margin {
		margin-right: var( --margin-between-fields );
	}

	.rowBottomWrapper__width {
		width: 50%;
	}
}

.cardRowTop,
.cardRowCenter {
	margin-bottom: var( --field-margin );
}

.inputDefault {
	height: var( --element-height );
	border: 1px solid #727272;
	border-radius: var( --corner-radius );
}

.inputError {
	height: var( --element-height );
	border: 1px solid #e70000;
	border-radius: var(	--corner-radius );
}

/* Commented out because hover made styling a bit visually messy. */
/* .inputDefault:hover, */
/* .inputError:hover, */
.inputFocused {
	height: var( --element-height );
	border: 1px solid #228800;
	border-radius: var( --corner-radius );
	box-shadow: 0px 0px 3px 0px #228800;
}