.nav-item .nav-link.custom-color 
{
    color: #005156 !important;
}

/* Ensure labels are always stacked above their inputs */
.form-label 
{
    display: block !important; /* Use !important to override any conflicting Bootstrap rules */
    margin-bottom: 0.25rem; /* Add a small space below the label */
    /*can change color here for field labels in myProfile */
}

.profile-background 
{
    background-image: url('/static/images/AMBBackground.drawio.png') !important; 
    background-size: cover !important;         
    min-height: 400px !important;               
    background-attachment: fixed;
}

.underline-on-hover 
{
    text-decoration: none;
}

.underline-on-hover:hover 
{
    text-decoration: underline;
}

.uppercase
{
    text-transform: capitalize
}

th[data-sort-type]:not([data-sort-type="none"]) 
{
    cursor: pointer;
    position: relative;
    padding-right: 25px; /* Make space for the arrow */
}

th[data-sort-type]:not([data-sort-type="none"])::after 
{
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    opacity: 0.5;
}

th.sorted-asc::after 
{
    border-bottom: 5px solid black; /* Up arrow */
}

th.sorted-desc::after 
{
    border-top: 5px solid black; /* Down arrow */
}

.pagination .page-link 
{
    color: #1CA3AA; /* Teal */
    border: 1px solid #dee2e6; /* Light gray border */
    padding: 0.5rem 0.75rem; /* Standard padding */
    transition: all 0.3s ease; /* Smooth transitions for hover effects */
    border-radius: 0.25rem; /* Slightly rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for all links */
}

/* Hover state for page links */
.pagination .page-link:hover {
    color: #1CA3AA; /* Darker teal on hover */
    background-color: #005156; /* Light teal background on hover */
    border-color: #dee2e6; /* Keep original border color on hover */
}

/* Active page item */
.pagination .page-item.active .page-link 
{
    background-color: #1CA3AA; /* teal background for active */
    border-color: #1CA3AA; /* teal border for active */
    color: white; /* White text for active */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* More prominent shadow for active */
}

/* Active page item hover */
.pagination .page-item.active .page-link:hover 
{
    background-color: #005156; /* Darker teal for active hover */
    border-color: #005156;
}

/* Disabled page item (if you add next/previous buttons) */
.pagination .page-item.disabled .page-link 
{
    color: #6c757d; /* Muted color */
    pointer-events: none; /* No click */
    background-color: #fff;
    border-color: #dee2e6;
}

/* Adjustments for connected look (if desired) */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link 
{
    border-radius: 0.25rem; /* Keep rounded for ends, this is already handled by the general rule above if you want all to be rounded */
}

.searchBarInput
{
    background: url('/static/images/searchIcon.png'); /* Add a search icon to input */
    background-position: 9px 9px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
}
.searchBarInput:focus
{
    outline-color: #1CA3AA;
}
.searchBarInput:hover
{
    border-color:  #1CA3AA;
    border-radius: 2pt;
}

/* General adjustments for Select2's container */
.select2-container--bootstrap4 .select2-selection--multiple {
    min-height: calc(1.5em + 0.75rem + 2px); /* Matches Bootstrap's default input height */
    padding: 0.375rem 0.75rem; /* Matches Bootstrap's default input padding */
    border: 1px solid #ced4da; /* Bootstrap's default input border color */
    border-radius: 0.25rem; /* Bootstrap's default border-radius */
    display: flex; /* Use flexbox for vertical alignment */
    align-items: center; /* Vertically center content */
    flex-wrap: wrap; /* Allow tags to wrap */
}

/* Fix for placeholder text alignment */
.select2-container--bootstrap4 .select2-selection__placeholder 
{
    color: #6c757d; /* Bootstrap's default placeholder color */
    line-height: 1.5; /* Ensure line height consistency */
    flex-grow: 1; /* Allow placeholder to take available space */
    padding-top: 0.125rem; /* Fine-tune vertical position if needed */
    padding-bottom: 0.125rem; /* Fine-tune vertical position if needed */
}

/* Adjustments for individual selected tags (tokens) */
.select2-container--bootstrap4 .select2-selection__choice 
{
    background-color: #e2e6ea; /* Lighter background for selected items */
    border: 1px solid #dae0e5; /* Border for selected items */
    color: #343a40; /* Darker text color for selected items */
    border-radius: 0.25rem;
    padding: 0.2rem 0.6rem; /* Padding for selected items */
    margin-right: 0.5rem; /* Space between selected items */
    margin-bottom: 0.25rem; /* Space below if wrapping */
    margin-top: 0.25rem; /* Space above if wrapping */
    font-size: 0.875em; /* Slightly smaller font size */
    line-height: 1; /* Compact line height */
    display: flex; /* For centering content within the tag */
    align-items: center; /* Vertically center text in tag */
}

