@import "styles/base.scss";


.table-row {
  margin: 15px 0;
}

.columns {
    padding: 0 0 0 0;
    margin: 0 0 15px 31px;
  
    &.header {
      font-size: 14px;
      @include media('<desktop') {
        display: none;
      }
     // @include user-select(none);
    }
  
    .col {
      vertical-align: middle;
      display: inline-block;
      margin: 0 -4px 0 0;
      padding: 0 0 0 20px;
    }
  
    .sort-title {
      position: relative;
      font: 600 14px/16px $font-family-base;
      color: $dark-blue;
      cursor: pointer;
      padding: 0 20px 0 0;
      display: inline-block;
      vertical-align: middle;
  
      &:after {
        content: "\e901";
        position: absolute;
        right: 0;
        color: $headers-arrow;
        top: 50%;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        font-size: 5px;
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: middle;
        display: none;
      }
  
      &.descending {
        &:after {
          display: inline-block;
          -ms-transform: translateY(-50%) rotate(180deg);
          -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
        }
      }
  
      &.ascending {
        &:after {
          display: inline-block;
          -ms-transform: translateY(-50%) rotate(0deg);
          -webkit-transform: translateY(-50%) rotate(0deg);
          transform: translateY(-50%) rotate(0deg);
        }
      }
    }
  }

.columns {
    .col {
      display: flex;
      align-items: center;
      .title-hidden {
        color: $headers-color;
        display: none !important;
        @include media('<desktop') {
          display: block !important;
        }
      }
  
      .btn-more {
        font: bold 14px/16px $font-family-base;
        transition: color .35s;
      }
  
      p,
      .ellipsis-multilines {
        margin: 0;
        white-space: pre-wrap;
        overflow-wrap: break-word;
  
        &.ellipsis-multilines {
          @include ellipsis(2);
        }
      }
    }
    &.header.row{
      position: relative;
      padding: 0 0 0 15px;
      margin: 0 0 10px;
      button {
        padding: none;
        border: none;
        outline: none;
        background: none;
      }
      .sort-title{
        cursor: pointer;
        color: #002d5b;
        @include media('<desktop') {
          font-size: 12px;
          display: none;
        }
        
      }
      .sort-directions {
        position: relative;
        margin-left: 5px; 
        &:before{
          content: "\2191";
          position: absolute;
          // bottom: 0.9em;
          left: 0.6em;
          color: #002d5b;
          font-size: 15px;
          // font-family: "icomoon" !important;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1px;
          display: inline-block;
          vertical-align: middle;
  
        }
        &:after {
          content: "\2193";
          position: absolute;
          // bottom: 0.9em;
          left: 0;
          color: #002d5b;
          font-size: 15px;
          // font-family: "icomoon" !important;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1px;
          display: inline-block;
          vertical-align: middle;
        }
        &.desc {
          &:after {
            opacity: 0.3;
          }
        }
  
        &.asc {
          &:before {
            opacity: 0.3;
          }
        }
        &.unsorted {
          &:before {
            opacity: 0.3;
          }
          &:after {
            opacity: 0.3;
          }
        }
      }
    }
  }
  
  .pager {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding-inline-start: 0px !important;
  
    .page-number {
      margin: 10px;
    }
  
    #wrapper > div.container-fluid > app-checkdrill > div > div:nth-child(2) > app-table > div > app-paging-component > nav > ul > li.center > input {
      position: inherit;
    }
    
    input {
      font-size: 14px;
      font-family: $font-family-base;
      margin: 10px;
    }
    li{
      width: 33.33333%;
      // min-width: 120px;
      min-width: 160px;
      // float: left;
      color: $dark-blue;
      &.center {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        @include media('<tablet') {
          flex-direction: column;
      }
      }
      &.previous{
        margin-right: -60px;
        a{
          // text-align: left;
          &:before{
            content: "\e910";
            font-family: 'icomoon';
            font-size: 2rem;
            display: inline-block;
            padding-right: 10px;
          }
        }
      }
      &.next{
        margin-left: -60px;
        a{
          // text-align: right;
          &:after{
            content: "\e911";
            font-family: 'icomoon';
            font-size: 2rem;
            display: inline-block;
            padding-left: 10px;
          }
        }
      }
      a{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 0px;
        span{
          background: transparent !important;
        }
        &:hover{
          color: $blue;
        }
      } 
    }
    li {
      a.disabled {
        color: #777;
        &:hover {
          color: #777;
          cursor: not-allowed;
        }
      }
    }
  }