:root {
    --log-settings-divider-margin: 10px;
}

body {
    margin: 0;
}

#wrapper {
    height: 100vh;
}
    #btn-wrapper {
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #FFF;
        position: relative;
        z-index: 200;
    }
        #btn-system-info {
            position: absolute;
            top: 0;
            right: 0;
        }
        #system-info-wrapper {
            position: absolute;
            top: 21px;
            right: 0;
            max-height: calc(100% - 22px);
            overflow-y: auto;
            border: 1px solid black;
        }
            #system-info > table {
                background: #FFFD;
                border-collapse: collapse;
                line-break: anywhere;
            }
                #system-info > table td {
                    padding: 2px 6px;
                }
                    #system-info > table tr {
                        border-bottom: 1px solid #DDD;
                    }
                    #system-info > table tr:nth-last-child(1) {
                        border-bottom: none;
                    }
                    #system-info > table td:nth-child(1) {
                        border-right: 1px solid #888;
                        white-space: nowrap;
                    }
                    #system-info > table td:nth-child(2) {
                        max-width: 300px;
                    }
        #btn {
            width: 50%;
            height: 50%;
            font-size: calc(5vw);
        }

    #middle-section {
        height: 40%;
        position: relative;
        box-shadow: inset 0 0 0 1px #000;
    }
        .popup-info {
            position: absolute;
            padding: 10px;
            margin: 1px;
            max-width: 400px;
            background: #0000;
            color: #FFF0;
            transition: background 0.5s, color 0.5s;
            z-index: 1;
        }
        #events-info {
            top: 0;
        }
        #events-property-info {
            bottom: 0;
        }
            .popup-info-visible {
                background: #000D !important;
                color: #FFF !important;
            }
        #events-outer-wrapper {
            display: flex;
            height: 100%;
            flex-direction: column;
            justify-content: center;
        }
            #events-inner-wrapper {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                overflow-y: auto;
                padding-inline: 5vw;
                padding-block: 20px;
            }
                .event {
                    position: relative; /* for the highlight animation */
                    padding: 10px;
                    margin: 5px;
                    border: 1px solid #000;
                    border-radius: 4px;
                    background-color: #0000;
                    user-select: text;
                }
                    .event:hover {
                        box-shadow: inset 0 0 3px 2px #0007;
                        background: #00000009;
                    }
                    .event-selected {
                        box-shadow: inset 0 0 0 3px #000;
                        background: #00000020;
                    }
                    .highlight:before {
                        content: "";
                        z-index: -1;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        animation-name: highlight;
                        animation-duration: 2s;
                    }

    #info-outer-wrapper {
        position: relative;
        height: 30%;
        background: #FFF;
    }
        #info-inner-wrapper {
            height: 100%;
            overflow-y: scroll;
            box-shadow: inset 0 0 0 1px #000;
            background: #0001;
        }
            #info {
                position: relative;
                box-shadow: inset 0 0 0 1px #000;
                padding: 5px;
                min-height: calc(100% - (5px * 2));
                z-index: 0;
            }
                #info > div { /* event logs */
                    position: relative;
                    margin-bottom: 4px;
                    padding-block: 2px;
                    padding-inline: 4px;
                }
                    .logging-info {
                        border: 1px solid #0004;
                        border-radius: 5px;
                        padding-inline: 2px;
                        margin-inline: -2px;
                        background-color: #FFF7;
                        user-select: text;
                    }
                    .logging-info:hover {
                        background-color: #FFFE;
                    }
                #info > div:nth-child(odd) {
                    background: #0001;
                }
                #info > div:nth-child(even) {
                    background: #0002;
                }
                #log-settings-buttons {
                    position: absolute;
                    top: 0;
                    right: 0;
                    translate: 0 calc(-100% - 1px);
                }
                    .dropdown {
                        width: 10px;
                        height: 10px;
                        background: #000;
                    }
                    #log-settings {
                        position: absolute;
                        top: 0;
                        right: 0;
                        background: #EEED;
                        padding: 5px;
                        margin: 1px;
                        height: calc(100% - 12px);
                        overflow-y: scroll;
                        border-left: 1px solid #000;
                        z-index: 1;
                    }
                        .hidden {
                            display: none;
                        }
                        .log-settings-header {
                            font-style: italic;
                            text-align: center;
                            font-weight: bold;
                        }
                        .log-settings-divider {
                            display: block;
                            margin-bottom: var(--log-settings-divider-margin);
                            margin-top: calc(var(--log-settings-divider-margin) / 2);
                        }
                            .log-settings-divider > td {
                                height: 1px;
                                background: #000;
                                padding: 0;
                                position: absolute;
                                left: 0;
                                right: 0;
                            }



/* Animations */
@keyframes highlight {
    from {background: #0F08; color: #FFF}
    to {background: #0F00; color: #000}
}