:root {
--navbar_height : 0px;     
    --titlebar_height : 0px; 
    --headerbar_height: 0px; 
    --column_headerbar_height: 0px; 
    --page_buttonbar_height: 0px; 
    --buttonbar_height: 0px;
    --footerbar_height : 28px;    

    --ibl_colour: rgb(50, 60, 120);
    --background_colour: aliceblue;
    --darker_background: lightsteelblue;
    --dark_colour:rgb(50, 60, 120);
    --light_colour:white;    
    --menu_background: rgb(50, 60, 120);  
    --border_colour:rgb(50, 60, 80);
}

* {
margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; 
    font-family: sans-serif;
    background-color: var(--background_colour);
    text-align: center;
}

ul, li, table {
text-align: left;
}

ul {
padding-left: 25px;
}

.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; 
    overflow: hidden;   
    padding: 0;
    margin: 0;
}

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

.horizontal-center {
    display: flex; 
    flex-direction: column;     
    align-items: center;    
    padding: 0;
    margin: 0;
}

.content-wrapper {
    box-sizing: border-box;
    position:fixed; 
    margin: 0px; 
    padding: 0; 
    left: 0; 
    width: 100%; 
    top: calc(  var(--navbar_height) + var(--titlebar_height) 
              + var(--headerbar_height) + var(--column_headerbar_height));    
    bottom: calc(var(--footerbar_height) + 0px );  
    overflow: hidden;
    z-index:1;
}

.btn {
    border: none; border-radius: 10px;
    background-color: var(--dark_colour);
    color: white;
    cursor:pointer;cursor:hand;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    position:static;
    white-space: normal;
    font-size:large;
    font-weight:normal;
    justify-content: center;
    margin-top: 5px; margin-left: auto; margin-right: auto;
    padding: 5px 10px;
    width: auto; height:40px;
    vertical-align:middle;
}

.btn-small {
    border: none; border-radius: 10px;
    background-color: var(--dark_colour);
    color: white;
    cursor:pointer;cursor:hand;
    display:inline-flex;
    position:static;
    white-space: normal;
    font-size:medium;
    font-weight:normal;
    justify-content: center;
    margin-top: 2px; margin-left: auto; margin-right: auto;
    padding: 2px 5px;
    width: auto; height:24px;
    vertical-align:middle;
}

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

    margin: 0px; 
    padding: 0; 
    border-radius: 0px;  

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

    background-color:var(--dark_colour); 
    color: white;
    z-index:9999;
}

.footerbar {
    height: auto;
    min-height: 28px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}