@property --progress {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

@property --start-fade {
    syntax: "<length>";
    inherits: false;
    initial-value: 0;
}

@property --end-fade {
    syntax: "<length>";
    inherits: false;
    initial-value: 0;
}

@keyframes scrollfade {
    0% {
        --progress: 0;
        --start-fade: 0;
        --end-fade: 2rem;
    }

    25% {
        --start-fade: 2rem;
        --end-fade: 2rem;
    }

    75% {
        --start-fade: 2rem;
        --end-fade: 0;
    }

    100% {
        --progress: 1;
        --start-fade: 2rem;
        --end-fade: 0;
    }
}

.scrollable {
    width: 100%;
    overflow-x: auto;
}

@supports (animation-timeline: auto) {
    .scrollable {
        container-type: inline-size;
        scroll-timeline: --scrollfade x;
    }

    .mask {
        display: grid;
        position: sticky;
        left: 0;
        mask-image: linear-gradient(to right,
                /* left edge */
                rgba(0 0 0 / 0) 0,
                rgba(0 0 0 / 0.12) calc(var(--start-fade) * 0.4),
                rgba(0 0 0 / 0.6) calc(var(--start-fade) * 0.8),
                rgba(0 0 0 / 1) var(--start-fade),
                /* fully visible center */
                rgba(0 0 0 / 1) calc(100% - var(--end-fade)),
                /* right edge (mirrored) */
                rgba(0 0 0 / 0.6) calc(100% - var(--end-fade) * 0.8),
                rgba(0 0 0 / 0.12) calc(100% - var(--end-fade) * 0.4),
                rgba(0 0 0 / 0) 100%);
        mask-mode: alpha;
        animation: scrollfade 1s linear both;
        animation-timeline: --scrollfade;
    }

    table {
        translate: calc(-1 * var(--progress) * max(0px, 100% - 100cqw));
        animation: scrollfade 1s linear both;
        animation-timeline: --scrollfade;
    }
}

table,
.space {
    grid-area: 1 / 1 / 1 / 1;
}

/* Table and body styles */
table {
    border-collapse: collapse;
    background: #fff;
}

th {
    padding: 0.75em 1.5em;
    background-color: #6b7c93;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.05em;
}

td {
    padding: 5px 5px;
    background-color: #f9f9f9;
    font-size: 0.85em;
    border-bottom: 1px solid #e0e0e0;
}

th,
td {
    white-space: nowrap;
    text-align: center;
}

/* Absolute Center Spinner */
.loading {
    display: none;
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));

  background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 150ms infinite linear;
  -moz-animation: spinner 150ms infinite linear;
  -ms-animation: spinner 150ms infinite linear;
  -o-animation: spinner 150ms infinite linear;
  animation: spinner 150ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.show{
    display: block;
}
.hide{
    display: none;
}