/* Style title */
.language-indicator{
    margin-bottom: 20px;
	font-size: 22px;
    font-weight: 700;
}
.language-indicator img{
    margin-right: 10px;
	width: 30px;
}

/* Style Container */
#advanced-search-container {
    margin: 20px;
}

#advanced-search-form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Style dropdown */
.advanced-search-style select{
	 border-radius: 5px; 
	 border: 2px solid #00a547 !important;
	 border: none;
	 padding-left: 10px;
	 padding-right: 10px;
	 margin-bottom: 10px;
     width: 100%; 
}

/* Style input radio */
input[type="radio"] {
  transform: scale(1.5); /* Augmente la taille à 150% */
  margin-right: 8px;     /* Optionnel pour espacement */
}

input[type="text"] {
	 border: 2px solid #00a547 !important;
	border-radius: 10px; 

}
.search-input-wrapper{
	margin-top: 10px;
	 margin-bottom: 10px;
}

/* Hide input wrapper when company is selected */
.data-grid div{
	    display: flex;
    justify-content: space-between;
}
a.letter-button{
	display: flex;
    align-items: center;
    justify-content: center;
	height:40px;
	width: 40px;
	margin-bottom: 10px;
	border:1px solid #00a547;
	border-radius: 5px;
	background-color: white;
}
a.letter-button:hover{
	border:1px solid #00a547;
	background-color: #2a3b99;
	color: white; 
}

/* Hide input wrapper when company is selected */
#search-input-wrapper.hidden-input {
    display: none;
}


/* Custom dropdown styling */
#search-results {
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    display: none;  /* Initially hide the dropdown */
    background-color: white;
    border: 1px solid #ccc;
    position: relative; /* Position below the input field */
    z-index: 1000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin-top: 5px; /* Space between input and dropdown */
    padding: 0;
}

.ui-menu-item {
    padding: 8px;
    cursor: pointer;
    list-style: none; /* Remove bullet points */
    border-bottom: 1px solid #ddd; /* Optional: gives a subtle line between items */
}

/* Remove the pink color and styling from the active item */
.ui-state-active {
    background-color: transparent; /* Make the active item have no special background */
    color: inherit; /* Remove the pink color */
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: inherit !important; /* Force the color to inherit */
    background-color: transparent !important; /* Ensure no background is applied */
}

/* Custom dropdown styling */
#search-results {
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    display: none;  /* Initially hide the dropdown */
    background-color: white;
    border: 1px solid #ccc;
    position: relative; /* Position below the input field */
    z-index: 1000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin-top: 5px; /* Space between input and dropdown */
    padding: 0;
    color: #333; /* Set the default color for text */
}

.ui-menu-item {
    padding: 8px;
    cursor: pointer;
    list-style: none; /* Remove bullet points */
    border-bottom: 1px solid #ddd; /* Optional: gives a subtle line between items */
    font-weight: normal;  /* Ensure the default font weight is normal */
}

/* Modify the ui-state-active selector to not apply unwanted styles */
.ui-state-active {
    background-color: transparent !important; /* No background color */
    color: #333 !important; /* Ensure text color is not pink */
    font-weight: normal !important; /* Ensure text is not bold */
    background: none !important;  /* Remove any background image */
}

/* Ensure the color for links in the dropdown is the desired color */
.ui-menu-item a {
    color: #333;  /* Set the color for all links in the dropdown */
    text-decoration: none;  /* Ensure no underline */
    font-weight: normal;  /* Ensure no bold for links */
}

/* Remove the border between items */
.ui-menu-item:last-child {
    border-bottom: none; /* Remove the last item's bottom border */
}

.ui-menu-item:hover {
    background-color: #f0f0f0;  /* Light gray background on hover */
}
/* Add this CSS to hide the search input */
.hidden-input {
    display: none;
}

/* Highlight matched text in bold */
span[sty


#data-grid {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping to new rows */
    gap: 10px; /* Space between buttons */
    margin: 0;
}

.fusion-column {
    flex: 1 0 14%; /* Ensures 7 items per row, 100% / 7 = 14% */
    text-align: center;
    margin-bottom: 10px; /* Space between rows */
}

.letter-button {
    display: block;
    font-size: 16px; /* Adjust font size */
    text-align: center;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
    width: 100%;
    min-width: 35px;
    height: 35px; /* Fixed size to maintain uniformity */
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

.letter-button:hover {
    background-color: #0077cc;
    color: white;
    transform: scale(1.1);
}

.letter-button:active {
    background-color: #005f73;
    transform: scale(0.95);
}

.letter-text {
    display: block;
    font-weight: bold;
    margin-top: 5px;
}

/* Responsiveness: Adjust grid for smaller screens */
@media screen and (max-width: 768px) {
    .fusion-column {
        flex: 1 0 24%; /* 4 items per row for medium screens */
    }
}

@media screen and (max-width: 480px) {
    .fusion-column {
        flex: 1 0 30%; /* 3 items per row for small screens */
    }
}