/*------------------------------------*\
    $FORMS
\*------------------------------------*/

/* $TODO: Pasar a em's tamaños fuentes y paddings */

/*----------------------------------------------------------------------------- 
 $md-form: It configures variations of forms like:
                - based on size: .md-form--centered-tight, .md-form--centered-medium...
                - has floating animations: md-form--with-floating-animation
                - layout of the fields: .md-form--layout-one-colum, .md-form--layout-two-colum
 ----------------------------------------------------------------------------*/

:invalid {
	outline: none;
	box-shadow: none;
}

:required {
	outline: none;
	box-shadow: none;
}

.md-form {
	margin: 2rem;
	padding: 1em;
	background-color: white;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 
                0 2px 10px 0 rgba(0, 0, 0, 0.16); /* shadow-1 */
    overflow: auto; 	
}
	/* $TODO: Definir más tamaños */
	.md-form--centered-tight {
		max-width: 20em;
		margin-left: auto;
		margin-right: auto;
	}
	
	.md-form--centered-medium {
		max-width: 40em;
		margin-left: auto;
		margin-right: auto;
	}
	
	.md-form--centered-large {
		max-width: 60em;
		margin-left: auto;
		margin-right: auto;
	}
	
	.md-form--layout-one-colum  .md-field--text,
	.md-form--layout-one-colum  .md-field--select {
		display: block;
		width: inherit;
	}
	
	.md-form--layout-two-colum  .md-form__fields {
		text-align: left;
		
	}
	
	.md-form--layout-two-colum  .md-field--text,
	.md-form--layout-two-colum  .md-field--select {
		display: inline-block;
		margin-left: 3%;
		margin-right: 3%;
		width: 42%;
		vertical-align: bottom;
	}
	
	/* mobile: like the one-column */
    @media screen and (max-width: 63.5em) {
    	
		.md-form--layout-two-colum  .md-field--text,
		.md-form--layout-two-colum  .md-field--select {
			display: block;
			width: inherit;
		}
    }
	
	.md-form__title {
		margin-bottom: 2em;
		font-weight: bold;
		font-size: 1em;
	}
	
	.md-form__fields {
		margin-bottom: 4em;		
	}


/*----------------------------------------------------------------------------- 
 $md-field--text: A field to introduce text, can be also textarea
 - Measures taken from material design specs: 
   https://www.google.com/design/spec/components/text-fields.html#text-fields-floating-labels
 - Html must be:
 	 <div class="md-field--text">
    	<input id="nombre" type="text">
     	<label for="nombre">Nombre</label>
     	<span>Error message</span>
     </div>
 ----------------------------------------------------------------------------*/
.md-field--text {
	position: relative;
	height: 84px; /* 72px for inout+floating label + 12px for message */ 
	padding: 0;
	-webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
   text-align: left;
} 

	/* Text label has positioned 40px from bottom (in the non floating version) 
	   + 12px for message*/
	.md-field--text  label {
		position: absolute;
		bottom: 52px;
		left: 1px;
		font-size: 12px;
		padding: 0;
		padding-top: 16px;
		width: 100%;
		font-weight: lighter;
		color: #7f8c8d;
		overflow: hidden;
	}
	
	.md-field--text  input {
		position: absolute;
		left: 0;
		bottom: 18px; /* 16px to bottom + 12px for the message */
		margin: 0;
		padding-top: 8px;
		padding-bottom: 4px;
		width: 100%;
		background-color: transparent;
		border: none;
		border-bottom: 1px solid #bdc3c7;
		font-size: 16px;
		color: black;
	}
	
	/* error message is not visible when there isn't an error */
	.md-field--text  span {
		visibility: hidden;
		overflow: hidden;
	}
	
	/*----------------------------------------------------------------------------- 
	 $md-field--text--textarea: variation of the text field for two or more lines
	 ----------------------------------------------------------------------------*/
	.md-field--text--textarea {
		height: 112px; /* Text area is 16px higher; 102px +12px for the message*/
	} 
	
	.md-field--text--textarea  textarea {
		position: absolute;
		left: 0;
		bottom: 20px; /*8px + 12px for the message */
		margin: 0;
		padding-top: 8px;
		padding-bottom: 8px;
		width: 100%;
		min-height: 4em;
		height: 4em;
		background-color: transparent;
		border: none;
		border-bottom: 1px solid #bdc3c7;
		font-size: 16px;
		color: black;
	}
	
	.md-field--text--textarea  textarea + label {
		position: absolute;
		bottom: 82px;
		left: 0;
		font-size: 12px;
		padding: 0;
		padding-top: 16px;
		width: 100%;
		font-weight: lighter;
		color: #7f8c8d;
	}
	
	/*----------------------------------------------------------------------------- 
	 $md-field--with-error-message: variation to show a error message.
	 ----------------------------------------------------------------------------*/
	.md-form  .md-field--with-error-message  span {
		visibility: visible;
		position: absolute;
		bottom: 0px;
		left: 1px;
		font-size: 11px;
		padding: 0;
		width: 100%;
		font-weight: lighter;
		color: #F44336; /* red 500 */
	}
	

