.compound-info {
    text-align: center;
    margin: 10px 0;
    color: #333;
}

.name-input-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 15px 0;
}
#iupac-input {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 300px;
}

#fg-toggles {
    display: grid;
    /* Automatically create columns that are at least 150px wide */
    grid-template-columns: repeat(auto-fit, 165px);
    gap: 8px; /* Spacing between the toggles */
    margin-top: 1rem;
    justify-content: center;
}
  
  /* 2. Style each label as a clickable "chip" */
#fg-toggles label {
    display: flex;
    align-items: center; /* Vertically align the checkbox and text */
    padding: 4px 4px;
    border: 1px solid #ccc;
    border-radius: 20px; /* Rounded corners for the chip look */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    font-size: 0.9rem;
}
  
  /* 3. Add a hover effect for better user feedback */
#fg-toggles label:hover {
    background-color: #f0f4f5;
    border-color: #aab;
}
  
  /* 4. Style the checkbox itself */
#fg-toggles input[type="checkbox"] {
    /* Make the checkbox slightly larger and add space between it and the text */
    width: 16px;
    height: 16px;
    margin-right: 8px;
}
  
  /* 5. Style the checked state for clear visual feedback */
#fg-toggles input[type="checkbox"]:checked {
    /* A modern CSS property to easily change the checkmark/box color */
    accent-color: #291720; 
}
  
.filter-actions {
    display: flex;
    gap: 1rem;
    margin-top: 8px;
}
  
.link-button {
    background: none;
    border: none;
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: 0.9rem;
}
  
.link-button:hover {
    color: #0056b3;
}
  
.apply-container {
    text-align: center;
    margin: 0rem 1rem;
}
  
#apply-filters-btn {
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
}

.all-filters-container {
    justify-self: center;
}

.apply-and-select-container {
    display: flex;
    justify-self: center;
}

.filters-toggles fieldset {
    border-radius: 8px;
    width: 300px;
    justify-self: center;
}
  
  /* This media query applies styles ONLY to screens 700px or WIDER */
@media (min-width: 700px) {
    .filters-toggles fieldset {
        width: 700px;
        border-radius: 8px;
        justify-content: space-between;
    }
}