.modal-header .close {
    color: inherit;  /* Inherit the color from the modal title */
}

.card-header { 
    background-color:#743794;
    /* background-color:#07406d; SMARTfinder original */
    color: #FFFFFF;
}

.pac-container {
    z-index: 10000050;
}

.pac-item:hover {
    background-color: #743794;
    color: #FFFFFF;

    .pac-item-query {
        background-color: #743794;
        color: #FFFFFF;
    }
}

.paginatorpage {
    background-color: #9fa5aa;
    color: #FFFFFF;
}

.paginatorpage:hover {
    color: #FFFFFF !important;
    background-color: #007b7b !important;
}

.paginatorpageactive {
    background-color: #743794;
    color: #FFFFFF;
    cursor: default !important;
}

.paginatorpageactive:hover {
    color: #FFFFFF !important;
    
}



.paginatorpage.active {
    background-color: #9fa5aa;
    color: #FFFFFF;
}


.cookieconsentmodal {
    position:fixed;
    bottom:20px;
    right:0px;
    margin:0;
    transform: none;
}


.modal-header { 
    background-color:#743794;
    /* background-color:#07406d; SMARTfinder original */
    color: #FFFFFF;
}

.modal-close {
    background-color:#743794;
    /* background-color:#07406d; SMARTfinder original */
    color: #FFFFFF;
}

.meetinglistrow {
    padding-left: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px black solid;
}

.meetinglistwarningrow {
    padding-left: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eed202;
    color: black;
    border-top: 1px black solid;
    border-bottom: 1px black solid;
}


.meetinglistheader {

    padding-top: 10px;
    padding-bottom: 10px;

    font-size: large;
    background-color: #743794;
    color: #FFFFFF;
}
.meetinglistcell {
    margin: 10px;
}

.navbar {
    background-color:#ffffff;
    color:#743794;
    /* background-color: #07406d; SMARTfinder original */
}

.navbar-brand, .navbar-brand:hover {
    color:#743794;    
    text-decoration: none;
}


.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(116, 55, 148, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");    
}

.meetinglisticon {
    color:#0C4269; 
}

.smartfinderprimary {
    color:#155b92; /* SMART official */
    /* color:#07406d; SMARTfinder original */
}

.smartofficialdarkblue {
    color:#155b92;
}

.smartofficialorange {
    color: #faa21b;
}

.smartofficialblue {
    color:#318dde;
}

.smartofficialbluebackground {
    background-color:#318dde;
}
/* This forces a pointer cursor for Boostrap dropdowns, and matches the hover with the navbar */
.dropdown-item:hover {  
    cursor: pointer;
    background-color: #743794;
    color: #E7D3F1;
}

.smartofficialred {
    color: #e94c38;
}

.color_accenticon_color {
    color: #FFFFFF;
}

.color_pageicon_color {
    color: #743794;
}

.smartfindersecondary {
    color: #FFFFFF
}

.color_nationalbadge {
    background-color: #009999 !important;
    color: #FFFFFF;
}  

.color_regionalbadge {
    background-color: #743794 !important;
    color: #FFFFFF;
}    

.meeting_support_button {
    background-color: #009999;
    color: #FFFFFF !important;
}


.meeting_support_button:hover {
    background-color: #007b7b !important;
}

.color_button_background {
    background-color: #009999 !important;
}

.color_button_background:not([aria-disabled="true"]):not(:disabled):hover {
    background-color: #007b7b !important;
}

/* aria-disabled buttons (e.g. Search before a suggestion is picked) stay in the keyboard
   tab order but should look and feel inert: no hover color change, dimmed, no-action cursor. */
.color_button_background[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}


.color_button_text {
    color: #FFFFFF !important;
}

/* Outlined counterpart to .color_button_background: the site's button color as the
   border over a transparent fill, filling in on hover the way Bootstrap's own
   .btn-outline-* do. Used by the applied-filter chips, which sit under the Filters
   button and should read as belonging to it without competing with it for attention.

   The text stays body-colored rather than taking the button color too: that color is
   chosen to carry white text on a solid button, and several customers' choices fall
   well short of a readable contrast ratio when used as text on the white page. */
.color_button_background_outline {
    background-color: transparent !important;
    border-color: #009999 !important;
    color: #212529 !important;
}

.color_button_background_outline:hover {
    background-color: #009999 !important;
    color: #FFFFFF !important;
}

.smartfindersecondarybackground {
    background-color: orange;
}

.smartfindericons {
    color:#155b92; /* SMART official */
    /* color:#07406d;  SMARTfinder original */
}
.smartfinderprimarybackground {
  /*  background-color: #155b92; /* SMART official */ */
  background-color: #743794;
    /* background-color:#07406d;  SMARTfinder original */
}

.form-check {
    /* margin-left: 15px; */
    align-items: center;
    justify-content: center;
}

.form-check-input.is-valid~.form-check-label {
    color: black;
}

.color_nav_background {
    background-color: #ffffff;
}

.color_nav_text {
    color: #743794;
}

.color_accent_background {    
    background-color: #743794;
}

.color_accent_active {
    background-color: #9fa5aa;
}

.color_accent_text {
    color: #FFFFFF;
}
  
.nav-link {
    color: #743794!important;
}

.nav-link:hover {
    color: #E7D3F1!important;
}

.form-control {
    /* border-color: black!important;*/
    color: black;
    margin:5px;
}



.form-control.is-valid {
    border-color: gray!important;
    color:black;
    margin: 5px;
    background-image: none;
}


.form-control:focus {
   /* border-color: black!important; */
    color:black;
}

footer {
    background-color: rgba(245, 245, 245, 0.637);
}

/* The New design switch sits top right of the footer from md up, where the redesign
   puts its own. Set down so the space above it is the space above the copyright's
   first line, which starts a <br> down (footer.html). */
