/* Custom CSS for FML */
.fmlcommonname, .fmllocalname, .fmlscientificname {
    display: inline-flex; 
    flex-direction: column; /- This is the key that makes dt and dd stack vertically within THIS div -/
    vertical-align: top; 
    margin-right: 30px;
    border: 1px solid #ddd;
    padding: 5px 10px;
    box-sizing: border-box;
    margin-right: -4px;
}

.fmlcommonname dt, 
.fmllocalname dt, 
.fmlscientificname dt {
    padding-right: 3px !important;
    margin-bottom: 0px !important;
    /- Explicitly make dt a block-level element within its flex container -/
    display: block !important; 
    /- Ensure dt takes up the full width available within its column -/
    width: 100% !important;
    /- border-bottom: 1px solid #eee; -/
    /- padding-bottom: 5px !important; -/
}

.fmlcommonname dd, 
.fmllocalname dd, 
.fmlscientificname dd {
    padding: 1.5px 0px 0px 0px;
    margin-left: 0px !important;
    margin-bottom: 0px !important;
    /- Explicitly make dd a block-level element within its flex container -/
    display: block !important; 
    /- Ensure dd takes up the full width available within its column -/
    width: 100%; /- No !important needed here unless overriding a stronger specific rule -/
    /- padding-top: 5px; -/
}

.fmlscientificname dd {
    font-style: italic;
}

.fmltaxonomy {
    display: inline-flex; /- This makes the div itself inline, but its internal layout is flex -/
    flex-direction: column; /- Stacks the dt and dd elements vertically -/
    vertical-align: top; /- Ensures the side-by-side divs align nicely at the top -/
    margin-right: 0px; /- Adds spacing between your side-by-side divs -/
    /- No 'width' is set on .fmlsidebyside itself, so it will shrink-wrap its widest child. -/
}

.fmltaxonomy:has(+ .fmltaxonomy)::after {
    content: ";";
    padding: 1.5px 0px 0px 0px;
    margin-right: 5px;
    margin-left: 2px;
    /- You can keep any other styling you added here -/
}

.fmltaxonomy dt::after {
    content: ":";
    width: auto !important;
}

.fmltaxonomy dt {
    padding-right: 3px !important;
    margin-bottom: 0px !important;
    width: auto !important;
}

.fmltaxonomy dd {
    padding: 2px 0px 0px 5px;
    margin-left: 0px !important;
    margin-bottom: 0px !important;
}

.fmlshortdescription dt {
    display: none; /- This hides the dt element completely -/
}

.fmlshortdescription dd {
    display: block !important; /- Ensure dd is a block-level element -/
    width: 100% !important;   /- Makes dd take up the full available width within its parent's content area -/
    
    /- Reset any previous padding or margins on dd itself that might have been for spacing with dt or the line -/
    padding: 0 !important; 
    margin: 0 !important;

    /- The content of dd will now naturally align within the .property's own padding (e.g., 5px top/bottom, 10px left/right) -/
}