#magic-ui-console {
    position: fixed;
    width: 100%;
    max-height: 200px;
    background-color: rgba(0, 0, 0, 0.7);
    top: 0;
    z-index: 90;
    text-align: left;
    font-family: monospace;
    overflow-y: auto;
    color: #d0d0d0;
    text-shadow: 2px 2px 5px black;
    user-select: all !important;
    padding-bottom: 10px;
}

.children.collapsed {
    display: none;
}

.console-entry {
    padding-left: 10px;
}

.collapse {
    cursor: pointer;
    float: left;
    margin-right: 5px;
    padding-top: 1px;
    margin-bottom: -1px;
}

.hidden {
    display: none;
}

.clip {
    margin-left: 5px;
}

.collapse.collapsed {
    transform: rotate(270deg);
}

.key-value-container:hover > .clip {
    visibility: visible !important;
}
