.myTable {
  display: flex;
  flex-flow: column;
  margin-top: 0.3em;
  opacity: 1;

  // .myTableRow
  &Row {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
    border-bottom: 1px solid #ddd;
    @media all and (max-width: 768px) {
      flex-flow: column;
    }

    &:nth-of-type(even) {
      background-color: #fff;
    }
    &:nth-of-type(odd) {
      background-color: #f9f9f9;
    }
    &.highlighted {
      background-color: #fff7cc;
    }
    &.shadowed {
      opacity: 0.3;
    }

    // .myTableRowItem
    &Item {
      display: flex;
      flex: 1;
      justify-content: flex-start;
      align-items: center;
      min-height: 1em;
      padding: 0.2em;
      transition: all 0.2s ease-in;

      .myTable.fetching & {
        opacity: 1;
      }
    }
  }

  // .myTable .uFlexGrow-X
  @each $grow in 1, 2, 3, 4, 5, 6, 7, 8, 9 {
    .uFlexGrow-#{$grow} {
      flex-grow: $grow;
    }
  }

  // .myTable .fetchIndicator
  .fetchIndicator {
    position: absolute;
    display: flex;
    visibility: hidden;
    justify-content: center;
    align-self: center;
    background: transparent;
    font-size: 20em;
    top: 20%;
    left: 15%;
    width: 70%;
    z-index: 1060;
    opacity: 0;
    transition-duration: 0.2s;
    transition-timing-function: ease-in;
    transition-property: none;

    &:before {
      content: "\e026";
    }
    &.visible {
      visibility: visible;
      opacity: 0.3;
    }
  }

}