:root {
  --tab-panel-bg-color: #f0f0f0;
  --tab-index-active-bg-color: lightgrey;
  --tab-index-inactive-bg-color: darkgrey;
  --tab-index-active-z-index: 3;
  --tab-index-inactive-z-index: 1;
}
h1.Title,h2.Title,h3.Title
{
    text-align: center;
}

table.TableGUI, table.TableGUI td
{
    border : black 1px solid;
}
table.TableGUI > caption
{
    border : black 3px solid;
}

table.TableView, table.TableView td
{
    border : black 1px solid;
}

table.TableView th
{
    border : black 1px solid;
    font-weight: bold;
}

table.TableView > caption
{
    border : black 3px solid;
}


div.TabContainer-DISABLED
{
    border : black 3px solid;
}

button.TabIndex
{
    position: relative;
    border-top: ridge 3px;
    border-left: ridge 3px;
    border-right: ridge 3px;
    border-bottom: none; 
    padding-top : 3px;
    padding-bottom : 0.5em;

    background-color: var(--tab-index-inactive-bg-color);

    /* places button box to overdraw a portion of the TabPanel top border */
    z-index: var(--tab-index-inactive-z-index);    
    bottom : -3px;        
}

div.TabPanel
{
    border : ridge 3px;    
    border-top : groove 3px;
    margin: 0px;    
    padding: 2px;
    padding-top: 0px;

    position: relative;
    z-index: 2;
}

/*
 Toolbar and Menu classes

 */
div.Toolbar
{
    border: solid black 2px;
}

div.Toolbar > div
{
    border: solid black 1px;
}

div.Menu
{
    background-color : lightgrey;
    display: flex;
    flex-direction: row;    
    
}

/*
 - https://www.w3schools.com/howto/howto_js_dropdown.asp
 */
div.Dropdown
{
    position: relative;
    display: inline-block;
}

button.Dropdown
{
}

ul.SubMenu
{
    list-style-type: none;
    background-color : lightgrey;
    position : absolute;
    top: 10px;
    padding: 0;
    z-index: 1;
    width: max-content;    
}

ul.SubMenu > li
{
    border : black 1px solid;
    padding : 0;
    align-items: center;
}

#UserDocument
{
    overflow-y: scroll;
    height : 95vh; 
}

div.ToolbarExtension
{
    display: inline-flex;
    flex-direction: row;
    border: 2px dashed black;
    margin: 2px;
}
div.ToolbarExtension > span:first-child
{
    background-color: bisque;
    margin: 2px;
}


dialog#ContentEditModeDialog
{
    position:absolute;
    top: 50px;
    background-color: beige;
}
ul > li.None
{
    list-style-type: none;
}