.OdaSuitabilityDistribution {
    padding: 13px 15px;
}

.OdaSuitabilityDistribution .GanttSidebarSection-header {
    padding-bottom: 13px;
}

/* AR: a load of this is duplicate of OdaSuitabilityDistribution */

.OdaSuitabilityDistribution-headerRow {
    font-weight: var(--font-weight-bold);
    margin-right: 44px;
}

.OdaSuitabilityDistribution-rowList {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.OdaSuitabilityDistribution-listItem {
    padding: 5px 0;
}

.OdaSuitabilityDistribution-listItem:not(:last-of-type) {
    border-bottom: 1px dashed var(--border-color);
}

.OdaSuitabilityDistribution-headerRow,
.OdaSuitabilityDistribution-row {
    border-radius: 4px;
    display: flex;
    gap: 6px;
    line-height: 17px;
    margin-left: -5px; /* AR: unique to Suitability distribution */
    margin-right: -5px;
    padding: 8px 5px;
}

.OdaSuitabilityDistribution-row {
    position: relative;
}

.OdaSuitabilityDistribution-row:hover {
    background-color: var(--bg-color-light);
}

.OdaSuitabilityDistribution-row.highlighted {
    background-color: var(--bg-color-dark);
    color: var(--text-white);
}

.OdaSuitabilityDistribution-workersCell,
.OdaSuitabilityDistribution-suggestionsCell {
    text-align: right;
}

.OdaSuitabilityDistribution-scoreCell {
    width: 69px;
}

.OdaSuitabilityDistribution-workersCell {
    width: 101px;
}

.OdaSuitabilityDistribution-suggestionsCell {
    width: 123px;
}

.OdaSuitabilityDistribution-filterButton {
    margin-left: auto;
}

/* Button overrides
    AR: high specificity is needed to override default iconOnly styles */
.OdaSuitabilityDistribution-filterButton.Btn {
    background-color: transparent;
    border-color: transparent;
    flex-shrink: 0;
    height: 18px;
}

.OdaSuitabilityDistribution-filterButton.Btn:focus {
    box-shadow: none;
}

.OdaSuitabilityDistribution-filterButton.Btn:focus-visible {
    outline: none;
}

.OdaSuitabilityDistribution-filterButton.Btn:not(:disabled, .disabled):active,
.OdaSuitabilityDistribution-filterButton.Btn:not(:disabled, .disabled):active:focus {
    /* AR: although bootstrap typically displays a focus ring on :focus */

    /* (i.e. shows up for keyboard focus and when clicked) */

    /* this looks a bit much for these large rows. */

    /* I've chosen to remove this and target :focus-visible instead (only visible via keyboard nav) */
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.btn.btn-light .OdaSuitabilityDistribution-filterButtonIcon {
    color: var(--text-color);
}

.OdaSuitabilityDistribution-row.highlighted .OdaSuitabilityDistribution-filterButtonIcon {
    color: var(--text-white);
}

/* END: button overrides */

/* Making the row have the accessibility and target of a button:
    https://kittygiraudel.com/2022/04/02/accessible-cards/
 */

.OdaSuitabilityDistribution-filterButton::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 4px;
}

.OdaSuitabilityDistribution-filterButton:focus-visible::before {
    box-shadow: 0 0 0 0.2rem var(--bg-color-light-focus-ring);
}

.OdaSuitabilityDistribution-row.highlighted .OdaSuitabilityDistribution-filterButton:focus-visible::before {
    box-shadow: 0 0 0 0.2rem var(--bg-color-dark-focus-ring);
}