#{$prefix}details {
    width: 100%;
    overflow: hidden;
    border: 1px solid $border-color3;

    &-group {
        @include flex-row();
        overflow: hidden;

        &:first-child {
            border-top: none;

            #{$prefix}details-item-label,
            #{$prefix}details-item-content {
                border-top: none;
            }
        }

        &-1 {
            #{$prefix}details-item {
                width: 100%;
            }
        }

        &-2 {
            #{$prefix}details-item {
                width: 50%;
            }
        }

        &-3 {
            #{$prefix}details-item {
                width: 33.3333333%;
            }
        }

        &-4 {
            #{$prefix}details-item {
                width: 25%;
            }
        }

        &-5 {
            #{$prefix}details-item {
                width: 20%;
            }
        }
    }

    &-item {
        float: left;
        @include flex-row();

        &-label {
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-shrink: 0;
            color: #336199;
            background-color: #EDF3F4;
            border-top: 1px solid #F7FBFF;
        }

        &-content {
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-grow: 1;
            box-sizing: border-box;
            font-size: 14px;
            border-top: 1px dotted $border-color3;
            line-height: 150%;
        }
    }

    &.no-border {
        border: none !important;

    }
}