@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;800&display=swap");

body {
  background-color: #172b4d;
}

@media (max-width: 768px) {
  body {
    font-family: "Baloo 2", cursive;
    background-color: #4642b1;
  }
  .bg-header {
    background-color: #3b1f73;
    border-radius: 0 0 100px 100px;
  }
  .form-login-title {
    position: relative;
    font-size: 2rem;
  }
  .form-login-title::before {
    content: "";
    position: absolute;
    height: 4px;
    width: 30px;
    border-radius: 8px;
    bottom: 0px;
    left: 0;
    background-color: #58adfe;
  }
  .input-group-alternative {
    box-shadow: none !important;
  }
  .focused .input-group-alternative {
    box-shadow: none !important;
  }
  .input-group i {
    color: #3b1f73;
  }
  .focused i {
    color: #58adfe;
  }
  .card-login .card-body .input-group input::placeholder {
    color: #3b1f73;
  }
  .focused input::placeholder {
    color: #58adfe !important;
  }
  .form-control {
    color: #3b1f73;
  }
  .form-control:focus {
    color: #58adfe;
  }
  .underline {
    justify-self: center;
    width: 100%;
    height: 2px;
    background-color: #adb5bd;
  }
  .focused .underline {
    background-color: #58adfe;
  }
  .btn-entrar {
    background-color: #58adfe;
    border-radius: 50px;
    color: #fff;
    width: 100%;
    font-size: 1.2rem;
  }
  .custom-checkbox
    .custom-control-input:checked
    ~ .custom-control-label::before {
    background-color: #58adfe;
  }
  .card-login {
    background-color: transparent;
    box-shadow: none;
  }
  .card-login .card-body {
    padding-top: 0px;
  }
  .login-title {
    font-size: 2.2rem;
  }
  .card-login .card-body .input-group-prepend span {
    border-radius: 50px 0 0 50px;
  }
  .card-login .card-body .input-group-prepend span i {
    font-size: 1rem;
    padding-left: 10px;
    color: #3b1f73;
  }
  .card-login .card-body .focused span i {
    color: #58adfe;
  }
  .card-login .card-body .input-group input {
    border-radius: 0 50px 50px 0;
    font-size: 1.2rem;
    font-weight: 600;
  }
  .text-manter {
    font-weight: 600;
    color: #fff !important;
  }
  @media (min-height: 800px) {
    .container-mt {
      margin-top: 50px;
    }
  }
}