/* General Styles */
body {
    background-color: #ffffff;
}

/* Navbar */
.navbar {
    background-color: transparent;
}

.navbar-dark {
    color: rgba(255, 255, 255, 1);
}

.navbar-light {
    color: rgba(0, 0, 0, 1);
}

.nav-link {
    color: inherit !important;
    outline: none;
}

.no-caret::after {
    display: none !important; /* Hides the caret */
}

/* Main Navigation */
#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 15;
    transition: color 500ms linear, background-color 500ms linear, box-shadow 500ms linear;
}

/* Navbar Wrapper (Non-Mobile) */
.navbar-wrapper {
    display: block;
    margin: 20px auto 0 auto;
    width: 80vw;
    position: relative;
    border-radius: 10px;
    padding: 10px 40px;
    transition: width 250ms linear, margin 250ms ease-in;
}

.navbar-wrapper .container {
    display: flex;
}

/* Scrolling State (All) */
.navbar-scrolling  {
    background-color: #ffffff;
    color: black !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Scrolling State (Non-Mobile) */
.navbar-scrolling .navbar-wrapper {
    width: 100%;
    margin-top: 0;
    padding: 0 40px;
}

/* Prevent initial animation flash */
.navbar-animation {
    transition: none; /* Disable initial transition to prevent flash */
}

/* Mobile-Specific Navbar Styles */
@media (max-width: 768px) {
    .navbar-wrapper {
        width: 100%;
        margin: 0;
        padding: 10px 20px;
        border-radius: 0;
    }

    /* When scrolling, no extra padding in mobile */
    .navbar-scrolling .navbar-wrapper {
        padding: 10px 20px;
    }

    #main-nav {
        padding: 0;
    }
}

/* Logo */
#logo {
    height: 2em;
}

.logo-dyn {
    fill: rgb(247, 37, 133);
}

/* Button Styles */
.btn-dyn {
    background-color: rgb(247, 37, 133);
    color: white;
}

/* Form Styles */
.form-subsection-header button {
    font-size: 12px;
    padding: 2px 10px;
    font-weight: bold;
}

/* STYLING OF TABS */
.trip-nav-tabs .nav-link {
    background-color: #f8f9fa;
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: 500;
    font-family: "Rubik", sans-serif;
    text-transform: uppercase;
    font-size: 0.9rem;
}



/* Color Utility Classes */
.color-dyn {
    color: rgb(247, 37, 133);
}

/* Profile Picture */
.navbar .profile-picture {
    background-color: #cbcbcb;
    height: 36px;
    width: 36px;
    border-radius: 100%;
    position: relative;
    display: inline-block;
}

.navbar .profile-picture i {
    position: absolute;
    margin: auto;
    left: 5.5px;
    font-size: 24px;
}

/* Image Mask for Profile Picture */
.img-mask {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Optional: Adds a background color to the circle */
    text-align: center; /* Ensures the icon is centered */
    }


.img-mask img {
    width: 100%;
    height: 100%;
}

.img-mask i {
font-size: 24px; /* Adjust the font size as needed */
}

.male {
color: #007bff;
}

.female {
color: #f140f4;
}
/* Carousel styling */
#LandingCarousel {
    z-index: 8;
}
    
#LandingCarousel .carousel-item {
    height: 100vh;
    background: no-repeat center center scroll;
    background-size: cover;    
}

#LandingCarousel .carousel-item video {
    object-fit: cover;
    height: 100vh;
}

section {
    padding: 100px 20px;
}

/* Video Deal */
.video-deal {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    border-radius: 10px;
    width: 240px;
}

.video-deal p {
    font-size: 1.5em;
}

.video-deal button {
    background-color: rgb(245, 31, 71);
    color: white;
    border-radius: 10px;
}

/* Country Tease */
#country-tease {
    bottom: 0;
    position: relative;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    padding: 2px 10px 2px 8px;
    font-weight: bold;
    color: white;
    font-size: 1.1em;
    transition: none;
}

#country-tease-container {
    bottom: 9vh;
    position: absolute;
    z-index: 16;
    width: 100%;
    text-align: center;
    transition: none;
}

/* Carousel Indicators */
#LandingCarousel .carousel-indicators li {
    height: 1em;
    width: 1em;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 100%;
    background-size: contain;
}

#LandingCarousel .carousel-indicators .active, 
#LandingCarousel .carousel-indicators li:hover {
    height: 1.15em;
    width: 1.15em;
}

/* Hero Text */
#hero-content {
    position: absolute;
    min-width: 100%;
    height: 50vh;
    z-index: 10;
    top: 25vh;
    text-align: center;
}

#hero-content h1, 
#hero-content h2 {
    color: white;
    text-shadow: 1px 1px gray;
}

#hero-content h1 {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 2.8rem;
}

#hero-content h2 {
    font-weight: 400;
    font-size: 1.6rem;
}

#hero-form {
    display: inline-block;
    margin-top: 5vh;
    position: relative;
}

#hero-search {
    padding-left: 40px;
    width: 90vw; /* Almost full width */   
    max-width: 500px; 
    position: relative;
    z-index: 10;
    background-color: white;

      

}

#hero-search:focus {
    outline: none;
    box-shadow: none;
    transition: none;
}

#hero-form img {
    position: absolute;
    display: inline-block;
    height: 60%;
    margin-top: 8px;
    margin-left: 6px;
    left: 0;
}

/* Mobile Adjustments */
@media (max-width: 768px) {

    /* Hero Text */
    #hero-content {
        top: 15vh;
    }

    /* Hero Text Smaller for Mobile */
    #hero-content h1 {
        font-size: 2rem; /* Adjusted for mobile */
    }

    #hero-content h2 {
        font-size: 1.4rem; /* Adjusted for mobile */
        padding: 10px 20px;
    }

    /* Adjust the padding for the search icon on mobile */
    #hero-form img {
        margin-top: 6px;
        margin-left: 10px;
        height: 50%;
    }
}


/* Hero Autocomplete */
.hero-autocomplete-results-container {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid #ccc;
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    text-align: left;
    display: None;
}

