html,
body {
  height: 100%;
  
}
.wrap {
  min-height: 100%;
  height: auto;
  margin: 0 auto -60px;
  padding: 0 0 60px;
}
.wrap > .container {
  padding: 70px 15px 20px;
}
.footer {
  height: 60px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  padding-top: 20px;
}
.jumbotron {
  text-align: center;
  background-color: transparent;
}
.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}
/* add sorting icons to gridview sort links */
/* align the logout "link" (button in form) of the navbar */
.bimg {
  width: 100%;
  background: url("/images/0R8A6868.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.site-content-container {
  background-color: white;
  padding: 25px;
}
.navbar-inverse {
  background-color: #D7AC44;;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  background-color: #56513c;
}
h1 {
  color: #616f3e;
}
.modal {
  opacity: 1 !important;
}

.fixed-top {
  z-index: 666;
}




/* --- Summary Styling --- */
.summary {
    text-align: center; /* Center the text */
    font-size: 1.1em;
    font-weight: 600;
    color: #56513C; /* Dark accent for good readability */
    padding: 18px 25px; /* Generous padding */
    margin: 25px auto; /* Vertical spacing and center horizontally */
    max-width: 1200px; /* Match the max-width of your card container */
    background-color: #fcfcfc; /* Very light, almost white background */
    border: 1px solid #e5e5e5; /* Subtle border for definition */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* A more prominent, soft shadow */
    letter-spacing: 0.5px;
    line-height: 1.4;
    text-transform: uppercase; /* A subtle touch of elegance */
}

/* --- LinkPager (Pagination) Styling --- */
.pagination {
    display: flex; /* Use flexbox for horizontal alignment */
    justify-content: center; /* Center the pagination links */
    list-style: none; /* Remove default list bullets */
    padding: 30px 0; /* Ample vertical padding */
    margin: 0 auto; /* Center the list */
    gap: 12px; /* Increased space between page items for breathability */
}

.pagination li {
    display: inline-block; /* Ensure items are inline blocks */
    vertical-align: middle; /* Align middle for consistency */
}

.pagination li a,
.pagination li span { /* Target both links and spans (for disabled/active states) */
    display: block; /* Make the entire area clickable/stylable */
    text-decoration: none;
    color: #807146; /* Primary accent for inactive links */
    background-color: #ffffff; /* Crisp white background */
    border: 2px solid #e0e0e0; /* More defined light border */
    border-radius: 6px; /* Rounded corners for buttons */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth, slightly bouncy transition */
    font-weight: 600; /* Bolder text for page numbers */
    min-width: 48px; /* Ensure consistent width for single/double digits */
    text-align: center;
    box-sizing: border-box; /* Include padding/border in element's total size */
    cursor: pointer;
}

/* Hover state for clickable links */
.pagination li a:hover {
    background-color: #D7AC44; /* Secondary accent (golden yellow) on hover */
    color: #fff; /* White text on hover */
    border-color: #D7AC44;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
    transform: translateY(-3px); /* Noticeable lift on hover */
}

/* Active page state */
.pagination li.active a,
.pagination li.active span {
    background-color: #D7AC44;; /* Your main title color for active page, making it distinct */
    color: #616F3E;
    border-color: #616F3E;
    font-weight: bolder;
    cursor: default; /* No pointer for active page */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for active state */
    transform: translateY(0); /* Ensure no lift if already active */
}

/* Disabled state for previous/next (e.g., on first/last page) */
.pagination li.disabled a,
.pagination li.disabled span {
    color: #aaa; /* Lighter grey for disabled text */
    background-color: #f2f2f2; /* Muted background */
    border-color: #e8e8e8;
    cursor: not-allowed; /* Indicate it's not clickable */
    opacity: 0.8; /* Slightly faded */
    box-shadow: none; /* No shadow */
    transform: none; /* No transform */
}

/* No hover effect on disabled items */
.pagination li.disabled a:hover {
    background-color: #f2f2f2;
    color: #aaa;
    border-color: #e8e8e8;
    box-shadow: none;
    transform: none;
}

/* Styling for ellipsis (...) pages, which are typically spans */
.pagination li.dots span {
    background-color: transparent;
    border-color: transparent;
    color: #aaa;
    cursor: default;
    box-shadow: none;
    transform: none;
    font-weight: 400; /* Lighter weight for dots */
}

/* Responsive adjustments for smaller screens if needed for pagination */
@media (max-width: 600px) {
    .pagination {
        gap: 8px;
        padding: 20px 0;
    }
    .pagination li a,
    .pagination li span {
  
        min-width: 38px;
        font-size: 0.9em;
    }
}

/* frontend/web/css/site.css (or your custom CSS file) */

/* Target the specific input field within the Select2 container */
.select2-search__field {
    width: 100% !important; /* Make it take full available width */
    /* Or set a minimum width if 100% is too much */
    min-width: 50px !important; /* Example: Ensure it's at least 50px wide */
}

/* If you also want to affect the dropdown search field */
.select2-dropdown .select2-search__field {
    width: 100% !important;
    min-width: 50px !important; /* Ensure the search input in the dropdown is also visible */
}

/* You might need to adjust the padding/margin of the overall Select2 container if 100% causes overflow */
.select2-selection--multiple {
    padding-right: 12px; /* Add some padding to prevent the input from touching the clear icon */
}