@charset "UTF-8";
body {
  margin: 0;
  font-family: sans-serif; }

.kss-section + .kss-section {
  margin-top: 60px; }

.kss-title {
  margin: 1rem 0;
  line-height: 1em;
  color: #ccc; }

h1.kss-title {
  font-size: 1em; }

h2.kss-title {
  font-size: 1em; }

h3.kss-title {
  font-size: 1em; }

h4.kss-title {
  font-size: 1em; }

.kss-description {
  color: #ccc;
  font-size: 0.875em;
  line-height: 1.6em; }

.kss-pattern__header {
  border-bottom: 1px dotted #ccc;
  margin-bottom: 2em; }

.kss-code-toggle {
  float: right;
  color: #ccc; }

.kss-pattern__header:hover .kss-description,
.kss-pattern__header:hover .kss-title,
.kss-pattern__header:hover .kss-code-toggle {
  color: #000; }

.kss-sidebar {
  box-sizing: border-box;
  padding: 0.875em;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 280px;
  color: #444;
  background: #ccc;
  overflow-y: auto; }

.kss-main-wrap {
  margin-left: 280px;
  box-sizing: border-box; }

.kss-main {
  box-sizing: border-box;
  padding: 1rem 2em; }

.kss-link,
.kss-nav__menu-link {
  text-decoration: none;
  color: currentColor; }

.kss-nav__menu-link:hover {
  text-decoration: none; }

.kss-nav__menu-link {
  font-size: 0.875em; }

.kss-source,
.kss-markup {
  margin: 1rem 0; }

.kss-source summary:focus,
.kss-markup summary:focus {
  outline: 0;
  border: 0; }

.kss-source > summary,
.kss-markup > summary {
  margin-bottom: 14px;
  font-size: 14px;
  color: #999; }

.kss-modifier__heading {
  display: block;
  font-size: 14px;
  color: #999;
  margin: 1em 0;
  padding: 1em 0; }

.kss-modifier__default-name,
.kss-modifier__name,
.kss-parameters__title {
  clear: both;
  font-weight: bold;
  font-size: 14px;
  color: #999;
  margin: 1em 0; }

.kss-modifier__description {
  color: #999;
  font-weight: 400; }

.kss-markup pre {
  padding: 1em;
  background: #F0F8FF;
  overflow-x: auto;
  font-size: 14px; }

.kss-modifier__wrapper {
  padding-bottom: 2em;
  margin-bottom: 2em; }

.kss-nav__menu {
  padding: 0;
  list-style: none; }

.kss-nav__menu-child {
  padding: 0 0 0 1em;
  list-style: none; }

.kss-nav__menu-link {
  display: block;
  padding: 0.5em 0;
  border-bottom: 1px dotted #999; }

.kss-nav__menu-link:hover {
  background: #ddd; }

.kss-parameters {
  padding: 0;
  list-style: none; }

.kss-parameters__item + .kss-parameters__item {
  margin-top: 1em; }

.kss-parameters__name,
.kss-parameters__description {
  display: inline-block; }

.kss-parameters__name > code {
  background: #F0F8FF;
  margin-right: 1em; }

.kss-nav__ref {
  color: #999; }

.kss-section {
  overflow: visible; }

.kss-section::after {
  display: block;
  clear: both;
  content: ''; }

.kss-pattern {
  box-sizing: border-box; }

.kss-pattern-code {
  display: none;
  box-sizing: border-box; }

.kss-pattern-code.active {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 280px;
  box-sizing: border-box;
  padding: 4em;
  overflow-y: auto;
  background: white;
  z-index: +99; }

.kss-source,
.kss-markup {
  color: #ccc;
  font-size: 0.875em; }

.kss-pattern-code:hover .kss-source,
.kss-pattern-code:hover .kss-markup {
  color: #000; }

@media (min-width: 1024px) {
  .kss-pattern {
    padding-right: 1em;
    width: 100%;
    float: left; } }

.kss-nav__menu-link {
  font-weight: normal; }

.kss-nav__menu-link.kss-design__link {
  font-weight: bold; }

.kss-nav__menu-link.kss-design__link::before {
  content: '→'; }