.hero-autocomplete-tour-card {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.hero-autocomplete-tour-card:hover {
    background-color: #f1f1f1;
}

.hero-tour-card-thumbnail {
    width: 50px;
    height: 50px;
    background-size: cover;
    background-position: center;
    margin-right: 10px;
}

.hero-tour-info {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.search-match {
    color: rgb(247, 37, 133);
}

.search-trip-name {
    font-weight: 550;
}

.search-text {
    font-size: 0.8em;
}

.booking-info-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center; /* Ensure alignment of text within the container */
}

.days-to-book {
    margin-left: auto; /* Push the 'days to book' text to the right */
    color: #555; /* Optional: Change the color to differentiate */
    font-size: 0.8em; /* Ensure the font size matches other text */
    text-align: right; /* Align text to the right */
}

#search-icon {
    pointer-events: none;
    z-index: 11;
}

.no-results-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: inherit;
    color: #555;
}

.no-results-icon i {
    font-size: 20px;
}







/* TOUR CARDS */

.tour-card-container {
    border-radius: 10px;
    overflow: hidden;
}

.tour-card {
    background-color: aquamarine;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 320px;
    border: 1px solid white;
    position: relative;
    text-align: center;
    padding:0;
}

.tour-card-content {
    text-align: center;
    color:white;
    position: absolute;
    height: 50%;
    width: 80%;
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
}

.tint {
    width: 100%;
    height: 100%;
    /* background-color: rgba(0,0,0,0.5); */
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.1));
}

.tint-light {
    width: 100%;
    height: 100%;
    /* background-color: rgba(0,0,0,0.25); */
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0));
}

.btn-bt {
    background-color:  rgb(247, 37, 133);
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
}

.btn-bt:hover {
    background-image: linear-gradient(to right, rgb(224, 32, 119),  rgb(243, 97, 163));
    color: white;
}

.btn-bt2 {
    background-color:  rgb(167, 167, 167);
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
}

.btn-bt2:hover {
    background-image: linear-gradient(to right, rgb(145, 145, 145),  rgb(167, 167, 167));
    color: white;
}

/* Tour Card Footer */
.tour-card-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* Optional: To make the footer stand out more */
}

.tour-card-footer-content {
    display: flex;
    justify-content: center; /* Center the text */
    padding: 10px;
    margin-left: 65%;
}

@media (max-width: 768px) {
    .tour-card-footer-content {
        margin-left: 45%;
    }
}


.tour-card-footer-content p {
    margin: 0;
    color: white;
    font-weight: bold;
}

/* WHY BUCKETTRIPS?  */

h1 {
    text-align: left;
}

.container-w {
    margin: 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .container-w {
        max-width: 480px;
        padding: 10px 15px;
    }
}


@media (max-width: 576px) {
    .container-w {
        max-width: 480px;
        padding: 15px 10px;
    }
}


.row-center {
    text-align: center;
    display: flex;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-content: space-around;
    justify-content: center;
}

.gcard {
    margin: 10px;
    border-radius: 10px;
    height: 300px;
    display: inline-block;
    padding: 0;
    overflow: hidden;
    position: relative;
    text-align: left;
}

.gcard-pad {
    border: 1px solid lightgray;
    padding: 0 30px;
    height: auto;
}



.gcard h4 {
    font-family: "Rubik";
    font-weight: 400;
    font-size: 1.4em;
}

.gcard p {
    font-size: 1em;
}

.gcard div {
    text-align: left;
    padding: 30px 30px 10px 0;
}

.gcard img {
    height: 60px;
    width: 60px;
    display: inline-block;
    
}


button a, button a:hover {
    color: inherit;
    text-decoration: inherit;
}


/* MBA REPLICATION */

.gray {
    background-color: #fafafa;
}

.img-wrap {
    position: relative;
    height: 240px;
    margin-right:0;
    margin-bottom: 20px;

    /* background-color: green; */
}

.img-wrap img {
    height: 200px;
    width: 200px;
    border-radius: 100%;
    background-color: pink;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    margin-top: 20px;
}

#community .txt-wrap {
    margin-left: 0;
}

#community p {
    text-align: left;
    margin-bottom: 10px;
}

#community h4 {
    font-family: "Rubik";
    font-weight: 600;
    font-size: 1.2em;
    text-align: left;
}


#community .btn-bt {
    float: left;
    margin-top: 10px;
}


#community .btn-bt span {
    font-size: 1.5em;
    display: inline-block;
    margin-top: -10px;
}



#community-intro {
    margin-bottom: 100px;
}

#reviewCarousel .carousel-inner {
    
}

#reviewCarousel .carousel-indicators {
    position: relative;
    clear: both;
    padding-top: 20px;
    z-index: 5;
}

#reviewCarousel .carousel-indicators li{
    background-color: rgb(247, 37, 133);
    border-radius: 100%;
    width: 10px;
    height: 10px;
}



#reviewCarousel .img-wrap-l img {
    height: 150px;
    width: 150px;
    border-radius: 100%;
    background-color: pink;
} 

/* .ph {
    height: 200px;
    width: 100px;
    float: left;
    
} */




/* FOOTER */

footer {
    background-color: #1a1a1a;
}

footer .logo-dyn {
    fill: white;
}

#email-sub-group {
    font-size: 0.8em;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
}

#email-sub-group button , #email-sub-group input{
    font-size: 1em;
    border-radius: 0;
    border: none;
    outline: none;
}

.social-logo {
    width: 36px;
    height: 36px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;   
    float: right;
    margin: 0 5px 0 5px;
}


#footer-links {
    color: white;
    font-size: 0.75em;
    font-weight: bold;
    text-align: left;
}

#footer-links  p {
    font-family: "rubik";
    margin: 16px 0 8px 0;

}

#footer-links  a {
    color: rgb(247, 37, 133);
    display: block;
    margin-bottom: 4px;
    text-decoration: none;
}

#footer-links  a:hover {
    padding-left: 4px;
}


#footer-message {
    text-align: center;
    color: white;
    font-weight: bold;
}

