/* 
    Created on : 10 Dec, 2022, 8:31:49 PM
    Author     : milind

    Ensure that the footer is on bottom of the page if the page has a short height [duplicate]
    https://stackoverflow.com/questions/60197722/ensure-that-the-footer-is-on-bottom-of-the-page-if-the-page-has-a-short-height

<div id="header">Header</div>
<div id="main-container" contentEditable>
Hello<br>
World
</div>
<div id="footer">
Bye-bye.
</div>

Perfect! I added contentEditable to see what happens if the main container grows in height. 
*/

body {
    display:flex;
    flex-flow:column;
    min-height:100vh;
    margin:0;
    padding: 0;
}
#main-container {
    flex:1;
}

#header {
    /*    background-color: yellow;  Overwrite color in calling HTML / XHTML only */
}
#main-container {
    /*    background-color: red;  Overwrite color in calling HTML / XHTML only  */
}
#footer {
    /*    background-color: green;  Overwrite color in calling HTML / XHTML only */
}

.scrollPnlHeight {
    height: calc(100vh - 92px);    
}

.sidebar-left {
    margin-top: 70px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    display: flex;
    flex-wrap: wrap;
    height: calc(100vh - 90px);
}

.sidebar-left > * {
    flex-grow: 1;
}


/* Extra CSS - Begin*/

/*.ui-widget {
    font-size: 90% !important;
}            */

span.ui-inputnumber > input[type=text] {
    text-align: right;
}

/* Extra CSS - End */