.ctype-tctable_plugin {
  --tc-border-width: 1px;
  --tc-border-style: solid;
  --tc-border-color: #dddddd;
  --tc-cell-padding: 20px;
  --tc-header-bg: #4caf50;
  --tc-header-color: #ffffff;
  --tc-row-bg: #ffffff;
  --tc-row-even-bg: #ffffff;
  --tc-row-odd-bg: #f2f2f2;
  --table-width-percentage: 100%;
}

.ctype-tctable_plugin .percentage {
  border-left: var(--tc-border-width) var(--tc-border-style) var(--tc-border-color);
  border-right: var(--tc-border-width) var(--tc-border-style) var(--tc-border-color);
  margin-bottom: var(--tc-cell-padding);
  overflow-x: auto;
  overflow-y: hidden;
  transition: all 0.5s;
  width: var(--table-width-percentage);
}

.ctype-tctable_plugin .swipe {
  display: none;
  margin: 0 auto var(--tc-cell-padding);
}

.ctype-tctable_plugin .swipe.visible {
  display: block;
}

.ctype-tctable_plugin table {
  width: 100%;
}

.ctype-tctable_plugin table caption {
  display: none;
}

.ctype-tctable_plugin table.h-1 tr.first {
  background-color: var(--tc-header-bg);
  color: var(--tc-header-color);
  font-weight: 700;
}

.ctype-tctable_plugin table.h-2 tr.last {
  background-color: var(--tc-header-bg);
  color: var(--tc-header-color);
  font-weight: 700;
}

.ctype-tctable_plugin table.h-3 th.first,
.ctype-tctable_plugin table.h-3 td.first {
  background-color: var(--tc-header-bg);
  color: var(--tc-header-color);
  font-weight: 700;
}

.ctype-tctable_plugin table.h-4 th.last,
.ctype-tctable_plugin table.h-4 td.last {
  background-color: var(--tc-header-bg);
  color: var(--tc-header-color);
  font-weight: 700;
}

.ctype-tctable_plugin tr.first th,
.ctype-tctable_plugin tr.first td {
  border-top: var(--tc-border-width) var(--tc-border-style) var(--tc-border-color);
}

.ctype-tctable_plugin .z-0 tr {
  background-color: var(--tc-row-bg);
}

.ctype-tctable_plugin .z-1 tr.even {
  background-color: var(--tc-row-even-bg);
}

.ctype-tctable_plugin .z-1 tr.odd {
  background-color: var(--tc-row-odd-bg);
}

.ctype-tctable_plugin th,
.ctype-tctable_plugin td {
  border-bottom: var(--tc-border-width) var(--tc-border-style) var(--tc-border-color);
  border-right: var(--tc-border-width) var(--tc-border-style) var(--tc-border-color);
  padding: var(--tc-cell-padding);
  vertical-align: top;
}

.ctype-tctable_plugin th.last,
.ctype-tctable_plugin td.last {
  border-right: none;
}

.ctype-tctable_plugin th.nowrap,
.ctype-tctable_plugin td.nowrap {
  white-space: nowrap;
}

.ctype-tctable_plugin th > *:last-child,
.ctype-tctable_plugin td > *:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.ctype-tctable_plugin td img {
  display: block;
  float: left;
  height: auto;
  margin-right: 1em;
  max-width: 300px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .ctype-tctable_plugin .percentage {
    --table-width-percentage: 100% !important;
  }

  .ctype-tctable_plugin th {
    white-space: nowrap;
  }

  .ctype-tctable_plugin td img {
    float: none;
    margin-bottom: var(--tc-cell-padding);
    margin-right: 0;
    max-width: 100%;
  }
}