@font-face {
  font-family: 'Roboto';
  src: url('/static/font/Roboto-Medium.ttf') format("truetype");
}

body {
  width: 100%;
  height: 100vh;
  z-index: -1;
  background-image: linear-gradient(
    rgba(51, 51, 51, 0.45), 
    rgba(51, 51, 51, 0.45)
  ), url("/static/images/login/bg_fleet.jpg");
  background-position: center center;
  background-size: cover;
  background-attachment: initial;
  backdrop-filter: blur(5px);
}

.container-login {
  height: 100vh;
}

.banner {
  width: 515px;
  background-color: #1C357A;
  background-image: url("/static/images/login/cgpc_logo.jpeg");
  background-position: center center;
  background-size: contain;
  background-attachment: initial;
  background-repeat: no-repeat;
  border-right: 1px solid #aaa;
}

.div-login {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.div-form {
  width: calc(100vw - 36px);
  max-width: 396px;
  margin: auto;
  background-color: #fff;
}

.logo-text {
  font-family: 'Roboto', sans-serif;
}

.form-control {
  border-color: #89888d;
}

.btn-login {
  height: 48px;
  font-size: 18px;
  border-radius: 6px;
}

@media (min-width: 576px) {
  .div-form {
    width: 396px;
  }
}