:root
{
    --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; /* 40px */
    --dark_colour: rgb(53, 58, 116);
    --light_colour:white;
    --border_colour:rgb(238, 117, 55);
}

/* #region Element styles */

/* 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;
  }

/* Body basics */
html, body
{
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Prevent body from scrolling */
    font-family: sans-serif;
}

/* Used in casings to display hourglass while data is loading */
body.loading 
{
  cursor: wait;
}

form 
{
  all:unset;
}

table, tr, td
{
  text-align:left; 
}

/* #endregion Element selectors */  

/* 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) ));
    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;     */
}


/* #region Bars */

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

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

    top:0; 
    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 5px 10px; /* Outside the element */
    padding: 0; /* Inside */
    border-radius: 20px;

    left: 0;
    top:var(--titlebar_height);
    top:calc(var(--titlebar_height) + 5px);
    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 5px 10px; /* Outside the element */
    padding: 0; /* Inside */
    border-radius: 20px;    

    left: 0;
    top : calc(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: calc(var(--footerbar_height));
    width: 100dvw;    
    height: var(--buttonbar_height);
    
    border-top: 2px solid; border-color: var(--border_colour);
    padding-top:0px;
    padding-bottom: env(safe-area-inset-bottom); /* For Android */
    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(--dark_colour); 
    color: white;
    z-index:9999; /* Stays on top */
}

/* #endregion Bars */

/* #region Wrappers */

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

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

    left: 0; 
    width:calc(100dvw - 20px);
    top: calc(var(--titlebar_height) + var(--headerbar_height) + var(--column_headerbar_height) + 0px);
    bottom: calc(var(--footerbar_height) + var(--buttonbar_height) + var(--page_buttonbar_height) + 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); */
}

/* #endregion Wrappers */



/* #region Scroll bars */
/* Scrollbars appear much better on Chrome than on Firefox */

/* #region Firefox : Different from Chrome, Edge ans Safari */

.scrollable 
{
    overflow: auto;        /* or scroll */
    max-height: 300px;     /* create a scrollable area */
  }

html 
{
    scrollbar-width: auto;                            /* Options: auto | thin | none */
    scrollbar-color: var(--dark_colour) lightgray;  /* thumb color, track color */
  }
  
/* #endregion Firefox */

/* #region Chrome, Edge, Safari */

/* Target the scrollbar itself */
::-webkit-scrollbar 
{
    width: 22px;      /* vertical scrollbar width */
    height: 22px;     /* horizontal scrollbar height */
  }
  
  /* The track (background) */
  ::-webkit-scrollbar-track 
  {
    background: lightgray;  /* var(--border_colour) ; */
  }
  
  /* The draggable thumb */
  ::-webkit-scrollbar-thumb 
  {
    background: var(--dark_colour);
    border-radius: 6px;
  }
  
  /* Hover effect on the thumb */
  ::-webkit-scrollbar-thumb:hover 
  {
    scrollbar-width: 8px;
    background : var(--dark_colour); 
  }

/* #endregion Chrome */

/* #endregion Scrollbars */
  

/* #region Element styles (btn) */

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

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

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

    /* Display */
    display:inline-flexbox;
    position:static;
    white-space: normal;

    /* Font and Text */
    font-family: var(--font);
    font-weight: bold;
    justify-content: center;

    /* Margins and Padding */
    /* margin: 5px; */
    margin-top: 5px; margin-left: auto; margin-right: auto;
    padding: 5px 10px;

    /* Size */
    width: auto; height:40px;
    vertical-align:middle;
} /* btn */

/* Buttons inside the button bar */
.btn_70x30
{
    width:70px;
    height: 30px;
    margin-left:10px;
    margin-right:10px;
}

.btn_80x30
{
    width:80px;
    height: 30px;
    margin-left:10px;
    margin-right:10px;
}

.btn_100x30
{
    width:100px;
    height: 30px;
    margin-left:10px;
    margin-right:10px;
}

.btn_120x30
{
    width:120px;
    height: 30px;
    margin-left:10px;
    margin-right:10px;
}



/* #endregion Element styles */