.kss-style,
#kss-node {
	-moz-tab-size: 2;
	-o-tab-size: 2;
	tab-size: 2;
	font-family:
	-apple-system,
	BlinkMacSystemFont,
	'Segoe UI',
	Roboto,
	Oxygen,
	Cantarell,
	Ubuntu,
	'Fira Sans',
	'Droid Sans',
	'Helvetica Neue',
	Arial,
	sans-serif;
}

.test-row {
	background-color: #ccc;
}

.test-content {
	padding: 10px;
	color: #306;
	font-size: 1.1rem;
	background-color: #c9c;
}

.kss-modifier__wrapper [class*='row__']:not(.row):not([class*='test']) {
	background-clip: content-box;
}

.kss-modifier__wrapper [class*='row__']:not(.row):not([class*='test']) > * {
	padding: 0px 12px;
}

.kss-modifier__wrapper [class*='row__']:not(.row):not([class*='test']) > :first-child {
	padding-top: 4px;
}

.kss-modifier__wrapper [class*='row__']:not(.row):not([class*='test']) > :last-child {
	padding-bottom: 4px;
}

.test-cell,
.kss-modifier__wrapper [class*='row__']:not(.row):not([class*='test']) {
	color: #306;
	font-size: 1.1rem;
	background-color: #c9c;
}

.test-card {
	border: 1px #ccc solid;
}

.gs-debug {
  /* autoprefixer: off */
  padding: calc(var(--ml-gg) * 3) 0px;
  background-image: linear-gradient(90deg, #336 var(--ml-gg), #d15 var(--ml-gg), #d15 calc(100% - var(--ml-gg)), #336 0);
  background-size: calc(1 / var(--ml-gscc) * 100%);
}

.kss-description,
.kss-overview,
.kss-parameters {
	max-width: 78ch;
	overflow: auto;
}

.kss-description code:not([class]),
.kss-overview code:not([class]),
.kss-parameters__description code:not([class]) {
	font-size: 90%;
	padding: .2em .4em;
	background-color: rgb(239, 241, 243);
}

/* because selector list in :not() not well supported enough */
.kss-description table code:not([class]),
.kss-parameters__default-value code:not([class]) {
	font-size: 100%;
	padding: 0;
	background: none;
}

.kss-description table:not([class]) td,
.kss-description table:not([class]) th {
	padding: 6px;
	border: 1px solid #dfe2e5;
  margin-bottom: 24px;
}

@media (min-width:520px) {
	.kss-description table:not([class]) td,
	.kss-description table:not([class]) th {
		padding: 8px 12px;
	}
}

.kss-description table:not([class]) {
  margin-bottom: 24px;
}

@media (max-width:519px) {
	.kss-style h1 {
		font-size: 32px;
	}
}

/* CSS for demo, that not included in default bundle */
:root {
  --ml-gscc: 12;
}

.row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 0px;
  list-style: none;
  counter-reset: ml-row-item;
}

.row {
  margin: 0px -16px;
  margin: 0px calc(var(--ml-gg) * -1);
}

.row__col,
.row__item {
  --ml-gsfd: 0px;
  max-width: 100%;
}

.row__col,
.row__item {
  --ml-gscf: calc(var(--ml-gsc) / var(--ml-gscc) * 100% - var(--ml-gsfd, var(--ml-gg)) * 2);
  --ml-gsof: calc(var(--ml-gso) / var(--ml-gscc) * 100% + var(--ml-gsfd, var(--ml-gg)));
}

.row__col > :first-child:not([class]),
.row__item > :first-child:not([class]) {
  margin-top: 0px;
}

.row__col > :last-child:not([class]),
.row__item > :last-child:not([class]) {
  margin-bottom: 0px;
}

.row__col {
  --ml-gsfd: calc(var(--ml-gg) * 1);
}

.row__col {
  --ml-gsc: 12;
  width: calc(100% - 32px);
  width: var(--ml-gscf, 100%);
}

.row__col {
  margin: 0px 16px 32px;
  margin: 0px calc(var(--ml-gg) * 1) calc(var(--ml-gg) * 2);
}

.row__col.row {
  margin-bottom: 0px;
}

.-Gsfd1gg {
  --ml-gsfd: calc(var(--ml-gg) * 1);
}

.-Gsfd0 {
  --ml-gsfd: 0px;
}

.-Gsf {
  --ml-gscf: calc(var(--ml-gsc) / var(--ml-gscc) * 100% - var(--ml-gsfd, var(--ml-gg)) * 2);
  --ml-gsof: calc(var(--ml-gso) / var(--ml-gscc) * 100% + var(--ml-gsfd, var(--ml-gg)));
}

@media (min-width: 520px) {
  .sm_W1gc {
    --ml-gsc: 1;
    width: calc(8.3333333333% - 32px);
    width: var(--ml-gscf, 8.3333333333%);
  }
  .sm_W2gc {
    --ml-gsc: 2;
    width: calc(16.6666666667% - 32px);
    width: var(--ml-gscf, 16.6666666667%);
  }
}

@media (min-width: 768px) {
  .md_W1gc {
    --ml-gsc: 1;
    width: calc(8.3333333333% - 32px);
    width: var(--ml-gscf, 8.3333333333%);
  }

  .md_W3gc {
    --ml-gsc: 3;
    width: calc(25% - 32px);
    width: var(--ml-gscf, 25%);
  }

  .md_W4gc {
    --ml-gsc: 4;
    width: calc(33.3333333333% - 32px);
    width: var(--ml-gscf, 33.3333333333%);
  }

  .md_W5gc {
    --ml-gsc: 5;
    width: calc(41.6666666667% - 32px);
    width: var(--ml-gscf, 41.6666666667%);
  }

  .md_W8gc {
    --ml-gsc: 8;
    width: calc(66.6666666667% - 32px);
    width: var(--ml-gscf, 66.6666666667%);
  }

  .md_W9gc {
    --ml-gsc: 9;
    width: calc(75% - 32px);
    width: var(--ml-gscf, 75%);
  }
}