/*
==============================================================================
Grid -  Set the template for the grid
        Position the grid lines for rows and columns
        Creates areas defined by grid line numbers
            4 columns
            4 rows
        Styling comoon background and colour site wide can go here
        otherwise use the original divs to style elements within each area
            

==============================================================================
*/

.item-a {
  grid-area: header /*| 1 /col1-start / last-line / 5*/;
  grid-column: 1 / 3;
  grid-row: 1 /2;
font-family: OpenSans;
 
}
.item-b {
  grid-area: main /*| 2 / col2-start / last-line / 4*/;
   grid-column: 1 / 2;
  grid-row: 2 / 3;
  /*grid-template-columns: subgrid;
  grid-template-rows: subgrid;*/
  font-family: OpenSans;
}

/*.subitemc1 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.subitemc2 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}*/

.rightsidebar {
  grid-area: sidebar /*| 3 / col4-start / last-line / 5*/;
   grid-column: 2 / 3;
  grid-row: 2 / 3;
font-family: OpenSans;
}



.item-d {
  grid-area: footer /*| 4 / col1-start / last-line / 4*/;
     grid-column: 1 / 3;
  grid-row: 3 / 4;
 	background-color:rgb(77,111,129);
 	font-family: OpenSans;
}


.container {
  display: grid;
  grid-template-columns: auto 400px;
  grid-template-rows: 125px auto 55px;
  grid-gap: 5px;
  grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";

}



.chart1-holder {
   /* grid-template-columns: repeat(2, 1fr);*/
  /* this is the same as grid-template-rows: 300px 300px; */
 /* grid-template-rows: repeat(1, 300px);*/
  
  grid-area: Chart1 /*| 4 / col1-start / last-line / 4*/;
     grid-column: 2 / 3;
     grid-row: 1 / 2;
}

.chart23-holder {
   /* grid-template-columns: repeat(2, 1fr);*/
  /* this is the same as grid-template-rows: 300px 300px; */
 /* grid-template-rows: repeat(1, 300px);*/
  
     grid-area: Chart23 /*| 4 / col1-start / last-line / 4*/;
     grid-column: 1 / 2;
     grid-row: 1 / 2;
}

.chart-holder {
    display: grid;
   /* align-items: center;*/
         grid-template-columns: minmax(240px,1fr), minmax(240px,1fr);
         grid-template-rows: 500px;
         grid-template-areas: 
    "Chart23 Chart1";
}