#footer-message p {
    display: block;
    width: 100%;
    font-size: 0.8em;
}


/* LOGO PAGE */

.test {
    text-align: center;
    float: left;
}

.test:hover{
    background-color: black;
}
  




.twemoji {
    display: inline-block;
    height: 1em;
}




/* LOGIN SCREEN  */

.square {
    background-color: white;
    height: 80vh;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    text-align: center;
    border-radius: 20px;
    padding: 50px;
}

.square form .row {
    margin-bottom: 20px;
}

.pattern-stretch {
    background-color: rgb(247, 37, 133);
    background-image: url(/app_static/images/doodle_1.svg);
    background-position: left center;
    background-repeat: repeat;
    background-size: 800px;
}




/* PROFILE PICTURE MODAL  */

.number {
    color: white;
    background-color: rgb(247, 37, 133);
    border-radius: 100%;
    width: 25px;
    height: 25px;
    margin-right: 5px;
    display: inline-block;
    text-align: center;
    font-weight: bold;
}

.modal-title {
    font-weight: bold;
}

#avatar-preview {
    width: 300px;
    height: 300px;
    border-radius: 100%;
    overflow: hidden;
    align-content: center;
    position: relative;
}


#avatar-img {
    position: absolute;
    left: 0;
    top: 0;
    cursor: grab;
    transform-origin: "center";
}



.range input {
    width: 100%;
    background-color: #ffffff;
}

.x {
    background-color: green;
}



/* STYLING THE FORM SLIDERS */
input[type="range"] {
    -webkit-appearance: none;
   }
   
   input[type="range"]:focus {
    outline: none;
   }

   input[type="range"]::-webkit-slider-runnable-track {
    background: lightgray;
    height: 5px;
   }
   
   input[type="range"]::-moz-range-track {
    background: lightgray;
    height: 5px;
   }

   input[type="range"]::-webkit-slider-thumb {
 -webkit-appearance: none;
 height: 15px;
 width: 15px;
 background: rgb(247, 37, 133);
 margin-top: -5px;
 border-radius: 50%;
}

input[type="range"]::-moz-range-thumb {
 height: 15px;
 width: 15px;
 background: rgb(247, 37, 133);
 margin-top: -5px;
 border-radius: 50%;
}


#main-content {
    margin-top: 100px;
}



/* IMAGE UPLOAD */

.drag-area {
    border: 2px dashed #ccc;
    border-radius: 20px;
    text-align: center;
    padding: 40px;
    cursor: pointer;
}

.drag-area:hover {
    background-color: #f9f9f9;
}




.wizard-container {
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.wizard-steps {
    margin-bottom: 30px;
}

.nav-pills .nav-link {
    border-radius: 20px;
    color: #000;
    border: 1px solid gray;
    margin-right: 10px;
}

.nav-pills .nav-link.active {
    background-color: rgb(247, 37, 133);
    border: 1px solid rgb(247, 37, 133);;
    color: white !important;
    font-weight: bold;
}

.wizard-content .tab-pane {
    margin-top: 20px;
}

.wizard-navigation {
    text-align: right;
}

.btn-next, .btn-finish, .btn-previous {
    margin: 5px;
}


.imagePreviewPanel {
    margin: 20px auto;
    padding: 20px;
    text-align: center;

}

.imagePreviewPanel img {
    max-height: 500px; /* Maximum height */
    max-width: 100%; /* Ensure it doesn't exceed the width of the container */
    height: auto; /* Maintain aspect ratio */
    width: auto; /* Maintain aspect ratio */
    display: inline-block; /* Aligns image as per inline block elements */
}


.tag-pill {
    margin-bottom: 5px; /* Spacing between the tag pills */
    display: inline-flex; /* Use inline-flex for better control over internal alignment */
    align-items: center; /* Align icon and text vertically */
    padding: 2px 8px 2px 10px; /* Adjusted padding */
    background-color: #007bff; /* Background color */
    color: white; /* Text color */
    border-radius: 20px; /* Rounded borders for the pill effect */
    position: relative; /* Position relative to allow absolute positioning of children */
    cursor: pointer; /* Change cursor to indicate clickable */
    margin-right: 5px; /* Space between tags */
    white-space: nowrap; /* Prevents the tag text from wrapping */
}

/* Style for the removal icon, shown on hover */
.tag-pill .bi-x-circle-fill {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 12px; /* Smaller icon size for a subtle look */
    color: red; /* Icon color */
    background-color: white;
    display: none; /* Initially hidden */
    cursor: pointer; /* Ensure it's clear the icon is clickable */
}

/* Show the icon only on hovering over the tag pill */
.tag-pill:hover .bi-x-circle-fill {
    display: block; /* Show on hover */
}



/* MEDIA BROWSE */

.gallery-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: start; /* Adjust as needed for alignment */
}
.gallery-content .media-card {
    /* Assuming each card has the class 'media-card' */
    flex: 0 1 calc(33.333% - 10px); /* Adjust based on desired width and spacing */
    margin: 5px; /* Adjust spacing around cards */
}


.list-view .media-card {
    flex: 0 0 100%; /* Each card takes full width */
    max-width: 100%;
}

.list-view .media-card .card {
    display: flex;
    flex-direction: row; /* Image and details side by side */
    align-items: center; /* Align items vertically */
}

.media-card .card img {
    height: 300px; /* Fixed height for all images */
    width: auto; /* Width is adjusted automatically */
    object-fit: contain; /* Ensure the image covers the area, cropping if necessary */
    aspect-ratio: 1 / 1; /* Maintain a 1:1 aspect ratio */
}

.list-view .media-card .card img {
    width: auto; /* Keep original image width or set to a fixed value */
    max-width: 120px; /* Limit image size in list view */
    max-height: 120px;
    height: auto;
    margin-right: 20px; /* Space between image and text content */
}

.list-view .media-card .card-body {
    flex: 1; /* Take up remaining space */
}



/* MEDIA SELECTOR */


