@media (prefers-color-scheme:dark),(prefers-color-scheme: no-preference){
#root[data-style="auto"],
#root[data-style="dark"]{

--fg-primary: white;
        --border-color : #000000;
        --bg-primary: #2b2b2b;
        /*--bg-primary: rgba(0,0,0,0);*/
        --bg-secondary: #4c4c4c;
        --bg-tertiary: #1e1e1e;
        --tabs-bg-hover : #4f4f4f;
}}



@media (prefers-color-scheme:light){
#root[data-style="auto"],
#root[data-style="light"]{

--fg-primary: black;
        --bg-primary: #f0f0f0;
        --border-color : #ececec;
        --bg-tertiary: #C9C9C9;


}}



*{
    font-family: Cantarell;
    font-size : 20px;
}

/*****  dual lines *****/
#root {
  --tabs-height: 36px !important;
  --tabs-title-padding: 6px;
  --tabs-font-size: 14px;
  --tabs-title-lines: 1;
}


.Tab {
    margin : 5px 0px 5px 1px !important;
    border-radius : 5px !important;
    width : calc(100vw - var(--nav-btn-width) + 21px) !important;

}

.Tab[data-active="true"] {
    background-color: var(--bg-secondary);
    color: var(--fg-primary);
    box-shadow : 0px 2px 3px #111111;
    margin : 0px 0px;
    position : center;
    //border : 2px solid var(--border-color);
}

.Tab .title {
    color: var(--fg-primary);
}


.Tab[data-active="true"]  .title {
    color: var(--fg-primary);
}


.Tab .t-box {
  align-items: center;
  max-height: calc(var(--tabs-height) - var(--tabs-title-padding));
  overflow: hidden;
}

.Tab .title {
  font-size: var(--tabs-font-size);
  white-space: pre-wrap;
  line-height: calc((var(--tabs-height) - var(--tabs-title-padding)) / var(--tabs-title-lines));
padding : 0px ;
margin : 0 13px 0 0;




}

/*****  dual lines *****/


.PinnedDock {
        box-shadow : none!important;
        box-shadow : 1px 1px 6px #1e1e1e !important;
        height : 35px !important;
        border-radius : 6px;
        border-bottom : 0px solid var(--border-color);
        background-image : none !important;
        background-color: rgba(33,35,43,0) !important;
        margin : 5px 0px 5px 5px;
    width : calc(100vw - var(--nav-btn-width) + 21px) !important;

}

.PinnedDock::before {
        background-image : none !important;
        background-color: var(--bg-tertiary) !important;
        border-radius : 6px;
}

.PinnedTab[data-active="true"] {

        background-color: var(--bg-secondary); !important;
    border-radius : 15px;
        box-shadow : 1px 1px 4px #1e1e1e !important;
}

.panel-box {

    background-color: var(--bg-primary);
    box-shadow : 0px 0px 6px black;
    border : none !important;
    align-content : center;
    padding : 5px 0px;
    spacing : 20px;
    row-gap: 5px;
   /* width : 35px !important;*/



}

.panels-box {
    border : none !important;

    height: 45px;
}

.panel-btn {
    transform: scale(0.95,0.95) !important;
    border-radius : 4px;
    padding : 0px 0px;
    margin : 10px 0 2px 10px;

}
.panel-btn[data-active="true"] {
        background-color: var(--bg-tertiary) !important;
}
.NavigationBar{
    //background-colo #222222;
    background-color: var(--bg-primary);
    box-shadow : none !important;
}


/**** active Tab
****/




/****   active tab indicator -hidden           *****/
/*
.Tab[data-active="true"] .lvl-wrapper::before {
display : none ;
background-color: yellow;

}
*/


.container {
background-color: var(--bg-primary);
padding : 5px 0px 5px 0px !important;
border-bottom: 1px solid var(--bg-secondary) !important;

}

.scrollable {
background-color: var(--bg-primary);
margin-left : 0px;
}



.Tab .close {
margin : -0px 5px 0 0px;
transform: scale(1.3,1.3);
fill :  var(--fg-primary);
}

.Tab .close > svg{
fill : var(--fg-primary);
}

.Sidebar .settings-btn {
    /*width : 45px;*/
    padding : 15px 5px 0 0px;

    /*box-shadow : 0px 12px 14px #000000 !important;*/
}

.scroll-container {
    background-color :#ff0000;
    background-color :  var(--bg-primary) !important;
    border : none !important;
    margin-left : 5px;

}

.scrollable {
    background-color :  var(--bg-primary) !important;
    border : none !important;
}