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

}


.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;
    /* height:350px; */
} 

.studio .control {
    background-color: #F3F3F3;
    padding:4px;
    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 ...
*/