  * {
    font-size: .98em;
  }
.container {  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
}
.hostlist { grid-area: 1 / 1 / 2 / 2; 
  justify-self: left; 
  align-self: center; }
.chartlist { grid-area: 1 / 2 / 2 / 3; 
  justify-self: left; 
  align-self: center; }
.activities { grid-area: 2 / 1 / 3 / 4; 
  justify-self: center; 
  align-self: center; }
.info { grid-area: 1 / 3 / 3 / 4; 
  justify-self: center; 
  align-self: center; 
  text-wrap: nowrap;}

  a:link, a:visited,  a:active {
    color: #5685bc;
    text-decoration: none;
  }
  a:hover {
    color:rgba(255, 0, 0, 0.650);
    text-decoration: none;
  }
  div.chart {
    height: 400px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 5px;
  }
  div.activities {
    display:inline;      
    text-align: center;
  }
  div.activities ul li {
    display: inline;
    padding: 0.3em;
    border: 1px solid #ccc;    
    border-radius: 5px;
    margin-bottom: 5px;
  }
  li.active {
    background-color: #eee;
  }
  li.inactive {
    background-color: #fff;
  }  
  li.disabled {
    color: #ccc;
    background-color: #fff;
  }
  li.i_active {
    background-color: #eee;
  }
  li.i_inactive {
    background-color: #fff;
  }  
  li.i_disabled {
    color: #ccc;
    background-color: #fff;
  }
  .zg-ul-select:not(.active)::after {
    background-image: url('../img/chevron.svg');
  }
