body {
    background-image: url('../images/banner/wave.png'), url('../images/banner/city.png');
    background-position: top right, bottom center;
    background-size: cover, 600px;
    background-repeat: no-repeat, repeat-x;
    background-color: whitesmoke;
}
img.banner {
    width: 100%;
    height: auto;
}

.product-logo {
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 1rem;
}

.product-logo img {
    width: 200px;
    height: auto;
}
.card-login {
    padding: 1rem 0;
    /* margin-top: 4rem; */
    box-shadow: 0 0 15px rgba(0, 0, 0, .25);
    border-radius: 1rem;
    border: none;
    background-image: url('../images/banner/wave2.png');
    background-size: contain;
    background-position: bottom left;
    background-repeat: no-repeat;
    
}

.app-title {
    padding-left: .5rem;
    border-left: 3px solid magenta;
}

.btn-login {
    background-image: linear-gradient(to top left, #f9ac00, #f23fdb);
    color: white;
    border: none;
    outline: none;
    transition: .125s linear;
}

.btn-login:hover {
    color: white;
    transform: rotate(12deg);
}

.btn-login:active {
    background-image: linear-gradient(to top left, #f9ac00, #f23fdb);
    color: white;
}

.magenta {
    color: magenta;
}
label {
    font-size: 13px;
}

.form-control {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #a4a4ad;
}

.form-control:focus {
    outline: none;
    box-shadow: none;
}