@import "styles/base.scss";

li .form-control {
    // width: auto;
    display: inline;
    position: relative;
}

.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;
      width: auto;
    }
    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: "\e90a";
            font-family: 'icomoon' !important;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            font-size: 14px;
            margin: 0 7px 0 0;
            display: inline-block;
            vertical-align: top;
            
          }
        }
      }
      &.next{
        margin-left: -60px;
        a{
          // text-align: right;
          &:after{
            content: "\e90b";
            font-family: 'icomoon' !important;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            font-size: 14px;
            margin: 0 0 0 7px;
            display: inline-block;
            vertical-align: top;
          }
        }
      }
      a{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 0px;
        color: $blue;
        span{
          background: transparent !important;
        }
        &:hover{
          color: $light-blue;
          cursor: pointer;
        }
      } 
    }
    li {
      a.disabled {
        color: #777;
        &:hover {
          color: #777;
          cursor: not-allowed;
        }
      }
    }
  }