.media-selector {
    position: fixed; 
    z-index: 1050; 
    width: 400px; 
    max-width: 100%;
    background: white; 
    border: 1px solid #ccc; 
    padding: 20px; 
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

.view-toggle {
    float: right;
}


/*  MICRO GALLERY */

#popupGalleryContainer .gallery-content {
    padding: 0;
    height: 500px; /* Fixed height; adjust as needed */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Hide horizontal scrollbar */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Adjustments for the media card inside the popup */
#popupGalleryContainer .media-card {
    padding: 0; /* Remove padding between cards */
    margin: 0;
}

#popupGalleryContainer .media-card .card {
    margin: 0; /* Remove margins to ensure cards are tightly packed */
    border: none; /* Optional: remove border if you prefer */
}

#popupGalleryContainer .media-card .card img {
    height: auto; /* Adjust height automatically */
    width: 100%; /* Make images fully cover their card's width */
    object-fit: cover; /* Cover the area, cropping the image as necessary */
}

#popupGalleryContainer .media-card .card-body {
    padding: 10px; /* Reduce padding inside the card-body to make text and tags smaller */
    font-size: 0.8rem; /* Smaller text */
}

#popupGalleryContainer .media-card .card-body .card-title {
    font-size: 0.9rem; /* Adjust title size as needed */
}

/* Adjustments for the tag container to enable horizontal scrolling */
#popupGalleryContainer .media-card .tag-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar for Webkit browsers like Chrome and Safari */
#popupGalleryContainer .media-card .tag-container::-webkit-scrollbar {
    display: none;
}

/* Ensure tag pills are displayed inline and margins are adjusted for spacing */
#popupGalleryContainer .media-card .tag-container .tag-pill {
    margin-right: 5px;
}


/* BANNER COLLAGE */

.banner-card {
    background-color: #eee;
    text-align: center;
    padding: 10px;
}

.banner-card .mini-sized .banner-placeholder{
    border: 1px solid #eee;
}

.banner-card:hover {
    background-color: #ccc;
    cursor: pointer;
}

.banner-card:hover .mini-sized .banner-placeholder{
    border: 1px solid #ccc;
}

.banner-card p {
    margin: auto;
    font-weight: bold;
    padding-top: 10px;
}

.mini-sized {
    height: 40px;
    width: 100px;
    border-radius: 6px !important;
    margin: 0 auto;
}

.full-width, .full-width .banner-group{
    gap: 5px;
}


/* CSS ABOVE IS CHECEKD WELL */


.banner-container {
    display: flex; 
    width: 100%;
    overflow: hidden;
    aspect-ratio: 3;
    border-radius: 20px;
}


.banner-placeholder, .banner-group {
    display: flex; /* Apply flexbox to both placeholders and groups */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    flex-grow: 1; /* Allow elements to grow to fill available space */
    overflow: hidden; /* Prevent content from overflowing */
    position: relative; /* Needed for absolute positioning of children, e.g., draggable images */
}

.banner-placeholder {
    background-color: navy; /* Placeholder background */
    width: 100%;
}

#tour-content .banner-placeholder {
    background-color: transparent;
}

.banner-group {
    flex-direction: column; /* Stack child elements vertically */
}

.draggable-image {
    position: absolute;
    user-select: none;
    -webkit-user-drag: none;
}

.edit-banner .draggable-image {
    cursor: grab; /* Indicates the image can be dragged */
}



#previewBanner .banner-placeholder{
    background-color: transparent;
}


/*  BANNER GALLERY CARDS  */

.banner-gallery-card {
    background-color: white;
    text-align: center;
    padding: 10px;
    border-radius: 10px;

}




img {
    user-select: none;
    -webkit-user-drag: none;
}



.input-group {
    display: flex; /* Enables Flexbox */
    align-items: center; /* Vertically aligns the flag icon and dropdown */
}


.flag-icon {
    width: 32px !important; /* Specify the width of the flag icon */
    height: 24px !important; /* Specify the height of the flag icon */
    margin-right: 10px; /* Adds some space between the flag icon and the dropdown */
    position: relative;
    display: inline-block;
    line-height: 1em;
}

.form-control {
    flex-grow: 1; /* Allows the dropdown to grow and fill the available space */
}


.ql-editor {
    background-color: white;
}


.form-section {
    padding: 20px;
    margin-bottom: 40px;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
}

.form-section-header {
    position: relative;
    width: 100%;
    height: 40px;
}

.form-section-header h2 {
    position: absolute;
    display: inline-block;
    background-color: rgb(247, 37, 133);
    color: white;
    padding: 0 20px;
    font-size: 24px;
    border-radius: 5px;
    text-transform: uppercase;
}

.form-section-header .btn {
    margin-right: 5px;
    height: 30px;
    width: 30px;
    position: relative;
    padding: 0; /* Remove default padding to help center the icon */
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-section-header .btn i {
    font-size: 20px; /* Adjust the icon size by changing the font size */
}

.btn-disabled, .btn[disabled] {
    background-color: #ccc;
    cursor: not-allowed;
}

.form-subsection-header {
    border-bottom: 2px solid rgba(247, 37, 133, 0.4);
    margin: 20px 10px;
}

.form-subsection-header h3 {
    font-size: 16px;
    color: rgba(247, 37, 133, 1);
    text-transform: uppercase;

}



.input-button-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative
}

.input-button-wrapper .form-control {
    flex-grow: 1; /* Make input grow to fill available space */
    margin-right: 10px; /* Add some space between the input and the button */
}

.input-button-wrapper .btn {
    flex-basis: 10%; /* Set button width to 10% of its parent container */
    white-space: nowrap; /* Prevent text wrapping inside the button */
    margin-bottom: 21px;
    margin-left: 0 !important;
}



/* AUTOCOMPLETE CONTAINER */

.autocomplete-group {
    position: relative;
}

.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    background: white; /* Background color for the dropdown */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Optional: Adds a slight shadow for depth */
    z-index: 1000; /* Ensures it appears above other content */
    max-height: 200px; /* Adjust based on your needs */
    overflow-y: auto; /* Allows scrolling within the container */
    border-radius: 0 0 4px 4px; /* Optional: Rounds the bottom corners */
    width: 100%;
}

