.box {
    &.padded {
        padding: 5px $collapsible-box-padding;

        > div.flex.flex-center {
            align-items: baseline;
        }
    }

    .label,
    .value {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .label {
        padding: 5px 0 5px 5px;
        font-size: $form-control-label-font-size;
    }

    .value {
        padding: 5px;
        font-size: var(--default-font-size);
        line-height: $default-line-height;
    }
}

.label {
    color: var(--title-text-color);
}

.mod-align-header {
    .box.padded {
        padding-left: 0;
    }

    .box .label,
    .box .value {
        padding-right: 0;
        padding-left: 0;
    }
}

.columns {
    display: flex;
    flex-flow: row wrap;

    .box {
        flex-basis: 33%;

        &.padded {
            flex-basis: calc(33% - #{$collapsible-box-padding});
            word-break: break-all;
        }
    }
}