/* ------------ Visualizer ------------- */
        
.visual-package {padding:3px;border-radius:2px;margin-top:3px;}
.visual-header {
    cursor: pointer;
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.visual-name {
    color: #000;
    font-family: arial;
}

.visual-array {
    background-color: #e1e5e9;
    border: none;
    width: 100%;
    padding-left: 2px;
    padding-right:0px;
    padding-top:5px;
    border-radius: 5px;
    box-shadow: 4px 2px 7px 0px #B3C0CE;
}
.visual-object {
    background-color: #fff;
    border: none;
    border-radius: 5px;
    padding:5px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.visual-string {color:rgb(132, 14, 228);border-radius: 10px;
    background-color: #e7eaed;font-family: monospace;
    }
.visual-number {color:rgb(12, 168, 240);border-radius: 20px;
    background-color: #e7eaed;font-family: monospace;}
.visual-function {color:rgb(10, 234, 250);border-radius: 5px;
    background-color: #720fe2;font-family: monospace;}

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

.visual-arrow {
    background-image: url(wand.svg);
    background-repeat: no-repeat;
    background-color: transparent;
    height: 18px;
    width: 18px;
    display: inline-block;
    background-size: contain;
    transform: rotate(-45deg);
}

.visual-open .visual-arrow {
    transform: rotate(180deg);
}
.visual-closed .visual-arrow {background-position:0 0;}

.visual-type {
    color: #01a0e4;
    font-size: 8pt;
    float: right;
    font-family: arial;
    padding: 7px;
    border-radius: 20px;
    background-color: #e7eaed;
    color: #01a0e4;
    box-shadow: 1px 1px 1px 0.1px #3a34322b;
    position: absolute;
    right: 7%;
    width: 60px;
    text-align: center;
}

.hide {
    display:none !important;
}