body{ 
    font-family: Arial, Helvetica, sans-serif;
}
tfoot{
  display: table-row-group;
}
.injection {
  font-size: 1.2em;
  float: right;
}
input#mw_input{
  border-radius: 15px;
}
#map{
    width: 100%;
    height: 100%;
}
.table-layout .clickedrow td{
    background-color: #caaf8f;
  }
  
  .table-layout {
    /*text-align: center;*/
    border: 1px solid black;
    border-collapse: collapse;
    font-family: arial-narrow, helvetica, sans-serif;
    font-weight: 100;
    font-size: 13px;
    margin: 0 auto 0;
    margin-bottom: 20px;
    float:left;
    height: 100px;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    height: 100%;
  }
  
  .table-layout td,
  .table-layout th {
    border: 1px solid grey;
    padding: 3px 3px 0;
    height: 20px;
    line-height: 20px;
    width: 100px;
    resize:horizontal; 
    overflow:auto;
  }
  
  .table-layout td {
    text-align: left;
    background-color: #fff;
  }
  
  .table-layout th {
    background-color: #bac3c9;
    height: 22px;
    line-height: 22px;
  }

  
  
  /* .table-layout .selected td{
    background-color: rgb(55, 114, 168);
  } */

  #page {
    height: 100vh;
    background-color: #fff;
    display: grid;
    grid-template-areas: 'header header header header header' 'leftcol leftdragbar tabs tabs tabs' 'leftcol leftdragbar topdragbar topdragbar topdragbar' 'leftcol leftdragbar tabpages rightdragbar rightcol' 'botdragbar botdragbar botdragbar botdragbar botdragbar' 'footer footer footer footer footer';
    grid-template-rows: min-content 8fr 6px 3fr 6px 0.2fr;
    grid-template-columns: 2fr 6px 6fr 6px;
  }
  
  
  /*****************************/
  
  #header {
   /* background-color: lightblue; */
    overflow: auto;
    grid-area: header;
    font-size: 1.8em;
    text-align: center;
  }
  
  #leftcol {
    background-color: #fff;
    overflow: auto;
    grid-area: leftcol;
  }
  
  #leftdragbar {
    background-color: grey;
    grid-area: leftdragbar;
    cursor: ew-resize;
  }
  
  #topdragbar {
    background-color: grey;
    grid-area: topdragbar;
    cursor: ns-resize;
  }
  
  #botdragbar {
    background-color: grey;
    grid-area: botdragbar;
    cursor: ns-resize;
  }
  
  #tabs {
    background-color:#fff;
    overflow: auto;
    grid-area: tabs;
  }
  
  #tabpages {
    background-color: #fff;
    overflow: auto;
    grid-area: tabpages;
  }
  
  /* #rightdragbar {
    background-color: black;
    grid-area: rightdragbar;
    cursor: ew-resize;
  }
  
  #rightcol {
    background-color: #aaaaaa;
    overflow: auto;
    grid-area: rightcol;
  } */
  
  #footer {
    background-color: white;
   /* overflow: auto;*/
    grid-area: footer;
  }

  /*Legend specific*/
.legend {
    padding: 6px 8px;
    font: 14px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
    /*border-radius: 5px;*/
    line-height: 24px;
    color: #555;
  }
  .legend h4 {
    text-align: center;
    font-size: 16px;
    margin: 2px 12px 8px;
    color: #777;
  }
  
  .legend span {
    position: relative;
    bottom: 3px;
  }
  
  .legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin: 0 8px 0 0;
    opacity: 0.7;
  }
  
  .legend i.icon {
    background-size: 18px;
    background-color: rgba(255, 255, 255, 1);
  }