/*
* Estilos para inputs
* v2
*/

/* Estilos de input (clásicos) */

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
textarea,
select {
	padding: 15px;
	background: #fff;
	border: none;
	border: 1px solid #ddd;
	outline: none;
	font-family: 'Open Sans', 'sans-serif';
}

textarea::placeholder {
	font-family: 'Open Sans', 'sans-serif';
}

	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="number"]:focus,
	input[type="email"]:focus,
	input[type="text"]:hover,
	input[type="password"]:hover,
	input[type="number"]:hover,
	input[type="email"]:hover,
	textarea:hover,
	textarea:focus,
	select:focus,
	select:hover {
		border: 1px solid #999;
	}

textarea {
	resize: vertical;
}

.input-disabled,
.textarea-disabled {
	background: #f5f5f5 !important;
	border: 1px solid #ddd !important;
	opacity: 0.5;
}

/* Estilos de input (personalizados) */

.input-area {
	line-height: 1.1em;
	position: relative;
}

.input-area label, .input-area input {
	transition: all 0.2s;
	touch-action: manipulation;
}

.input-area input {
	padding: 22px 10px 7px;
	border: 1px solid #ddd;
	font-family: inherit;
	-webkit-appearance: none;
	border-radius: 0;
	cursor: text;
}

.input-area select {
	width: 100%;
    padding: 13px 15px 14px;
}

.input-area input:focus {
	outline: 0;
	border-bottom: 1px solid #069;
}

.input-area label {
	color: #000;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transform-origin: left top;
	transform: translate(20px, 17px) scale(1);
	position: absolute;
	top: 0;
	left: 0;
}

.input-area input:placeholder-shown + label,
.input-area input:placeholder-shown + div ~ label {
	cursor: text;
	max-width: 66.66%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
	transform-origin: left top;
	transform: translate(16px, 16px) scale(1);
	position: absolute;
	top: 0;
}

.input-area ::-webkit-input-placeholder {
	opacity: 0;
	transition: inherit;
}

.input-area input:focus::-webkit-input-placeholder {
	opacity: 1;
}

.input-area input:not(:placeholder-shown) + label,			/* Aplicar al elemento inmediatamente inferior a input */
.input-area input:focus + label,
.input-area input:not(:placeholder-shown) + div ~ label,	/* Aplicar al elemento label precedido por div (pass-strength) */
.input-area input:focus + div ~ label {
	color: #069;
	transform: translate(10px, 8px) scale(.7);
	cursor: pointer;
}