.list {
    font-family:sans-serif;
  }
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
  }

  .table-responsive > table {
    width: 100%;
  }
  td {
    padding:10px; 
    border:solid 1px #eee;
  }
  
  input {
    border:solid 1px #ccc;
    border-radius: 5px;
    padding:7px 14px;
    margin-bottom:10px
  }
  input:focus {
    outline:none;
    border-color:#aaa;
  }
  .sort {
    padding:8px 30px;
    border-radius: 6px;
    border:none;
    display:inline-block;
    color:#fff;
    text-decoration: none;
    background-color: #28a8e0;
    height:30px;
  }
  .sort:hover {
    text-decoration: none;
    background-color:#1b8aba;
  }
  .sort:focus {
    outline:none;
  }
  .sort:after {
    display:inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    content:"";
    position: relative;
    top:-10px;
    right:-5px;
  }
  .sort.asc:after {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    content:"";
    position: relative;
    top:4px;
    right:-5px;
  }
  .sort.desc:after {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
    content:"";
    position: relative;
    top:-4px;
    right:-5px;
  }