/*
 * This rule is required to make a focused react-select look like other inputs
 * There is no remotely easy way to sync these styles so they must be set based on the theme
 */
 .react-select__wrapper:focus-within {
    color: #444;
    background-color: #fff;
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: 0 0 5px rgb(100 65 164 / 40%);
}

/*
 * These rules are to make list groups look nice. By default they are black and horrid.
 */
.card > .list-group {
    border-top: 1px solid rgba(0,0,0,.125);
    border-bottom: 1px solid rgba(0,0,0,.125);
}
.list-group-item {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid rgba(0,0,0,.125);
}
.list-group-item:hover, .list-group-item:focus {
    color: var(--bs-body-color);
}

.list-group-item.disabled, .list-group-item:disabled {
    color: var(--bs-gray);
    background-color: var(--bs-body-bg);
}
.list-group-item.disabled:hover {
    color: var(--bs-gray);
}

.list-group-item.active {
    color: #fff;
    background-color: var(--bs-primary);
    font-weight: normal;
}
.list-group-item.active:hover {
    color: #fff;
    background-color: var(--bs-primary);
}

.list-group-item-action {
    color: var(--bs-body-color);
}
.list-group-item-action:hover,
.list-group-item-action:focus,
.list-group-item-action:active {
    color: var(--bs-body-color);
    background-color: var(--bs-gray-300);
}

/*
 * Correct the massive thick borders on the table headers.
 */
.table > :not(:first-child) {
    border-top: none;
}
.table > thead {
    border-bottom: 1px solid #444;
}