.related {
    padding-top: 0.5em;
    padding-bottom: 1em;
}

.related > .label {
    display: contents;
    font-size: x-large;
    float: left;
    padding-right: 0.5em;
}

.related .counterbadge {
    display: inline-block;
    border-radius: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    margin-top: 0.2em;
    background-color: var(--backend-counterbadge-background-color);
    color: var(--backend-counterbadge-color);
}

.related .collapsible {
    background-color: var(--backend-collapsible-button-background-color);
    color: var(--backend-collapsible-button-color);
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    margin-bottom: 0px;
    margin-top: 0.5em;
}

.related .collapsible + div {
    width: auto;
    padding-left: 0.3em;
    padding-right: 0.3em;
    margin-top: 0.2em;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
    border-radius: 0.5em;
}

.related .collapsible .close {
    display: none;
}

.related .collapsible.active .open {
    display: none;
}

.related .collapsible.active .close {
    display: initial;
}

.related .button {
    display: block;
    margin-top: 0.5em;
    text-align: center;
}

.related .button.add {
    display: inline;
}