* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {font-family: Arial, Helvetica, sans-serif;
    font-size:20pt; 
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 25px calc(100vh - 70px) 45px;
    grid-template-areas: 
        "hd hd hd hd hd hd hd hd"
        "sl mn mn mn mn mn mn sr"
        "ft ft ft ft ft ft ft ft";
    gap: 0.1rem;}
  
  
  .el{
    color: #000;
    display: grid;
    place-content: center;
  }
  
  .header{
    background-color: #fff;
    grid-area: hd;
  }
  
  .sidebarLeft{
    grid-area: sl;
    background-color: #fff;
  }
  
  .sidebarRight{
    grid-area: sr;
    background-color: #fff;
  }
  
  .container {  display: grid;
    display: grid;
    grid-template-columns: repeat(2, 1fr 2fr);
    gap: 0.1rem;
    grid-area: mn;
  }
  
  #mainColr, #complColr {
      display:flex;
      align-items:center;
      justify-content:center;
      text-align: center;
      font-size: medium;
      font-family: Arial, Helvetica, sans-serif;
      padding-top: 10px;
  }
  
  .footer {
    grid-area: ft;
    background-color: #fff;
    color: #3F367B;
    font-size: 14px;
  }
  
  .map {
    display: grid;
    place-content: center;
  }
  
  .box:first-child {
    grid-column: 1/9;  /* all 8 columns */
    }