/*------------------------------------*\
    $COLORS
    The colors are defined in each site 
    or app
\*------------------------------------*/

/* Common */

.md-color-primary {
	/*color: #8BC34A; /* light-green-400 */		
	color: #009688;
}

.md-color-accent {
	/*color: #2196F3;  light-green-400 */		
	color: rgb(103, 58, 183);
}

.md-bg-transparent {
    background-color: #fff;
}

/* Forms */

/*----------------------------------------------------------------------------- 
 $md-form--color-accent-on-field-focus: color accent when is focused
 -----------------------------------------------------------------------------*/

.md-form--color-accent-on-field-focus  .md-field--text  input:focus + label,
.md-form--color-accent-on-field-focus  .md-field--text  textarea:focus + label {
   color: #673AB7; /* light-blue-400 */
}



/*----------------------------------------------------------------------------- 
 $md-form--color-primary-on-field-focus: color primary when is focused
 -----------------------------------------------------------------------------*/
.md-form--color-primary-on-field-focus  .md-field--text  *:focus,
.md-form--color-primary-on-field-focus  .md-field--text  textarea:focus,
.md-form--color-primary-on-field-focus  .md-field--select  select:focus {
	border-bottom: 2px solid rgba(255, 255, 255, 0); /* this make border transparent in order to leave the color bottom bar shown without gray border */
}


.md-form--color-primary-on-field-focus  .md-field--text  input:focus + label,
.md-form--color-primary-on-field-focus  .md-field--text  textarea:focus + label,
.md-form--color-primary-on-field-focus  .md-field--select  select:focus + label {
   color: #009688; /* light-green-400 */
}



/* when a text field is focused (animation of bottom bar) */ 
.md-form--color-primary-on-field-focus  .md-field--text  input,
.md-form--color-primary-on-field-focus  .md-field--text  textarea,
.md-form--color-primary-on-field-focus  .md-field--select  select {
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 95%, #009688 /* light-green-400 */ 5%);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 95%, #009688 /* light-green-400 */ 5%);
	background-position: 0 0;
	background-size: 0% 100%;
	background-repeat: no-repeat;
}

/* error msg colors*/

/* when there's a error msg to show  */
.md-form  .md-field--text.md-field--with-error-message  input,
.md-form  .md-field--text.md-field--with-error-message  textarea,
.md-form  .md-field--select.md-field--with-error-message  select {
	/* background color is defined now for the animated effect of focus */ 
	border-bottom: 2px solid #F44336; /* red 500 */   
}

/* the label */
.md-form  .md-field--text.md-field--with-error-message input + label,
.md-form  .md-field--text.md-field--with-error-message textarea + label,
.md-form  .md-field--select.md-field--with-error-message select + label {
	 color: #F44336; /* red 500 */
}

/* animation before focus*/
.md-form  .md-field--text.md-field--with-error-message  input,
.md-form  .md-field--select.md-field--with-error-message  select {
	/* this is for animate the bottom bar (the initial state of animation)*/
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 97%, red 3%);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 97%, red 3%);
	background-position: 0 0;
	background-size: 0% 100%;
	background-repeat: no-repeat;
}

.md-form  .md-field--text.md-field--with-error-message  textarea {
	/* this is for animate the bottom bar (the initial state of animation)*/
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 98%, red 2%);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 98%, red 2%);
	background-position: 0 0;
	background-size: 0% 100%;
	background-repeat: no-repeat;
}


/* default button color */
.md-button {
  /*background-color: #8BC34A;*/ /* light-green-400 */
  background-color: #009688; /* Teal-500 */
  color: white;
}

.md-button--bgcolor-dangerous {
  background-color: red;
  color: white;
}

.md-button--bgcolor-accent {
   /*background-color: color: #2196F3; light-blue-400 */
  background-color: color: #673AB7; /* Deep Purple-500 */
  color: white;
}

/* primary color, the usual */
.md-button.md-button--flat {
	/*color: #689F38;  light-green-700 */
	color: #00796B; /*Teal-700*/
}

/* primary color, the usual */
.md-button.md-button--white {
	background-color: white;
	color: black; /* light-green-700 */
}