espocrm-base/frontend/less/espo/elements/record.less

.record .record-grid {
    display: grid;
    grid-column-gap: @container-padding;

    grid-template-columns: minmax(auto, 67%) minmax(auto, 33%);

    &.record-grid-wide {
        grid-template-columns: 100%;
    }

    &.record-grid-wide.record-grid-wide {
        grid-template-columns: 100%;
    }

    &.record-grid-small {
        grid-template-columns: minmax(auto, 60%) minmax(auto, 40%);
    }
}

.record > div[tabindex="-1"]:focus-visible {
    outline: none;
}

.record .cell[tabindex="-1"]:focus-visible {
    outline: none;
}

.modal-body {
    .record .record-grid {
        grid-column-gap: @padding-base-horizontal;
    }
}

@media screen and (max-width: (@screen-md-min - 1px)) {
    .record .record-grid {
        grid-template-columns: 100%;

        &.record-grid-small {
            grid-template-columns: 100%;
        }
    }
}

.record {
    .tabs {
        > button.btn {
            font-size: 15px;
            height: 40px;

            &.invalid {
                color: var(--state-danger-text);
                transition: color 100ms linear;
            }

            &:after {
                height: 2px;
            }

            padding-left: 16px;
            padding-right: 16px;
        }

        margin-left: var(--panel-border-radius);
    }

    .panel.tab-hidden {
        display: none;
    }

    .side.tabs-margin {
        @media screen and (min-width: @screen-sm-min) {
            margin-top: 40px;
        }
    }

    .panel {
        &.first {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom-width: 0;
        }
        &.in-middle {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom-width: 0;
            > .panel-heading {
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }
        }
        &.last {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            > .panel-heading {
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }
        }
    }

    .bottom {
        .panel.sticked:first-child {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    }
}

.record .middle {
    margin-bottom: var(--vertical-gap);

    > .panel:first-child {
        border-top-width: var(--panel-border-width);
    }

    > .panel.hidden + .panel {
        border-top-width: var(--panel-border-width);
    }

    .panel + .panel.panels-show-more-delimiter {
        padding: @padding-large-vertical @panel-padding;
        border-top-width: 0;
    }

    > .panel {
        border-top-width: ~"max(var(--panel-border-width), 1px)";

        > .panel-heading {
            .btn-group {
                top: -6px;
                .btn {
                    border-top-width: 0;
                }
            }
        }

        margin-bottom: 0;

        &:last-child {
            border-bottom-width: var(--panel-border-width);
        }
    }
}

.record .middle {
    > .panel:first-child {
        border-top-width: var(--panel-border-width);
    }

    > .panel:last-child {
        border-bottom-width: var(--panel-border-width);
    }

    > .panel.tab-hidden + .panel {
        border-top-width: var(--panel-border-width);
    }

    > .panel.hidden + .panel {
        border-top-width: ~"max(var(--panel-border-width), 1px)";
    }

    .panel + .panel.panels-show-more-delimiter {
        border-top-width: 0;
    }
}

.record .side {
    > .panel.sticked:first-child {
        margin-top: 0;
        border-top-width: var(--panel-border-width);
    }

    .panel.hidden + .panel.sticked {
        margin-top: 0;
        border-top-width: var(--panel-border-width);
    }
}

.record .bottom {
    .panel.hidden + .panel.sticked {
        border-top-width: var(--panel-border-width);
    }

    .btn-group + .panel.sticked {
        margin-top: 0;
    }
}

.record {
    .panel {
        .panel-heading .panel-title {
            user-select: none;
        }
    }
}

.panels-show-more-delimiter {
    text-align: center;

    a > span {
        color: @gray-soft;
    }

    a:hover,
    a:active:hover {
        > span {
            color: var(--btn-text-color);
        }
    }
}