.input-error {
  border: 1.5px solid #f44336 !important; /* Red border */
  background: #fff;
}

.error-message {
  color: #f44336;
  font-size: 14px;
  text-align: left;
  margin-top: 3px;
  margin-bottom: 12px;
  display: block;
}

/* PRIMARY */
.alert-primary {
    background-color: #e7ecff !important;
    border: 1.5px solid #3053ea !important;
    color: #1a2962 !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    padding: 14px 22px;
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(48, 83, 234, 0.07);
  }
  
  /* SECONDARY */
  .alert-secondary {
    background-color: #f2f2f5 !important;
    border: 1.5px solid #adb5bd !important;
    color: #343a40 !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    padding: 14px 22px;
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(173, 181, 189, 0.08);
  }
  
  /* SUCCESS */
  .alert-success {
    background-color: #e8faef !important;
    border: 1.5px solid #27c96e !important;
    color: #168347 !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    padding: 14px 22px;
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(39, 201, 110, 0.07);
  }
  
  /* DANGER */
  .alert-danger {
    background-color: #ffeaea !important;
    border: 1.5px solid #f1404b !important;
    color: #c81e31 !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    padding: 14px 22px;
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(241, 64, 75, 0.06);
  }
  
  /* WARNING */
  .alert-warning {
    background-color: #fff9e6 !important;
    border: 1.5px solid #ffd34e !important;
    color: #8a6d1b !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    padding: 14px 22px;
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(255, 211, 78, 0.08);
  }
  
  /* INFO */
  .alert-info {
    background-color: #e7f5ff !important;
    border: 1.5px solid #3198fa !important;
    color: #2162ab !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    padding: 14px 22px;
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(49, 152, 250, 0.08);
  }
  
  /* LIGHT */
  .alert-light {
    background-color: #f9f9fb !important;
    border: 1.5px solid #e2e3e5 !important;
    color: #7a7a7a !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    padding: 14px 22px;
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(226, 227, 229, 0.04);
  }
  
  /* DARK */
  .alert-dark {
    background-color: #3b4253 !important;
    border: 1.5px solid #23272b !important;
    color: #f4f4f4 !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    padding: 14px 22px;
    margin-bottom: 22px;
    box-shadow: 0 2px 8px rgba(35, 39, 43, 0.14);
  }

  /* Close X icon color for each alert */
.alert-primary .custom-alert-close {
    filter: invert(28%) sepia(98%) saturate(1630%) hue-rotate(210deg) brightness(100%) contrast(100%);
  }
  .alert-secondary .custom-alert-close {
    filter: invert(41%) sepia(6%) saturate(270%) hue-rotate(173deg) brightness(90%) contrast(91%);
  }
  .alert-success .custom-alert-close {
    filter: invert(49%) sepia(96%) saturate(444%) hue-rotate(98deg) brightness(88%) contrast(88%);
  }
  .alert-danger .custom-alert-close {
    filter: invert(32%) sepia(89%) saturate(6012%) hue-rotate(340deg) brightness(96%) contrast(105%);
  }
  .alert-warning .custom-alert-close {
    filter: invert(84%) sepia(40%) saturate(487%) hue-rotate(356deg) brightness(102%) contrast(101%);
  }
  .alert-info .custom-alert-close {
    filter: invert(43%) sepia(99%) saturate(1694%) hue-rotate(179deg) brightness(95%) contrast(92%);
  }
  .alert-light .custom-alert-close {
    filter: invert(91%) sepia(0%) saturate(0%) hue-rotate(181deg) brightness(109%) contrast(101%);
  }
  .alert-dark .custom-alert-close {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(134deg) brightness(109%) contrast(108%);
  }
  
  .custom-alert-close {
    width: 1.6em;
    height: 0.78em;
    background-size: 0.7em 0.7em;
    opacity: 0.7;
    position: absolute;
    top: 13px;
    right: 16px;
    z-index: 2;
    transition: opacity 0.18s;
  }

  .custom-alert-close:hover {
    opacity: 1;
  }
  
  .custom-alert-close:focus, .custom-alert-close:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}