:root {
    --debug-panel-width: 9.25rem;
}

.debug.panel {
    position: absolute;
    top: 9rem;
    left: calc(100% - var(--debug-panel-width));
    width: var(--debug-panel-width);
    font-size: 0.8rem;
    box-sizing: border-box;
    padding: 0.5rem 0.65rem 0.75rem 0.65rem;
    background: gray;
    z-index: 99999;
    transition: left 0.5s ease-out;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.debug.panel.asr-hide {
    left: calc(100% - 0.5rem);
}

.debug.panel::before {
    display: inline-block;
    content: "Debug Panel";
    text-align: center;
    color: white;
}

.debug.panel > input.collapse {
    position: absolute;
    top: 0rem;
    right: 0rem;
    width: 2rem;
    height: 2rem !important;
    font-size: 1.25rem !important;
    color: black;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
}

.debug.panel > input.collapse:active {
    transform: scale(0.8);
    color: blue;
}

.debug.panel > .entity {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 8rem !important;
    height: 2rem !important;
    color: white;
    background: #FF1493 !important;
    cursor: pointer;
}

.debug.panel > .entity:not(:first-child) {
    margin-top: 0.65rem;
}

.debug.panel > a.entity {
    box-sizing: border-box;
    padding: 0.25rem;
    border-radius: 5px;
    border: 1px solid lightgray;
}

.debug.panel > input[type="button"][disabled] {
    background: gray !important;
}

.debug.panel > input[type="button"]:active {
    transform: scale(0.97);
}

.debug.panel > .accountinfo {
    margin-top: 0.5rem;
}

.debug.panel > .accountinfo .account-property {
    color: white;
}

.debug.panel > .accountinfo .account-value {
    color: blue;
    font-weight: 600;
    margin-left: 0.5rem;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}