.autocomplete-results .suggestion-item {
    padding: 10px; /* Padding for each suggestion */
    border-bottom: 1px solid #eee; /* Border between suggestions */
    cursor: pointer; /* Changes cursor to indicate clickable items */
}

.autocomplete-results .suggestion-item:last-child {
    border-bottom: none; /* Removes border for the last item */
}

.autocomplete-results .suggestion-item:hover {
    background-color: #f0f0f0; /* Background color on hover */
}


/* CUSTOM AUTOCOMPLETE SIZE FOR THIN INPUT */

.input-button-wrapper .autocomplete-results {
    top: calc(100% - 20px); /* Position directly below the input */
    width: 89%; /* Match the width of the parent (.input-button-wrapper) */

}




/* ITINERARY LOCATION CONTAINER */

.add-thumbnail-container {
    text-align: center;
}


.thumbnail-container {
    margin: 0 auto;
    height: 200px;
    aspect-ratio: 1.8;
    background-size: cover; /* Ensures the whole image is visible */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    border: 1px solid #ccc;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.thumbnail-container p {
    color: #999;
    margin: 0;
}



.locations-container, .add-banner-container, .bucketlist-container, .add-thumbnail-container {
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
}

.locations-container p , .add-banner-container p, .bucketlist-container p {
    margin: 0 auto; /* Remove default margin */
    padding: 0;
    color: #999;
}

.added-locations {
    list-style-type: none;
    display: flex; /* Display list items inline */
    flex-wrap: wrap; /* Allow items to wrap in small screens */
    padding: 0; /* Reset padding to ensure it aligns correctly within the container */
    margin-bottom: 0; /* Prevent extra spacing between the list and any message or other elements below */
}

.added-locations li {
    position: relative; /* For pseudo-element positioning */
    margin-right: 15px; /* Space between items */
    display: flex; /* Align icon with text */
    align-items: center; /* Center align items vertically */
}

.added-locations li:not(:last-child)::after {
    content: "--->"; /* This is necessary for the pseudo-element to work */
    height: 100%; /* Match the height of the list item */
    margin-left: 15px; /* Space between the text/icon and the dashed line */
}

.added-locations li i, .added-locations .fi {
    margin: 0 8px; /* Adjust spacing between icon and text */
    vertical-align: middle; /* Align icon with the middle of the text */
}

.noLocationsMsg, .add-banner-container p, .noBucketlistMessage {
    color: #999;
    text-align: center; /* Center the message within the container */
}




.timeline-container {
    display: flex; /* Display items inline */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    align-items: center; /* Center align items vertically */
    background-color: #f5f5f5; /* Light gray background */
    border-radius: 10px; /* Rounded corners for the container */
    padding: 10px 20px;
}

.timeline-item {
    display: flex; /* Align icon with text */
    align-items: center; /* Center align items vertically */
    padding: 5px 0; /* Padding inside each item */
    border-radius: 10px; /* Rounded corners for each item */
    position: relative; /* For arrow positioning */
}

.timeline-item .timeline-content {
    display: flex; /* Align icon with text */
    align-items: center; /* Center align items vertically */
}

.timeline-item .timeline-arrow {
    margin: 0 5px; /* Space between item and arrow */
    color: #999; /* Arrow color */
    font-size: 1.5rem; /* Increase arrow size */
}

.timeline-item i, .timeline-item .fi {
    margin: 0 4px; /* Adjust spacing between icon and text */
    vertical-align: middle; /* Align icon with the middle of the text */
}



/* INCLUSIVES MANAGER  */

.icon-select-placeholder {
    display: flex; /* Use flexbox to enable flex alignments */
    flex-direction: column; /* Stack flex items vertically */
    align-items: center; /* Center flex items horizontally */
    justify-content: center; /* Center flex items vertically */
    width: 200px;
    height: 200px;
    border: 2px solid #ccc; /* Add a border around the placeholder */
    border-radius: 10px; /* Round the corners */
    padding: 10px; /* Add some padding */
    cursor: pointer; /* Change cursor to indicate clickable */
    text-align: center; /* Center text alignment for all text inside */
}

.icon-select-placeholder p {
    margin: 0; /* Remove default margins from <p> to fine-tune the alignment */
    color: #999;
}


/* for the icon modal */
.btn-close {
    border: none !important;
    background: transparent !important;
    color: black; /* or any color you prefer */
  }


#iconsContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    max-height: 400px;
    overflow-y: auto;
  }
  
#iconsContainer .icon {
    padding:10px 10px;
    width: 64px;
  }
  
#iconsContainer .icon:hover {
    cursor: pointer;
    background-color: #f0f0f0;
  }
  
/* Adjusting the icon inside the button if necessary */
.btn-close i.bi {
    font-size: 1.2rem; /* Adjust based on your needs */
    color: red; /* or any color you prefer */
  }



  /* INCUSIVE BADGES IN ITINERARY CREATOR */

  .inclusive-badge {
    display: inline-block;
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 0.85em;
    border: 1px solid #ccc;
    margin: 0 10px 10px 0;
    cursor: pointer;
    position: relative;
    user-select: none; /* Prevent text selection */

  }

  .inclusive-badge i {
    width: 30px;
  }

.inclusive-badge:hover {
    background-color: #f0f0f0;
}

.inclusive-badge.active {
    background-color:  rgba(247, 37, 133, 0.7);
    color: rgb(235, 238, 239);
    border: 1px solid rgb(247, 37, 133, 1);
}

.explain-popup {
    position: absolute;
    top: 100%;  /* Position it immediately below the badge */
    left: 0;   /* Align on the left */
    margin-top: 5px;
    background-color: #f0f0f0;; /* Adjust the background color as needed */
    border: 1px solid #ccc; /* Adjust the border as needed */
    padding: 5px; /* Adjust the padding as needed */
    z-index: 1000; /* Ensure it is above other elements */
    white-space: nowrap; /* Prevents the text from wrapping */
    font-weight: 500;
}