@media only screen and (min-width: 768px) {
    .footer-designswitch { padding-top: 17px; }
}

.odd {
    background-color: #f5f5f5;
}

.even {
    background-color: white;
}

.txt-overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    
}

.national-meeting-detail {
    background-image: linear-gradient(to bottom left, white,#00b8b8);
    border-color: lightgray;
    border-width: 1px;
    border-style: solid;
}

.regional-meeting-detail {
    background-image: linear-gradient(to bottom left, white,#8c42b2);
    border-color: lightgray;
    border-width: 1px;
    border-style: solid;
}

/* Workaround a bug in crispy-forms not showing validation error from recaptcha */
.invalid-feedback {
    display: block;
}

/* highlight row backgrounds only on larger screens (specifically sm+ in Bootstrap) */
@media only screen and (min-width: 768px) {
    .odd:hover {
        background-color: #743794!important;
        background-image: linear-gradient(#743794, #743794);
        color: #FFFFFF!important;     
        cursor: pointer;
    }
    .odd:hover i {
        color: #FFFFFF!important;
    }
    
    .even:hover {
        background-color: #743794!important;
        background-image: linear-gradient(#743794, #743794);
        color: #FFFFFF!important;     
        cursor: pointer;
    }
    .even:hover i {
        color: #FFFFFF!important;
    }

    /* The two rules above recolor every <i> in a hovered row to the row's hover text
       color. A badge sits on its own background and carries its own foreground color,
       so that would wash its icon out -- white-on-yellow for the "Cameras on" badge.
       Keep badge icons matching the badge instead of the row. Higher specificity than
       the .odd/.even:hover i rules above, so it wins despite their !important. */
    .odd:hover .badge i,
    .even:hover .badge i {
        color: inherit!important;
    }
/* 
    .even:hover img {
        filter: brightness(0) invert(1);
    }
 */

    
    
    .one-color-white {
        color: #FFFFFF!important;
        width: 75px!important;
        height: auto!important;
    }

    .sticky-top {
        /* top: 55px; */
        top: 0px;
        z-index: 1020;
    }
    /* .meetingtypeicon {
        color: white!important;
    } */

}

.modal.fade {
    z-index: 10000000 !important;
}

.btn {
    white-space: normal;
}



.jumbotron {
    
    background-image: url("https://nyc3.digitaloceanspaces.com/pm-wfs-space/media/settings/Pathminder_background_image-white.png");
    
    background-size: cover;
    color: #000000;
    border-radius: 0 !important;
}
.jumbotron a:link, .jumbotron a:hover, .jumbotron a:visited, .jumbotron a:active {
    color: inherit;
    text-decoration: underline;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    font-family: Arial, sans-serif;
}

h1, h3 {
    font-family: 'Arial', sans-serif !important;
}


.search-container {
    position: relative; /* Ensures dropdown aligns with the input */
    display: inline-block; /* Prevents full-width expansion */
    width: auto; /* Matches input width */
    padding: 0;

}

.suggestions-dropdown {
    position: absolute;
    top: 100%; /* Positions directly below input */
    left: 0; /* Aligns to the left edge of the input */
    width: 100%; /* Adjust width dynamically */

    min-width: 100%; /* Ensures at least the width of the input */
    background: white;
    border: 1px solid #ccc;
    display: none; /* Initially hidden — JS toggles to block */

    z-index: 10000050; /* Ensures it appears above other content */

    border-radius: 4px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 14px; /* Smaller font */
    white-space: nowrap; /* Prevents wrapping */
    overflow: hidden; /* Ensures no multi-line wrapping */
}

.suggestions-helper {
    padding: 6px 10px;
    font-size: 0.85em;
    color: #555;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ddd;
    /* Override the wrapper's white-space: nowrap so longer translations wrap
       instead of being silently clipped by the wrapper's overflow: hidden. */
    white-space: normal;
    overflow-wrap: break-word;
}

.suggestions-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.suggestions-list li {
    padding: 6px 10px; /* Smaller padding for compact look */
    cursor: pointer;
    display: flex;
    align-items: center;
    overflow: hidden !important;
    mask-image: linear-gradient(to right, black 80%, transparent); /* Fade out effect */
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent); /* Fade out effect for WebKit browsers */
    border-bottom: 1px solid #ddd; /* Thin gray line between results */
    background-color: white;
    color: black;

}

.suggestions-list li:hover,
.suggestions-list li[aria-selected="true"],
.suggestions-list li.suggestion-active {
    background-color: #743794;
    color: #FFFFFF;

    mask-image: linear-gradient(to right, black 100%, transparent); /* Fade out effect */
    -webkit-mask-image: linear-gradient(to right, black 100%, transparent); /* Fade out effect for WebKit browsers */
}

/* Keyboard-active option gets an inset outline so it's distinguishable from a stale
   mouse hover and meets the "visible focus indicator" WCAG requirement. */
.suggestions-list li[aria-selected="true"],
.suggestions-list li.suggestion-active {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.pin-icon {
    font-size: 1em; /* Smaller icon */
    margin-right: 8px;
    color: darkgray;
    padding-left: -2px;
}

.suggestion-text {
    overflow: hidden !important;
    
    
    white-space: nowrap !important; /* Ensures it stays in a single line */
    /* flex: 1; /* Ensures text takes the remaining space */ */
    align-items: center;
}

.smaller-text {
    font-size: .8em; /* Adjust the font size as needed */
    display: inline-block; /* Ensures it stays on the same line */
    vertical-align: middle; /* Aligns with the middle of the text */
    margin-left: 3px; /* Adds space between the icon and text */

}

.suggestion-text strong {
    font-weight: bold;
    color: #000;
}