/* Adjust the remove icon (x) on selected tags */
.select2-container--bootstrap4 .select2-selection__choice__remove 
{
    margin-left: 0.5em; /* Space before the 'x' */
    font-weight: bold;
    color: inherit; /* Inherit color from parent */
}

.select2-container--bootstrap4 .select2-selection__choice__remove:hover 
{
    color: #dc3545; /* Red color on hover for remove icon */
}

/* Fix the search input within the Select2 box */
.select2-container--bootstrap4 .select2-search--inline .select2-search__field 
{
    box-sizing: border-box; /* Crucial for width calculations */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    border: none; /* Remove border */
    outline: none; /* Remove outline on focus */
    height: 1.5em; /* Match line-height */
    line-height: 1.5; /* Set line-height */
    font-size: 1rem; /* Match Bootstrap default font size */
    flex-grow: 1; /* Allow it to grow to fill space */
    width: auto !important; /* Override potential fixed widths */
    min-width: 0; /* Allow shrinking */
}

/* Ensure focus outline is consistent */
.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple 
{
    border-color: #80bdff; /* Bootstrap focus border color */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Bootstrap focus shadow */
    outline: 0;
}



.button:hover {
  filter: brightness(75%); /* Adjust the percentage to control darkness */
  transition: filter 0.3s ease; /* Adds a smooth transition */
   border: black, solid, 1px;
}

.button:active
{
    border-color: white !important;
}

.select2-container .select2-selection--single {
    border-color:  #dee2e6 !important;
    border-width: 1px !important;
    height: 38px !important;
    align-content: center !important;
    border-radius: .375rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important; /* Hide the default b tag */
}

/* Add a custom background image to the arrow container */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    /* Ensure the container is visible and sized correctly */
    width: 12px !important; /* Adjust as needed */
    height: 12px !important; /* Adjust as needed */
    top: 13px !important;
    right: 15px !important; /* Adjust positioning */
    background-image: url('/static/images/dropdownArrow.svg') !important; /* Your image file */
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important; /* Ensure image fits */
}

/* Optional: Rotate the arrow when the dropdown is open */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: translateY(-50%) rotate(180deg) !important;
    transition: transform 0.3s ease; /* Smooth rotation */
}

.card-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-color: #f1A208;
    color: white;
}

.card-header h2 {
    flex-grow: 1;
    text-align: center;
    margin: 0;
}

.info-char-wrapper {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px; 
    cursor: pointer; /* Indicate it's clickable */
}

.info-char {
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    background-color: rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}


.hidden-credits {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.9); /* Dark semi-transparent background */
    color: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    z-index: 10000; /* High z-index to appear on top */
    text-align: center;
    max-width: 500px;
    width: 90%;
    opacity: 0; /* Start completely transparent */
    visibility: hidden; /* Hide from screen readers and interaction */
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; /* Smooth transition */
}

.hidden-credits.show {
    opacity: 1; /* Fade in */
    visibility: visible; /* Make visible */
}

.hidden-credits h3 {
    margin-top: 0;
    color: #f1A208; /* Match your brand color */
}

.hidden-credits ul {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 15px 0;
}

.hidden-credits li {
    margin-bottom: 5px;
}

#close-credits-btn {
    background-color: #f1A208; /* Match your brand color */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

#close-credits-btn:hover {
    background-color: #d66e00; /* Slightly darker on hover */
}

.btn {
    border: black, solid, 1px;
}

/* Define the substitute font */
@font-face {
    font-family: 'SignatureFont-pdf'; /* Use a new, unique name */
    /* Must use the absolute file:// path to the font file on the server */
    src: url('file:///home/ubuntu/myproject/valuation/static/css/GreatVibes-Regular.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}

/* Apply the new font family where you previously used Snell Roundhand p[style*="Snell Roundhand"] {*/
.signature-text-pdf {
    font-family: 'SignatureFont-pdf', cursive !important;
}


/* Define the substitute font */
@font-face {
    font-family: 'SignatureFont'; /* Use a new, unique name */
    /* Must use the absolute file:// path to the font file on the server */
    src: url('/static/css/GreatVibes-Regular.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}

/* Apply the new font family where you previously used Snell Roundhand p[style*="Snell Roundhand"] {*/
.signature-text {
    font-family: 'SignatureFont', cursive !important;
}




@font-face {
    font-family: 'Roboto'; /* Use the exact name 'Roboto' */
    /* CRITICAL: Use the absolute file:// path to the font file */
    src: url('/static/css/Roboto-VariableFont_wdth,wght.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}

/* 2. Apply it to the document body (This overrides Bootstrap/browser defaults) */
body {
    /* Set the entire document's font to Roboto */
    font-family: 'Roboto', sans-serif !important; 
}