.container-login
  width: 100vw
  height: 100vh
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  background: #fff

.auth
  width: 550px
  height: 400px
  background: #f0f4f7
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  .title
    font-size: 25px
    text-align: center
    padding: 20px
    color: $blue
    line-height: 30px

.logos
  max-width: 400px
  display: flex
  align-items: baseline
  margin-bottom: 30px
  .img_container
    display: flex
    justify-content: center
    width: 200px
    height: 130px
    .vebon_logo
      width: auto
      height: 100%
    .tuv_logo
      width: auto
      height: 100%
      float: right

/** Form styling **/

.form-element
  display: flex
  flex-direction: column
  align-items: center
  label
    margin: 6px 0px
  input
    border: 2px solid #dae0e4
    width: 380px
    height: 50px
    font-size: 20px
    outline: 0
    color: $green
    padding: 15px
    &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active
      +transition(background-color 9999s)
      -webkit-text-fill-color: $green
      +transition-delay(9999s)

.form-button
  margin-top: 30px
  display: flex
  flex-direction: column
  align-items: center
  input
    color: white
    border: 0
    font-weight: 300
    width: 250px
    height: 50px
    font-size: 18px
    outline: 0
    background: $orange

.btn-login
  height: 50px

.forgot-password
  h3
    text-align: center

.extra-link
  margin-top: 10px

.auth-button
  margin-top: 30px
  display: flex
  flex-direction: column
  align-items: center
  .btn-login
    color: white
    border: 0
    font-weight: 300
    width: 250px
    height: 50px
    font-size: 20px
    outline: 0
    background: $orange
    &:hover
      background: lighten($orange, 10%)

.seperator-form
  height: 20px