html {

	padding: 0;
	margin: 0;

}

body {

	padding: 0;
	margin: 0;
	background-color: #16018d;
	font-family: 'Montserrat', sans-serif;

}

h1 {

	padding-top: 20px;
	padding-bottom: 20px;
	width: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	font-family: 'Montserrat', sans-serif;
	color: #fff;
	font-weight: 400;
	font-size: 2.2em;

}

b.warning {

	color: #ff0000;

}

h1 img {

	height: 64px;
	margin-right: 20px;

}

h2 {

	text-align: center;

}

h3 button {

	color: #027de9;
	text-transform: uppercase;
	background: transparent;
	border: transparent;
	cursor: pointer;
	margin-left: 20px;

}

article {

	width: 900px;
	background-color: #fff;
	min-height: 600px;
	display: block;
	margin: auto;
	border-radius: 12px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	padding: 40px;

}

div.row {

	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;

}

div.row table {

	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;

}

div.row p {

	margin: 0;

	
}


div.row li {

	list-style: none;
	margin-top: 10px;
	width: calc(100% - 2px);
	border: 1px solid #ccc;
	border-radius: 8px;
	padding: 12px 0;
	text-indent: 10px;

}

div.row div.main {

	flex: 0 0 64%;
	width: 64%;
	min-height: 40px;

}

div.row div.aside {

	flex: 0 0 30%;
	width: 30%;
	min-height: 40px;

}

div.copyright {

	font-size: 14px;
	color: #fff;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 50px;

}

div.copyright a {

	color: #14a6e5;

}

div.field {

	position: relative;
	margin-bottom: 10px;

}

div.field div.helper {

	font-size: 12px;
	color: #6b6b6b;
	text-indent: 10px;

}

div.field div.icon {

	position: absolute;
	z-index: 1;
	right: 8px;
	bottom: 20px;
	cursor: pointer;

}

div.field div.icon img {

	width: 28px;
	height: 28px;

}

div.field label.placeholder {

	position: absolute;
	font-size: 14px;
	left: 10px;
	top: 16px;
	transition: all 200ms;
	pointer-events: none;
    color: #777;

}

div.field label.placeholder.required:after {

	content: "*";
	padding-left: 2px;

}

div.field.focus label.placeholder.required:after {

	color: #f00;

}

div.field.focus label.placeholder {

	font-size: 12px;
	transform: translateX(-5px) translateY(-15px);
	color: #3f51b5;

}

div.field.fill label.placeholder {

	font-size: 12px;
	transform: translateX(-5px) translateY(-15px);
	color: #5a5a5a;

}

div.field div.underline {

	width: 100%;
	height: 1px;
	background-color: #b9b9b9;
	position: relative;

}

div.field.focus div.underline:before {

	transform: scaleX(1.0);

}

div.field div.underline:before {

	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background-color: #3f51b5;
	bottom: 0;
	left: 0;
	position: absolute;
	transform: scaleX(0.0);
	transition: transform 200ms;

}

div.field i {

	position: absolute;
	font-size: 17px;
	color: #8a8787;
	left: 10px;
	top: 12px;
	z-index: 2;

}

div.field input[type="text"],
div.field input[type="password"] {

	border: none;
	padding-top: 20px;
	padding-bottom: 8px;
	font-size: 15px;
	text-indent: 24px;
	background-color: #f0f0f0;
	width: 100%;
	outline: none;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;

}

div.field input[type="text"]:focus {


}

h2 {

	padding: 0;
	margin: 0;
	padding-bottom: 20px;

}

div.footer div.agree {

	display: block;
	margin: 20px auto;
	text-align: center;

}

div.footer button {

	font-size: 1.3em;
	width: 400px;
	display: block;
	margin: auto;
	padding: 12px 0;
	border: 1px solid #0F9CE6;
	border-radius: 5px;
	overflow: hidden;
	background-color: transparent;
	position: relative;
	z-index: 1;
	color: #fff;
	transition: color 200ms;

}

div.footer button:before {

	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(159deg, rgba(20,167,229,1) 0%, rgba(1,122,233,1) 100%);
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	transition: transform 200ms;

}

div.footer button:disabled {

	color: #1D1E46;

}

div.footer button:disabled:before {

	transform: translateX(-100%);

}

div.footer button:hover {

	cursor: pointer;

}
