/***********************************************************************
*
*  https://hackernoon.com/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf
*  V 1.0
*
***********************************************************************/

.page-grid
{

    display: grid;
    
    grid-template-columns: 75% 25%;
    grid-template-rows: 90% 10%;
    
    grid-gap: 5px;
    /* background-color: #CCFF99; */

    margin-top: 2px;

}

.page-grid-item-left
{

    height: 600px;
    grid-column-start: 1;
    grid-column-end: 2;
    
    grid-row-start: 1;
    grid-row-end: 2;

    margin: 3px;
    
    border: 0px solid #000;
    background-color: #eee; 
}

.page-grid-item-right
{

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

    /* border: 2px dashed rgba(236, 198, 48, 1.0); */
    /*  background-color: #DDFF00; */
        background-color: #eee; 
}

.page-grid-item-bottom
{

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


    /*border: 2px dashed rgba(236, 198, 48, 1.0); */
    /*    background-color: #00FF00; */
    background-color: #eee;
    
}



/**********************************************************************
 *
 **********************************************************************/
.rx-grid-3-container
{
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-gap: 5px;

    padding-top: 5px;
    padding-bottom: 5px;

    background-color: #FFFFFF;

    heigth: 100%;

    /* border: 2px solid rgba(128, 128, 128, 1.0); */
}

.rx-grid-3-container > div
{
    background-color: #FFFFFF;
    text-align: center;
    padding: 0px;
    margin: 0px;
    font-size: 1em;
   /* border: 1px solid #000000; */
}


/**********************************************************************
 *
 **********************************************************************/
.rx-page-grid-1
{


    display: grid;

    grid-template-columns: 100%;

    
    /* background-color: #CCFF99; */

    /*
    margin-top: 100px;

    margin-bottom: 100px;
   */

    overflow: auto;
    padding: 10px;
    border-radius: 10px;

    /* border: 2px solid #FF00FF; */
}

.rx-page-grid-1-center
{
    
    grid-column-start: 1;
    grid-row-start: 1;
    
    border: 2px dashed #FFFFFF;
    
    /*  background-color: #DDFF00; */

 
}

/**********************************************************************
 *   page-grid-2
 **********************************************************************/
#rx-page-grid-2-container
{

    /* border: var(--rx-grid-2-container-border); */

    /* border: 4px solid #FF0000; */

    overflow:auto;
    padding: 20px;
    border-radius: 10px;

    height: 100%;
    
}


.rx-page-grid-2
{
    flex: 1;
    display: grid;

    grid-template-columns: 50% 50%;
    grid-template-rows: 1fr;
    
    /* background-color: #CCFF99; */

    /* border: 2px solid #FF0000; */
    
    margin-top: 2px;

    overflow:auto;
    padding: 20px;
    border-radius: 10px;

    
    /* background-color: #CCFF99; */
        
}

.rx-page-grid-2 div
{

    text-align: center;
    padding: 0px;
    margin: 0px;

    /* border: var(--rx-grid-div-border); */

}

.rx-page-grid-2-left
{

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

    font-size: 1em;

    /* border: 2px solid #00FF00; */
    
    /* border: 2px dashed rgba(236, 198, 48, 1.0); */
    
    /*  background-color: #DDFF00; */

}


.rx-page-grid-2-right
{

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

    /* border: 2px solid #00FFFF; */
    
    /* border: 2px dashed rgba(236, 198, 48, 1.0); */
    /*  background-color: #DDFF00; */

}


/**********************************************************************
 *
 **********************************************************************/
#rx-graph-container
{
    border: 1px solid rgba(236, 198, 48, 1.0);
    
    /* If a fixed hight is set - it works but wrong hight */
    height: 75%;
    
    /* If 100% hight is set it don't work */
    /* height: 100%; */
    
    overflow:auto;
    padding: 10px;
    border-radius: 10px;
    
}

/**********************************************************************
 *
 **********************************************************************/
.rx-page-grid-3
{

    display: grid;
    
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    
    /* background-color: #CCFF99; */

    /* border: 2px solid #FF0000; */
    
    margin-top: 2px;

    /*
    overflow:auto;
    padding: 20px;
    border-radius: 10px;

   */
    
}

.rx-page-grid-3-left
{

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



    
    /* border: 2px dashed rgba(236, 198, 48, 1.0); */
    /*  background-color: #DDFF00; */
    /*    background-color: #FFFFFF; */
}

.rx-page-grid-3-center
{

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

    /* border: 0px solid rgba(236, 198, 48, 1.0); */
    
    /*  background-color: #DDFF00; */

    
}

.rx-page-grid-3-right
{

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

    /* border: 2px dashed rgba(236, 198, 48, 1.0); */
    /*  background-color: #DDFF00; */


}


/**********************************************************************
 *  EOF
 ***********************************************************************/