table {
  width: 100%;
  border-spacing:0;
  margin-top: 2em;
  th {
    &.shortable {
      cursor: pointer;
    }
    &.td-1pc {
      width: 1%;
    }
    &.td-10pc {
      width: 10%;
    }
    &.td-15pc {
      width: 15%;
    }
    &.td-20pc {
      width: 20%;
    }
    &.td-25pc {
      width: 25%;
    }
    &.td-30pc {
      width: 30%;
    }
  }

  tr:nth-child(even) {
    background-color: #e5e5e5;
  }

  td {
    font-size: 0.85em;
    &.table-loading {
      padding: 2em 2em;
      text-align: center;
      font-size: 2em;
    }
    &.no-data {
      padding: 2em 2em;
      text-align: center;
      font-size: 1.5em;
    }
    &.td-tools {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
  }

  tfoot {
    td {
      padding: 2em 0 1em 0;
      div.tfoot-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        div {
          padding: .5em 0;
        }

        ul {
          list-style: none;
          margin: 0;
          li {
            border : 1px solid var(--color-goldenbrown);
            border-left: none;
            padding: .5em;
            display: inline-block;
            min-width: 1em;
            text-align: center;
            &:first-child {
              border-radius: .3em 0 0 .3em;
              border-left: 1px solid var(--color-goldenbrown);
            }
            &:last-child {
              border-radius: 0 .3em .3em 0;
            }
            &.current-page, &.link:hover {
              background-color: var(--color-goldenbrown);
              color: white;
            }
            &.link:hover {
              cursor: pointer;
            }
          }
        }
        .pagesize-selector{
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 0;
          margin: 0;
          div {
            padding: 0;
          }
          input{
            width: 3em;
            font-size: 1em;
            border-radius : 5px;
            padding: 3px .5em;
          }
        }
      }
    }
  }
}

.table-container {
  position: relative;
  div.loader {
    position: absolute;
  }
  table, div.loader {
    top:0;
    left:0;
    right: 0; bottom: 0;
  }
  div.loader {
    color: #7c7c7c;
    font-size: 2.5em;
    text-align: center;
    background-color: rgba(245,245,245,0.8);
    padding-top: 1em;
    min-height: 4em;
  }
}

table.manage-color {
  th.shortable {
    color: var(--color-goldenbrown);
  }
  a {
    color: var(--color-goldenbrown);
    text-decoration: none;
  }
}