﻿.wrapper {
	margin: 40px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

form {
	background: #FFFFFF;
	min-width: 640px;
}

.form-top {
	padding: 30px 25px 0 25px;	
	border: 2px solid #E1E5E6;
	border-radius: 5px
}

.form-bottom {
	margin-top: 10px;
	background: #E3E3E3;
	padding: 15px 0;
	border-radius: 10px;
}

.form-bottom input {
	padding: 10px 0;
	background: -webkit-linear-gradient(266deg, rgba(0,225,0,1) 0%, rgba(0,143,0,1) 100%);
	background: -o-linear-gradient(266deg, rgba(0,225,0,1) 0%, rgba(0,143,0,1) 100%);
	background: linear-gradient(356deg, rgba(0,225,0,1) 0%, rgba(0,143,0,1) 100%);
	color: #FFFFFF;
	border: none;
	border-radius: 30px;
	margin-left: 150px;
	cursor: pointer;
	font-size: 1.2em;
}

input {
	width: 266px;
}

.data1, .data2, .data3 {
	width: 380px;
	margin-bottom: 40px;
}

.data3 {
	margin: 0;
}

.data1_1,
.data1_2,
.data1_3,
.data2_1,
.data2_2,
.data2_3,
.data3_2 {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	align-items: center;
	position: relative;
}

.data3_2 {
	margin-top: 15px;
}

.data3_2 span img {
	width: 100px;
	height: 50px;
}

.required {
	display: inline-block;
	height: 20px;
	width: 20px;
	position: absolute;
	right: -24px;
	background: url(https://loading.io/s/icon/jxjyiv.svg) 0 0 no-repeat;
}

.wrong-captcha {
	display: inline-block;
	position: absolute;
	color: #D42929;
	font-weight: 700;
	right: -197px;
	top: 18px;
}

input[required]:valid + label,
.data3_2 input[required]:valid ~ label {
	background: url(https://upload.wikimedia.org/wikipedia/commons/0/0d/Google_Material_Design_check.svg) 0 0 no-repeat;
}

.data3_2 input[required]:valid ~ span {
	display: none;
}
