.inner {
  width: 94%;
  margin-right: auto;
  margin-left: auto;
  max-width: 1200px;
}

table {
  margin-bottom: 30px;

  & tbody {
    & th {
      padding: 1em;
      border: 1px solid #eee;
      background-color: #eee;
    }

    & td {
      padding: 1em;
      border: 1px solid #eee;
    }
  }

}

.animation-sample01,
.animation-sample02 {
  margin-bottom: 30px;
}

.animation-sample04 .column tbody {
  overflow: hidden;
}

.animation-sample04 .column tbody th {
  position: relative;
  background-color: #fff;
  z-index: 1;
}

.animation-sample04 .column tbody td {
  /* min-height: 2rem !important; */
  /* transform-origin: bottom; */
  animation: revealing-bars 2s linear infinite;
}

@keyframes revealing-bars {
  0% {
    transform: translateY(100%);
  }

  30% {
    transform: translateY(0%);
  }
}


.animation-sample05 {
  & .column {
    width: 100%;
    height: 600px;

    & caption {
      display: flex;
      width: 100%;
      height: 60px;
      margin-bottom: 20px;
      background-color: #0071bc;
      color: #fff;
      font-weight: bold;
      font-size: 24px;
      padding-top: 13px;
    }

  }
}

.animation-sample05 .column tbody tr {
  border-inline-start: none !important;
  border-inline-end: none !important;
}

.animation-sample05 .column tbody {
  height: 600px;
  overflow: hidden;
}

.animation-sample05 .column tbody th {
  position: relative;
  background-color: #fff;
  z-index: 1;
}

.animation-sample05 .column tbody td {
  animation: revealing-bars 2s linear infinite;
  background: #0071bc !important;
}

.animation-sample05 .column tbody tr:last-of-type td {
  background: #f28484 !important;
}

@keyframes revealing-bars {
  0% {
    transform: translateY(100%);
  }

  30% {
    transform: translateY(0%);
  }
}