.confirm-btn.disabled:hover {
    background-color: #4CAF50; /* Green */
    cursor: pointer;
}


/* ------DAY DELETE BUTTON DROPDOWN -------- */

/* Hide the dropdown arrow */
.day-container .btn-group .dropdown-toggle::after {
    display: none;
}

/* Align dropdown menu to the right of the parent button */
.day-container .btn-group .dropdown-menu {
    right: 0;
    left: auto; /* Override default Bootstrap positioning */
    margin-right: 32px;
}


/* ADD DAY BUTTON */

#addDayButton {
    outline: none;
    padding: 10px 100px;
}

#addDayButton:hover {
    background-color: lightgrey;

}

/* ADD ITINERARY BUTTON */

#addItineraryButton {
    outline: none;
    /* padding: 10px 100px; */
}

#addItineraryButton:hover {
    background-color: lightgrey;
    color: inherit;

}



#save-bar {
    display: flex;
    align-items: center;
    width: 100%;
    height: 10px;
    position: sticky;
    top: 93px;
    z-index: 10;
    margin-bottom: 20px;
    justify-content: space-between;
    color: white;
    z-index: 50000;

}


.response-message {
    color: #fff; /* Ensure visibility against the progress bar's background */
    margin-left: 10px; /* Spacing for readability */
}

.buttons{
    margin-right: 10px; /* Consistent spacing */
    background-color: gray;
    padding: 10px 20px;
    border-radius: 0 0 10px 10px;
}


/* ITINERARY PREVIEW */



/* SCROLLING MAP */
.map-container {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 100px; /* Adjust if you have a header and want the map to start sticking below it */
    height: 100%; /* This ensures the map container takes the viewport height */
    padding-top: 1rem; /* Optional: Adds some spacing at the top */
}

#map {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
}

.text-content {
    text-align: justify;
}

.day-header {
    display: flex; /* Flexbox layout */
    align-items: center; /* Vertical centering */
    justify-content: space-between; /* Distributes space between and around content items */
    border-bottom: 1px solid black;
    margin-bottom: 20px;
}

.day-id {
    /* Color is commented out but can be enabled if desired */
    /* color: rgb(247, 37, 133); */
    font-size: 1.5rem; /* Adjust size as needed */
    font-weight: bold; /* Bold for emphasis */
    min-width: 150px;
}

.day-title {
    font-size: 1.5rem;
    font-weight: 400; /* Regular weight */
    padding-left: 20px;
    text-align: right;
}

.itinerary-day {
    margin-bottom: 40px;
}
  

.tour-features i {
    margin-left: 10px;
}



/* DEPARTURE SCHEDULE */
.trip-card {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    background-color: #f9f9f9;
  }
  
  .trip-date {
    text-align: center;
    font-weight: bold;
  }
  
  .trip-date i {
    position: relative;
    font-size: 3rem;
  }
  
  .trip-date .day {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    font-size: 1.5rem;
    color: black; /* Adjust color as needed */
    font-style: none;
    font-style: normal;
}
  
  .trip-date .month,
  .trip-date .year {
    display: block;
    font-size: 1rem;
  }
  
  .trip-details {
    padding-left: 1rem; /* Optional: Adds some space between the date and the details */
  }
  
  .trip-detail-item {
    margin-bottom: 0.5rem;
  }
  
  .location1 {
    padding-left: 3rem; 
  }

  .location2 {
    padding-left: 2.4rem; 
  }





  .bucketlist-item-selection {
    display: none; /* Hidden initially */
  }
  .selection-box {
    border: 1px solid #ddd;
    cursor: pointer;
    float: left;
    padding: 10px;
  }
  .selection-box.active {
    background-color: lightgreen;
  }  

  .draggable-table tbody {
    display: block;
  }
  .draggable-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .draggable-table thead, .draggable-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .table-flag-round {
    width: 20px;
    height: 20px;
  }


  .trip-cta button {
    margin: auto;
    display: block;
    font-size: 0.9em;
  }

  .trip-cta a:hover {
    color: inherit;
    text-decoration: none;
  }


/* CSS FOR DOCUMENTS e.g. TERMS AND CONDITIONS */


  .offset-navbar {
    padding-top: 100px;
  }

.document {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 100px;
}
.document h1, .document h2, .document h3 {
    color: #333;
}
.document p {
    margin: 10px 0;
}
.document .section {
    margin-top: 40px;
    margin-bottom: 20px;
}
.document .section-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}
.document .subsection-title {
    font-size: 1.2em;
    margin-top: 15px;
}
.document .divider {
    border-top: 1px solid #ccc;
    margin: 10px 0;
}
.document .updated {
    color: #777;
    font-size: 0.9em;
}




/* ---- EMAIL VERIFICATION/CONFIRMATION  ---- */

.centered-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
  }

  .confirmation-message h2 {
    font-size: 1.5em;
    color: #333;
    font-weight: 100;
    
  }

  .confirmation-message h2 strong {
    font-weight: bold;
  }

  .confirmation-message i{
    height: 150px;
    width: 150px;
  }




  /* -----  CHECKOUT  ------ */
/* Unique CSS for the main content and image area */
.main-content {
    padding-right: 20%; /* Ensure content doesn't overlap the fixed image */
  }
  
  .image-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 35%;
  }
  
  .fixed-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 20% ; /* Center horizontally and vertically */
    }

  
  @media (max-width: 767.98px) {
    .image-wrapper {
      display: none; /* Hide the image on small screens */
    }
  
    .main-content {
      padding-right: 0; /* Remove padding on small screens */
    }
  }
  

  /* Breadcrumb Customization */
