body {
    font-family: 'Vazirmatn', sans-serif !important;
    background-image: url("/static/images/415994.png") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100vh !important; 
}
.phoenix-icon {
    width: 50px; 
    height: 50px; 
    vertical-align: middle; 
    margin-left: 10px; 
}
.card-header .h1 {
    margin: 7px;
    display: flex;
    align-items: center; 
    justify-content: center; 
}
.login-page, body, html {
    height: 100%;
    margin: 0;
  }
  
  .login-page {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card, .card-body {
    background-color: #1e1e1e !important; /* A slightly lighter dark color for the panel background */
    color: #e0e0e0 !important; /* Light text color for contrast */
    border: none; /* Remove any borders */
  }

  .card-header, .card-outline {
    border-bottom: 1px solid #333 !important; /* A subtle border to separate the header */
  }

  .login-box-msg, .h1 a {
    color: #ffffff !important; /* White color for the main text */
  }

  .input-group-text, .form-control {
    background-color: #2c2c2c !important; /* Dark background for input fields */
    color: #ffffff !important; /* White text for input fields */
    border-color: #444 !important;
  }

  /* Optional: Change the color of the icons */
  .input-group-text .fas {
    color: #999 !important; /* A light gray color for the icons */
  }

  .alert {
    background-color: #333 !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
  }

   .card-login, .card-register {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    /* Initially hide the registration card */
    .card-register {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }

.card-header .logo img {
  width: 90px;
  height: 80px;
  margin-left: 10px; /* فاصله کم بین لوگو و متن */
}

.card-header .title {
  text-align: right;
  color: #fff;
}

.card-header .title h2 {
  font-size: 2rem;   /* بزرگ‌تر شد */
  font-weight: bold; /* بولد برای بهتر دیده شدن */
  margin: 0;
  color: #fff;
}

.card-header .title small {
  font-size: 1rem;   /* کمی بزرگ‌تر شد */
  color: #bbb;
}

.card-footer.version-text {
  font-size: 0.9rem;
  color: #aaa;
  background: transparent;
  border-top: none;
  padding: 10px 0;
}

.card-body {
  padding-bottom: 10px;
}