.vuex-table {
  // Custom font
  font-family: "Futura", sans-serif;

  .container {
    padding: $padding-m;
  }
  .table {
    &.is-bordered {
      .head {
        border: 1px solid $grey-light;
        border-bottom: 2px solid $grey-light; 
        -moz-border-radius-topleft: 1rem;
        -moz-border-radius-topright: 1rem;
        @include until($tablet) {
          border: none;
        }
      }
      .foot {
        border: 1px solid $grey-light;
        border-top: 2px solid $grey-light;
      }
      .column {
        &:first-child {
          border-left: 1px solid $grey-light;
          @include until($tablet) {
            border: none;
          }
        }
        border-right: 1px solid $grey-light;
        @include until($tablet) {
          border: none;
        }
      }
    }
    &.is-striped {
      .body {
        .row:nth-child(even) {
          background-color: $evenRows;
        }
      }
    }
    .head, .foot {
      .column {
        padding: 0.5%;
        text-align: center;
        font-weight: $weight-bold;
        cursor: pointer;
      }
    }
    .columns.is-mobile {
      @include until($tablet) {
        border: 1px solid $grey-light;
        justify-content: space-between;
      }
    }
    
    .head {
      border-bottom: 2px solid $grey-light;
    }
    
    .foot {
      border-top: 2px solid $grey-light;
    }

    .body {
      .row:not(:last-child) {
        border-bottom: 1px solid $grey-light;
      }
      @include until($tablet) {
        border: none;
      }

      /*.row:last-child {
        border-bottom: 2px solid $grey-light;
      }*/
      @include until($tablet) {
        border: none;
      }
    }
  }
  .selected {
    background-color: $selected !important;
    color: $white !important;
  }
  .selection-checkbox {
    padding: $padding-xs;
  }
  .buttons-container, .column-checkboxes, .checkboxes-container {
    display: flex;
  }
  .buttons-container {
    flex-direction: column;
  }
  .column-checkboxes, .checkboxes-container {
    flex-direction: row;
  }
  .checkboxes-container {
    width: 12.5%;
    justify-content: space-between;
  }
  .column-checkboxes {
    input {
      margin-right: $margin-xs;
    }
    label {
      margin-right: $margin-s;
    }
  }

  .mobile-columns .column {
    cursor: pointer;
  }
  .pagination-container {
    justify-content: center;
    margin: $margin-m 0;
  }
  .details-container {
    width: 100%;
    min-height: 100px;
    height: auto;
    padding: 1rem 1rem;
  }
}