.custom-breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 1rem;
  }
  
  .custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: '>';
  }
  
  .custom-breadcrumb a {
    text-decoration: none;
    color: #007bff;
  }
  
  .custom-breadcrumb a:hover {
    text-decoration: underline;
  }
  
  /* Shaded Box with Rounded Corners */
  .login-box {
    background-color: #f3e6ff; /* Pale purple background */
    border-radius: 8px; /* Rounded corners */
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow */
  }



  .info-box {
    display: flex;
    align-items: flex-start; /* Aligns the SVG icon at the top */
    background-color: inherit;
    background-color: #ffe100; /* Pale purple background */
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow */
    }

    .info-box i {
        height: 3em;
        width: 3em;
    }

    .info-icon-container {
        display: flex;
        margin-right: 20px;
    }


    .info-text {
        flex: 1; /* Allows the text to take up the remaining space */
        font-size: 1rem; /* Adjust font size as needed */
    }

    

  .travelers-box {
    background-color: inherit; /* Pale purple background */
    border-radius: 8px; /* Rounded corners */
    padding: 15px;
    margin-bottom: 20px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); Light shadow */
    border: 1px solid gray
  }

  .smaller-traveler-title {
    font-size: 1rem;
}

  
 
  .custom-box p {
    margin: 0;
  }
  
  .custom-box .btn-primary {
    background-color: #007bff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
  }
  

  /* Offset main content for larger screens */
.col-lg-7.offset-lg-1 {
    margin-left: 8.33333%;
  }
  





/* Summary Section Styling */
.summary-container {
    position: fixed;
    top: 120px; /* Adjust as needed */
    right: 30%; /* Aligns the summary box to the border between the fixed image and scrollable content */
    width: 300px; /* Fixed width for the summary box */
    transform: translateX(50%); /* Adjust this to control the alignment with the image border */
    z-index: 10; /* Ensure it stays on top of other elements */
  }
.summary-section {
  background-color: #ffffff; /* No opacity */
  padding: 15px; /* Slightly reduced padding */
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  font-size: 0.9rem; /* Smaller font size */
}

.price-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1rem; /* Slightly larger font for price */
  margin-bottom: 5px;
}

.price {
  font-weight: bold;
}

.per-traveller {
  text-align: left;
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 10px;
}

.divider {
  border-top: 1px solid #ccc;
  margin: 10px 0;
}

