body {
  padding: 20px;
  background: #000000;
  font-family: sans-serif;
}
.filter-title {
  margin: 4px;
  padding: 9px;
  color: white;
  border-radius: 5px 5px 0px 0px;
  border: 0;
  font-size: 24px;
  background: linear-gradient(to bottom, #999 , #000);
}
.filter-list {
  margin-top: 60px;
}
.filter-search {
  width: 100%;
  display: block;
  padding: 10px;
  border-radius: 5px 5px 0px 0px;
  border: 0;
  font-size: 24px;
}
.filter-list input:focus {
  outline: none;
}
.filter-list ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.filter-list li {
  border:1px solid #ccc;
  background: #2c3e50;
  width:300px
}
.filter-list ul li {
  list-style-type: none;
  padding: 10px 20px;
  margin: 0;
  color: white;
  border-top: 1px solid #196090
  line-height:1.5em;
}
.filter-list .list-item:hover {
  background: #2980b9;
}
#device-list{
  background: #aa3e50;
  margin-top: 10px;
}
#device-list li{
  border:1px solid #f44;
}
#scenario-list{
  background: #3498db;
}
#scenario-list li{
    border:1px solid #44f;
}
.title {
  margin: 4px;
  padding: 9px;
  color: white;
  border-radius: 5px 5px 0px 0px;
  border: 0;
  font-size: 24px;
}
.double li  { }
.triple li  { }