body {
      background-color: #1d1e20;
      margin: 0;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Segoe UI', sans-serif;
      position: relative;
    }

    .overlay {
      pointer-events: none;
      background-color: rgba(0, 0, 0, 0.25);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }

    .logo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 20px 60px;
      z-index: 2;
    }

    .logo img {
      height: 45px;
    }

    .login-container {
      position: relative;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.75);
      padding: 60px 68px 40px;
      max-width: 500px;
      width: 100%;
      border-radius: 4px;
      color: white;
    }

    .login-container h2 {
      margin-bottom: 24px;
      font-weight: bold;
    }

    .form-group {
      position: relative;
      margin-bottom: 24px;
    }

    .form-control {
      width: 100%;
      padding: 16px 10px 8px;
      background-color: #333;
      border: 1px solid grey;
      color: white;
      font-size: 16px;
      border-radius: 4px;
    }

    .form-control:focus {
      background-color: #444;
      color: white;
      border-color: white;
      box-shadow: none;
    }

    .form-control::placeholder {
      color: transparent;
    }

    label {
      position: absolute;
      top: 12px;
      left: 12px;
      color: grey;
      font-size: 16px;
      pointer-events: none;
      transition: all 0.2s ease-out;
      padding: 0 4px;
    }

    .form-control:focus + label,
    .form-control:not(:placeholder-shown) + label {
      top: 2px;
      left: 8px;
      font-size: 12px;
      color: grey;
    }

    .btn-bu {
      background-color: #dfe1e3;
      border: none;
      font-weight: bold;
    }

    .btn-bu:hover {
      background-color: #a3a9b1;
    }

    .form-footer {
      margin-top: 20px;
      font-size: 0.9rem;
      color: white;
    }

    .form-footer a {
      color: white;
      text-decoration: underline;
    }

    .footer {
      position: absolute;
      bottom: 10px;
      width: 100%;
      text-align: center;
      color: #ccc;
      font-size: 0.8rem;
      z-index: 1;
    }

.password-wrapper {
  position: relative;
}

.password-wrapper .form-control {
  padding-right: 40px; 
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.toggle-password img {
  width: 20px;
  height: 20px;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

	
    @media only screen and (max-width: 600px) {
      body {
        align-items: unset;
      }
      .overlay {
        background-color: rgba(0, 0, 0, 0);
      }
      .login-container {
        padding: 140px 20px 40px;
        background-color: unset;
      }
      .logo {
        padding: 20px 20px;
      }
    }
	
    @media only screen and (min-width: 600px) and (max-height: 600px){
      .logo {
        padding: 20px 20px;
      }
	  .logo img {
		height: 30px;
	  }
    }