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

/*
:root
{

    --rx-page-grid-background-color: #EEEEEE;
    --rx-page-grid-left-color: #EEEEEE;
    --rx-page-grid-right-color: #EEDDEE;
    --rx-page-grid-bottom-color: #EEEEDD;

}

*/


.page-grid-config
{

    display: grid;
    grid-template-columns: 65.0% 35.0%;
    grid-template-rows: 80% 20%;
    
    grid-gap: 0px;
    /* background-color: #CCFF99; */
    
    margin-top: 2px;

    margin-left: 10px;
    margin-right: 10px;


}

/**********************************************************************
 *
 **********************************************************************/
#rx-page-grid-half
{

    flex: 1;
    display: grid;
    
    grid-template-columns: 75.0% 25.0%;
    grid-template-rows: 50% 50%;

    grid-gap: 0px;
    /* background-color: #CCFF99; */
    
    /* border: 4px solid #CCCCCC; */

    min-height: 10%;
    
    margin-left: 0px;
    margin-right: 0px;
    
}

#rx-page-grid-two-columns
{

    flex: 1;
    display: grid;
    
    grid-template-columns: 75.0% 25.0%;
    grid-template-rows: 100%;

    grid-gap: 0px;
    /* background-color: #CCFF99; */
    
    /* border: 4px solid #CCCCCC; */

    min-height: 10%;
    
    margin-left: 0px;
    margin-right: 0px;
 

}

/**********************************************************************
 *
 **********************************************************************/
#rx-page-grid-two
{

    flex: 1;
    display: grid;
    
    grid-template-columns: 75.0% 25.0%;
    grid-template-rows: 50% 45%;

    grid-gap: 0px;
    /* background-color: #CCFF99; */
    
    /* border: 4px solid #CCCCCC; */

    min-height: 10%;
    
    margin-left: 0px;
    margin-right: 0px;
    
}

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

    flex: 1;
    display: grid;
    
    grid-template-columns: 75.0% 25.0%;
    grid-template-rows: 80% 20%;

    grid-gap: 0px;
    /* background-color: #CCFF99; */
    
    /* border: 4px solid #CCCCCC; */

    min-height: 10%;
    
    margin-left: 0px;
    margin-right: 0px;
    
}

#rx-page-grid-left
{

    flex: 1;
    align-self: stretch;
    
    /* display: grid; */
    
    grid-column-start: 1;
    grid-column-end: 2;
    
    grid-row-start: 1;
    grid-row-end: 2;
    
    border: 2px solid #CCCCCC;
    
    padding: 4px;
    
    border-radius: 10px;
    margin: 0px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
    background-color: var(--rx-page-grid-left-color);

    overflow: auto;
}

#rx-page-grid-right
{

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

    border: 2px solid #cccccc;
    padding: 10px;
    border-radius: 10px;
    margin: 0px;

    margin-bottom: 5px;
    margin-top: 5px;
    background-color: var(--rx-page-grid-right-color);

    overflow: auto;
    
    /*  background-color: #DDFF00; */
    /* background-color: #eee; */
}

#rx-page-grid-bottom
{

    grid-column-start: 1;
    grid-row-start: 2;
    
    border: 2px solid #cccccc;

    padding: 10px;
    border-radius: 10px;
    margin: 0px;
    
    background-color: var(--rx-page-grid-bottom-color);

    overflow: auto;

    margin-right: 5px;
    margin-bottom: 5px;
    
    /*    background-color: #00FF00; */
    /* background-color: #eee; */
    
}

/***********************************************************************
 *  page grid with tree two
 ***********************************************************************/
.rx-page-grid-1-old
{

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    
    /* background-color: #CCFF99; */
    border: 5px solid #FF00AA;
    margin-top: 2px;

    width: 100%;

}



/***********************************************************************
 *  page grid with tree boxes
 ***********************************************************************/
.rx-page-grid-3
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;

    /* background-color: #CCFF99; */


    margin-top: 2px;

}



.rx-page-grid-3-left
{

    grid-column-start: 0;
    grid-column-start: 1;

    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: 1;
    grid-column-start: 2;

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

    /* border: 0px solid rgba(236, 198, 48, 1.0); */

    /*  background-color: #DDFF00; */
    background-color: #eee;



}

.rx-page-grid-3-right
{

    grid-column-start: 2;
    grid-column-start: 3;

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

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

    background-color: #FFFFFF;
}

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

#rx-page-grid-container
{

    flex: 1;
    display: grid;
    grid-template-columns: 75% 25%;
    grid-template-rows: 80% 20%;
    
    grid-gap: 0px;

    min-height: 10%;
    margin-top: 0px;
    margin-bottom: 0px;

    background-color: var(--rx-page-grid-container-backtround);
    border: var(--rx-page-grid-container-border);
    
}

#rx-page-grid-start-x
{

    flex: 1;
    display: grid;
    grid-template-columns: 75% 25%;
    grid-template-rows: 80% 20%;
    
    grid-gap: 0px;
    /* background-color: #CCFF99; */

    min-height: 10%;
    margin-top: 0px;
    margin-bottom: 0px;

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

#rx-page-grid-left-x
{

    /*  align-self: stretch; */

    flex: 1;
    align-self: stretch;
    
    grid-column-start: 1;
    grid-column-end: 2;
    
    grid-row-start: 1;
    grid-row-end: 2;

    margin: 5px;
    padding: 20px;


    
    border-radius: 20px;
    background-color: var(--rx-page-grid-left-color);

}

#rx-page-grid-right-x
{
    

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

    margin: 5px;
    padding: 10px;

    border-radius: 20px;
    
    background-color: var(--rx-page-grid-right-color);
    
}

#rx-page-grid-bottom-x
{

    grid-column-start: 1;
    grid-row-start: 2;
    
    padding: 10px;
    border-radius: 20px;
    margin: 5px;
    
    background-color: var(--rx-page-grid-bottom-color);
    
}
/**********************************************************************
 * EOF
 **********************************************************************/