
.studio-pane {
    height:87vh;
    display:grid; grid-template-rows: 100%; 
    
}
.studio {
    
    display:grid;
    grid-template-rows: 50px 200px auto 48px; 
    gap:8px;
}
.studio-index {
    display:grid;
    grid-template-columns: auto 25%;
    gap:4px;

}
.menu-2 {
    display:grid; width:48px;
    grid-template-rows: repeat(6,50px);
    gap:8px;
    
    
    
    
}
.menu-2 .item {
    
    display:grid; align-items: center;
    
}
.studio-index .menu-2 {
    display:none ;
}
.studio-index .menu-1 {
    display:block;
}
.studio-index-collapsed {
    display:grid;
    grid-template-columns: auto 50px;
    gap:8px; 
}
.studio-index-collapsed .menu-1{ display:none}
.studio-index-collapsed .menu-2 {display:grid;}

.studio-dialog {
    width:650px;
}
.gradient {background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);}
.studio-expand {
    display:grid;
    grid-template-rows: 50px calc(100% - 55px); gap:8px;
    
    

}
.studio-expand .status {display:none}
.studio-expand textarea {display:none}
.studio-expand .output {height:100%;}

/* .studio .input-frame {
    display:grid;
    grid-template-rows: 64px auto; gap:4px;
    height:250px;
    
    
} */
.studio textarea {
    outline: 0;
    border-color:transparent;
    font-family: courier;
    padding:8px; line-height: 1.5; background-color: #f3f3f3;

    /** ------------------ **/
     font-family: monospace;
    white-space: pre; /* Ensures whitespace is rendered correctly */
    word-wrap: normal; /* Prevents wrapping */
    overflow: auto; /* Adds scrollbars if needed */

    /* Add more styles as needed */
    /* height:350px; */
} 

.studio .control {
    background-color: #F3F3F3;
    
    display:grid; grid-template-columns: 50px auto 40%; gap:8px; align-items: center;
    
}
.studio .control .border-left {border-left:1px solid #FFFFFF;}

    .studio .control img {width:30px; width:30px;}
.studio .output { 
    
    display:block;
    height: calc(100%  - 48px)    ;
}

.small {font-size: 12px;}
.shadow {
    box-shadow: 4px 2px 2px 2px #d3d3d3;
}
.status { font-size:11px; text-justify: right; padding:8px; 
    text-align: right;
    margin-top:20px;
    float:right;
    }

input[type=text]{padding:8px; outline: 0; border:4px solid transparent;
    margin:8px;
background-color: #f3f3f3;}
input[type=text]:focus {
    border-left-color: #4682B4;
}


/* .table-header { height:20px;} */
.cell{
   color:maroon;
   text-overflow: ellipsis;
   font-size:13px;
   overflow:hidden;
   height:20px;
                }
.main .menu {display:none}
.main .content{grid-row:2; grid-column:1}
.main .pane {grid-row:2; grid-column:2}
.main .footer{grid-row:4; grid-column:1;}
/**
* syncfusion spreadsheet ...
*/

