/*----------------------------------------*/
/*---- Select all CSS, F1 + Autoprefix CSS -----*/
/*------- BASIC SETUP------*/

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
          box-sizing: inherit; 
}

html {
    font-size: 62.5%; 
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; 
  font-family: 'Open Sans', sans-serif;
  background-color: #eeeeee;
  color: #555;
  font-weight: 300;
  font-size: 2rem;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.clearfix {
    zoom: 1;
}
.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.btn

/*----------------------------------------*/
/*------- FORM ------*/

header {
    height: 100vh;
}

.logo-black {
    height: 5rem;
    margin: 0.5rem;
}

.sign-in-page {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 100vh;
}

.sign-in-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.sign-in-box {
    text-align: center;
    width: 25vw;
}

  /* label color */
  .sign-in-box form .input-field label {
    color: rgb(2, 2, 2);
    font-size: 60%;
  }
  /* label focus color */
  .sign-in-box form .input-field input[type=text]:focus + label,
  .sign-in-box form .input-field input[type=password]:focus + label{
    color: rgb(2, 2, 2);
  }
  /* label underline focus color */
  .sign-in-box form .input-field input[type=text]:focus,
  .sign-in-box form .input-field input[type=password]:focus{
    border-bottom: 1px solid rgb(2, 2, 2);
    box-shadow: 0 1px 0 0 rgb(0, 0, 0);
  }
  /* valid color */
  .sign-in-box form .input-field input[type=text].valid {
    border-bottom: 1px solid rgb(0, 87, 0);
    box-shadow: 0 1px 0 0 rgb(0, 73, 0);
  }
  /* invalid color */
  .sign-in-box form .input-field input[type=text].invalid {
    border-bottom: 1px solid rgb(206, 73, 73);
    box-shadow: 0 1px 0 0 rgb(156, 56, 56);
  }
  /* icon prefix focus color */
  .sign-in-box form .input-field .prefix.active {
    color: rgb(202, 61, 179);
  }

  /* button text */
  .sign-in-box form button{
    font-family: 'Open Sans', sans-serif;
    font-size: 100%;
    border-radius: 0%;
  }


footer {
    width: 100%;

}

footer p {
    font-size: 50%;
    text-align: center;
}