/* Debug tool */

.debug-tool {
    /* --dt-w: 350px; */
    --dt-h-min: 50px;
    --dt-h-max: 300px;
    /* position: fixed; */
    /* opacity: .95; */
    z-index: 1000;
    background: var(--main-color, #333);
    bottom: .5rem;
    inset-inline-end: .5rem;
    width: var(--dt-w);
    max-width: var(--dt-w);
    overflow: hidden;
    margin: 0 auto;
    border-radius: var(--border-radius, 5px);
    border: 1px solid var(--border-color, #222);
    box-shadow: var(--box-shadow, 0 0 10px rgba(0, 0, 0, .5));
    transition: 1s height linear, 1s width linear;
    margin-bottom: 1rem;
}

.debug-tool>.title i {
    cursor: pointer;
    float: right;
    margin-top: 3px;
}

.debug-tool>.title {
    background-color: var(--main3-color, #555);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, .1) 2px, rgba(0, 0, 0, .1) 3px), var(--particles-image-bg), linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2));
    padding: .5rem 1rem;
    color: var(--font-hover-color, #fff);
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 1px 3px #000;
    border-bottom: 1px solid var(--border-color, #000);
}

.debug-tool>pre {
    font-size: 11px;
    padding: 1rem;
    width: 100%;
    width: var(--dt-w);
    max-width: var(--dt-w);
    min-height: var(--dt-h-min);
    max-height: var(--dt-h-max);
    margin: 0;
    overflow: auto;
    border-bottom: 1px solid var(--border-color);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .3);
}

.debug-tool>pre::-webkit-scrollbar-track {
    background-color: var(--main2-color, #3f3f3f);
}

.debug-tool>pre::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: var(--main3-color, #666);
}

.debug-tool>pre::-webkit-scrollbar-thumb {
    background-color: var(--main3-color, #666);
}

.debug-tool>.file-info {
    color: #CCC;
    padding: .5rem 1rem;
    font-size: 11px;
}

.debug-tool.expand>pre {
    height: 400px !important;
    max-height: 400px !important;
}

.debug-tool.expand {
    width: 60% !important;
    max-width: 60% !important;
}


/* error container */

.error-container {
    --error-accent-color: #d9534f;
    max-width: 800px;
    margin: 1rem auto;
    padding: 1rem;
    background-color: var(--main-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-panel);
    border-inline-start: 5px solid var(--error-accent-color);
}

.error-title {
    color: var(--error-accent-color);
    margin-top: 0;
    border-bottom: 1px solid var(--border2-color);
}

.error-details p {
    margin: 5px 0;
}