.info-section {
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.info-section strong {
  display: block;
  margin-bottom: 5px;
}

.country-flag {
  width: 18px;
  height: 18px;
  opacity: 80%;
  margin-right: 5px;
  margin-top: 3px;
}

.location {
  margin: 0;
  font-size: 0.7rem;
}

.date-info {
  font-size: 0.8rem;
  color: #666;
  margin-top: 5px;
}

.discount-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.discount-input {
  flex: 1;
}

.discount-section .btn {
  padding: 5px 15px;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Adjusted title margins */
.main-content h2 {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Traveler Counter Styling */
.traveler-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.traveler-counter button {
    padding: 5px 10px;
    font-size: 1.2rem;
}

.traveler-counter #traveler-count {
    font-size: 1.2rem;
    font-weight: bold;
}










/* Ensure the calendar days are not faded */

/* Remove borders and gaps between calendar dates */
.flatpickr-day {
    border: none !important; /* Remove borders */
    margin: 0 !important; /* Remove any margin */
    box-shadow: none !important; /* Remove any box-shadow */
    padding: 0 !important; /* Ensure no padding */
}

/* Style for the price tag inside the day cells */
.price-tag {
    background-color: #ff0000;  /* Red background for the price tag */
    color: #fff;  /* White text color */
    position: absolute;
    width: 100%;
    top: -2px;  /* Position at the top of the day cell */
    left: 0px;  /* Position at the left edge */
    padding: 2px 4px;  /* Padding around the price text */
    border-radius: 3px;  /* Rounded corners */
    z-index: 10;  /* Ensure it stays on top */
    font-size: 0.6rem;  /* Smaller font size */
    font-weight: bold;  /* Make the price text bold */
    line-height: 1;  /* Ensure the text is properly centered */
    white-space: nowrap;  /* Prevent text from wrapping */
    display: inline-block;  /* Ensure it's an inline block to wrap the text neatly */
}




/* Highlighted day styling with a centered circle */
.highlighted-day {
    background-color: #007bff !important;  /* Transparent background to keep the circle separate */
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;  /* Center the circle within the day cell */
}

/* Calendar container adjustments */
.flatpickr-calendar {
    font-size: 1rem;  /* Set the base font size for the calendar */
    background-color: #fff;  /* Ensure the background is white */
}

.flatpickr-day:hover, .flatpickr-day:focus {
    background-color: #f0f0f0;  /* Light grey background on hover/focus */
    border-radius: 50%;  /* Keep the circle on hover */
}


/* Price Calculation Section Styling */
.price-calculation {
    margin-top: 20px;
    margin-bottom: 20px;
}

.hidden {
    display: none;
}

.calculation-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.calculation-item.discount {
    color: #e74c3c; /* Red color for discount */
}

.calculation-item.applied-codes {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #666;
}

.total {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: bold;
    margin-top: 10px;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}

.total-amount {
    color: #2c3e50; /* Darker color for the total amount */
}

.agenda-list {
    height: 500px;
    overflow-y: auto;
    margin-bottom: 20px; /* Optional: adds space below the agenda list */
}




.participant-autocomplete {
    flex: 1;
    margin-right: 10px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }


  .participant-container {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
  }

  .participant-card {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: white;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .participant-image {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Optional: Adds a background color to the circle */
    text-align: center; /* Ensures the icon is centered */
  }

  .participant-image i {
    font-size: 24px; /* Adjust the font size as needed */
  }

  .participant-info {
    display: flex;
    flex-direction: column;
  }

  .participant-name {
    font-weight: bold;
    margin: 0;
    padding-top: 10px;
  }

  .participant-email a {
    color: #007bff;
    text-decoration: none;
  }

  .participant-email a:hover {
    text-decoration: underline;
  }




  .form-inline {
    display: flex;
    align-items: center;
    gap: 10px; /* Adds space between all flex items */
  }
  
  .form-inline .form-label {
    margin-right: 10px;
    white-space: nowrap;
  }
  
  .form-inline .form-control {
    flex: 1;
    margin-bottom: 0;
    width: 100%;
  }
  
  .autocomplete-group {
    position: relative;
    flex: 1; /* Ensures the autocomplete group takes up available space */
    margin-right: 10px; /* Adds space between the autocomplete input and the button */
  }

  .autocomplete-group .participant-card {
    margin-bottom: 0;
  }

  .autocomplete-group .participant-card:hover {
    background-color: #f0f0f0;
    cursor: pointer;
  }


  /* ------ PARTICIPANT CARD DROPDOWN -------- */
  .participant-card .btn-group {
    margin-left: auto; /* Pushes the button group to the right */
}

  .participant-card .btn-group .dropdown-toggle{
    background-color: #BBB;
    border: none;
    margin-right: 20px;
}

/* Hide the dropdown arrow */
.participant-card .btn-group .dropdown-toggle::after {
    display: none;
}

/* Align dropdown menu to the right of the parent button */
.participant-card .btn-group .dropdown-menu {
    right: 0;
    left: auto; /* Align the menu with the button */
    transform: none; /* Ensure no extra translation */
}


  .text-justify {
    text-align: justify;
  }




  
  .user-pills-container {
    min-height: 50px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    padding: 10px;
    background-color: #f8f9fa;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.user-pill, .filter-pill {
    display: flex;
    align-items: center;
    background-color: #6c757d; /* Discrete grey color */
    color: white;
    padding: 5px 15px 5px 10px;
    border-radius: 10px;
    margin: 5px;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.user-pill .profile-picture, .filter-pill .profile-picture {
    display: inline-block;
    width: 24px; /* Size to match the pill */
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f0f0f0; /* Fallback background color */
    margin-right: 8px; /* Space between the picture and text */
    position: relative;
    cursor: pointer;
}

.user-pill .profile-picture .img-mask, .filter-pill .profile-picture .img-mask {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-pill .profile-picture img, .filter-pill .profile-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.filter-pill .profile-picture {
    margin-left: 8px;
}

.user-pill .remove-user-pill, .filter-pill .remove-filter-pill {
    margin-left: 5px; /* Added space between the name and the remove icon */
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
}

.user-pill .remove-user-pill:hover, .filter-pill .remove-filter-pill:hover {
    background-color: transparent !important;
}

.user-pill .remove-user-pill i, .filter-pill .remove-filter-pill i {
    font-size: 12px; /* Smaller icon size */
    color: #dc3545; /* Red color */
    border-radius: 5px;
    padding: 3px 5px;
}

.user-pill .remove-user-pill:hover i, .filter-pill .remove-filter-pill:hover i {
    color: #fff;
    background-color: #c82333; /* Instant transition to a darker red on hover */
}

/* FILTERS AND FILTER CONTAINER */

.filter-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 5px;
}



.filter-container .filter-pill .remove-filter-pill {
    margin-left: 5px;
    font-size: 12px;
    color: #dc3545;
}

.filter-container .filter-pill .remove-filter-pill:hover i {
    color: #fff;
    background-color: #c82333; /* Instant transition to a darker red on hover */
}


.table-pill {
    display: inline-flex;
    align-items: center; /* Align profile picture and text in the center */
    margin: 0;
    padding: 5px;
    vertical-align: middle;
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflow if content exceeds container width */
    text-overflow: ellipsis; /* Show ellipsis when text overflows */
}

.table-pill a {
    margin-left: 50px;
}

.table-pill .profile-picture {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-block;
    overflow: hidden;
    margin-bottom: 3px; /* Space between the picture and text */
    position: relative;
    cursor: pointer;
    flex-shrink: 0; /* Prevent image from shrinking */
}

.table-pill .img-mask img {
    width: 100%; /* Ensure the image fills the mask */
    height: 100%;
    object-fit: cover; /* Crop the image to cover the container */
}






/*    TABLE STYLING */

/* Table Header Button Group Styling */
table .btn-group {
    margin-left: 8px; /* Space between column name and button */
}

table .btn-group .dropdown-toggle {
    background: none; /* Remove default button background */
    border: none; /* Remove border */
    padding: 4px 8px; /* Comfortable padding */
    color: #666; /* Subtle gray color */
    box-shadow: none !important; /* Remove shadow */
}

table .btn-group .dropdown-toggle:hover {
    background-color: #f0f0f0; /* Light gray background on hover */
    border-radius: 4px; /* Rounded corners */
}

/* Remove default bootstrap caret */
table .btn-group .dropdown-toggle::after {
    display: none;
}

/* Style the caret icon */
table .btn-group .dropdown-toggle i {
    font-size: 12px; /* Smaller icon size */
    transition: transform 0.2s ease; /* Smooth rotation animation */
}

/* Rotate caret when dropdown is open */
table .btn-group.show .dropdown-toggle i {
    transform: rotate(180deg);
}

/* Style dropdown menu */
table .btn-group .dropdown-menu {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
    border: 1px solid #eee; /* Light border */
    border-radius: 4px; /* Rounded corners */
    margin-top: 4px; /* Space between button and menu */
}
/* Style dropdown menu and its items */
table .btn-group .dropdown-menu {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px solid #eee;
    border-radius: 4px;
    margin-top: 4px;
    right: 0;
    left: auto;
    transform: none;
    min-width: 160px;
    max-width: 200px;
}

/* Style dropdown items to prevent text overflow */
table .btn-group .dropdown-menu .dropdown-item {
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break long words if necessary */
    padding: 8px 4px; /* Comfortable padding */
    font-size: 0.9rem; /* Slightly smaller font size */
    line-height: 1.2; /* Tighter line height */
}

/* Align icons with text in dropdown items */
table .btn-group .dropdown-menu .dropdown-item i {
    width: 16px; /* Fixed width for icons */
    margin-right: 8px; /* Space between icon and text */
    text-align: center; /* Center the icon */
}


/* More specific selector for flags in filter pills */
.filter-pill .flag-icon,
.table-pill .flag-icon {
    height: 0.8em !important;  /* Use !important to override browser defaults */
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Optional: adjust spacing */
.filter-pill .flag-icon {
    margin-right: 2px !important;
}

.table-pill .flag-icon {
    margin-right: 2px !important;
}

.filter-pill .filter-value {
    margin-left: 3px !important;
}