/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
:root {
  --brand: #1E3F8A; /* sign-in button color */
}
body {
  min-height: 100vh;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.auth-wrapper {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow: hidden;
  background-image: url("/images/er_images/background_img_grey.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* Faded image on the right side */
.auth-wrapper::after {
  content: "";
  position: absolute;
  inset: 0 0 0 40%;
  background-size: cover;
  background-position: center right;
  opacity: 0.07;
  pointer-events: none;
}

.auth-logo img {
  height: auto;
  width: 250px;
  margin-bottom: 30px;
}

.auth-card {
  max-width: 650px;
  width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
}

.form-label .text-danger {
  margin-left: 4px;
}
.input-icon {
  /* position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%); */
  color: #9ca3af;
}
.custom-input {
  border: 1px solid gray;
  border-radius: 6px;
}
.custom-input i {
  display: inline-block;
  width: 8% !important;
  text-align: center;
}
.custom-input input {
  display: inline-block;
  border: none;
  width: 90% !important;
  border-radius: 2px;
}
/* .custom-input #password {
  width: 80% !important;
} */

.custom-input span {
  width: 12% !important;
}
.custom-input .password {
  width: 80% !important;
}
.form-control.ps-5 {
  padding-left: 40px !important;
}
.toggle-pass {
  /* position: absolute;
  right: 60px;
  top: 50%; */
  /* transform: translateY(-50%); */
  cursor: pointer;
  color: #6b7280;
}

.btn-brand {
  /* Base */
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);

  /* Hover */
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1E3F8A; /* ~5% darker than var(--brand) */
  --bs-btn-hover-border-color: #1E3F8A;

  /* Active */
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1E3F8A;
  --bs-btn-active-border-color: #1E3F8A;

  /* Disabled */
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}
/* .btn-brand:hover {
  filter: brightness(0.95);
} */
.divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: #9ca3af;
  font-size: 14px;
}
.divider::before,
.divider::after {
  content: "";
  height: 1px;
  background: #e5e7eb;
  display: block;
}
.form-text-error {
  color: #dc2626;
  font-size: 14px;
}
@media (max-width: 576px) {
  .auth-card {
    border-radius: 12px;
  }
}
/* Custom color for the Register link */
.custom-link {
  color: #1E3F8A; /* your custom color */
}

.custom-link:hover,
.custom-link:focus {
  color: #1E3F8A; /* hover/focus color */
  text-decoration: underline; /* optional */
}

.custom-link:visited {
  color: #1E3F8A; /* optional visited color */
}

.btn-gradient-brand {
  /* Inherit Bootstrap button base styles */
  --bs-btn-color: #fff;
  --bs-btn-bg: linear-gradient(to right, #1E3F8A, #4A90E2);
  --bs-btn-border-color: transparent;

  /* Hover states */
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: linear-gradient(to right, #1E3F8A, #4A90E2);
  --bs-btn-hover-border-color: transparent;

  /* Active states */
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: linear-gradient(to right, #1E3F8A, #4A90E2);
  --bs-btn-active-border-color: transparent;

  /* Apply the gradient background */
  background: linear-gradient(to right, #1E3F8A, #4A90E2);
  border: none;
  color: white;
  transition: all 0.3s ease;
}

.btn-gradient-brand:hover,
.btn-gradient-brand:focus {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 63, 138, 0.3);
  color: white;
}

.btn-gradient-brand:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(30, 63, 138, 0.4);
}