@media only screen  and (max-width: 640px) {
  #main-container #login-form {
    max-width: 250px !important;
    padding:30px !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
  }
  #main-container #images-logo img {
    width: 115px !important;
  }
}

@media only screen  and (min-width: 640px) and (max-width: 1023px) {
  #main-container #login-form {
    max-width: 300px !important;
    padding:40px !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  #main-container #images-logo img {
    width: 130px !important;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1365px) {
    #main-container #login-form {
    padding:40px !important;
    left: 100px !important;
  }
    #main-container #images-logo img {
    width: 140px !important;
  }
}

* {
    margin: 0;
    padding: 0;

}

.login-failed {
  display:none;
  margin-top:24px;
  color:#800000;
}

.reset-password, .login {
  margin-top:24px;
  text-align: right;
}

.reset-password a, .reset-password a:visited, .login a, .login a:visited {
  text-decoration: none;
  color:#001d5f;
}

.reset-password a:hover, .login a:hover {
  text-decoration: underline;
  color:#001d5f;
}

#main-container {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#main-container #background-image {
  height: 100%; 
  float: right;
}

#background-image img {
  height: 100%;
}

#main-container #login-form
{
  padding: 50px;
  width: 100%;
  max-width: 350px;
  background:#fff;
  flex-direction: column;
  display: flex;
  position: absolute;
  left: 150px;
  top: 50%;
  transform: translate(0, -50%);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
}

#main-container #images-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#main-container #images-logo img {

  width: 160px;
}
#main-container #images-logo img:first-child {
 margin-right: 2vh;
}

#main-container #login-form form {
  flex-direction: column;
}

#main-container #login-form input {
  outline:0;
  font-family: 'Lato', sans-serif;
  font-size: 0.8rem;
}

#main-container #login-form label {
    position:relative;
}
#main-container #login-form label span.image-login {
    background-image: url("../img/baseline_person_black_48dp.png");
    background-repeat: no-repeat;
    width: 28px;
    position: absolute;
    left: 15px;
    top: 40%;
    height: 28px;
    background-size: cover;
    margin-top: 4px;
    opacity: 0.4;
}

#main-container #login-form label span.image-password {
     background-image: url("../img/baseline_lock_black_48dp.png");
     background-repeat: no-repeat;
     width: 28px;
     position: absolute;
     left: 15px;
     top: 40%;
     height: 28px;
     background-size: cover;
     margin-top: 4px;
     opacity: 0.4;
 }
#main-container #login-form input[type="text"], #main-container #login-form input[type="password"] {
  border:none;
  padding:20px;
  color:#1c1c1c;
  border-radius: 5px;
  background-color: whitesmoke;
    text-indent: 40px;
    width: 100%;
    box-sizing: border-box;
}

#main-container #login-form input[type="text"]::placeholder, #main-container #login-form input[type="password"]::placeholder {
  opacity: 0.7;
}


#main-container #login-form input {
  margin-top:24px;
}

#main-container #login-form input[type="submit"] {
  padding:13px;
  background:#f7d443;
  border-radius: 8px;
  border: 0px solid #f7d443;
  color:black;
  font-size:20px;
  cursor: pointer;
  margin-top:42px;
  transition: all 0.25s ease-out;
}
#main-container #login-form input:disabled{
  opacity:0.3;
}
#main-container #login-form input[type="submit"]:hover{
  opacity:0.8;
}

#main-container #reset-password {
  display:none;
}
#main-container #login {
  display:flex;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  background:#fff;
  height: 100%;
      font-family: 'Lato', sans-serif;
}

input:autofill, input:autofill:hover, input:autofill:focus, textarea:autofill, textarea:autofill:hover, textarea:autofill:focus, select:autofill, select:autofill:hover, select:autofill:focus, input:-webkit-autofill  {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    background: white !important;
    outline: none;
    filter: none;
}


#snackbar {
    visibility: hidden;
    min-width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 12px;
    position: fixed;
    z-index: 999;
    bottom: 10vh;
    font-size: 1.3em;
    width: 60%;
    max-width:320px;
    left: 50%;
    transform: translate(-50%, 0);
}

@-webkit-keyframes fadeinFromBottom {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 1vh;
        opacity: 1;
    }
}

@keyframes fadeinFromBottom {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 10vh;
        opacity: 1;
    }
}

@-webkit-keyframes fadeoutToBottom {
    from {
        bottom: 10vh;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeoutToBottom {
    from {
        bottom: 10vh;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}