/* We need space for top and foother header */

:root
{

    
    --rx-header-container: 0px solid #CCCCCC;
    --rx-header-left: 0px solid #FF0000;
    --rx-header-center: 0px solid #00FF00;
    --rx-header-right: 0px solid #0000FF;
    

}

.rx-main-page-container
{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 5% 90% 5%;
    
    grid-gap: 5px;
    /* background-color: #CCFF99; */
    
    margin-top: 2px;
}

.rx-main-row-top
{

    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: 2;


}

.rx-main-row-middle
{
    grid-column-start: 1;
    
    grid-row-start: 2;
    grid-row-end: 3;
}

.rx-main-row-bottom
{
    
    grid-column-start: 1;
    grid-row-start: 3;
    grid-row-end: 4;

}

/**********************************************************************
*  CSS for the header
**********************************************************************/
.rx-header-container
{

    top: 0px;
    position: fixed;
    /* clear: both; */

    width: 100%;
    height: 60px;

    /* display: grid; */
    display: flex;

    /*
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100%;
    
    grid-gap: 5px;
   */
    
    background-color: #ccc;

    margin: 0px;
    padding: 0px;
    
    align-items: center;
    
    border: var( --rx-header-container );
}

.rx-header-left
{
    display: flex;
    width: 33.3%;
    height: 100%;
    /*
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
   */
    
    text-align: left;
    margin-left: 20px;
    border: var(--rx-header-left);
    justify-content: left;
}

.rx-header-center
{
    width: 33.3%;
    /*
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
   */
    
    text-align: center;
    font-size: 2em;
    border: var(--rx-header-center);

    justify-content: center;
}

.rx-header-right
{
    display: flex;
    width: 33.3%;
    /*
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
   */

    height: 100%;
    text-align: right;
    
    margin-right: 20px;
    
    justify-content: right;

    border: var(--rx-header-right);
    
}

/**********************************************************************
*   CSS for footer
***********************************************************************/

.rx-footer-container
{

    bottom: 0px;
    position: fixed;
    clear: both;

    width: 100%;
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100%;
    
    grid-gap: 5px;
    background-color: #ccc;
    
    margin-top: 0px;

    height: 20px;
    
}

.rx-footer-left
{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;

    text-align: left;

    margin-left: 10px;
    
  /*  border: 1px solid #ff0000; */
}

.rx-footer-center
{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    text-align: center;
   /* border: 1px solid #00ff00; */
}

.rx-footer-right
{
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
  /*  border: 1px solid #0000ff; */
    text-align: right;
    margin-right: 10px;
}