@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(/vendors/material-icons/MaterialIcons-Regular.woff2) format('woff2'),
       url(/vendors/material-icons/MaterialIcons-Regular.woff) format('woff'),
       url(/vendors/material-icons/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.main {
  flex: 1 0 auto;
}
/*
https://www.ccbg.io/generator
 */
 .colorful {
  background:
    -webkit-linear-gradient(315deg, hsla(205.29, 89.86%, 36.47%, 1) 0%, hsla(205.29, 89.86%, 36.47%, 0) 70%),
    -webkit-linear-gradient(65deg, hsla(340.27, 100%, 34.22%, 1) 10%, hsla(340.27, 100%, 34.22%, 0) 80%),
    -webkit-linear-gradient(135deg, hsla(217.18, 93.95%, 25.31%, 1) 15%, hsla(217.18, 93.95%, 25.31%, 0) 80%),
    -webkit-linear-gradient(205deg, hsla(305.32, 100%, 21.72%, 1) 100%, hsla(305.32, 100%, 21.72%, 0) 70%);
  background:
    linear-gradient(135deg, hsla(205.29, 89.86%, 36.47%, 1) 0%, hsla(205.29, 89.86%, 36.47%, 0) 70%),
    linear-gradient(25deg, hsla(340.27, 100%, 34.22%, 1) 10%, hsla(340.27, 100%, 34.22%, 0) 80%),
    linear-gradient(315deg, hsla(217.18, 93.95%, 25.31%, 1) 15%, hsla(217.18, 93.95%, 25.31%, 0) 80%),
    linear-gradient(245deg, hsla(305.32, 100%, 21.72%, 1) 100%, hsla(305.32, 100%, 21.72%, 0) 70%);
  }
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#login{
  background-color: rgba(255, 255, 255, .25);
  /* opacity: 0.33; */
}
/* label color */
.input-field label {
 color: #FFF;
}
/* label focus color */
/*.input-field input[type=text]:focus + label {
 color: #FFF;
}*/
/* label underline focus color */
.input-field input[type=text]:focus {
 border-bottom: 1px solid #FFF;
 box-shadow: 0 1px 0 0 #FFF;
}

#identifiant {
 border-bottom: 1px solid #FFF;
 box-shadow: 0 0px 0 0 #FFF;
 color: #FFF;
}

#password {
 border-bottom: 1px solid #FFF;
 box-shadow: 0 0px 0 0 #FFF;
 color: #FFF;
}

#identifiant:focus {
 border-bottom: 1px solid #FFF;
 box-shadow: 0 2px 0 0 #FFF;
}

#password:focus {
 border-bottom: 1px solid #FFF;
 box-shadow: 0 2px 0 0 #FFF;
}

#label_identifiant {
 color: #FFF;
}

#label_password {
 color: #FFF;
}
/* valid color */
.input-field input[type=text].valid {
 border-bottom: 1px solid #FFF;
 box-shadow: 0 1px 0 0 #FFF;
}
/* invalid color */
.input-field input[type=text].invalid {
 border-bottom: 1px solid #FFF;
 box-shadow: 0 1px 0 0 #FFF;
}
.input-field input[type=password]:focus {
 border-bottom: 1px solid #FFF;
 box-shadow: 0 1px 0 0 #FFF;
}
/* valid color */
.input-field input[type=password].valid {
 border-bottom: 1px solid #FFF;
 box-shadow: 0 1px 0 0 #FFF;
}
/* invalid color */
.input-field input[type=password].invalid {
 border-bottom: 1px solid #FFF;
 box-shadow: 0 1px 0 0 #FFF;
}
/* icon prefix focus color */
.input-field .prefix.active {
 color: #FFF;
}