body {
    font-family: 'Roboto', sans-serif;
    background: grey;
}

.bg {
    background: url('../images/bg-login.png') 50% 50%/cover;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    position: fixed;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: -1;
    opacity: 0.75;
    mix-blend-mode: multiply;
}

.wrapper {
    overflow: hidden;
    min-height: 100vh;
    padding-top: 5%;
}

.inner {
    width: 300px;
}

@media (min-width: 768px) {
  .inner {
      width: 450px;
  }
}

.logo {
    width: 101px;
}
.logo-kab {
    width: 85px;
}


.form-wrapper {
    background: red;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.2);
    border: 0 !important;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.form-wrapper::after {
    content: "";
    display: block;
    height: 70px;
    background: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.form-wrapper .bg-wave {
    width: 600px;
    height: 35px;
    transform: translate(-50%, 0);
    position: absolute;
    left: 50%;
    bottom: 69px;
    z-index: -1;
}
.form-wrapper .form-group label {
    color: white;
}

@media (min-width: 768px) {
  .form-wrapper .form-group {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 0.25rem;
    padding-left: 0.75rem;
    box-shadow: 0 0 0 2px rgba(255,0,0,0.25);
  }
  .form-wrapper .form-group label {
    margin-bottom: 0 !important;
    text-shadow: 1px 1px 1px red, -1px 1px 1px red;
  }
  .form-wrapper .form-control {
    flex: 55%;
    max-width: 55%;
    margin-left: auto;
  }
}