.salaxy-component{
  
  table{
    td{
      &.align-middle{
        vertical-align: middle;
      }
      &.align-bottom{
        vertical-align:bottom;
      }
     &.td-status, .status{
        line-height:1.1em;
      }
      &.strong{
        font-weight:bold;
      }
      &.text-center{
        text-align: center;
      }
    }
    th{
      &.text-center{
        text-align: center;
      }
      &.align-middle{
        vertical-align: middle;
      }
      &.align-bottom{
        vertical-align:bottom;
      }
      &.small{
        font-size:0.8em;
        line-height:1.3em;
      }
      &.strong{
        font-weight:bold;
      }
    }
  }
  .salaxy-odata-panel {
    &.list-panel{
      .salaxy-odata-table{
        overflow: auto;
        max-height: 264px;
        min-height:264px;
        salaxy-spinner {
          top:28%;
        }
        
      }
      &.with-footer{
        .salaxy-odata-table{
          max-height: 300px;
          min-height:300px;
        }
        
      }
    }
  }
  .salaxy-odata-table {
    
    position: relative;
    salaxy-spinner {
      position: absolute; 
      width: 100%;
      top: 125px;
      display: none;
    }
    .salaxy-odata-actions{
      .form-control{
        // leave space for button
        width:calc(100% - 70px);
      }
    }
    &.salaxy-odata-table-loading salaxy-spinner {
      display: initial;
    }
    &.salaxy-odata-table-loading tbody {
      opacity: 0.7;
    }
    .salaxy-odata-no-data {
      height: 200px;
      text-align: center;
    }
    .salaxy-odata-table-sort {
      margin-left: 4px;
    }
    input.salaxy-odata-table-search, .salaxy-odata-table-search {
      width: 100%;
      font-weight: normal;
      border-radius: 2px;
      font-size: 0.9em;
      color: #000;
      display: inline-block;
    }
    input.salaxy-odata-table-search{
      padding: 6px 10px;
      border: 1px solid #ddd;
    }
  }

  &.salaxy-worker-employment {
    .salaxy-calc-rows-editor-btns {
      width: 75px;
    }
  }

  &.salaxy-payroll{
    
    .worker-calculations-row {
      .table > thead > tr > th{
        border-bottom:0;
      }
     
      table{
        tbody tr  td{
          border-top:0px;
          vertical-align: middle;
        }
        
        tfoot{
          td, th{
            padding: 5px 2px;
            border-top:0;
          }
          tr.total{
            td, th{
              border-top:1px solid #ddd;
            }
          }
        }
      }
    }
  }

  &.salaxy-ui-translator {
    tbody {
      display: block;
      overflow: auto;
    }

    thead,
    tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
  }

  .table-responsive{
    @media screen and (max-width:767px){
      padding-top:30px;
      padding-bottom:30px;
      >.table {
        >.tbody {
          >.tr{
            >.td{
              &.td-name{
                white-space:normal;
              }
            }
          }
        }
      }
    }
  }
  .list-panel{
    .table-responsive{
      @media screen and (max-width:767px){
       
        >.table {
          >tbody {
            >tr{
              >td{
                font-size:0.75em;
                &.td-name{
                  white-space:normal;
                }
              }
            }
          }
        }
      }
    }
  }
  
  .table-row {
    min-height: 30px;
    line-height: 1.2em;
    padding-top: 10px;
    @media screen and (max-width:375px){
      font-size:0.9em;
    }
    &:after{
      border-bottom: 1px solid #ddd;
      width: calc(~'100% - @{grid-gutter-width}');
      height: 10px;
      margin: auto;
    }
    &.mt30{
      margin-top:30px;
    }
    
  }

  table{
    th{
      .table-filter-container{
        margin-top:3px;
        .dropdown, .btn, input{
          display: inline-block;
          margin: 0 0 0 2px;
        }
        .btn-sm{
          padding: 4px 8px;
        }
        .btn{
          min-width:130px;
        }
        button:active{
          border-width: 1px;
        }
        .dropdown-menu{
          min-width:130px;
          a{
            width: 100%;
            padding: 5px 7px;
            margin: 0;
          }
        }
        input{
          padding: 6px 10px;
          font-weight: normal;
          border: 1px solid #ddd;
          border-radius: 2px;
          font-size: 0.9em;
          color: #000;
          display:inline-block;
         // max-width:120px;
        }
      }
    }
  }
  .missing-info{
    display: block;
    font-size: 0.8em;
  }
  .salaxy-tax-cards-list{
    table{
        td{
          &.align-middle{
            vertical-align: middle;
          }
          &.align-bottom{
            vertical-align:bottom;
          }
        }
        th{
          &.text-center{
            text-align: center;
          }
          &.align-middle{
            vertical-align: middle;
          }
          &.align-bottom{
            vertical-align:bottom;
          }
        }
      span{
        &.paidsalaries, &.incomelimit{
          display: block;
        }
      }
    }
  }
  
  table{
    td{
      &.td-avatar{
        width:42px;
        salaxy-avatar{
          font-size:40px;
        }
      }
      &.td-avatar-1line{
        width: 46px;
        salaxy-avatar{
          font-size: 28px;
        }
      }
      .sm-description{
        font-size:12px;
      }
    }
  }
   
  
  @media screen and  (max-width:767px){
    table, .table{
      >tbody, >thead{
        >tr{
          >td, >th{
            padding:8px 6px;
            font-size:0.95em;
          }
        }
      }
      .btn-link{
        font-size:12px;
      }
      td{
        .sm-description{
          text-overflow: ellipsis;
          max-width: 190px;
          display: block;
          overflow:hidden;
        }
      }
    }
    .salaxy-worker-list{
      table{
        tbody > {
          >tr{
            >td, >th{
              a.cell-link{
                color:@text-color;
                width:100%;
                display:block;
                &:hover{
                  text-decoration:none;
                }
                
               
              }
            }
          }
        }
      }
  }
}

table{
  td{
    .payroll-title, .payroll-info{
      display: block;
      @media screen and (max-width:767px){ 
        width: 100px;
        word-break: break-word;
        white-space: normal;
        line-height:1.1em;
      }
    }
    .payroll-info{
      margin-top:4px;
    }
    
  }
}
  @media screen and  (max-width:480px){
    .table-responsive{
      padding-top:0;
      padding-bottom:0;
    }
    table, .table{
      >tbody, >thead, >tfoot{
        >tr{
          >td, >th{
            padding:8px 4px;
            font-size:0.85em;
           
          }
        }
      }
      
      
    }
  
      table{
        tbody > {
          tr{
            &:hover{
              background-color:@table-bg-hover;
            }
          }
        }
        
        td{
          &.td-avatar{
            width:45px;
            salaxy-avatar{
              font-size:30px;
            }
          }
          &.td-name{
            white-space: normal;
          }
          a{
            color:@text-color;
            &:hover{
              text-decoration:none;
            }
          }
        }
      }
  }

  .table-filter-container-mobile, .table-header-container-mobile{
    display: block;
    width: 100%;
    padding: floor((@grid-gutter-width / 6)) floor((@grid-gutter-width / 3));
    background-color: @table-bg-accent;
  }
  .table-header-container-mobile{
    .btn{
      margin-top:floor((@grid-gutter-width / 6));
    }
  }
  .table-filter-container-mobile{
    input{
      width: 100%;
      padding: 4px 7px;
      text-align:center;
      border-radius: @border-radius-small;
      margin-bottom: floor((@grid-gutter-width / 3));
      border-style: solid;
      border-width: 1px;
      border-color:@table-border-color;
    }
    .sort-by-select{
      width: 100%;
      margin-bottom:floor((@grid-gutter-width / 6));
      display: block;
      .dropdown-menu{
        width: 100%;
      }
    }
  }
  &.salaxy-accounting-target-editor {
    .table {
      tr.primary>td {
        color: #009fd8;
        font-weight: bold;
      }
    }
  }

  #EarningsToDate td{
    font-size: 10px;
  }

  #HeaderData table {
    border-collapse: separate !important;    
  }

  #PayDetails {
    border-collapse: separate !important;
  }

  #PayDetails thead tr .valueColumn{
    text-align: right;
  }

  #PayDetails tbody tr .valueColumn{
    text-align: right;
  }

  

}