:root
{
    --navbar_height : 40px;     
    --titlebar_height : 0px; /* Will be set explicitly in pages with a titlebar */
    --headerbar_height: 0px; /* Will be set explicitly in pages with a headerbar */
    --column_headerbar_height: 0px; /* Will be set explicitly in pages with a headerbar */
    --page_buttonbar_height: 0px; /* Will be set explicitly in pages with a headerbar */

    --footerbar_height : 24px;
    --buttonbar_height: 40px;

    --background_colour: ivory;
    --darker_background: cornsilk; /* antiquewhite, beige, blanchedalmond, cornsilk, floralwhite, ghostwhite, linen, seashell */
    --dark_colour: firebrick; /* darkgoldenrod; */
    --light_colour:white;    
    --menu_background: firebrick; /* black, brown, chocolate, firebrick, peru */
} /* root */

/* Reset padding and margins to 0 for all elements.
   box-sizing: border-box; Makes sizing more predictable by including padding and border in the element's total width/height.*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

/* #region Body basics */
html, body
{
    margin: 0;
    padding: 0px;
    height: 100%;
    overflow: hidden; /* Prevent body from scrolling */
    font-family: sans-serif;
    background-color: var(--background_colour);   
    /* background-color: */
}

/* Display hourglass while data is loading */
body.loading 
{
  cursor: wait;
}
/* #endregion Body basics */

/* #region Tables */
table{
    border-collapse: collapse;
}

td, th {
    /* border: 1px solid black; */
    width: 100px;
    text-align: left;
    padding: 2px 4px;
    white-space: nowrap;
}
/* #endregion Tables */

/* #region Alignments */
.vertical-center   
{ 
    display: flex; 
    flex-direction: column;     
    width:100%;
    height: calc(100dvh - (  var(--titlebar_height, 0px) + var(--headerbar_height, 0px) 
                           + var(--footerbar_height, 0px) + var(--buttonbar_height, 0px) 
                           + 0px));
    justify-content: center;    
    padding: 0;
    margin: 0;
    /* border: 1px solid;     */
}

.body-center       
{ 
    text-align: center; 
}

.horizontal-center 
{ 
    display: flex; 
    /* height: 100%; */
    flex-direction: column;     
    align-items: center;    
    padding: 0;
    margin: 0;
    /* border: 1px solid;     */
}

/* #endregion Alignments */

/* #region Bars */

.titlebar
{
    box-sizing: border-box; /* padding and border included width/height. Margin not. */
    position:fixed; 

    margin: 5px 10px 0px 10px; /* Outside the element top, right, bottom, left */
    padding: 0; /* Inside */    
    border-radius: 20px;

    top:var(--navbar_height); 
    height: var(--titlebar_height);
    left: 0;
    width:calc(100vw - 20px);

    background-color:var(--dark_colour); 
    color: white;

    z-index:9999; /* Stays on top */
}

.headerbar
{
    box-sizing: border-box;
    position:fixed; 

    margin: 5px 10px 0px 10px; /* Outside the element */
    padding: 0; /* Inside */
    border-radius: 20px;

    left: 0;
    /* top:var(--titlebar_height); */
    /* top: calc(var(--titlebar_top) + var(--titlebar_height)  );     */
    top: calc(var(--navbar_height) + var(--titlebar_height) + 5px );    
    /* top: calc(var(--titlebar_height) + 10px  );         */
    width:calc(100vw - 20px);
    height: var(--headerbar_height);

    background-color: var(--dark_colour); 
    color: white;

    z-index:9999; /* Stays on top */   
}

.column_headerbar
{
    box-sizing: border-box;
    position:fixed; 

    margin: 5px 10px 0px 10px; /* Outside the element */
    padding: 0; /* Inside */
    border-radius: 20px;    

    left: 0;
    /* top : calc(var(--titlebar_height) + var(--headerbar_height) + 10px ); */
    top: calc(var(--navbar_height) + var(--titlebar_height) + var(--headerbar_height) + 10px );    
    width:calc(100vw - 20px);
    height: var(--column_headerbar_height);

    background-color:lightgray; 
    color: black;
    justify-content: center;    
    
    z-index:9999; /* Stays on top */
}

.page_buttonbar 
{
    box-sizing: border-box;
    position: fixed;

    /* margin: 5px; Outside the element */
    margin: 5px 10px 5px 10px;
    padding: 0; /* Inside */
    border-radius: 20px;    

    left: 0;
    bottom : calc(var(--footerbar_height) + var(--buttonbar_height) );
    width:calc(100vw - 20px);
    height: var(--page_buttonbar_height);

    background-color:lightgray; /* var(--border_colour); */
    text-align: center;
    z-index: 9999; /* Higher than footer so buttons are on top */
}

.buttonbar 
{
    box-sizing: border-box;
    position: fixed;

    margin: 0px; /* Outside the element */
    padding: 0; /* Inside */
    border-radius: 0px;  

    left: 0;
    bottom: var(--footerbar_height);
    width: 100vw;    
    height: var(--buttonbar_height);
    
    border-top: 2px solid; border-color: var(--border_colour);
    padding-top:0px;
    background-color:white;
    text-align: center;
    z-index: 9999; /* Higher than footer so buttons are on top */

}

.footerbar
{
    box-sizing: border-box;
    position:fixed; 

    margin: 0px; /* Outside the element */
    padding: 0; /* Inside */
    border-radius: 0px;  

    left: 0;
    width:100vw;
    bottom:0;     
    height: var(--footerbar_height);

    background-color: var(--menu_background);
    color: white;
    z-index:9999; /* Stays on top */
}

/* #endregion Bars */

/* Goes around the content block on every page */
.content-wrapper 
{
    /* border: 2px solid blue; */
    box-sizing: border-box;
    position:fixed; 

    margin: 0px; /* Outside the element */
    padding: 0; /* Inside */

    left: 0; 
    width: 100%; /* calc(100vw - 20px); */
    top: calc(  var(--navbar_height) + var(--titlebar_height) 
              + var(--headerbar_height) + var(--column_headerbar_height));
    /* bottom: calc(var(--footerbar_height) + var(--buttonbar_height) + var(--page_buttonbar_height) + 0px ); */
    bottom: calc(var(--footerbar_height) + 0px );
    /* bottom: 0px;  */

    overflow-y: auto;
    /* border: 2px solid; Just for debugging - take out when done */

    overflow: auto;
    z-index:1; /* Stays on top */    
    /* background-color: rgba(255, 0, 0, 0.2); */
}

/* Buttons */
.btn, button {
    /* Borders */
    border: none; 
    border-radius: 10px;

    /* Colours */
    background-color:var(--dark_colour); 

    /* Cursor */
    cursor:pointer;cursor:hand;

    /* Font */
    font-size:larger;
    font-weight: normal;
    color: white;

    /* Spacing */
    margin: 4px;
    padding: 4px 12px;
} /* Buttons */