.dash-grid-container {
  display: grid;
  height: 90vh;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  margin: 12px;
}

.top {
  display: grid;
  grid-area: 1 / 1 / 2 / 2;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 0 12px;
  padding-bottom: 12px;
}

.cell1 { 
	grid-area: 1 / 1 / 2 / 2;
}

.cell2 { 
	grid-area: 1 / 2 / 2 / 3; 
}

.cell3 { 
	grid-area: 1 / 3 / 2 / 4; 
}

.middle {
  display: grid;
  grid-area: 2 / 1 / 3 / 2;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 0 12px;
  padding-bottom: 12px;
}

.cell4 { 
	grid-area: 1 / 1 / 2 / 2; 
}

.cell5 { 
	padding-left: 4px;
	grid-area: 1 / 2 / 2 / 3; 
}

.cell6 { 
	grid-area: 3 / 1 / 4 / 2; 
}


/* AV dashboard */

.avdash-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.7fr 1fr;
  grid-template-areas: "avcell1 avcell2 avcell3" "avtable avtable avtable";
  margin: 12px;
  height: 90vh;
}

.avtable { grid-area: avtable; padding-top: 12px; }

.avcell1 { grid-area: avcell1; padding-right: 12px;}

.avcell2 { grid-area: avcell2; padding-right: 12px;}

.avcell3 { grid-area: avcell3; }

/* Agent dashboard */

.agentdash-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "agentcell1 agentcell2 agentcell3" "agentcell4 agentcell5 agentcell6" "agentcell7 agentcell8 agentcell8";
  margin: 12px;
  height: 90vh;
}

.agentcell1 { grid-area: agentcell1; padding-right: 12px;}

.agentcell2 { grid-area: agentcell2; padding-right: 12px;}

.agentcell3 { grid-area: agentcell3; }

.agentcell4 { grid-area: agentcell4; padding-right: 12px; padding-top: 12px;}

.agentcell5 { grid-area: agentcell5; padding-right: 12px; padding-top: 12px;}

.agentcell6 { grid-area: agentcell6; padding-top: 12px;}

.agentcell7 { grid-area: agentcell7; padding-right: 12px; padding-top: 12px;}

.agentcell8 { grid-area: agentcell8; padding-top: 12px;}


