.quiz_tab{
    display: none;
}
.quiz_active{
    display: flex;
}


@import url(https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,700);
.wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background-image: url("https://office.ect.international/app/img/eco.jpg");
}

.item {
	padding: 30px;
	width: 800px;
	display: block;
	margin: auto;
	box-shadow: 0 10px 30px rgba(27, 27, 27, 0.5);
	background: #ffffffb5;
}

.item#signup {
	width: 363px;
}

.item .item-logo {
	text-align: center;
	position: relative;
	padding-top: 20px;
}

.item .item-logo img {
	width: 70px;
	height: auto;
}

.head-text,
.step {
	width: 100%;
}

.head-text label {
	width: 100%;
	margin-top: 10px;
	font-weight: 300;
	font-size: 21px;
	color: #000000;
	letter-spacing: 0.7pt;
	text-align: center;
}

.step p {
	width: 100%;
	text-align: center;
	font-size: 13px;
	color: #9999cc;
	margin-top: 4px;
	margin-left: -2px;
	letter-spacing: 0.0pt;
}

.item .item-form {
	padding: 0 65px;
	margin-top: 19px;
	text-align: left;
}

.item .item-form input {
	margin-bottom: 11px;
}

.enter-buttons {
	margin-bottom: 14px;
	text-align: center;
}

.md-button {
	cursor: pointer;
	outline: none;
	border: none;
	width: 167px;
	height: 36px;
	font-size: 15px;
	color: #f9f9f9;
	background-color: #a2721c;

	border-radius: 18px;
	box-shadow: 0 2px 6px rgba(27, 27, 27, 0.26);
	transition: .5s;
	margin-top: 10px;
	box-shadow: 0 10px 32px 0 rgba(0,40,120,.35);
}

.md-button:hover {
	background-color: #b28e4e;
	box-shadow: 1px 1.732px 6px 0px rgba(27, 27, 27, 0.102);
}

.md-button:active {
	background-color: #217d3c;
	box-shadow: 0px 2px 16px 0px rgba(27, 27, 27, 0.75);
}

.input-line {
	background: transparent;
	font-size: 14px;
	width: 100%;
	color: #afafaf;
	outline: none;
	border: 0;
	font-weight: 400;
	border-bottom: 1px solid #000000;
	height: 30px;
	letter-spacing: 0.04em;
	margin-top: 0px;
	border-radius: 0;
}

.input-line:focus {
	border-bottom: 2px solid #000000;
	color: #000000;
}

.item .item-form label {
	font-family: 'Roboto', sans-serif;
	color: #000000;
	transition: all .2s;
	font-weight: 400;
	margin-top: 10px;
	margin-bottom: 0;
	letter-spacing: 0.9pt;
	font-size: 11px !important;
	transition: 0.3s !important;
}

.step2 {
	display: none;
}

input[type='text']:-webkit-autofill,
input[type='password']:-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0 50px #ffffff !important;
	-webkit-text-fill-color: #000000 !important;
	color: #000000 !important;
}

.e-login,
.e-password,
.e-cpass,
.e-name,
.e-lname,
.e-phone,
.e-email,
.error_info {
	font-family: 'Roboto', sans-serif;
	font-weight: 200;
	width: 100%;
	color: #ff0000;
	font-size: 11px;
	text-align: left;
	padding: 0;
	letter-spacing: 0.5pt;
}

.error_info {
	text-align: center;
	margin-top: 10px;
}

.reset-password {
	margin-bottom: 20px;
	text-align: center;
}

.reset-password a {
	font-size: 14px;
	border-bottom: 1px dashed;
	text-decoration: none;
	color: #000000;
}


/* .active-label{
    transform: translateY(-126%);
    font-size: 11px!important;
    color: #000000!important;
    transition: 0.3s!important;
} */

.active-color {
	color: #000000 !important;
}

.logo_rotate {
	width: 35px !important;
	position: absolute;
	top: 0;
	left: calc(50% - 20px);
	-webkit-animation: rotating 2s linear infinite;
	-moz-animation: rotating 2s linear infinite;
	-ms-animation: rotating 2s linear infinite;
	-o-animation: rotating 2s linear infinite;
	animation: rotating 2s linear infinite;
}

@-webkit-keyframes rotating
/* Safari and Chrome */

	{
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotating {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.eye {
	float: right !important;
	font-size: 10px !important;
	cursor: pointer;
	display: none;
}

.eye:hover {
	color: #fff !important;
	text-decoration: underline;
}