/* ================================================================================================ */
/* ============================================= INPUT ============================================ */
/* ================================================================================================ */
input[type="number"] {
	-webkit-appearance: textfield;
		-moz-appearance: textfield;
			  appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none;
}


.fade-in-down {
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	-ms-animation-name: fadeInDown;
	animation-name: fadeInDown;
}

/*form {
	width: 90%;
	height: auto;
	max-height: 80%;
	margin: auto;
	padding: 15px;
}*/
.card-data.fade-in-down::after {
	display:block;
}

.card-data h2 {
	font-family: 'Lato-thin';
	font-weight: 900;
	text-align: center;
	text-transform:capitalize;
}

#main-wrapper::before {
	content: "";
	position: fixed;
	top: 0;
   left: 0;
   width: 100%;
   height: 100%;
	opacity: 0;
	z-index: 0;
	transition: all 0.5s ease;
   background: rgba(64, 64, 64, 0.9);
}
#main-wrapper.overlay::before {
	opacity: 1;
	z-index: 1995;
}

.card-data {
	position: fixed;
	z-index: 2000;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 2rem auto;
	display: flex;
	flex-direction: column;
	max-width: 425px;
	width: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	color: #000;
	background-color: #fff;
	box-shadow: 0 10px 20px 0 rgba(153, 153, 153, 0.25);
}
.card-data.template {
	display: none;
}
.action-close-card {
	position: fixed;
	z-index: 2005;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	opacity: 0.75;	
	font-size: 36pt;
	cursor: pointer;
	color: #634d06;
	border: none;
	background: none;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: scale3d(0.6, 0.6, 1);
	transform: scale3d(0.6, 0.6, 1);
}
.action-close-card:hover,
.action-close-card:focus {
	opacity: 1;
}
.card-heading h2 {
	margin: 2rem auto;
}

.card-finder {
	height: 60px;
	background-color: #f3f3f3;
	border-top: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
}

.card-form {
	padding: 2rem 1rem 1rem;
}


/** INPUT Y TEXTAREAS **/
.field{
	position: relative;
	display:inline-block;
/*	font-family:var(--pure-material-font,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);*/
	font-size: 16px;
	line-height:1.5;
	overflow:hidden;
	width:100%;
}
.field>input,
.field>textarea,
.input-editable {
	display:block;
	box-sizing:border-box;
	margin:0;
	border:none;
	border-top:solid 27px transparent;
	border-bottom:solid 1px rgba(var(--pure-material-onsurface-rgb,0,0,0),0.6);
	padding:0 0 4px;
	width:100%;
	color:rgba(var(--pure-material-onsurface-rgb,0,0,0),0.87);
	background-color:transparent;
	box-shadow:none;
	font-family:inherit;
	font-size:inherit;
	line-height:inherit;
	caret-color:#634d06;
	transition:border-bottom 0.2s, background-color 0.2s;
}
.field>input+span,
.field>textarea+span,
.field>.radio-field+span {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:block;
	box-sizing:border-box;
	padding:7px 0 0;
	color:#634d06;
	font-size:75%;
	line-height:18px;
	pointer-events:none;
	transition:color 0.2s, font-size 0.2s, line-height 0.2s;
}
.field>input+span::after,
.field>textarea+span::after {
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	display:block;
	width:100%;
	height:2px;
	background-color:#634d06;
	transform-origin:bottom center;
	transform:scaleX(0);
	transition:transform 0.2s;
}
.field>input:hover,
.field>textarea:hover{
	border-bottom-color:rgba(var(--pure-material-onsurface-rgb,0,0,0),0.87);
}
/* Propiedad que hace que el lbel de los textfield se coloque abajo */
/*.field>input:not(:focus):placeholder-shown+span,
.field>textarea:not(:focus):placeholder-shown+span {
	line-height:56px;
}*/
.field>input:focus,
.field>textarea:focus {
	outline:none;
}
.field>input:focus+span,
.field>textarea:focus+span {
	color:#634d06;
}
.field>input:focus+span::before,
.field>textarea:focus+span::before{
	Opacity:0.12;
}
.field>input:focus+span::after,
.field>textarea:focus+span::after {
	transform:scale(1);
}
.field>input:disabled,
.field>textarea:disabled{
	border-bottom-color:rgba(var(--pure-material-onsurface-rgb,0,0,0),0.38);
	color: rgba(var(--pure-material-onsurface-rgb,0,0,0),0.38);
}
.field>input:disabled+span,
.field>textarea:disabled+span{
	color:rgba(var(--pure-material-onsurface-rgb,0,0,0),0.38);
}


/** ERROR FIELD **/
.error-field {
	display: none;
}

.error-field.filled {
	display: block;
}


/** RADIO **/
.radio-field {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	border-radius: 0.5rem;
	color: #634d06;
	background-color: #EEE;
	box-sizing: border-box;
	box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
	width: 100%;
	font-size: 14px;
	margin-bottom: 5px;
}
.radio-field.radio-label {
	margin-top: 33px;
}
.radio-field > label {
	flex: 1 1 0px;
	text-align: center;
}
.radio-field > label > input {
	display: none;
}
.radio-field > label > span {
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border: none;
	padding: .5rem 0;
	transition: all .15s ease-in-out;
}
.radio-field > label:first-child > span {
	border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
}
.radio-field > label:last-child > span {
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}
.radio-field > label > input:checked + span {
	background-color: #634d06;
	color: #fff;	
}

.input-editable.radio-field {
	padding: 0 0 4px;
	height: 30px;
}
.input-editable.radio-field > label > span {
	padding: 3px 0;
	margin-top: 1px;
}
.input-editable.radio-field > label > input:checked + span {
	box-shadow: inset 0px 3px 6px 0px rgba(0,0,0,0.8);
}
.input-editable.radio-field > label:last-child > input:checked + span {
	box-shadow: inset -1px 5px 8px 0px rgba(0,0,0,0.8);
}
.input-editable.radio-field > label:first-child > input:checked + span {
	box-shadow: inset 5px 5px 8px 0px rgba(0,0,0,0.8);
}

.input-editable.border-error {
	border: 1px inset rgb(160 5 5 / 40%);
}


/** BOTONERA **/

.form-action {
	display: flex;
	justify-content: space-evenly;
	margin-top: 2rem;
}
 
.action-button {
	font: inherit;
	font-size: 1.25rem;
	padding: 0.5em 2em;
	font-weight: 500;
	background-color: #fff;
	color: #634d06;
	border: 0;
	border-radius: 0.3rem;
	transition: all .15s ease-in-out;
}
.action-button:focus {
	outline: 0;
}
.action-button:hover {
	background-color: #634d06;
	color: #fff;
}


/** INPUT Y TEXTAREAS EDITABLES**/
.input-editable{
	height: 36px;
	padding: 5px 10px;
	background-color: #1a1a1a;
	color: #ddd;
	border: 1px inset rgba(32, 32, 32, 0.4);
	box-shadow: inset 3px 3px 8px 0px rgba(0,0,0,0.8);
	outline:none;
	font-weight: 200;
}