.fontLoginColor1 {
    color: #9D73EF;
}
.fontLoginColor2 {
    color: #6B6B6B;
}
.fontLoginColor3 {
    color: #C8C7C6;
}
.fontLoginColor4 {
    color: #ff8080;
}

.error-message {
    height: 1.5em; /* Fixed height to reserve space */
    display: block;
    visibility: hidden; /* Hidden by default but reserves space */
}
.error-message.show {
    visibility: visible; /* Show when needed */
}

#floating-card {
  position: fixed;
  top: 25vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 10px;
  background-color: #473E91;
  border-radius: 8px;

  visibility: hidden; /* ซ่อนเริ่มต้น */
  opacity: 0;         /* โปร่งใส */
  transition: opacity 0.3s ease;
}

#floating-card.show {
  visibility: visible;
  opacity: 1;
}

#floating-card2 {
  position: fixed;
  top: 25vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 10px;
  background-color: #473E91;
  border-radius: 8px;

  visibility: hidden; /* ซ่อนเริ่มต้น */
  opacity: 0;         /* โปร่งใส */
  transition: opacity 0.3s ease;
}

#floating-card2.show {
  visibility: visible;
  opacity: 1;
}
#floating-card3 {
  position: fixed;
  top: 25vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 10px;
  background-color: #473E91;
  border-radius: 8px;

  visibility: hidden; /* ซ่อนเริ่มต้น */
  opacity: 0;         /* โปร่งใส */
  transition: opacity 0.3s ease;
}

#floating-card3.show {
  visibility: visible;
  opacity: 1;
}