/* ---- Normalize ---- */
* {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, figure, hr, fieldset, legend {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

tr, td, th {
  position: relative;
}

/* ---- Fonts ---- */
@font-face {
  font-family: 'BlockKie';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/BlockKie.ttf') format('truetype');
}

@font-face {
  font-family: 'Dogicapixel';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/dogicapixel.ttf') format('truetype');
}

@font-face {
  font-family: 'Dogicapixel';
  font-style: normal;
  font-weight: bold;
  src: url('/fonts/dogicapixelbold.ttf') format('truetype');
}

@font-face {
  font-family: 'NicoClean';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/NicoClean-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'NicoBold';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/NicoBold-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'NicoPups';
  font-style: normal;
  font-weight: normal;
  src: url('/fonts/NicoPups-Regular.ttf') format('truetype');
}

/* ---- Variables ---- */
:root {
  --screen-w: 800px;
  --screen-h: 480px;
  --gap-outer: 10px;
  --gap-inner: 10px;
  --gap-small: 5px;
  --gap: 10px;
  --gap-large: 20px;
  --gap-xlarge: 40px;

  --list-gap-small: 8px;
  --list-gap-large: 16px;

  --title_bar-h: 39px;
  --title_bar-small-h: 32px;

  --full-w: calc(var(--screen-w) - var(--gap-outer) * 2);
  --full-h: calc(var(--screen-h) - var(--gap-outer) * 2);

  --quadrant-w: calc((var(--screen-w) - var(--gap-outer) * 2) / 2 - var(--gap-outer) / 2);
  --quadrant-h: calc((var(--screen-h) - var(--gap-outer) * 2) / 2 - var(--gap-outer) / 2);

  --half_vertical-w: calc((var(--screen-w) - var(--gap-outer) * 2) / 2 - var(--gap-outer) / 2);
  --half_vertical-h: calc((var(--screen-h) - var(--gap-outer) * 2));

  --half_horizontal-w: calc((var(--screen-w) - var(--gap-outer) * 2));
  --half_horizontal-h: calc((var(--screen-h) - var(--gap-outer) * 2) / 2 - var(--gap-outer) / 2);

  --black: #000000;
  --gray-1: #2a2a2a;
  --gray-2: #545454;
  --gray-3: #7e7e7e;
  --gray-4: #a8a8a8;
  --gray-5: #d2d2d2;
  --white: #FFFFFF;
}

/* ---- Colors, Fills ---- */
.bg-black   { background-color: #000000; }
.bg-gray-1  { background-color: #2a2a2a; }
.bg-gray-2  { background-color: #545454; }
.bg-gray-3  { background-color: #7e7e7e; }
.bg-gray-4  { background-color: #a8a8a8; }
.bg-gray-5  { background-color: #d2d2d2; }
.bg-white   { background-color: #FFFFFF; }

.bg-black   { background: repeat url(/images/grayscale/black.png); }
.bg-gray-1  { background: repeat url(/images/grayscale/gray-1.png); }
.bg-gray-2  { background: repeat url(/images/grayscale/gray-2.png); }
.bg-gray-3  { background: repeat url(/images/grayscale/gray-3.png); }
.bg-gray-4  { background: repeat url(/images/grayscale/gray-4.png); }
.bg-gray-5  { background: repeat url(/images/grayscale/gray-5.png); }
.bg-gray-6  { background: repeat url(/images/grayscale/gray-6.png); }
.bg-gray-7  { background: repeat url(/images/grayscale/gray-7.png); }
.bg-white   { background: repeat url(/images/grayscale/white.png); }

.bg-black, .bg-gray-1, .bg-gray-2, .bg-gray-3, .bg-gray-4, .bg-gray-5, .bg-gray-6, .bg-gray-7, .bg-white {
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* ---- Borders ---- */
.b-h-gray-1::before, .b-h-gray-2::before, .b-h-gray-3::before, .b-h-gray-4::before, .b-h-gray-5::before, .b-h-gray-6::before, .b-h-gray-7::before  {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: repeat url(/images/borders/1.png);
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.b-h-gray-2::before { background: repeat url(/images/borders/2.png); }
.b-h-gray-3::before { background: repeat url(/images/borders/3.png); }
.b-h-gray-4::before { background: repeat url(/images/borders/4.png); }
.b-h-gray-5::before { background: repeat url(/images/borders/5.png); }
.b-h-gray-6::before { background: repeat url(/images/borders/6.png); }
.b-h-gray-7::before { background: repeat url(/images/borders/7.png); }

.b-v-gray-1::after, .b-v-gray-2::after, .b-v-gray-3::after, .b-v-gray-4::after, .b-v-gray-5::after, .b-v-gray-6::after, .b-v-gray-7::after  {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: repeat url(/images/borders/1.png);
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.b-v-gray-2::after { background: repeat url(/images/borders/2.png); }
.b-v-gray-3::after { background: repeat url(/images/borders/3.png); }
.b-v-gray-4::after { background: repeat url(/images/borders/4.png); }
.b-v-gray-5::after { background: repeat url(/images/borders/5.png); }
.b-v-gray-6::after { background: repeat url(/images/borders/6.png); }
.b-v-gray-7::after { background: repeat url(/images/borders/7.png); }

/* ---- Environment ---- */
.environment {
  background-color: gray;
}

/* ---- Screen ---- */
.screen {
  position: relative;
  width: var(--screen-w);
  height: var(--screen-h);
  max-width: var(--screen-w);
  max-height: var(--screen-h);

  display: flex;
  flex-direction: row;
  gap: var(--gap-outer);
  padding: var(--gap-outer);

  background-color: white;

  image-rendering: crisp-edges;
  box-sizing: border-box;

  flex-wrap: wrap;
  gap: var(--gap-inner);
}

.view--full {
  position: relative;
  display: flex;
  flex-direction: column;

  width: var(--full-w);
  height: var(--full-h);
}

.view--full::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;

  background-image: url(/images/layout/full.png);
  background-repeat: no-repeat;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;

  pointer-events: none;

  width: 790px;
  height: 470px;
}

.view--quadrant {
  position: relative;
  display: flex;
  flex-direction: column;

  width: var(--quadrant-w);
  height: var(--quadrant-h);
}

.view--quadrant::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;

  background-image: url(/images/layout/quadrant.png);
  background-repeat: no-repeat;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;

  pointer-events: none;

  width: 385px;
  height: 225px;
}

.view--half_vertical {
  position: relative;
  display: flex;
  flex-direction: column;

  width: var(--half_vertical-w);
  height: var(--half_vertical-h);
}

.view--half_vertical::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;

  background-image: url(/images/layout/half_vertical.png);
  background-repeat: no-repeat;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;

  pointer-events: none;

  width: 385px;
  height: 461px;
}

.view--half_horizontal {
  position: relative;
  display: flex;
  flex-direction: column;

  width: var(--half_horizontal-w);
  height: var(--half_horizontal-h);
}

.view--half_horizontal::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;

  background-image: url(/images/layout/half_horizontal.png);
  background-repeat: no-repeat;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;

  pointer-events: none;

  width: 781px;
  height: 225px;
}

.view--custom { }

/* ---- Layout ---- */
.layout {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  gap: var(--gap-outer);
}

.view--full .layout {
  height: calc(var(--screen-h) - var(--gap-outer) * 2 - var(--title_bar-h));
  padding: var(--gap-outer);
}

.view--quadrant .layout {
  min-height: calc(var(--quadrant-h) - var(--title_bar-small-h));
  padding: var(--gap-outer);
}

.view--half_vertical .layout {
  min-height: calc(var(--half_vertical-h) - var(--title_bar-small-h));
  padding: var(--gap-outer);
}

.view--half_horizontal .layout {
  min-height: calc(var(--quadrant-h) - var(--title_bar-small-h));
  padding: var(--gap-outer);
  /* gap: var(--gap-outer); */
}

.layout--col {
  flex-direction: column;
}

.layout--row {
  flex-direction: row;
}

.layout--top {
  align-items: flex-start;
}

.layout--center {
  align-items: center;
}

.layout--bottom {
  align-items: flex-end;
}

/* ---- Layout / Columns ---- */
.columns {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  overflow: hidden;

  width: 100%;

  gap: var(--gap-outer);
}

.column {
  flex: 1;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  align-content: center;

  gap: var(--gap-outer);
  display: flex;

  max-width: 100%;
  flex-grow: 1;
  width: 0; /* needed for flexbox to work, lol */
}

/* ---- Title Bar ---- */

.title_bar {
  height: var(--title_bar-h);
  display: flex;
  align-content: center;
  align-items: center;
  padding: 14px;
  border-radius: 10px;
  position: relative;

  color: black;
  z-index: 1000;
  
  /* background: repeat url(/images/grayscale/gray-6.png);
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges; */
}

.view--half_horizontal .title_bar,
.view--half_vertical .title_bar,
.view--quadrant .title_bar {
  height: var(--title_bar-small-h);
  border-radius: none;
  background-image: none !important;
}

.title_bar .image {
  margin-right: var(--gap-inner);
  max-height: 28px;

  filter: invert(1);
}

.view--half_horizontal .title_bar .image,
.view--half_vertical .title_bar .image,
.view--quadrant .title_bar .image {
  margin-right: var(--gap-inner);
  max-height: 16px;
}

.title_bar .title {
  font-family: NicoClean;
  -webkit-font-smoothing: none;
  font-size: 16px;
  padding-top: 2px;
  line-height: 1;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
  overflow: hidden;
  min-height: 16px;

  -webkit-text-stroke: 3.5px white;
  paint-order: stroke fill;
  overflow: visible;
}

.title_bar .instance {
  font-family: NicoClean;
  -webkit-font-smoothing: none;
  font-size: 16px;
  margin-left: auto;
  padding-top: 2px;
  line-height: 1;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
  overflow: hidden;
  min-height: 16px;

  -webkit-text-stroke: 3.5px white;
  paint-order: stroke fill;
  overflow: visible;

  letter-spacing: -0.5px;
  transform: translateX(0.5px);
}

/* ---- Table ---- */
.table thead tr {
  position: relative;
  text-align: left;
  height: 2.25rem;
}

.table thead tr th::before {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: repeat url(/images/borders/3.png);
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.table tbody tr {
  position: relative;
  text-align: left;
  height: 46px;
}

.table.table--condensed tbody tr {
  position: relative;
  text-align: left;
  height: 31px;
}

.table.table--condensed thead tr {
  position: relative;
  text-align: left;
  height: 24px;
}

.table tbody tr td::before {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: repeat url(/images/borders/6.png);
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.table tbody tr:last-child td::before {
  display: none;
}

/* ---- Metrics ---- */
.metrics {
  font-size: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gap-outer) * 4) var(--gap-outer);
  justify-content: center;
  align-content: center;
  flex-basis: fit-content;
}

.metrics.metrics--column-2 {
  padding-left: 100px;
  padding-right: 100px;
}

.metrics--column-4 .metric {
  flex: 0 0 calc(25% - ((var(--gap-outer) * 3) / 4));
  max-width: calc(25% - ((var(--gap-outer) * 3) / 4));
  box-sizing: border-box;
}

.metrics--column-3 .metric {
  flex: 0 0 calc(33.3333% - ((var(--gap-outer) * 2) / 3));
  max-width: calc(33.3333% - ((var(--gap-outer) * 2) / 3));
  box-sizing: border-box;
}

.metrics--column-2 .metric {
  flex: 0 0 calc(50% - (var(--gap-outer) / 2));
  max-width: calc(50% - (var(--gap-outer) / 2));
  box-sizing: border-box;
}

.metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;

  display: flex;
  flex-direction: column;
  flex-grow: 0;
  align-items: center;
  gap: var(--gap-inner);
}

.metric.metric--left {
  align-items: start;
}

/* ---- Value ---- */
.value {
  font-weight: 700;
  font-family: Arial;
  font-size: 38px;
  line-height: 42px;
  /* white-space: nowrap; */
}

.value.value--small {
  font-size: 28px;
  line-height: 34px;
}

.value.value--xsmall {
  font-size: 20px;
  line-height: 24px;
}

.value.value--large {
  font-size: 74px;
  line-height: 70px;
}

/* ---- Title ---- */
.title {
  font-family: BlockKie;
  -webkit-font-smoothing: none;
  font-size: 26px;
  line-height: 1;
  display: block;

  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
  overflow: hidden;

  min-height: 16px;

  letter-spacing: -0.5px;
  transform: translateX(0.5px);
}

.title.title--small {
  font-family: NicoClean;
  -webkit-font-smoothing: none;
  font-size: 16px;
  padding-top: 2px;

  letter-spacing: -0.5px;
  transform: translateX(0.5px);
}

.description {
  -webkit-font-smoothing: none;

  font-family: NicoPups;
  font-size: 16px;
  line-height: 1;

  padding-top: 1px;

  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
  overflow: hidden;

  letter-spacing: -0.5px;
  transform: translateX(0.5px);
}

/* ---- List ---- */
.list {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--list-gap-large);
}

.view--full .list {
  gap: var(--list-gap-large);
}

.view--quadrant .list {
  gap: var(--list-gap-small);
}

.view--half_vertical .list {
  gap: var(--list-gap-large);
}

.view--half_horizontal .list {
  gap: var(--list-gap-small);
}

.list .item {
  display: flex;
  flex-direction: row;

  gap: 2px;

  line-height: 0;
  align-items: stretch;
}

.list.list--wrap {
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.list.list--wrap .item {
  flex: 1 1 calc(50% - var(--list-gap-small));
  box-sizing: border-box;
}

.list.list--wrap .list .item:only-child {
  flex: 1 1 100%;
}

.list.list--wrap--3 .item {
  flex: 1 1 calc(33.3333% - var(--list-gap-small) * 2);
  box-sizing: border-box;
}

.list.list--wrap--4 .item {
  flex: 1 1 calc(25% - var(--list-gap-small) * 3);
  box-sizing: border-box;
}

.list .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  line-height: 0;
  justify-content: end;
}

.list .list_content {
  font-family: NicoClean;
  -webkit-font-smoothing: none;
  font-size: 16px;
}

.list .meta {
  flex-shrink: 0;
  height: auto;
  margin-right: 6px;
  width: 9px;

  background: url(/images/grayscale/gray-6.png) repeat;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;

  justify-content: center;
  align-items: center;
  display: flex;
}

.list .meta .index {
  -webkit-text-stroke: 3.5px white;
  paint-order: stroke fill;
  overflow: visible;

  font-family: NicoPups;
  -webkit-font-smoothing: none;
  font-size: 16px;
  line-height: 1;

  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;

  width: 9px;
  height: 100%;
}

/* ---- Label ---- */
.label {
  display: inline-flex;
  align-items: center;

  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;

  font-family: NicoClean;
  -webkit-font-smoothing: none;

  font-size: 16px;
  font-weight: 400;
  color: white;
  background-color: black;
  line-height: 1.5;

  /* padding-left: 6px;
  padding-right: 6px; */
  line-height: 20px;

  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;

  color: black;
  background-color: white;
  padding-left: 0;
  padding-right: 0;
  position: relative;
  border-radius: 0;

  letter-spacing: -0.5px;
  transform: translateX(0.5px);
}

.label.label--small {
  height: 18px;

  padding-top: 1px;
  padding-bottom: 1px;

  font-family: NicoPups;
  -webkit-font-smoothing: none;
  font-size: 16px;
  line-height: 1;
}

.label.label--underline,
.label.label--underline-2 {
  padding-bottom: 2px;
  color: black;
  background-color: white;

  position: relative;
}

.label.label--underline::after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateX(0.5px);
  width: 100%;
  height: 1px;

  background: repeat url(/images/borders/2.png);
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.label.label--underline-2::after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateX(0.5px);
  width: 100%;
  height: 2px;

  background: repeat url(/images/borders/2.png);
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* ---- Markdown ---- */
.markdown {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.markdown .content {
  max-height: 100%;
  max-width: 460px;

  font-family: NicoPups;
  -webkit-font-smoothing: none;
  font-size: 16px;
  line-height: 18px;
}

.markdown  .content--center {
  text-align: center;
}

.markdown .content--large {
  font-family: NicoClean;
  -webkit-font-smoothing: none;
  font-size: 16px;
  line-height: 22px;
}

.markdown .content--large.content--long {
  overflow: hidden;

  column-count: 2;
  column-width: 320px;
  column-gap: 20px;
  max-width: 100%;

  max-height: 320px;
}

.full .markdown .content--small.content--long {
  overflow: hidden;

  column-count: 2;
  column-width: 370px;
  column-gap: 20px;
  max-width: 100%;

  max-height: 320px;
}

.view--half_horizontal .markdown .content--small.content--long {
  overflow: hidden;

  column-count: 2;
  column-width: 370px;
  column-gap: 20px;
  max-width: 100%;

  max-height: 126px;
}

/* ---- Chart (TODO) ---- */
.highcharts-axis-labels text {
  /* font-size: 16px !important; */
  font-family: NicoPups !important;
}

#chart-1, #chart-2, #chart-3, #chart-4, #chart-5, #chart-6, #chart-7, #chart-8, #chart-9, #chart-10, #chart-11, #chart-12, #chart-13, #chart-14, #chart-15, #chart-16, #chart-17, #chart-18, #chart-19, #chart-20 {
  height: auto !important;
  overflow: visible !important;
}

.highcharts-container {
  top: 0 !important;
}

/* ---- Image (TODO) ---- */
.image.image-small {
  max-width: 80px;
}

.image.image-xsmall {
  max-width: 40px;
}

/* ---- QR Code (Todo) ---- */
.qr-code-wrapper {
  height: 27px;
  width: 27px;
  position: relative;
}

.qr-code {
  height: 27px;
  width: 27px;
  position: absolute;

  right: 0px;
  top: 0px;
}


/* ---- Utility ---- */
.flex {
  display: flex;
  width: 100%;
}

.flex-col {
  flex-direction: column;
}

.gap {
  gap: var(--gap);
}

.gap--small {
  gap: var(--gap-small);
}

.gap--large {
  gap: var(--gap-large);
}

.gap--xlarge {
  gap: var(--gap-xlarge);
}

.w-full {
  width: 100%;
  max-width: 100%;
}

.w-small {
  width: 48px;
  max-width: 48px;
}

.w-medium {
  width: 128px;
  max-width: 128px;
}

.w-xxlarge {
  width: 200px;
  max-width: 200px;
}

.clamp--1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--7 {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--8 {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--9 {
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--10 {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--11 {
  display: -webkit-box;
  -webkit-line-clamp: 11;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--12 {
  display: -webkit-box;
  -webkit-line-clamp: 12;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--13 {
  display: -webkit-box;
  -webkit-line-clamp: 13;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--14 {
  display: -webkit-box;
  -webkit-line-clamp: 14;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--15 {
  display: -webkit-box;
  -webkit-line-clamp: 15;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--16 {
  display: -webkit-box;
  -webkit-line-clamp: 16;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--17 {
  display: -webkit-box;
  -webkit-line-clamp: 17;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--18 {
  display: -webkit-box;
  -webkit-line-clamp: 18;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--19 {
  display: -webkit-box;
  -webkit-line-clamp: 19;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp--20 {
  display: -webkit-box;
  -webkit-line-clamp: 20;
  -webkit-box-orient: vertical;
  overflow: hidden;
}