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


  body{
       background-color: #32312f;
       font-family: ubuntu;
       padding:20px;
       width:100%;

  }

  .tableHeader{
   font-size: larger;
   color:white;
   font-weight:900;
   padding-left: 20px;
  }

  table{
      width: 100%;
      border-collapse: collapse;
  }

  table thead {
       background-color: blue;
       padding:15px;
       color:white;
     
  }

  .table thead tr th {
      font-size: 14px;
      font-weight: medium;
      letter-spacing: 0.35px;
      color: #fff;
      opacity: 1;
      padding: 12px;
      vertical-align: top;
      border: 1px solid #dee2e685;

  }


  table tbody tr td {
      font-size: 14px;
      letter-spacing: 0.35px;
      font-weight: normal;
      color: #f1f1f1;
      background-color: #3c3f44;
      padding: 8px;
      text-align: center;
      border: 1px solid #dee2e685;
  }


  .searchInput{
      width: 50%;
      height: 30px;
      margin: auto;
      outline: none;
      border: none;
      border-radius: 4px;
      padding-left: 10px;
      margin-bottom: 10px;
  }

  .searchInput:focus{
    outline: none;
    border: 2px solid blue;
 
  }


  @media (max-width:768px){
      table thead{
          display:none;

      }

      table, table tbody, table tr, table td {
          display: block;
          width: 100%;
      }

      table tr {
          margin-bottom: 15px;
      }

      table tbody tr td {
          text-align: right;
          padding-left: 30%;
          position: relative;
      }


      table td:before{
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 15px;
        font-weight: 600;
        font-size: 14px;
        text-align: left;
        color:white;
        text-transform: uppercase;
      }
  }