body{
  background-color:#fff !important;
}
#app, main{
  height:100%;
}

body{
  background:url('/img/bubble.png'),linear-gradient(to right, #45946C, #283044);
  background-repeat:no-repeat;
  background-position: 100% 100%;
}
.login.container{
  display:flex;
  height:100%;
  justify-content: center;
  align-items: center;
}

.login .row{
  width:100%;
  max-width:500px;
  margin:auto;
}

.login .col-md-8{
  flex:auto;
  max-width:100%;
}

.login .logo{
  max-width:210px;
  margin:auto auto 20px auto;
}
.login .logo img{
  width:100%;
  height:auto;
}
.login .card{
  padding:50px 15px;
}

.login form{
  display:flex;
  flex-direction: column;
}


input[type=text],
input[type=password]{
    width:100%;
    padding:10px 0px 20px 0px;
    margin-bottom:30px;
    box-sizing: border-box;
    box-shadow:none;
    outline:none;
    border:none;
    border-bottom:2px solid #E9E9F0;
}

.login-field{
    position:relative;
}

.login-field label{
    position: absolute;
    font-weight:400;
    top:10px;
    left:0;
    transition:.5s;
    pointer-events:none;
}

input[type=text]:focus ~ label,
input[type=password]:focus ~ label,
input[type=text]:valid ~ label,
input[type=password]:valid ~ label{
    top:-12px;
    left:0;
    font-weight:bold;
    color:#366258;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=text]:valid,
input[type=password]:valid{
    border-bottom: 2px solid #366258;
    padding:20px 0px 10px 0px;
}

button[type=submit]{
    min-width:150px;
    margin:auto;
}
.login-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin-bottom:30px;
}
.login-actions a{
    text-decoration: none;
}