#accessdbbody{
    justify-self:center;
    justify-content: center;
    width: 90%;
    max-width: 350px;
    background: #ffffff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 20px;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    text-align: center;
    color: #003477;
    flex-shrink: 0;
    min-height:100vh;
}
.message {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: 65%;
  max-width: 400px;
  padding: 15px 20px;
  border-radius: 10px;
  font-size: 16px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-weight: bold;
  transition: all 0.3s ease-in-out;
  display: none;
  background-color: #fff;
}

.error-message {
  color: #d8000c;
  background-color: #ffbaba;
  border: 1px solid #d8000c;
  padding: 20px;
  border-radius: 10px;
}

.success-message {
  color: #4F8A10;
  background-color: #DFF2BF;
  border: 1px solid #4F8A10;
  padding: 20px;
  border-radius: 10px;
}

.successimg, .errorimg {
  width: 50px;
  margin-bottom: 10px;
}

button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  width: 50%;
  color: #ffffff;
  background-color: #003477;
  border-radius: 10px;
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:active {
  background-color: #002477;
}

#cbimg {
    width: 50px;
    height: 50px;
    margin: 10px auto;
    border-radius: 100px;
}
.input-icon-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}


.styleal {
  width: 80%;
  padding: 10px; 
  border-radius: 5px;
  border: none;
  border-bottom: 2px solid #ccc;
  outline: none;
  background: transparent;
  font-size: 16px;
}

/* Lock icon (left side) */
.input-icon-wrapper i.fa-lock {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Eye toggle (right side before checkmark) */
#fapassword{
  position: absolute;
  top: 50%;
  right: 60px; /* leave space for check icon */
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 2;
}

/* Red check icon (rightmost side) */
#password-check,
#confirm-check {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 14px;
  color: red;
  z-index: 2;
}


.access {
    width: 100%;
    height: 40px;
    background: linear-gradient(45deg, #003477, #0055aa);
    color: #ffc107;
    font-size: 18px;
    padding: 12px 24px;
    border: none;
    border-radius: 15px; /* Increased from 5px to 12px */
    cursor: pointer;
}

.access:hover {
    color: #003477;
    background: linear-gradient(135deg, #9c9785, #dbd1a3);
}


#contcreateone {
    font-size: 10px;
    color: #666;
    margin-top: 20px;
}

.ready {
    color:#003477;
    text-decoration: none;
}

#loginButton:disabled {
 color: #003477;
  background: linear-gradient(135deg, #9c9785, #dbd1a3);
  cursor: not-allowed;
  opacity: 0.7;
}

#loginButton.loading::after {
  content: '...';
  animation: dots 1s steps(3, end) infinite;
}

@keyframes dots {
  0%   { content: '.'; }
  33%  { content: '..'; }
  66%  { content: '...'; }
}
#loginButton.loading {
  background-image: url('img/loader.gif'); /* replace with your loader image */
  background-repeat: no-repeat;
  background-position: center right 10px;
  padding-right: 40px; /* give space for loader */
}
/* Shake Animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

button.shake {
  animation: shake 0.4s ease;
}
#forgotpword {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    position: relative;
    left: 20px;
}
button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  width: 50%;
  color: #ffffff;
  background-color: #003477;
  border-radius: 10px;
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:active {
  background-color: #002477;
}
    .input-icon-wrapper {
      position: relative;
      margin-bottom: 15px;
    }

    .input-icon-wrapper i {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #003477;
    }

    .input-icon-wrapper input {
      padding-left: 35px; /* space for icon */
    }
    /* Apply modern font and reduce font sizes for better aesthetics */
body, input, button, select, textarea, h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif !important;
  color: #003477;
}

/* Headings - make h2 match the new layout */
h2 {
  font-size: 18px;
  font-weight: 700;
  color: #003477;
  margin-top: 70px; /* To avoid overlapping back button */
  text-align: center;
}

/* Paragraph and text styling inside #accessdbbody */
#accessdbbody p,
#accessdbbody label,
#accessdbbody small,
#accessdbbody span {
  font-size: 13px;
  color: #003477;
}

/* Reduce placeholder/input font */
.styleal::placeholder {
  font-size: 13px;
  color: #888;
}
.styleal {
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
}

/* Adjust button for consistency */
button,
.access {
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  padding: 10px 16px;
  width: 60%;
}

/* Reduce login error/success font */
.message {
  font-size: 14px;
}