html, body {
    margin: 0px;
    height: 100%;
    background: #1f1f1f;
    /*  [VS Code default font setting] (not fit will )

        font-family:'Courier New', Courier, monospace;
        font-size: 14px;
    */
}

/*
    Preload "typed.js" cursor blink effect
*/
@keyframes typedjsBlink{
    50% {
        opacity: 0.0;
    }
}

.typed-cursor.typed-cursor--blink {
    animation: typedjsBlink 0.7s infinite;
}

#vs-file-path {
    user-select: none;
}

#vs-path {
    font-size: 14px;
}

#file-content {
    background-color: #1f1f1f;
}

#canvas-content {
    position: absolute;
    top: 80px;
    right: 16px;
    height: calc(100% - 80px);
    border: 1px solid black;
    border-top: 0px;
    border-bottom: 0px;
    box-shadow: -3px 0 5px rgba(0, 0, 0, 0.5);
}

/* Similar VS file drag effect */
#draggable {
    position: absolute;
    opacity: 0.8;
}

.ctrl-o {
    cursor: pointer;
}

/*
    [VS Code Color Style]
*/
.gray {
    color: gray;
}

.vs-border {
    border: #313131 solid 1px;
    border-bottom: 0px;
}

.vs-gray {
    color: #313131;
}

.vs-file, .vs-path {
    font-size: 14px;
    color: gray;
}

.vs-file {
    padding: 0.4rem 0.5rem;
    
    border: #313131 solid 1px;
    border-bottom: 0px;
    cursor: pointer;
}

.vs-file-active {
    border-top: #0078d4 solid 2px;
    /* bootstrap default text-light */
    color: #f8f9fa;
}

.vs-line {
    display: inline-block;
    width: 60px;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: end;
}

/*
    [VS Code - JSON File Style]
*/
.json-yellow {
    color: #f1d700;
}

.json-property {
    color: #8cdcfe;
}

.json-string {
    color: #ce9178;
}

.json-number {
    color: #b5cea8;
}

.json-boolean, .json-null {
    color: #569cd6;
}

/* Layer-1 of Object or Array */
.json-object-0, .json-array-0 {
    color: #dbd70a;
    /* d19a66 */
}

/* Layer-2 of Object or Array */
.json-object-1, .json-array-1 {
    /* color: #da70b3; */
    color: #d970da;
}

/* Layer-3 of Object or Array */
.json-object-2, .json-array-2 {
    color: #1b9ff1;
}

/*
    Closed all the files showing text
*/
.closed-file-text {
    min-width: 200px;
    font-size: 13px; 
    font-weight: 500; 
    color: #727272; 
}

.closed-file-command {
    min-width: 200px;
    font-size: 12px; 
    color: darkgray;
}

.keyboard {
    padding: 1px 5px;
    border-radius: 3px;
    border-bottom: 1px solid #363636;
    background-color: #2d2d2d;
    box-shadow: 0px 0px 1px black;
}

.mb-space {
    /* 20px (between mb-3 to mb-4) */
    margin-bottom: 1.25rem !important;
}