:host {
	width: 100%;
	height: 100%;
	display: flex;
}

.signing-layout-card {
	margin: 45px auto;
	width: 330px;
	/*margin: auto auto;*/
	padding: 40px;
	box-shadow: 0 1px 4px #ddd;
	border-bottom: 2px solid #ddd;
	: host-context(.screen-x-small) &
{
	width: 100%;
	height: 100%;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	/*border: 1 1 1 1;*/

}

.scrollable-menu-control {
	margin-top: 45px;
	text-align: center;
}

.e-menu-wrapper.e-scrollable-menu:not(.e-menu-popup) {
	width: 99%;
}

.header {
	width: 100%;
	background-color: #51c5ea;
	color: white;
	border: none;
	font-size: 50px;
	text-align: center;
}


.form-content {
	background-color: white;
	border: none;
	font-size: 20px;
	text-align: center;
}

.main-form {
	margin-top: 20px;
	margin-bottom: 5px;
}

.grid-form {
	margin-top: 20px;
}

.grid-list {
	margin-top: 20px;
	text-align: left;
}

.header-menu {
	text-align: center;
	width: 100%;
	padding: 0px 0px 0px 0px;
}

.form-header {
	width: 100%;
	background-color: white;
	color: #51c5ea;
	margin-top: 5px;
	margin-bottom: 5px;
}

.main-content {
	text-align: center;
	font-size: 20px;
}


/* The alert error message box */
.alert_error {
	padding: 20px;
	/* Red */
	color: #a94442;
	margin-bottom: 15px;
	border-bottom: 1px solid #a94442;
	text-align: left;
}

/* The alert success message box */
.alert_success {
	padding: 20px;
	/* green  5fb611 */
	color: green;
	margin-bottom: 15px;
	border-bottom: 1px solid green;
}

/* The alert primary message box */
.alert_primary {
	padding: 20px;
	background-color: #d35400;
	/* orange */
	color: white;
	margin-bottom: 15px;
}

/* The alert warning message box */
.alert_warning {
	padding: 20px;
	background-color: yellow;
	/* orange */
	color: black;
	margin-bottom: 15px;
}

.text_alert {
	color: #a94442;
}

/*html {
	font-size: 100%;
}

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: rem-calc(16);
}*/

.wrapper {
	margin: auto;
	/*max-width: rem-calc(1200);*/
}

main, header, section, aside, footer {
	display: block;
	margin: 0;
}


.mobile-list {
	text-align: left;
	margin-left: 5px;
	color: #51c5ea;
}

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

.form-content {
	flex: 1;
	text-align: left;
	margin-left: 10px;
}


.button {
	margin-right: 10px;
}

.desktop-list {
	flex: 0 1 300px;
	text-align: left;
	margin-left: 5px;
	color: #51c5ea;
	box-shadow: 0 1px 4px #ddd;
	border-bottom: 1px solid #ddd;
}



.form-group {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
	box-shadow: 0 1px 4px #ddd;
	border-bottom: 1px solid #ddd;
	margin-bottom: 8px;
	color: #51c5ea;
}

.form-group .input-control {
	flex: 1 1 auto;
	display: block;
	margin-right: 8px;
}

.checkbox-div {
	margin-right: 8px;
}

.hint {
	color: #51c5ea;
}

@media (max-width: 768px) {
	.form-group {
		flex-direction: column;
		align-items: flex-start;
	}
}

.e-grid .e-altrow {
	background-color: #fafafa;
}