.table-comp__container{
    border:1px solid #ccc;
}

.table-comp-left .table-comp__container{
    border-right-width: 0px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.table-comp-right .table-comp__container{
    border-right-width: 1px;
    border-left-width: 0px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.table-comp-right th{
    border-radius: 0px 4px 0px 0px !important;
}

.table-comp-left th{
    border-radius: 4px 0px 0px 0px !important;
}

.table-comp{
    border-spacing: 0px 10px;
    border-collapse: separate;
    border-bottom: 2px solid #ef7d00;
    width:100%;
}

.table-comp--light-gray{
    border-spacing: 0px;
    /* make the bottom border gray*/
    /* border-color:#f5f5f5; */
    /* border-bottom: 1px solid #ccc; */
}

.table-comp--orange{
    border-color:#ef7d00;
    border-spacing: 0px;
    border-bottom: 2px solid #ef7d00;
}

.table-comp--green{
    border-spacing: 0px;
}

.table-comp--red{
    border-spacing: 0px;
}

.table-comp--red .table-comp__header{
    background-color:red;
    border-bottom: 1px solid red;
    border-left: 1px solid red;
}

.table-comp--red .table-comp__header:last-child{
    border-right: 1px solid red; 
}

.table-comp--red .table-comp__header:first-child{
    border-left: 1px solid red; 
}

.table-comp__cell--red-border{
    border-bottom:1px solid red;
}

.table-comp--green .table-comp__header{
    background-color:#66db23;
    border-bottom: 1px solid #66db23;
    border-left: 1px solid #66db23;
}

.table-comp--green .table-comp__header:last-child{
    border-right: 1px solid #66db23; 
}

.table-comp--green .table-comp__header:first-child{
    border-left: 1px solid #66db23; 
}

.table-comp__cell--green-border{
    border-bottom:1px solid #66db23;
}

.table-comp--m-top{
    margin-top: 40px;
}

/*styling borders does not work for the whole row, so adding border to the last header in the row achieves the effect*/

.table-comp__header{
    padding: 3px 5px;
    margin-bottom: 20px;
    color: #ffff;
    background-color: #ef7d00;
    font-size: 16px;
    font-weight: 400;
}

.active-users-table .table-comp__header {
    font-size: 14px;
}

.table-comp__header::after{
    height: 20px;
    content: "";
    position:relative;
}


.table-comp__header--a-l{
    text-align:right;
}

.table-comp__header:last-child{
    border-right:2px solid #ef7d00;
    border-top-right-radius:4px;
}

.table-comp__header:first-child{    
    border-left:2px solid #ef7d00;
    border-top-left-radius:4px;
}

.table-comp--light-gray .table-comp__header{
    color: inherit;
    background-color: #f5f5f5;
    /* adds a darker gray color on top and bottom of header*/
    /* border-top:1px solid #ccc; */
    /* border-bottom:1px solid #ccc; */
    border-left:1px solid #ccc;
}

.table-comp--light-gray .table-comp__header:last-child{
    border-right:1px solid transparent; 
}

.table-comp--light-gray .table-comp__header:first-child{
    border-left:1px solid transparent; 
}

.table-comp__cell--light-gray-border{
    border-bottom:1px solid #ccc;
}

.table-comp__cell {
    padding-top:4px;
    padding-right:4px;
  }
  
  .table-comp__cell:first-child {
    padding-left:6px;
    padding-right:0;
  }

  .table-comp__row--trans-border .table-comp__cell {
    border-bottom: 1px solid transparent;
  }

  .table-comp__row:last-of-type .table-comp__cell {
    border-bottom: 1px solid transparent;
  }

  .table-comp__empty-cell{
    padding:6px;
  }

.table-comp__page-index{
    display:inline-block;
    vertical-align: super;
    width:24px;
    height:24px;
}

.table-comp__pagination-btn{
    width:24px;
    height:24px;
    display: inline-block;
    background-color:transparent;
}

 /* .table-comp__body:before {line-height:1em; content:"\200C"; display:block;}  */