.list-group-item {
    --toggle-width: 100px;
    display: flex;
    flex-direction: column;
}

.list-group-item-area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* 名前が長すぎる場合に省略する */
.list-group-title {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: initial;
}

.list-group-debt-area {
    background: mintcream;
    display: flex;
    align-items: center;
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.list-group-debt-load-area {
    display: flex;
    align-items: flex-end;
}

/* 割り勘の有効状態のチェックがされていないときに金額欄の文字を薄くする */
.input-debtload-checkboxdiv ~ .input-debtload-div > .input-debtload-text {
    border: 1px solid var(--bs-darkpurple-background-color);
}

/* 割り勘の有効状態のチェックがされていないときに金額欄の文字を薄くする */
.input-debtload-checkboxdiv:not(:has(input[type=checkbox]:checked)) ~ .input-debtload-div > .input-debtload-text {
    color: gainsboro;
    border: 1px solid #ced4da;
}

.ratio-exists-tips {
    font-size: small;
    border: 1px dashed var(--bs-red);
    color: var(--bs-red);
    background: var(--bs-darkwarning-background-color);
}