* {
      font-family: "Poppins", sans-serif;
    }

    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;

      background:
        linear-gradient(rgba(19, 19, 19, 0.7), rgba(0, 10, 31, 0.7)),
        url("../images/bg-login.png");;

      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;

      display: flex;
      justify-content: center;
      align-items: center;

      overflow: hidden;
    }

    body::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(9, 21, 42, 0.20);
    }

    .login-card {
      position: relative;
      width: 400px;
      background: #fff;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    }

    .logo {
      width: 90px;
      height: auto;
      display: block;
      margin: 0 auto 15px;
    }

    h2 {
      margin-top: 20px;
      margin-bottom: 0;
      text-align: center;
      color: #060371;
      font-family: "Limelight", sans-serif;
      font-weight: 400;
      font-style: normal;
    }

    .sub-title{
        font-weight:600;
        font-size:15px;
    }

    .nama-sekolah{
        font-family: "Coiny", cursive;
        font-size:18px;
        margin-top:-5px;
    }

    .sub {
      text-align: center;
      color: #000000;
      margin-bottom: 20px;
    }


    .form-control {
      height: 45px;
      border-radius: 10px;
    }

    .btn-login {
      height: 38px;
      border-radius: 10px;
      font-weight: 600;
    }

    .footer {
      margin-top: 20px;
      text-align: center;
      color: #777;
      font-size: 13px;
    }

    .invalid-feedback {
      display: block;
      font-size: 12px;
      color: #dc3545;
      margin-top: 2px;
      margin-left: 2px;
    }

    .input-group.has-error .form-control {
      border-color: #dc3545;
    }

    .input-group.has-error .form-control:focus {
      border-color: #dc3545;
      box-shadow: none;
    }

    .input-group.has-error .input-group-text {
      border-color: #dc3545;
      color: #dc3545;
      background: #fff;
    }

    .input-group.has-error #togglePassword {
      border-color: #dc3545;
      color: #dc3545;
      background: #fff;
    }

    .login-card {

      animation: fadeUp .8s;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(40px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ===========================
   Tampilan HP
=========================== */
@media (max-width: 576px) {

    .login-card {
        width: 90%;
        max-width: 330px;
        padding: 18px;
        border-radius: 8px;
    }

        .logo {
        width: 70px;
    }

    h2 {
        font-size: 22px;
    }

    .sub-title{
        font-weight:600;
        font-size:12px;
    }

    .nama-sekolah{
        font-family: "Coiny", cursive;
        font-size:15px;
        margin-top:0px;
    }

    .form-control {
        height: 45px;
        font-size: 14px;
    }

    .btn-login {
        height: 42px;
        font-size: 14px;
    }

}