.table__container {
    display: flex;
    align-items: center;
    justify-content: center;
     width: 100%; 
    height: 100%; 
    font-weight: 700;
    font-size: 1.4rem;
    overflow-y: scroll;
}

.responsive-table {
 
} 

.responsive-table li {
        border-radius: 3px;
        padding: 1rem 1rem;
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.75rem;
      }
      .table-header {
        background-color: var(--color-primary);
        font-size: 1.4rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #fff;
      }
      .table-row {
        background-color: #fff;
        box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
        transition: all .9s;
        cursor: pointer;
        text-transform: uppercase;
  
      }
  
      .table-row:hover {
          background-color: rgb(243, 184, 162);
          color:#fff;
      }
  
      .table-row__selected {
          background-color: rgb(247, 104, 9);
          color:#fff;
        }
  
  
      .table-row--side {
        background-color: transparent;
        transition: all .9s;
        cursor: pointer;
        text-transform: uppercase;
      }

    .table-row--side:hover {
        color: var(--color-primary);
    }

   .table-row--side__selected {
     background-color: rgb(247, 104, 9);
     color:#fff;
   }

    .table-row--light {
      background-color: rgba(#000, .8);
      box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
      transition: all .9s;
      cursor: pointer;
      text-transform: uppercase;
       
    }

    .table-row--light:hover {
        background-color: rgb(243, 184, 162);
        color: #fff;
    }


    .table-row--light__selected {
        background-color: rgb(247, 104, 9);
        color:#fff;
      }

    .col-5 {
        flex-basis: 5%;
        pointer-events: none;
      }
      .col-10 {
        flex-basis: 10%;
        pointer-events: none;
      }
      .col-15 {
        flex-basis: 15%;
        pointer-events: none;
      }
      .col-20 {
        flex-basis: 20%;
        pointer-events: none;
      }
    .col-25 {
      flex-basis: 25%;
      pointer-events: none;
    }
    .col-30 {
      flex-basis: 30%;
      pointer-events: none;
    }
    .col-35 {
      flex-basis: 35%;
      pointer-events: none;
    }
    .col-40 {
      flex-basis: 40%;
      pointer-events: none;
    }
    .col-50 {
        flex-basis: 50%;
        pointer-events: none;
      }
      .col-60 {
        flex-basis: 60%;
        pointer-events: none;
      }
      .col-75 {
        flex-basis: 75%;
        pointer-events: none;
      }
      .col-100 {
        flex-basis: 100%;
        pointer-events: none;
        text-align: center;
      }

    @media all and (max-width: 767px) {
      .table-header {
        display: none;
      }
 
      li {
        display: block;
      }
      .col {
        
        flex-basis: 100%;
        
      }
      .col {
        display: flex;
        padding: .8rem 0;
       
      }

      .col:before {
        color: #6C7A89;
        padding-right: 10px;
        content: attr(data-label);
        flex-basis: 50%;
        text-align: right;
      }
    }