.table {
  width: 100%;
  table-layout: fixed;

  .mat-header-row {
    min-height: 56px;
    height:56px;
  }


  .mat-header-cell,.mat-cell {
    width: auto;
  }

  .mat-form-field-wrapper {
    padding-bottom: 0px;
  }

  .mat-row:hover {
    color: $black;
    background-color: $grey-11;

    .mat-table-sticky {
      color: $black;
      background-color: $grey-11;
    }
  }

  .mat-header-cell, .mat-cell {
    border-right:1px solid rgba(33, 37, 41, 0.125);
    border-bottom-width:0px !important;
  }

  .mat-header-cell:last-child {
    border-right: none;
    padding: 0.75rem 0.75rem;
  }

  .mat-cell {
    margin-bottom: 0.5rem;
    padding: 0 0.75rem;
    flex-direction: column;

    & .mat-button-base:not(:first-child) {
      margin-top: 0.5rem;
    }
  }

  .mat-cell:first-child {
    padding: 0.75rem 0.75rem 0;
  }

  .mat-cell:last-child {
    border-right: none;
    padding: 0 0.75rem 0.75rem;
  }

  .table__elipsis.mat-cell:last-child {
    padding: 0 0.75rem;
  }


  .mat-header-cell:first-of-type, .mat-cell:first-of-type, .mat-footer-cell:first-of-type {
    padding-left: 0.75rem;
  }

  .mat-header-cell {
    padding: 0.75rem 0.75rem;
    @include ui-typography-reposive($fontConfig-sm,$fontConfig-m,$fontConfig-l, input);
  }

  .mat-cell, .mat-footer-cell {
    @include ui-typography-reposive($fontConfig-sm,$fontConfig-m,$fontConfig-l, input);
  }

  .mat-header-cell:not(:first-child) {
    display :none;
  }

  .mat-header-cell:first-child {
    .table__header {
      display:none;
    }
    .table__header--mobile {
      display: block;
    }
  }

  .mat-header-cell:first-child, .mat-cell {
    display:flex;
    border-right: none;
  }

  .mat-header-cell:first-child {
    align-items: center;
    width:100% !important;
  }

  .mat-header-row {
    display:flex;

  }

  .table__elipsis {
    padding: 0;

    .btn__table__elipsis .mat-button-wrapper mat-icon{
      margin-right: 0;
    }
  }

  .table__elipsis .mat-icon {
    transform:rotate(90deg);
  }


  @media print, (min-width: 992px) {
    .mat-header-cell:first-child, .mat-header-cell:not(:first-child), .mat-cell {
      display: table-cell;
      border-right: 1px solid rgba(33, 37, 41, 0.125);
    }

    .mat-header-cell:nth-last-child(2), .mat-cell:nth-last-child(2) {
      border-right: none;
    }

    .mat-header-cell.mat-table-sticky:first-child, .mat-cell.mat-table-sticky:first-child {
      border-right: none;
      box-shadow: inset -1px 0px 0px 0px rgba(33, 37, 41, 0.125);
    }

    .mat-header-cell:last-child, .mat-cell:last-child {
      box-shadow: inset 1px 0px 0px 0px rgba(33, 37, 41, 0.125);
    }


    .mat-cell {
      flex-direction: row;

      & .mat-button-base:not(:first-child) {
        margin-top: 0;
      }
    }

    .mat-header-cell:first-child {
      border-right: 1px solid rgba(33, 37, 41, 0.125);;
      width: auto;
      align-items: unset;
    }

    .mat-cell:first-child {
      padding: 0 0.75rem;
    }

    .mat-cell:last-child {
      padding: 0 0.75rem;
    }

    .table__elipsis.mat-cell:last-child {
      padding: 0;
    }

    .mat-header-cell:first-child .table__header {
      display:block;
    }

    .mat-header-cell:first-child .table__header--mobile {
      display:none;
    }

    .mat-header-row {
      display:table-row;
    }

    .table__elipsis .mat-icon {
      transform:none;
    }
  }

}

.table__container {
  text-align: left;
  display: block;
  overflow-x:auto;
}

.table__contextual-menu {

  .mat-menu-item {
    line-height: 1.5;
    padding: .35rem .85rem;
    font-size: $contextual-menu-dropdown-item-font-size;
    height: auto;
  }

  a.mat-menu-item,
  a.mat-menu-item:link,
  a.mat-menu-item:visited {
    width:calc(100% - 4px);
    margin: 0 auto;
  }

  a.mat-menu-item:focus,
  a.mat-menu-item:active {
    outline: none;
  }

  a.mat-menu-item:focus:active {
    outline: 2px dotted $ochre;
  }

  a.mat-menu-item:hover {
    border-bottom: none;
  }
}

