#classes .card {
  margin: 5px;
  height: 5px;
  border: 0px;
}

#classes .card-empty {
  color: #595959;
  font-weight: bold;
  font-size: 15px;
  background-color: #000;
}

#classes .card-darkgrey {
  border-radius: 20px;
  background-color: #222f3d;
  color: #fff;
}

#classes .card-green {
  border-radius: 20px;
  background-color: #96ff00;
  color: #fff;
}

#classes .card-half-green-top {
  border-radius: 20px;
  background: linear-gradient(0deg, #222f3d, #222f3d 49%, #96ff00 51% ); 
  color: #fff;
}

#classes .card-half-green-bottom {
  border-radius: 20px;
  background: linear-gradient(0deg, #96ff00, #96ff00 49%, #222f3d 51% ); 
  color: #fff;
}

#classes .card-purple {
  border-radius: 20px;
  background-color: #ff0082;
  color: #fff;
}

#classes .card-half-purple-top {
  border-radius: 20px;
  background: linear-gradient(0deg, #222f3d, #222f3d 49%, #ff0082 51% ); 
  color: #fff;
}

#classes .card-half-purple-bottom {
  border-radius: 20px;
  background: linear-gradient(0deg, #ff0082, #ff0082 49%, #222f3d 51% ); 
  color: #fff;
}

#classes .card-blue {
  border-radius: 20px;
  background-color: #2ea7ff;
  color: #fff;
}

#classes .card-half-blue-top {
  border-radius: 20px;
  background: linear-gradient(0deg, #222f3d, #222f3d 49%, #2ea7ff 51% ); 
  color: #fff;
}

#classes .card-half-blue-bottom {
  border-radius: 20px;
  background: linear-gradient(0deg, #2ea7ff, #2ea7ff 49%, #222f3d 51% ); 
  color: #fff;
}

#classes * {
  box-sizing:border-box;
  padding:0;
  margin:0;
  outline: 0;
}

#classes ul {
  display:flex;
  top:0px;
  z-index:10;
  padding-bottom:14px;
}

#classes li {
  list-style:none;
  flex:1;
}

#classes li:last-child {
  border-right:1px solid #DDD;
}

#classes button {
  width:100% !important;
  border: 1px solid #DDD;
  border-right:0;
  border-top:0;
  padding: 10px;
  background:#FFF;
  font-size:14px;
  font-weight:bold;
  height:60px;
  color:#999
}

#classes li.active button {
  background:#F5F5F5;
  color:#000;
}

#classes table {
  table-layout:fixed;
  border-collapse: separate;
  border-spacing: 10px;
  width:100%;
}

#classes th {
  display:none;
}

#classes td, th {
  height:50px;
  border: 1px solid #DDD;
  padding:10px;
  empty-cells:show;
  text-align: right;
}

#classes td+td, th+th {
  text-align:center;
  display:none;
}

#classes td.default {
  display:table-cell;
}

#classes .bg-purple {
  border-top:3px solid #714e71;  
  border-bottom:1px solid #e2cee3;  
  background-color:#e2cee3;
}

#classes .sep {
  background:#b079b1;
  font-weight:bold;
  color:white;
  font-size:16px;
  border-top:1px solid #b079b1;
}

#classes .donotshow {
  border:0;
  background:none;
}

@media (min-width: 991px) {
  #classes ul {
    display:none;
  }
  #classes td,th {
    display:table-cell !important;
  }
  #classes td,th {
    width: 280px;
  }
  #classes td+td, th+th {
    width: auto;
  }
}