:root {
    --blueDeep:rgb(91, 176, 197);  /*navy*/
    --blueLight:rgb(160, 215, 221);  /*rgb(120, 130, 195);*/
    }
    body    
    {
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  /*Arial*/
        font-size:15px;
    }
    .container 
    {
        display: flex;         /* Включаем Flexbox */
        flex-direction: row;   /* Располагаем панели горизонтально (в ряд) */
        height: 95vh;         /* Высота ровно на весь экран (Viewport Height) */
    }

    /* Левая узкая панель */
    .panelSide {
        /*width: 18em;
        min-width: 18em;*/
        border-right: solid 1px silver;
        padding: 1em;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right:1em;
    }

    /* Правая широкая панель */
    .panelMain {
        flex-grow: 1;          /* Занимает ВСЁ оставшееся свободное пространство справа */
        padding: 0.5em;
        overflow-y: auto;      /* Скролл только для данных, шапка страницы не уедет вверх */
    }
    .tabHeadContainer
    {
        width:100%;
        display: flex;
        gap: 3px;
        border-bottom:solid 1px gray;
        margin-top:0.5em;
    }
    .tabHead
    {
        cursor:pointer;
        font-size:1.2em;  
        background-color: var(--blueDeep);
        color:white;
        padding:1em;
        padding-top:5px;
        padding-bottom:7px;
        border-top-left-radius: 7px;              
        border-top-right-radius: 7px;   
        border:solid 1px gray;   
        border-bottom: solid 0px gray;        
    }
    .tabHeadSelected
    {
        cursor:pointer;
        font-size:1.2em;  
        padding:1em;
        padding-top:5px;
        padding-bottom:7px;
        border-top-left-radius: 7px;              
        border-top-right-radius: 7px;   
        border:solid 1px gray;           
        border-bottom: solid 0px gray;    
        background-color: white;
        color:navy;
        margin-bottom:-1px;
    }

    .tabHead:hover 
    {
        background-color:var(--blueLight);
    }
    .tabBody
    {
        display:none;
        width:90%;
        padding-top:1em;
        padding-left:2em;
        background-color: white;
    }

    .sectionHead
    {
        color:navy;
        font-size:1.5em;
        margin-top:0.5em;
        margin-bottom:0.5em;
        margin-right:2em;
        cursor: pointer;
        text-align: left;
    }
    .sectionHeadLeg
    {
        color:rgb(7, 82, 7);
        font-size:1.5em;
        margin-top:1em;
        margin-bottom:0.5em;
        cursor: pointer;
    }    .headerSign
    {
        color:navy;
        font-size:1.2em;
        margin-right:0.2em;
        vertical-align:middle ;
        cursor: pointer;
    }
    .sectionRow
    {
        color:black;
        font-size:1em;
    }
    .tableHeader
    {
        background-color:var(--blueDeep);
        color:white;
        font-weight: bold;
        font-size: 0.8em;
        padding:0.5em;
        padding-left:1em;
        padding-right:1em;
        text-align:center;
    }
    .simpleRow
    {
        background-color:white;
        cursor: pointer;
    }
    .highlighteddRow
    {
        background-color: var(--blueLight);
        cursor: pointer;
    }
    .parameterLabel
    {
        padding-right:1em;
        padding:0.5em;
        font-weight: bold;
        font-size:0.9em;
        vertical-align:-webkit-baseline-middle;
    }
    .parameterComment
    {
        color:var(--blueLight);
        font-size: 0.9em;
        padding-left:3em;
        font-style: italic;
        vertical-align: -webkit-baseline-middle;
    }
    .treeNode 
    {
        color:var(--blueDeep);
        font-size: 1em;
        margin:0.5em;
        cursor: pointer;
        padding:0.3em;
    }
    .treeNode:hover
    {
        background-color: var(--blueLight);
        color:white;
    }
    .treeNodeSelected
    {
        background-color: var(--blueDeep);
        color:white;
        font-size: 1em;
        margin:0.5em;
        cursor: pointer;
        padding:0.3em;
    }
    .treeHeader
    {
        color:navy;
        font-size:1.3em;
        margin-bottom:1em;
    }
    .commandContainer
    {
        width: 80%;
        padding:1em;
        margin-bottom:1em;
        border: solid 1px silver;
        border-radius:8px;
        
    }
    .commandList
    {
        margin-bottom:1em;
        border-radius:5px;
        border:solid 1px gray;
        padding:0.5em;
        font-size:1em;
        background-color: var(--blueLight);
        color:white;
        min-width:20em;                
    }
    .input1
    {
        margin-bottom:1em;
        border-radius:5px;
        border:solid 1px gray;
        padding:0.5em;
        font-size:1em;
        background-color: white;
        color:black;
        vertical-align: -webkit-baseline-middle;
    }         
    .button1{
        margin-bottom:1em;
        border-radius:5px;
        border:solid 1px gray;
        padding:0.5em;
        font-size:15px;
        background-color: var(--blueLight);
        color:white;
        vertical-align:-webkit-baseline-middle;
    }
    .button1:hover{
        color:navy;
    }   
    .buttonDisabled{
        margin-bottom:1em;
        border-radius:5px;
        border:solid 1px gray;
        padding:0.5em;
        font-size:15px;
        background-color: ilver; /* var(--blueLight);*/
        color:gray;
        vertical-align:-webkit-baseline-middle;
    }
    .check1 {
        vertical-align: -webkit-baseline-middle;
        border:solid 1px gray;
        height:1em;
        width:1em;
    }
.fadeElement {
    /* Плавность изменения прозрачности за 1.5 секунды */
    transition: opacity 1.5s ease-out; 
    opacity: 1; /* По умолчанию виден */
    font-size: 14px;
    text-align: center;
    width: 100%;
}
.fadeOut {
    opacity: 0; /* Становится полностью прозрачным */
}

.logoContainer
{
    position:absolute;
    bottom:0vmax;
    opacity: 0.9;
    right:0vmax;
    padding:10px;
    padding-right:25px;
    height:120px;
    border:solid 0px gray;                
}