/* ------------ Visualizer ------------- */

body {
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: "Fira Code", monospace !important;
    background-color: rgb(218, 218, 218) !important;
}

/*
.visual-value {
    color: transparent;
} */

#output {
    border-radius: 6px !important;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5);
    /* border: 1px solid rgb(114, 114, 114); */
    /* border-top: none; */
}

/* .visual-header:last-of-type {
    display: none;
} */

.visual-package {
    padding: 6px;
    border-radius: 2px;
    margin-top: 3px;
    overflow-x: hidden !important;
    border-radius: 6px !important;
    /* box-shadow: 0 0 8px 8px black; */
}

.visual-header {
    cursor: pointer;
}

.visual-name {
    color: rgb(204, 204, 204);
}

.visual-boolean {
    color: rgb(103, 166, 255);
}

.visual-null {
    color: rgb(163, 163, 163);
    /* font-family: monospace; */
    font-weight: 800 !important;
}

.visual-array {
    background-color: #FFD8BB;
    border: thin solid #FFB780;
}

.visual-object {
    background-color: #000000;
    border: thin solid #7da2ce23;
}

.visual-string {
    color: rgb(220, 47, 255);
}

.visual-number {
    color: rgb(201, 201, 201);
    font-weight: 300 !important;
}

.visual-function {
    color: green;
}

.visual-open .visual-children {
    display: block;
}

.visual-closed .visual-children {
    display: none;
}

.visual-arrow {
    background-image: url("d.png");
    background-repeat: no-repeat;
    background-color: transparent;
    height: 15px;
    width: 15px;
    display: inline-block;
}

.visual-open .visual-arrow {
    background-position: -20px 0;
}

.visual-closed .visual-arrow {
    background-position: 0 0;
}

.visual-type {
    /* color: gray; */
    font-size: 8pt;
    float: right;

    color: transparent;
    display: none;
}

.hide {
    display: none !important;
}

#output {
    max-width: 900px !important;
}

.visual-name {
    font-size: 14px !important;
    font-weight: 500;
    color: white !important;
    font-family: "Fira Code", monospace !important;
    padding: 2px 6px 2px 6px !important;
    /* background-color: rgba(255, 255, 255, 0.063); */
    margin-left: 4px;
    border-radius: 3px;
}

/* .visual-name::after {
    content: ":";
    font-weight: 900 !important;
} */



.visual-value {
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    /* max-width: 500px !important; */
    /* padding-left: 3px !important; */
    font-size: 13px !important;
    font-weight: 500 !important;

}

.visual-value::before {
    content: ":";
    color: rgba(255, 255, 255, 0.707) !important;
    font-size: 15px !important;
    margin-left: -1px !important;
}

.visual-package .visual-closed {
    /* background-color: rgb(0, 0, 0); */
    border-bottom: 1px solid rgba(255, 255, 255, 0.129);
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.visual-header {
    pointer-events: none;
    /*
    color: transparent !important; */
}

/* .visual-header .visual-name:inl */



/* .visual-value {
    background-color: green !important;
} */