* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html{
    font-size: 100%;
  }

  html, body {
  outline: none;
background: #ffffff;
}

  body {
    font-family: Arial, sans-serif;
    background: #ffffff !important;
    height: auto !important;
  }

  /* Override headings to use Times New Roman */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Times New Roman", serif !important;
    margin-top: 0px !important;
  }

  :root {
    --color-primary: #007bff;     /* Blue */
    --color-secondary: #6c757d;     /* Gray */
    --color-success: #28a745;     /* Green */
    --color-danger: #dc3545;     /* Red */
    --color-warning: #ffc107;     /* Yellow */
    --color-info: #17a2b8;     /* Teal */
    --color-light: #f8f9fa;     /* Light gray */
    --color-dark: #343a40;     /* Dark gray */
  }

  /* .button-secondary {
  background-color: var(--color-secondary);
  color: white;
} */

button:focus,
button:active {
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

#content .nav-tabs.nav-account .nav-link.active {
  outline: none;
  box-shadow: none;
}

/* Validation Summary */
.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/* Refined validation summary using class */
.validation-summary-errors {
  background-color: #fff3f3;
  border-left: 4px solid #d93025;
  color: #d93025;
  padding: 6px 15px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 15px;
  box-shadow: 2px 2px 8px rgba(217, 48, 37, 0.1);
  animation: fadeIn 0.5s ease-in-out;
  --bs-alert-color: #d93025 !important;
}

/* Remove default list styling */
.validation-summary-errors ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Style each list item */
.validation-summary-errors li {
  margin-bottom: 6px;
}

/* Style the links inside the list */
.validation-summary-errors a {
  color: #d93025;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.validation-summary-errors a:hover {
  color: #a61b1b;
  text-decoration: underline;
}


 #content{
  width: 100%;
    max-width: 400px;
    margin: 3rem auto;
    box-shadow: 0px 0px 1rem rgba(0, 0, 0, .10);
    padding: 1px 0px 1.5rem 0px;
    border-radius: 1rem;
background: #ffffff;

 }

 #content .nav-tabs.nav-account {
  border-bottom: 1px solid #e9ecef;
  justify-content: center;
  gap: 1rem;
  padding-bottom: 0rem;
}

#content .nav-tabs.nav-account .nav-link {
  font-size: 15px;
  font-weight: 500;
  color: #555;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem 0.5rem 0 0;
  background-color: #f8f9fa;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

#content .nav-tabs.nav-account .nav-link:hover {
  color: #007bff;
  text-decoration: none;
}

#content .nav-tabs.nav-account .nav-link.active {
  background-color: #007bff;
  color: #ffffff;
  border-color: #ddd #ddd #fff;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
}


 .login-heading-section {
    border-bottom: none;
    line-height: inherit;
    margin: 0px;
    color: #000 !important;
    padding-bottom: 0;
    font-size: 1.5rem;
    text-align: center;
    font-weight: 400;
    }

    /* Make .col-md-6 full width only inside .page-content */
.page-content .col-md-6 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Ensure label and input rows inside .portal-form are full width */
.portal-form .row.mb-3 > label,
.portal-form .row.mb-3 > div {
  flex: 0 0 100%;
  max-width: 100%;
}

.portal-form .row.mb-3 > div > input.form-control {
  width: 100%;
}
.portal-form{
  padding: 0 1.5rem;
}

.portal-form .row.mb-3 > label {
  text-align: left;
    font-size: 14px;
    color: #1e1e1e;
    font-weight: 400 !important;
}

/* Remove offset and make checkbox full width inside portal-form */
.portal-form .row.mb-3 > .offset-md-4.col-md-8 {
  margin-left: 0;
  flex: 0 0 100%;
  max-width: 100%;
}

/* Align checkbox label to the left */
.portal-form .checkbox label {
  display: flex;
  align-items: center;
  text-align: left;
  font-size: 14px;
}

/* Add spacing between checkbox and label text */
.portal-form .checkbox input[type="checkbox"] {
  margin-right: 8px;
  position: relative;
  top: -3px
}

/* Style the link as plain text */
.portal-form a[title="Forgot your password?"] {
  display: block;
  width: 100%;
  text-align: right;
  font-size: 14px;
  color: #3a3a3a;
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.5rem;
  text-decoration: none;
}

/* Underline on hover only */
.portal-form a[title="Forgot your password?"]:hover {
  text-decoration: underline;
}



.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0px;
}

/* Hide default checkbox */
.checkbox input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #0078d4;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

/* Checkmark styling */
.checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid #0078d4;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Remove offset and make container full width */
.portal-form .row.mb-3 > .offset-md-4.col-md-8 {
  margin-left: 0;
  flex: 0 0 100%;
  max-width: 100%;
}

/* Make the Sign In button full width */
.portal-form #submit-signin-local {
  width: 100%;
  margin-bottom: 0.5rem;
}

/* Style the Forgot Password link as a simple text link below the button */

input.form-control {
  height: 40px;
  padding: 16px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #eee;
  box-shadow: 0px 0px 1rem rgba(0, 0, 0, 0.10);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
input.form-control:hover {
  border-color: #ccc;
  box-shadow: 0px 0px 1rem rgba(0, 0, 0, 0.15);
}

/* Focus effect */
input.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0px 0px 1rem rgba(0, 123, 255, 0.25);
  outline: none;
}

.portal-form #submit-signin-local {
  width: 100%;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  background: #333;
  border: 1px solid #000;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

/* Hover effect */
.portal-form #submit-signin-local:hover {
  background: #000;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

/* Center the external login button */
.btn-line {
  display: block !important;
  margin: 10px auto !important;
  width: auto !important;
  min-width: 250px !important; /* optional: set a minimum width */
  text-align: center;
}