/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
/* 1. Set up the body as a vertical flex container */
.full-page-flex-container {
    display: flex;
    flex-direction: column; /* Stack children vertically: header, main, footer */
    min-height: 100vh; /* Make sure it's at least the full viewport height */
}

/* Main content area take up all available space and align its children */
.main-content-area {
    flex-grow: 1; /* Pushes the footer to the bottom by taking up all extra space */
    flex-direction: column;

    display: flex;
    justify-content: flex-start;
    align-items: center; 

    /* Add padding/margin to keep the card away from the edges if needed */
    padding: 20px;
    background-color: #f6f6f6;
}

label.required::after {
  content: " *Required";
  color: #600;
  font-size: 0.75em;
  font-style: italic;
  opacity: 0.6;
  margin-left: 0.25em;
}

/* Container ensures the button is positioned relative to the input */
.password-field-container {
  position: relative;
  display: inline-block; /* Adjust if your form is block-level */
}

.password-toggle-btn {
  /* Position the button over the right edge of the input field */
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  
  /* Styling to make it look clean */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 0.8em;
  color: #555; /* Dark gray */
}

/* Ensure the input field is visible beneath the button */
.password-input-field {
  padding-right: 40px; /* Make space for the button */
}

.notice {
color: green;
}

.alert {
  position: relative;
  padding: 10px;
  margin: 10px;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-alert {
  color: #8b0000;
  background-color: #ffefef;
  border-color: #7b0000;
  font-weight: 700;
}

.alert-notice {
  color: #006400;
  background-color: #90EE90;
  border-color: #006400;
  font-weight: 700;
}
.alert-dismissible {
  padding-right: 3rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}

.alert-primary {
  color: #084298;
  background-color: #cfe2ff;
  border-color: #b6d4fe;
}
.alert-primary .alert-link {
  color: #06357a;
}

.alert-secondary {
  color: #41464b;
  background-color: #e2e3e5;
  border-color: #d3d6d8;
}
.alert-secondary .alert-link {
  color: #34383c;
}

.alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}
.alert-success .alert-link {
  color: #0c4128;
}

.alert-info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
}
.alert-info .alert-link {
  color: #04414d;
}

.alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}
.alert-warning .alert-link {
  color: #523e02;
}

.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}
.alert-danger .alert-link {
  color: #6a1a21;
}

.alert-light {
  color: #636464;
  background-color: #fefefe;
  border-color: #fdfdfe;
}
.alert-light .alert-link {
  color: #4f5050;
}

.alert-dark {
  color: #141619;
  background-color: #d3d3d4;
  border-color: #bcbebf;
}
.alert-dark .alert-link {
  color: #101214;
}