/*----------------------------------------------------------------------------- 
 $md-field--select
 ----------------------------------------------------------------------------*/
.md-field--select {
	position: relative;
	height: 84px; /* 72px for input+floating label + 12px for message */ 
	padding: 0;
	text-align: left;
	-webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
} 
	
	/* Text label has positioned 40px from bottom (in the non floating version) 
	   + 12px for message*/
	.md-field--select  label {
		position: absolute;
		bottom: 52px;
		left: 1px;
		font-size: 12px;
		padding: 0;
		padding-top: 16px;
		font-weight: lighter;
		color: #7f8c8d;
		overflow: hidden;
	}
	
	.md-field--select  select {
		position: absolute;
		left: 0;
		bottom: 18px; /* 16px to bottom + 12px for the message */
		margin: 0;
		padding-top: 8px;
		padding-bottom: 4px;
		width: 100%;
		background-color: transparent;
		border: none;
		border-bottom: 1px solid #bdc3c7;
		font-size: 16px;
		color: black;
	}
	
	/* error message is not visible when there isn't an error */
	.md-field--select  span {
		visibility: hidden;
		width: inherit;
		text-overflow: ellipsis;
	}

	
	/*----------------------------------------------------------------------------- 
	  Animations of the fields when is focused
	 ----------------------------------------------------------------------------*/
	
	/* Animation effect of the bottom bar */
	
	/* (trick: with background we can get this effect without js:
		 1.- define the transition
		 2.- define the initial state of bottom bar as background in position 0,0. 
		 	 with linear gradient from bottom to top and no width. It's seem as a line.
		 3.- define the final state of bottom bar as background with all width (background-size)
	*/		
	.md-form  .md-field--text  input,
	.md-form  .md-field--text  textarea,
	.md-form  .md-field--select  select,
	.md-form  .md-field--select  label,
	.md-form  .md-field--text  label {
		-webkit-transition: all 0.4s ease;
                transition: all 0.4s ease;
		/* background color is defined later in order to define custom colors by each web site */ 
	}
		
	.md-form  .md-field--text  input:focus,
	.md-form  .md-field--text  textarea:focus,
	.md-form  .md-field--select  select:focus {
		/* this is for animate the bottom bar (the final state of animation)*/
		box-shadow: none;
		background-position: 0 0;
		background-size: 100% 100%;
		outline: none;
	}
	
	.md-form  .md-field--text.md-field--with-error-message  input:focus,
	.md-form  .md-field--text.md-field--with-error-message  textarea:focus,
	.md-form  .md-field--select.md-field--with-error-message  select:focus {
		/* this is for animate the bottom bar (the final state of animation)*/
		box-shadow: none;
		background-position: 0 0;
		background-size: 100% 100%;
		outline: none;
	}

	/*----------------------------------------------------------------------------- 
	 $md-form--with-floating-animation: To animate the label from placeholder to 
	                                    floating
	 									(this depends on js in order to add the 
	 									class "md-input--is-not-empty" when the input
	 									is not empty. In css this is not possible) 
	 -----------------------------------------------------------------------------*/
	/* Text label has positioned 40px from bottom (in the non floating version) 
		   + 12px for message*/
	
	/* In floating style, when the field has no focus or has empty text label 
	   has positioned as input placeholder */  
	.md-form--with-floating-animation  .md-field--text  input:not(:focus) + label {
		bottom: 24px; /* positioned as input placeholder */
		font-size: 1em; /* The same font size as placeholder */
	}
	
	/* If input isn't empty the label stay floating */
	.md-form--with-floating-animation  .md-field--text  input.md-input--is-not-empty + label {
		bottom: 52px;
		font-size: 12px;
	}
	
	.md-form--with-floating-animation  .md-field--text.md-field--text--textarea  textarea:not(:focus) + label {
		bottom: 48px; /* positioned as input placeholder */
		font-size: 1em; /* The same font size as placeholder */
	}
	
	/* If input isn't empty the label stay floating */
	.md-form--with-floating-animation  .md-field--text.md-field--text--textarea  textarea.md-input--is-not-empty + label {
		bottom: 82px;
		font-size: 12px;
	}
	
	/* In floating style, when the field has no focus or has empty text label 
	   has positioned as input placeholder */  
	.md-form--with-floating-animation  .md-field--select select:not(:focus) + label {
		bottom: 24px; /* positioned as input placeholder */
		font-size: 1em; /* The same font size as placeholder */
	}
	
	/* If input isn't empty the label stay floating */
	.md-form--with-floating-animation  .md-field--select  select.md-input--is-not-empty + label {
		bottom: 52px;
		font-size: 12px;
	}
	
	/*Valores para eliminar el placeholder en los inputs fecha */
	::-webkit-datetime-edit-year-field:not([aria-valuenow]),
	::-webkit-datetime-edit-month-field:not([aria-valuenow]),
	::-webkit-datetime-edit-day-field:not([aria-valuenow]),
	::-webkit-datetime-edit-text:not([aria-valuenow])  {
 	   color: transparent;
	}