@media print,(max-width:767px) {
  .table__contextual-menu {
    .mat-menu-item {
      font-size: $contextual-menu-dropdown-item-sm-font-size;
    }
  }
}

.table__header {
  position: relative;

  &__title {

    .mat-sort-header-container {
      &:hover {
        color: $ochre;
        cursor: pointer;
      }
    }
  }
}

.table__header__title--mobile {
  display: none;
}

@media(max-width: 992px) {

  .table__header__title--mobile {
    width:100%;
    display: block;
    font-weight: bold;
  }
}


@media (max-width: 768px) {
  .mat-table[matTableResponsive] {
    .mat-header-row {
      display: flex;
      flex-wrap: wrap;
      height: auto;
      position: sticky;
      top: 0;
      z-index: 2;

      .mat-header-cell {
        display: flex;
        flex: 1;
        align-items: center;
        padding: 1rem 0.5rem;
        justify-content: space-around;

        & > .mat-sort-header-container {
          padding-left: 15px; // padding is used to center the header table cells, due to the width of the sort icon
        }

        &:not([mat-sort-header]),
        &.mat-sort-header-disabled,
        &.mat-column-actions {
          display: none;
        }
      }
    }

    .mat-row {
      height: auto;

      .mat-cell:not(.mat-column-actions) {
        display: grid;
        grid-template-columns: 50% 50%;
        padding: 0.5rem;
        text-align: right;
        word-break: break-word;

        & > * {
          grid-column: 2;
        }

        &:before {
          content: attr(data-column-name);
          text-align: left;
        }
      }

      .mat-column-actions {
        display: flex;
        justify-content: center;
        padding: 0 0.5rem;

        & > button {
          margin: 0.5rem 0;
        }
      }

      &:last-of-type .mat-cell:last-of-type {
        border: none;
      }

      &:not(:last-of-type) .mat-cell:last-of-type {
        border-bottom: 0.5rem solid #fafafa;
      }
    }
  }

  .mat-card,
  .mat-expansion-panel {
    .mat-table[matTableResponsive] {
      border: 0.5rem solid #fafafa;
    }
  }
}



/*
.mat-table-container {
  width: 100%;
  overflow: auto;
}
mat-table {
  width: 2428px;
}


mat-header-row {

  .mat-header-cell {
    font-size: 1rem;
    color: black;
  }

  .mat-header-cell:hover{
    color:map_get($mat-accent, 500);
    cursor: pointer;
  }
}*/

/*
@media(min-width: 992px) {
  mat-header-cell , mat-cell {
    word-wrap: break-word !important;
    white-space: unset !important;
    flex: 0 0 200px !important;
    width: 200px !important;
    overflow-wrap: break-word;
    word-wrap: break-word;

    word-break: break-word;

    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  mat-header-cell.mat-column-name , mat-cell.mat-column-name {
    word-wrap: break-word !important;
    white-space: unset !important;
    flex: 0 0 200px !important;
    width: 200px !important;
    overflow-wrap: break-word;
    word-wrap: break-word;

    word-break: break-word;

    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  mat-header-cell.mat-column-code, mat-cell.mat-column-code {
    word-wrap: break-word !important;
    white-space: unset !important;
    flex: 0 0 150px !important;
    width: 150px !important;
    overflow-wrap: break-word;
    word-wrap: break-word;

    word-break: break-word;

    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  }


  mat-header-cell.mat-column-projectName, mat-cell.mat-column-projectName {
    word-wrap: break-word !important;
    white-space: unset !important;
    flex: 0 0 750px !important;
    width: 750px !important;
    overflow-wrap: break-word;
    word-wrap: break-word;

    word-break: break-word;

    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}
*/

///* ------ Paginator ------ */
//@media(max-width: 992px) {
//  .mat-paginator-container {
//    justify-content: center !important;
//  }
//}
//.mat-paginator {
//  .mat-form-field {
//    .mat-form-field-flex {
//      padding-top: 0.84em;
//    }
//
//    .mat-form-field-infix {
//      border: 1px solid black;
//    }
//
//  }
//  .mat-form-field-appearance-legacy .mat-form-field-infix {
//    padding: 0.4em;
//  }
//
//}