<template lang="pug">
.container-fluid
  vm-row.login-row(vm-w="12")
    vm-col.login-col(vm-justify="center", vm-align="center", vm-lg=4, vm-sm=12)
      router-view
    vm-col.login-background(
      vm-align="center",
      vm-lg=12,
      vm-sm=0,
      vm-xs=0,
      :style="{ background: 'url(/Background-Mobile.png) no-repeat center / 100% ' }"
    )
      .welcome
        router-link(to='/login')
          .logo
            img.d-inline-block.align-top(
              src='@/assets/logo.jpg',
              alt='Logo'
              height=36,
              )
</template>

<script>
export default {
  name: 'BaseAuth'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container-fluid {
  height: 100vh;
  padding-right: 0px !important;
  padding-left: 0px !important;
}
form {
  margin-left: auto;
  margin-right: auto;
  margin-top: 35px;
  max-width: 380px;
}
.login-background {
  height: 100vh;
  padding-left: 42%;
}
.login-col {
  -webkit-transition: all .3s;
  transition: all .3s;
  padding: 50px;
  position: fixed;
  background-color: white;
  height: 100%;
  overflow: auto;
}
.login-screen,
.login-row {
  height: 100%;
}
.logo {
  margin-top: 0px;
}
.reset-password {
  padding-top: 0px;
}
.title {
  color: #000000;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 20px;
}
.welcome {
  color: #ffffff;
  max-width: 555px;
  margin-bottom: 65px;
  margin-top: 65px;
  padding-right: 55px;
  h1 {
    font-size: 60px;
  }
  .sub-text {
    color: #ffffff;
  }
}
@media (min-width: 768px) {
  .login-screen {
    form {
      margin-top: 150px;
    }
  }
  .logo {
    margin-top: 50px;
  }
  .welcome {
    margin-bottom: 0px;
    margin-top: 285px;
  }
}
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .container-fluid {
    height: 90vh;
  }
  .login-row {
    .login-col {
      -webkit-transition: all .3s;
      transition: all .3s;
       padding: 0px 35px;
      position: fixed;
      bottom: 0;
      height: auto;
      border-radius: 40px 40px 0px 0px;
      form {
        margin-top: 45px !important;
      }
    }
    .login-background {
      display: block !important;
      height: 100%;
      background-color: #0066de;
      padding-left: 0;
      .welcome {
        padding: 0;
        margin: 0;
      }
    }
  }
}
</style>
