.coreactivity-grid-logs {
    &.striped {
        tbody {
            tr:nth-child(4n + 1	),
            tr:nth-child(4n + 2	) {
                background-color: #F2F2F2;
            }

            tr:nth-child(4n	),
            tr:nth-child(4n -1	) {
                background-color: #FFF;
            }
        }
    }

    tr {
        th {
            &.column-blog_id,
            &.column-log_id {
                width: 80px;
            }

            &.column-meta {
                width: 48px;
                text-align: center;
                cursor: pointer;
            }

            &.column-method,
            &.column-context,
            &.column-protocol {
                width: 100px;
            }

            &.column-ip {
                width: 250px;
            }

            &.column-detection {
                width: 200px;
            }

            &.column-object_type,
            &.column-logged {
                width: 120px;
            }
        }

        td {
            &.column-ip {
                img {
                    margin: 0 5px 0 0;
                    width: 28px;
                }
            }

            &.column-request {
                word-break: break-all;
            }

            &.column-user_id {
                i {
                    color: #AAA;
                }
            }

            &.column-detection {
                > ul {
                    margin: 0;
                    list-style: none;

                    li {
                        word-break: break-all;
                    }
                }
            }

            &.column-meta_data {
                > ul {
                    margin: 0;
                    list-style: none;

                    li {
                        word-break: break-all;
                        display: flex;
                        gap: 8px;

                        strong {
                            flex-shrink: 0;
                            flex-grow: 1;
                        }
                    }
                }
            }

            &.column-meta {
                text-align: center;
                vertical-align: middle;

                button {
                    background: none;
                    padding: 0;
                    border: 0;
                    margin: 0;
                    cursor: pointer;
                }
            }

            &.column-object_name {
                i.d4p-ui-cancel {
                    float: right;
                }

                .coreactivity-object-type {
                    font-weight: bold;
                    text-transform: uppercase;
                }
            }
        }

        &.coreactivity-hidden-row {
            &.__hidden {
                display: none;
            }

            td {
                padding-top: 0;

                > div {
                    padding: 0.5em 0 0;
                    border-top: 1px dashed #DDD;

                    display: flex;
                    gap: 1em;
                    align-items: flex-start;
                    justify-content: flex-start;
                    flex-wrap: nowrap;

                    > ul {
                        margin: 0;
                        list-style: none;
                        flex: 0 0 calc(50% - 8px);

                        li {
                            word-break: break-all;
                            display: flex;

                            strong {
                                min-width: 150px;
                            }
                        }
                    }
                }
            }
        }
    }
}

.coreactivity-field-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;

    i {
        font-size: 1.3em;
    }

    span {
        flex-grow: 1;
        word-break: break-all;
    }
}

.d4p-wrap.d4p-plugin-coreactivity.d4p-panel-logs {
    ul.subsubsub {
        display: inline-flex;
        column-gap: 1em;
        row-gap: .5em;
        align-items: center;
        flex-wrap: wrap;

        .view {
            font-weight: bold;
            display: flex;
            gap: 1em;

            &.ip {
                img {
                    width: 23px;
                    height: auto;
                    vertical-align: bottom;
                }
            }

            &.user {
                img {
                    width: 18px;
                    height: auto;
                    vertical-align: bottom;
                }
            }
        }
    }
}

.subsubsub {
    .coreactivity-view-button {
        padding: 2px 8px;
        border-radius: var(--d4p-layout-main-border-radius);
        display: inline-flex;
        align-items: center;
        gap: 8px;

        i {
            font-size: 1.2em;
            line-height: inherit;
        }
    }

    span {
        &.coreactivity-view-button {
            font-weight: normal;

            line-height: 2;
            border: 1px solid var(--d4p-color-main-border);
            background-color: var(--d4p-color-main-background);

            i {
                color: var(--d4p-color-layout-accent);
            }

            span:first-of-type {
                font-weight: bold;
                color: var(--d4p-color-layout-accent);
            }
        }
    }

    a {
        &.coreactivity-view-button {
            background: var(--d4p-color-layout-accent);
            color: var(--d4p-color-main-background);

            i {
                vertical-align: top;
            }
        }
    }
}

#coreactivity-log-dialog {
    dl.d4p-ctrl-list {
        dt {
            flex: 0 0 35%;
        }

        dd {
            flex: 0 0 65%;
        }
    }

    .coreactivity-popup-tab-actions {
        margin: 1em 0 0;
        padding: 1em 0 0;
        border-top: 1px solid #DDD;
        display: flex;
        column-gap: 1em;
        row-gap: .5em;
        flex-wrap: wrap;
        justify-content: flex-start;

        &:empty {
            display: none;
        }
    }
}

.coreactivity-live-button {
    font-weight: normal;
    line-height: 2;
    background-color: var(--d4p-color-main-background);
    padding: 2px 8px;
    border-radius: var(--d4p-layout-main-border-radius);
    display: inline-flex;
    align-items: center;
    gap: 8px;

    strong,
    i {
        color: var(--d4p-color-layout-accent);
    }

    strong {
        i {
            vertical-align: sub;
            font-size: 1.2em;
        }
    }
}