@charset "UTF-8";
/*doc
---
title: Normalize.css
name: 01-normalize
category: 99.Reset
---

To makes browsers render all elements more consistently, we use [Normalize.css](http://necolas.github.io/normalize.css/), a project by [Nicolas Gallagher](http://nicolasgallagher.com/) and [Jonathan Neal](http://music.thewikies.com/jonneal/).
*/
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
*    user zoom.
*/
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
* Remove default margin.
*/
body {
  margin: 0; }

/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
  display: none;
  height: 0; }

/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
  display: none; }

/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
  background-color: transparent; }

/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
  border-bottom: 1px dotted; }

/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
  font-weight: bold; }

/**
* Address styling not present in Safari and Chrome.
*/
dfn {
  font-style: italic; }

/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
* Address styling not present in IE 8/9.
*/
mark {
  background: #ff0;
  color: #000; }

/**
* Address inconsistent and variable font size in all browsers.
*/
small {
  font-size: 80%; }

/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
  border: 0; }

/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
  margin: 1em 40px; }

/**
* Address differences between Firefox and other browsers.
*/
hr {
  box-sizing: content-box;
  height: 0; }

/**
* Contain overflow in all browsers.
*/
pre {
  overflow: auto; }

/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
*    Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
  overflow: visible; }

/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
  text-transform: none; }

/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
*    and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
*    `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
  cursor: default; }

/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
  line-height: normal; }

/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
*    (include `-moz` to future-proof).
*/
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  /* 2 */
  box-sizing: content-box; }

/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
* Define consistent border, margin, and padding.
*/
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
  overflow: auto; }

/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
  font-weight: bold; }

/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
pre {
  margin: 0; }

button {
  background: transparent;
  border: 0;
  padding: 0; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

iframe {
  border: 0; }

nav ol,
nav ul {
  list-style: none;
  margin: 0;
  padding: 0; }

dd {
  margin-left: 0; }

[tabindex="-1"]:focus {
  outline: none !important; }

/*doc
---
title: Additional reset
name: 02-additional-reset
category: 99.Reset
---

Moreover, we selectively removes margins and paddings from certain elements on top of normalize.css.

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

*, *:before, *:after {
  box-sizing: inherit; }

/*doc
---
title: Box sizing
name: 03-box-sizing
category: 99.Reset
---

We set `box-sizing: border-box;` to all elements.

*/
html {
  font-size: 14px; }

body {
  font-size: 14px;
  font-size: 1rem;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.786;
  color: #4c566c;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

input,
select,
textarea,
button {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.786;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

a {
  color: #5fa9ff;
  text-decoration: none; }
  a:hover, a:focus, a:active {
    text-decoration: underline; }

::-moz-selection {
  background: #99e1ff; }

::selection {
  background: #99e1ff; }

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Montserrat-Regular.woff2") format("woff2"), url("../fonts/Montserrat-Regular.woff") format("woff"), url("../fonts/Montserrat-Regular.ttf") format("truetype"), url("../fonts/Montserrat-Regular.eot") format("eot"); }

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Montserrat-Bold.woff2") format("woff2"), url("../fonts/Montserrat-Bold.woff") format("woff"), url("../fonts/Montserrat-Bold.ttf") format("truetype"), url("../fonts/Montserrat-Bold.eot") format("eot"); }

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: normal;
  line-height: 1.4;
  margin-bottom: 30px; }

h1,
.h1 {
  font-size: 44px;
  font-size: 3.14286rem; }

h2,
.h2 {
  font-size: 32px;
  font-size: 2.28571rem; }

h3,
.h3 {
  font-size: 26px;
  font-size: 1.85714rem; }

h4,
.h4 {
  font-size: 18px;
  font-size: 1.28571rem; }

h5,
.h5 {
  font-size: 14px;
  font-size: 1rem; }

h6,
.h6 {
  font-size: 12px;
  font-size: 0.85714rem; }

p {
  margin-bottom: 20px; }

small {
  font-size: 0.9em; }

.text-muted {
  color: #999; }

.text-danger {
  color: #bd2c00; }

.text-emphasized {
  font-weight: bold;
  color: #333; }

a:focus {
  outline: thin dotted;
  outline: 2px auto -webkit-focus-ring-color;
  outline-offset: -1px; }

/*doc
---
title: Headings
name: 01-headings
category: 03.Typography-01.Headings
---

All HTML headings, `<h1>` through `<h6>`, are available.
`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

```slim_example
h1 This is a heading 1
h2 This is a heading 2
h3 This is a heading 3
h4 This is a heading 4
h5 This is a heading 5
h6 This is a heading 6
```

```slim_example
h1 Kaizen Platform、オンライン動画学習サービスschoo(スクー)と連携。
h2 Kaizen Platform、オンライン動画学習サービスschoo(スクー)と連携。
h3 Kaizen Platform、オンライン動画学習サービスschoo(スクー)と連携。Webサービスを急成長させる”グロースハッカー”養成カリキュラムを12月より開講
h4 Kaizen Platform、オンライン動画学習サービスschoo(スクー)と連携。Webサービスを急成長させる”グロースハッカー”養成カリキュラムを12月より開講
h5 Kaizen Platform、オンライン動画学習サービスschoo(スクー)と連携。Webサービスを急成長させる”グロースハッカー”養成カリキュラムを12月より開講
h6 Kaizen Platform、オンライン動画学習サービスschoo(スクー)と連携。Webサービスを急成長させる”グロースハッカー”養成カリキュラムを12月より開講
```
*/
/*doc
---
title: Paragraphs
name: 02-paragraphs
category: 03.Typography-02.Paragraphs
---

```slim_example
p
  | Take the guesswork out of effective website design with visual mapping of key optimization needs identified through Kaizen’s algorithmic recommendation engine.
p
  | Save resources with Kaizen's full-service, automated A/B testing service including everything from data-driven test prioritization to test page variation creation, test management and reporting.
```

```slim_example
p
  | A/Bテストは、システムとデザインのリソース確保が必要なため、おおよそ1ヶ月の制作期間と約200万円の費用が必要とされています。Kaizen Platform は、サイトの効果計測ツールとエディターを備えているため、制作期間、コストを大幅にカットすることが可能です。
p
  | A/Bテストがスタートすると、効果の高いデザインの表示割合を徐々に高める独自のアルゴリズムが動き出します。つまり、テストの開始とともに、サイトの改善も始まっているのです。
```
*/
/*doc
---
title: Small text
name: 01-small-text
category: 03.Typography-03.Emphasis
---

Use `<small>` element to set text at smaller size of the parent.

```slim_example
p
  small This line of text is meant to be treated as fine print.
p
  small この行は小さく表示されます。
```
*/
/*doc
---
title: Bold
name: 02-bold-text
category: 03.Typography-03.Emphasis
---

Use `<strong>` element.

```slim_example
p
  = 'The following snippet of text is '
  strong
    | rendered as bold text.
p
  = 'このテキストの'
  strong
    | この部分は太字です。
```
*/
/*doc
---
title: Italic
name: 03-Italic-text
category: 03.Typography-03.Emphasis
---

Use `<em>` element.

```slim_example
p
  = 'The following snippet of text is '
  em
    | rendered as italicized text.
p
  = 'このテキストの'
  em
    | この部分は斜め文字です。
```
*/
.c-btn-group:before, .c-datepicker__nav:before, .c-dropdown:before, .c-tabs:before, .c-btn-group:after, .c-datepicker__nav:after, .c-dropdown:after, .c-tabs:after {
  content: " ";
  display: table; }

.c-btn-group:after, .c-datepicker__nav:after, .c-dropdown:after, .c-tabs:after {
  clear: both; }

.c-avatar {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  vertical-align: middle;
  color: #b4bed5;
  background-color: #f2f6fa; }
  .c-avatar.-size-small {
    width: 20px;
    height: 20px;
    border-radius: 10px; }
    .c-avatar.-size-small.kzicon {
      font-size: 20px; }
  .c-avatar.-size-large {
    width: 40px;
    height: 40px;
    border-radius: 20px; }
    .c-avatar.-size-large.kzicon {
      font-size: 40px; }
  .c-avatar.-size-original {
    width: 80px;
    height: 80px;
    border-radius: 40px; }
    .c-avatar.-size-original.kzicon {
      font-size: 80px; }

.-bg-white {
  background-color: #fff; }

.-bg-transparent {
  background-color: transparent; }

.-bg-dark {
  color: #8293b9;
  background-color: #e2e6ef; }

/*doc
---
title: Basic
name: 01-avatar-basic
category: 09.Images-02.Avatars
---

Use `.c-avatar` to show an avatar image.

```slim_example
img.c-avatar src="image.png"
```

You can add this class to the icons.

```slim_example
i.kzicon.kzicon-profile.c-avatar
```

*/
/*doc
---
title: Options
name: 02-avatar-options
category: 09.Images-02.Avatars
---

If you need an avatar with white background, please use `.-bg-white` class.

```slim_example
sass:
  .example-area
    display: inline-block
    background-color: #f2f6fa
    padding: 20px

.example-area
  i.kzicon.kzicon-profile.c-avatar.-bg-white
```

If you need an avatar with transparent background, please use `.-bg-transparent` class.

```slim_example
.example-area
  i.kzicon.kzicon-profile.c-avatar.-bg-transparent
```

If you need a dark colord avatar, please use `.-bg-dark` class.

```slim_example
i.kzicon.kzicon-profile.c-avatar.-bg-dark
```

*/
/*doc
---
title: Sizes
name: 03-avatar-sizes
category: 09.Images-02.Avatars
---

Add `.-size-small`, `.-size-large` or `.-size-original` class if you need to change sizes.

```slim_example
p
  img.c-avatar.-size-small src="image.png"
  i.kzicon.kzicon-profile.c-avatar.-size-small

p
  img.c-avatar src="image.png"
  i.kzicon.kzicon-profile.c-avatar

p
  img.c-avatar.-size-large src="image.png"
  i.kzicon.kzicon-profile.c-avatar.-size-large

p
  img.c-avatar.-size-original src="image.png"
  i.kzicon.kzicon-profile.c-avatar.-size-original

```
*/
.c-badge, .c-badge--primary, .c-badge--notification, .c-badge--success, .c-badge--warning, .c-badge--error {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  text-align: center;
  line-height: 30px;
  border: 0;
  border-radius: 15px;
  color: #fff;
  vertical-align: middle; }
  .c-badge > .kzicon, .c-badge--primary > .kzicon, .c-badge--notification > .kzicon, .c-badge--success > .kzicon, .c-badge--warning > .kzicon, .c-badge--error > .kzicon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); }
  .-size-large.c-badge, .-size-large.c-badge--primary, .-size-large.c-badge--notification, .-size-large.c-badge--success, .-size-large.c-badge--warning, .-size-large.c-badge--error {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px; }
    .-size-large.c-badge + .c-badge-label, .-size-large.c-badge--primary + .c-badge-label, .-size-large.c-badge--notification + .c-badge-label, .-size-large.c-badge--success + .c-badge-label, .-size-large.c-badge--warning + .c-badge-label, .-size-large.c-badge--error + .c-badge-label {
      height: 40px;
      line-height: 40px; }
  .-size-larger.c-badge, .-size-larger.c-badge--primary, .-size-larger.c-badge--notification, .-size-larger.c-badge--success, .-size-larger.c-badge--warning, .-size-larger.c-badge--error {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 25px; }
    .-size-larger.c-badge .kzicon, .-size-larger.c-badge--primary .kzicon, .-size-larger.c-badge--notification .kzicon, .-size-larger.c-badge--success .kzicon, .-size-larger.c-badge--warning .kzicon, .-size-larger.c-badge--error .kzicon {
      font-size: 40px; }
    .-size-larger.c-badge + .c-badge-label, .-size-larger.c-badge--primary + .c-badge-label, .-size-larger.c-badge--notification + .c-badge-label, .-size-larger.c-badge--success + .c-badge-label, .-size-larger.c-badge--warning + .c-badge-label, .-size-larger.c-badge--error + .c-badge-label {
      height: 40px;
      line-height: 40px; }
  .-shape-square.c-badge, .-shape-square.c-badge--primary, .-shape-square.c-badge--notification, .-shape-square.c-badge--success, .-shape-square.c-badge--warning, .-shape-square.c-badge--error {
    border-radius: 0; }

.c-badge {
  background-color: #e2e6ef;
  color: #9ba9c7; }

.c-badge--primary {
  background-color: #5fa9ff; }

.c-badge--notification {
  background-color: #fe9392; }

.c-badge--success {
  background-color: #88e18e; }

.c-badge--warning {
  background-color: #fcb100; }

.c-badge--error {
  background-color: #fe7877; }

.c-badge-label {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin-left: 10px; }

.c-dot-notification, .c-dot-notification-critical, .c-dot-notification-major, .c-dot-notification-minor, .c-dot-notification-none {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px; }

.c-dot-notification {
  background-color: #fe7877; }

.c-dot-notification-critical {
  background-color: #fe7877; }

.c-dot-notification-major {
  background-color: #fcb100; }

.c-dot-notification-minor {
  background-color: #f7d021; }

.c-dot-notification-none {
  background-color: #88e18e; }

/*doc
---
title: Badges with an icon
name: 01-badges
category: 11.Labels-03.Badges
---

There are several contextual badges with an icon.

`.c-badge` (normal)

`.c-badge--primary`

`.c-badge--notification`

`.c-badge--success`

`.c-badge--warning`

`.c-badge--error`

```slim_example
.c-badge
  i.kzicon.kzicon-wrench-small

.c-badge--primary
  i.kzicon.kzicon-check

.c-badge--notification
  i.kzicon.kzicon-text

.c-badge--success
  i.kzicon.kzicon-check

.c-badge--warning
  i.kzicon.kzicon-alert

.c-badge--error
  i.kzicon.kzicon-cancel

.c-badge--error
  i.kzicon.kzicon-minus
```

if you want to show a badge and its label, use `.c-badge-label` for the label.

```slim_example
.c-badge--success
  i.kzicon.kzicon-check
.c-badge-label Primary goal

.c-badge--error
  i.kzicon.kzicon-cancel
.c-badge-label Cancel

.c-badge--error
  i.kzicon.kzicon-minus
.c-badge-label Delete

```
*/
/*doc
---
title: Sizes
name: 02-badges-sizes
category: 11.Labels-03.Badges
---

Add `.-size-large` or `.-size-larger` to enlarge a badge.

```slim_example
p
  .c-badge.-size-large
    i.kzicon.kzicon-wrench-small

  .c-badge--notification.-size-large
    i.kzicon.kzicon-text

  .c-badge--success.-size-large
    i.kzicon.kzicon-check

  .c-badge--error.-size-large
    i.kzicon.kzicon-cancel
p
  .c-badge--success.-size-large
    i.kzicon.kzicon-check
  .c-badge-label Primary goal

p
  .c-badge.-size-larger
    i.kzicon.kzicon-wrench-small

  .c-badge--notification.-size-larger
    i.kzicon.kzicon-text

  .c-badge--success.-size-larger
    i.kzicon.kzicon-check

  .c-badge--error.-size-larger
    i.kzicon.kzicon-cancel
p
  .c-badge--success.-size-larger
    i.kzicon.kzicon-check
  .c-badge-label Primary goal
```
*/
/*doc
---
title: Shape
name: 04-badges-shape
category: 11.Labels-03.Badges
---

Use `.-shape-square` to square the badge.

```slim_example
.c-badge.-size-larger.-shape-square
  i.kzicon.kzicon-file-default
```
*/
/*doc
---
title: Notification status dot
name: 03-dot-notification
category: 11.Labels-05.Notification Dot
---

Use `.c-dot-notification` to show status of notification.

```slim_example
.c-dot-notification
span post #12789
```

```slim_example
.c-dot-notification-critical
.c-dot-notification-major
.c-dot-notification-minor
.c-dot-notification-none
```
 */
.c-btn-group {
  display: inline-block;
  position: relative;
  vertical-align: middle; }
  .c-btn-group > [class^="c-btn"] {
    float: left; }
    .c-btn-group > [class^="c-btn"]:first-child {
      margin-left: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0; }
    .c-btn-group > [class^="c-btn"]:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0; }
    .c-btn-group > [class^="c-btn"] + [class^="c-btn"] {
      margin-left: -1px; }
    .c-btn-group > [class^="c-btn"]:not(:first-child):not(:last-child):not(.c-dropdown-button__toggle) {
      border-radius: 0; }
  .c-btn-group > .c-btn--primary {
    border-right: 1px solid #9fcbff;
    border-left: 1px solid #9fcbff; }
  .c-btn-group > .c-btn--secondary {
    border-right: 1px solid #b4bed5;
    border-left: 1px solid #b4bed5; }
  .c-btn-group > [class^="c-btn"]:last-child:not(:first-child),
  .c-btn-group > .c-dropdown-button__toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; }
  .c-btn-group .c-dropdown__item {
    padding-left: 30px;
    padding-right: 30px; }

.c-dropdown-button__toggle .kzicon {
  transition: transform 0.1s ease-in; }

.c-dropdown-button__menu {
  position: absolute;
  top: 100%;
  right: 0;
  opacity: 0;
  visibility: hidden;
  margin-top: 2px !important;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  border: 1px solid #b4bed5;
  border-radius: 4px; }
  .c-dropdown-button__menu > li:first-child a {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px; }
  .c-dropdown-button__menu > li:last-child a {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px; }

.open {
  z-index: 1001; }
  .open .c-dropdown-button__toggle .kzicon {
    transform: rotate(180deg); }
  .open .c-dropdown-button__menu {
    opacity: 1;
    visibility: visible; }

/*doc
---
title: Basic
name: 01-button-groups-basic
category: 06.Buttons-02.Button Groups
---

Wrap a series of buttons with `.c-btn` in `.c-btn-group`.

```slim_example
p
  .c-btn-group
    .c-btn
      | Left
    .c-btn
      | Middle
    .c-btn
      | Right

p
  .c-btn-group
    .c-btn--primary
      | Left
    .c-btn--primary
      | Middle
    .c-btn--primary
      | Right

p
  .c-btn-group
    .c-btn--secondary.-shape-square
      i.kzicon.kzicon-left-text
    .c-btn--secondary.-shape-square
      i.kzicon.kzicon-less-text
    .c-btn--secondary.-shape-square
      i.kzicon.kzicon-right-text
```

*/
/*doc
---
title: Split button dropdowns
name: 02-split-button-dropdowns
category: 06.Buttons-03.Split buttons
---

Split button dropdowns (Combo buttons) are preferred when more than one action is associated with a button. The primary action is visible and available on the button itself while the secondary actions are accessed through the dropdown menu.

You can create split button dropdowns with `.c-btn-group`, `.c-btn` and `.c-dropdown-button__toggle`.

```slim_example
p
  .c-btn-group
    .c-btn.-with-icon
      i.kzicon.kzicon-gear
      | Settings
    .c-btn.-shape-square.c-dropdown-button__toggle data-toggle="dropdown"
      i.kzicon.kzicon-arrow-down

    ul.c-dropdown-button__menu
      li: a.c-dropdown__item Archive
      li: a.c-dropdown__item Purge
p
  .c-btn-group
    .c-btn--primary.-with-icon
      i.kzicon.kzicon-gear
      | Settings
    .c-btn--primary.-shape-square.c-dropdown-button__toggle data-toggle="dropdown"
      i.kzicon.kzicon-arrow-down

    ul.c-dropdown-button__menu
      li: a.c-dropdown__item Archive
      li: a.c-dropdown__item Purge

p
  .c-btn-group
    .c-btn--secondary.-with-icon
      i.kzicon.kzicon-gear
      | Settings
    .c-btn--secondary.-shape-square.c-dropdown-button__toggle data-toggle="dropdown"
      i.kzicon.kzicon-arrow-down

    ul.c-dropdown-button__menu
      li: a.c-dropdown__item Archive
      li: a.c-dropdown__item Purge

```

*/
.c-btn, .c-btn--primary, .c-btn--secondary, .c-btn--aux, .c-btn--emphasize, .c-btn--critical, .c-btn--transparent {
  height: 30px;
  line-height: 30px;
  min-width: 76px;
  padding-top: 0;
  padding-right: 8px;
  padding-bottom: 0;
  padding-left: 8px;
  border-radius: 4px;
  font-size: 12px;
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border-style: solid;
  border-width: 1px;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-transform: uppercase;
  transition: background-color 0.1s ease-in; }
  .c-btn:focus, .c-btn--primary:focus, .c-btn--secondary:focus, .c-btn--aux:focus, .c-btn--emphasize:focus, .c-btn--critical:focus, .c-btn--transparent:focus, .c-btn:active:focus, .c-btn--primary:active:focus, .c-btn--secondary:active:focus, .c-btn--aux:active:focus, .c-btn--emphasize:active:focus, .c-btn--critical:active:focus, .c-btn--transparent:active:focus, .active.c-btn:focus, .active.c-btn--primary:focus, .active.c-btn--secondary:focus, .active.c-btn--aux:focus, .active.c-btn--emphasize:focus, .active.c-btn--critical:focus, .active.c-btn--transparent:focus {
    outline: 0; }
  .c-btn:hover, .c-btn--primary:hover, .c-btn--secondary:hover, .c-btn--aux:hover, .c-btn--emphasize:hover, .c-btn--critical:hover, .c-btn--transparent:hover, .hover.c-btn, .hover.c-btn--primary, .hover.c-btn--secondary, .hover.c-btn--aux, .hover.c-btn--emphasize, .hover.c-btn--critical, .hover.c-btn--transparent, .c-btn:focus, .c-btn--primary:focus, .c-btn--secondary:focus, .c-btn--aux:focus, .c-btn--emphasize:focus, .c-btn--critical:focus, .c-btn--transparent:focus, .focus.c-btn, .focus.c-btn--primary, .focus.c-btn--secondary, .focus.c-btn--aux, .focus.c-btn--emphasize, .focus.c-btn--critical, .focus.c-btn--transparent {
    text-decoration: none; }
  .c-btn:active, .c-btn--primary:active, .c-btn--secondary:active, .c-btn--aux:active, .c-btn--emphasize:active, .c-btn--critical:active, .c-btn--transparent:active, .active.c-btn, .active.c-btn--primary, .active.c-btn--secondary, .active.c-btn--aux, .active.c-btn--emphasize, .active.c-btn--critical, .active.c-btn--transparent {
    outline: 0;
    background-image: none; }
  .disabled.c-btn, .disabled.c-btn--primary, .disabled.c-btn--secondary, .disabled.c-btn--aux, .disabled.c-btn--emphasize, .disabled.c-btn--critical, .disabled.c-btn--transparent, [disabled].c-btn, [disabled].c-btn--primary, [disabled].c-btn--secondary, [disabled].c-btn--aux, [disabled].c-btn--emphasize, [disabled].c-btn--critical, [disabled].c-btn--transparent,
  fieldset[disabled] .c-btn,
  fieldset[disabled] .c-btn--primary,
  fieldset[disabled] .c-btn--secondary,
  fieldset[disabled] .c-btn--aux,
  fieldset[disabled] .c-btn--emphasize,
  fieldset[disabled] .c-btn--critical,
  fieldset[disabled] .c-btn--transparent {
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none; }
  .c-btn + [class*="c-btn"], .c-btn--primary + [class*="c-btn"], .c-btn--secondary + [class*="c-btn"], .c-btn--aux + [class*="c-btn"], .c-btn--emphasize + [class*="c-btn"], .c-btn--critical + [class*="c-btn"], .c-btn--transparent + [class*="c-btn"] {
    margin-left: 5px; }
  .c-btn > .kzicon, .c-btn--primary > .kzicon, .c-btn--secondary > .kzicon, .c-btn--aux > .kzicon, .c-btn--emphasize > .kzicon, .c-btn--critical > .kzicon, .c-btn--transparent > .kzicon {
    margin-top: -4px; }
  .-with-icon.c-btn, .-with-icon.c-btn--primary, .-with-icon.c-btn--secondary, .-with-icon.c-btn--aux, .-with-icon.c-btn--emphasize, .-with-icon.c-btn--critical, .-with-icon.c-btn--transparent {
    padding-left: 0;
    min-width: 0;
    text-align: left; }
    .-with-icon.c-btn > .kzicon, .-with-icon.c-btn--primary > .kzicon, .-with-icon.c-btn--secondary > .kzicon, .-with-icon.c-btn--aux > .kzicon, .-with-icon.c-btn--emphasize > .kzicon, .-with-icon.c-btn--critical > .kzicon, .-with-icon.c-btn--transparent > .kzicon {
      margin-top: -6px;
      margin-bottom: -4px; }
  .-size-small.c-btn, .-size-small.c-btn--primary, .-size-small.c-btn--secondary, .-size-small.c-btn--aux, .-size-small.c-btn--emphasize, .-size-small.c-btn--critical, .-size-small.c-btn--transparent {
    height: 20px;
    line-height: 20px;
    min-width: 56px;
    padding-top: 0;
    padding-right: 8px;
    padding-bottom: 0;
    padding-left: 8px;
    border-radius: 4px;
    font-size: 10px; }
    .-size-small.c-btn > .kzicon, .-size-small.c-btn--primary > .kzicon, .-size-small.c-btn--secondary > .kzicon, .-size-small.c-btn--aux > .kzicon, .-size-small.c-btn--emphasize > .kzicon, .-size-small.c-btn--critical > .kzicon, .-size-small.c-btn--transparent > .kzicon {
      font-size: 30px; }
    .-size-small.-width-compact.c-btn, .-size-small.-width-compact.c-btn--primary, .-size-small.-width-compact.c-btn--secondary, .-size-small.-width-compact.c-btn--aux, .-size-small.-width-compact.c-btn--emphasize, .-size-small.-width-compact.c-btn--critical, .-size-small.-width-compact.c-btn--transparent {
      min-width: 0;
      padding-right: 4px;
      padding-left: 4px; }
    .-size-small.-shape-square.c-btn, .-size-small.-shape-square.c-btn--primary, .-size-small.-shape-square.c-btn--secondary, .-size-small.-shape-square.c-btn--aux, .-size-small.-shape-square.c-btn--emphasize, .-size-small.-shape-square.c-btn--critical, .-size-small.-shape-square.c-btn--transparent, .-size-small.-shape-rounded.c-btn, .-size-small.-shape-rounded.c-btn--primary, .-size-small.-shape-rounded.c-btn--secondary, .-size-small.-shape-rounded.c-btn--aux, .-size-small.-shape-rounded.c-btn--emphasize, .-size-small.-shape-rounded.c-btn--critical, .-size-small.-shape-rounded.c-btn--transparent {
      width: 20px; }
      .-size-small.-shape-square.c-btn > .kzicon, .-size-small.-shape-square.c-btn--primary > .kzicon, .-size-small.-shape-square.c-btn--secondary > .kzicon, .-size-small.-shape-square.c-btn--aux > .kzicon, .-size-small.-shape-square.c-btn--emphasize > .kzicon, .-size-small.-shape-square.c-btn--critical > .kzicon, .-size-small.-shape-square.c-btn--transparent > .kzicon, .-size-small.-shape-rounded.c-btn > .kzicon, .-size-small.-shape-rounded.c-btn--primary > .kzicon, .-size-small.-shape-rounded.c-btn--secondary > .kzicon, .-size-small.-shape-rounded.c-btn--aux > .kzicon, .-size-small.-shape-rounded.c-btn--emphasize > .kzicon, .-size-small.-shape-rounded.c-btn--critical > .kzicon, .-size-small.-shape-rounded.c-btn--transparent > .kzicon {
        margin-top: -6px;
        margin-left: -6px; }
    .-size-small.-with-icon.c-btn, .-size-small.-with-icon.c-btn--primary, .-size-small.-with-icon.c-btn--secondary, .-size-small.-with-icon.c-btn--aux, .-size-small.-with-icon.c-btn--emphasize, .-size-small.-with-icon.c-btn--critical, .-size-small.-with-icon.c-btn--transparent {
      padding-left: 0;
      padding-right: 7.5px;
      min-width: 0; }
      .-size-small.-with-icon.c-btn > .kzicon, .-size-small.-with-icon.c-btn--primary > .kzicon, .-size-small.-with-icon.c-btn--secondary > .kzicon, .-size-small.-with-icon.c-btn--aux > .kzicon, .-size-small.-with-icon.c-btn--emphasize > .kzicon, .-size-small.-with-icon.c-btn--critical > .kzicon, .-size-small.-with-icon.c-btn--transparent > .kzicon {
        margin-right: -3px; }
  .-size-large.c-btn, .-size-large.c-btn--primary, .-size-large.c-btn--secondary, .-size-large.c-btn--aux, .-size-large.c-btn--emphasize, .-size-large.c-btn--critical, .-size-large.c-btn--transparent {
    height: 40px;
    line-height: 40px;
    min-width: 96px;
    padding-top: 0;
    padding-right: 8px;
    padding-bottom: 0;
    padding-left: 8px;
    border-radius: 4px;
    font-size: 12px; }
    .-size-large.c-btn > .kzicon, .-size-large.c-btn--primary > .kzicon, .-size-large.c-btn--secondary > .kzicon, .-size-large.c-btn--aux > .kzicon, .-size-large.c-btn--emphasize > .kzicon, .-size-large.c-btn--critical > .kzicon, .-size-large.c-btn--transparent > .kzicon {
      font-size: 40px; }
    .-size-large.-width-compact.c-btn, .-size-large.-width-compact.c-btn--primary, .-size-large.-width-compact.c-btn--secondary, .-size-large.-width-compact.c-btn--aux, .-size-large.-width-compact.c-btn--emphasize, .-size-large.-width-compact.c-btn--critical, .-size-large.-width-compact.c-btn--transparent {
      min-width: 0;
      padding-right: 4px;
      padding-left: 4px; }
    .-size-large.-shape-square.c-btn, .-size-large.-shape-square.c-btn--primary, .-size-large.-shape-square.c-btn--secondary, .-size-large.-shape-square.c-btn--aux, .-size-large.-shape-square.c-btn--emphasize, .-size-large.-shape-square.c-btn--critical, .-size-large.-shape-square.c-btn--transparent, .-size-large.-shape-rounded.c-btn, .-size-large.-shape-rounded.c-btn--primary, .-size-large.-shape-rounded.c-btn--secondary, .-size-large.-shape-rounded.c-btn--aux, .-size-large.-shape-rounded.c-btn--emphasize, .-size-large.-shape-rounded.c-btn--critical, .-size-large.-shape-rounded.c-btn--transparent {
      width: 40px; }
    .-size-large.-with-icon.c-btn, .-size-large.-with-icon.c-btn--primary, .-size-large.-with-icon.c-btn--secondary, .-size-large.-with-icon.c-btn--aux, .-size-large.-with-icon.c-btn--emphasize, .-size-large.-with-icon.c-btn--critical, .-size-large.-with-icon.c-btn--transparent {
      padding-left: 0;
      padding-right: 20px;
      min-width: 0; }
  .-size-larger.c-btn, .-size-larger.c-btn--primary, .-size-larger.c-btn--secondary, .-size-larger.c-btn--aux, .-size-larger.c-btn--emphasize, .-size-larger.c-btn--critical, .-size-larger.c-btn--transparent {
    height: 50px;
    line-height: 50px;
    min-width: 116px;
    padding-top: 0;
    padding-right: 8px;
    padding-bottom: 0;
    padding-left: 8px;
    border-radius: 4px;
    font-size: 16px; }
    .-size-larger.c-btn > .kzicon, .-size-larger.c-btn--primary > .kzicon, .-size-larger.c-btn--secondary > .kzicon, .-size-larger.c-btn--aux > .kzicon, .-size-larger.c-btn--emphasize > .kzicon, .-size-larger.c-btn--critical > .kzicon, .-size-larger.c-btn--transparent > .kzicon {
      font-size: 40px; }
    .-size-larger.-width-compact.c-btn, .-size-larger.-width-compact.c-btn--primary, .-size-larger.-width-compact.c-btn--secondary, .-size-larger.-width-compact.c-btn--aux, .-size-larger.-width-compact.c-btn--emphasize, .-size-larger.-width-compact.c-btn--critical, .-size-larger.-width-compact.c-btn--transparent {
      min-width: 0;
      padding-right: 4px;
      padding-left: 4px; }
    .-size-larger.-shape-square.c-btn, .-size-larger.-shape-square.c-btn--primary, .-size-larger.-shape-square.c-btn--secondary, .-size-larger.-shape-square.c-btn--aux, .-size-larger.-shape-square.c-btn--emphasize, .-size-larger.-shape-square.c-btn--critical, .-size-larger.-shape-square.c-btn--transparent, .-size-larger.-shape-rounded.c-btn, .-size-larger.-shape-rounded.c-btn--primary, .-size-larger.-shape-rounded.c-btn--secondary, .-size-larger.-shape-rounded.c-btn--aux, .-size-larger.-shape-rounded.c-btn--emphasize, .-size-larger.-shape-rounded.c-btn--critical, .-size-larger.-shape-rounded.c-btn--transparent {
      width: 50px; }
    .-size-larger.-with-icon.c-btn, .-size-larger.-with-icon.c-btn--primary, .-size-larger.-with-icon.c-btn--secondary, .-size-larger.-with-icon.c-btn--aux, .-size-larger.-with-icon.c-btn--emphasize, .-size-larger.-with-icon.c-btn--critical, .-size-larger.-with-icon.c-btn--transparent {
      padding-left: 0;
      padding-right: 20px;
      min-width: 0; }
  .-size-huge.c-btn, .-size-huge.c-btn--primary, .-size-huge.c-btn--secondary, .-size-huge.c-btn--aux, .-size-huge.c-btn--emphasize, .-size-huge.c-btn--critical, .-size-huge.c-btn--transparent {
    height: 60px;
    line-height: 60px;
    min-width: 136px;
    padding-top: 0;
    padding-right: 8px;
    padding-bottom: 0;
    padding-left: 8px;
    border-radius: 4px;
    font-size: 22px; }
    .-size-huge.c-btn > .kzicon, .-size-huge.c-btn--primary > .kzicon, .-size-huge.c-btn--secondary > .kzicon, .-size-huge.c-btn--aux > .kzicon, .-size-huge.c-btn--emphasize > .kzicon, .-size-huge.c-btn--critical > .kzicon, .-size-huge.c-btn--transparent > .kzicon {
      font-size: 40px; }
    .-size-huge.-width-compact.c-btn, .-size-huge.-width-compact.c-btn--primary, .-size-huge.-width-compact.c-btn--secondary, .-size-huge.-width-compact.c-btn--aux, .-size-huge.-width-compact.c-btn--emphasize, .-size-huge.-width-compact.c-btn--critical, .-size-huge.-width-compact.c-btn--transparent {
      min-width: 0;
      padding-right: 4px;
      padding-left: 4px; }
    .-size-huge.-shape-square.c-btn, .-size-huge.-shape-square.c-btn--primary, .-size-huge.-shape-square.c-btn--secondary, .-size-huge.-shape-square.c-btn--aux, .-size-huge.-shape-square.c-btn--emphasize, .-size-huge.-shape-square.c-btn--critical, .-size-huge.-shape-square.c-btn--transparent, .-size-huge.-shape-rounded.c-btn, .-size-huge.-shape-rounded.c-btn--primary, .-size-huge.-shape-rounded.c-btn--secondary, .-size-huge.-shape-rounded.c-btn--aux, .-size-huge.-shape-rounded.c-btn--emphasize, .-size-huge.-shape-rounded.c-btn--critical, .-size-huge.-shape-rounded.c-btn--transparent {
      width: 60px; }
    .-size-huge.-with-icon.c-btn, .-size-huge.-with-icon.c-btn--primary, .-size-huge.-with-icon.c-btn--secondary, .-size-huge.-with-icon.c-btn--aux, .-size-huge.-with-icon.c-btn--emphasize, .-size-huge.-with-icon.c-btn--critical, .-size-huge.-with-icon.c-btn--transparent {
      padding-left: 0;
      padding-right: 20px; }
  .-width-compact.c-btn, .-width-compact.c-btn--primary, .-width-compact.c-btn--secondary, .-width-compact.c-btn--aux, .-width-compact.c-btn--emphasize, .-width-compact.c-btn--critical, .-width-compact.c-btn--transparent {
    min-width: 0;
    padding-right: 4px;
    padding-left: 4px; }
  .-width-full.c-btn, .-width-full.c-btn--primary, .-width-full.c-btn--secondary, .-width-full.c-btn--aux, .-width-full.c-btn--emphasize, .-width-full.c-btn--critical, .-width-full.c-btn--transparent {
    width: 100%; }
  .-shape-square.c-btn, .-shape-square.c-btn--primary, .-shape-square.c-btn--secondary, .-shape-square.c-btn--aux, .-shape-square.c-btn--emphasize, .-shape-square.c-btn--critical, .-shape-square.c-btn--transparent, .-shape-rounded.c-btn, .-shape-rounded.c-btn--primary, .-shape-rounded.c-btn--secondary, .-shape-rounded.c-btn--aux, .-shape-rounded.c-btn--emphasize, .-shape-rounded.c-btn--critical, .-shape-rounded.c-btn--transparent {
    min-width: 0;
    width: 30px;
    padding-right: 0;
    padding-left: 0; }
    .-shape-square.c-btn > .kzicon, .-shape-square.c-btn--primary > .kzicon, .-shape-square.c-btn--secondary > .kzicon, .-shape-square.c-btn--aux > .kzicon, .-shape-square.c-btn--emphasize > .kzicon, .-shape-square.c-btn--critical > .kzicon, .-shape-square.c-btn--transparent > .kzicon, .-shape-rounded.c-btn > .kzicon, .-shape-rounded.c-btn--primary > .kzicon, .-shape-rounded.c-btn--secondary > .kzicon, .-shape-rounded.c-btn--aux > .kzicon, .-shape-rounded.c-btn--emphasize > .kzicon, .-shape-rounded.c-btn--critical > .kzicon, .-shape-rounded.c-btn--transparent > .kzicon {
      margin-top: -4px;
      margin-left: -1px; }
  .-shape-rounded.c-btn, .-shape-rounded.c-btn--primary, .-shape-rounded.c-btn--secondary, .-shape-rounded.c-btn--aux, .-shape-rounded.c-btn--emphasize, .-shape-rounded.c-btn--critical, .-shape-rounded.c-btn--transparent {
    border-radius: 100%; }

.c-btn {
  color: #626e8b;
  background-color: #f7f9fd;
  border-color: #b4bed5; }
  .c-btn:active, .c-btn.active {
    background-image: none; }
  .c-btn:hover, .c-btn.hover, .c-btn:focus, .c-btn.focus, .c-btn:active, .c-btn.active {
    color: #626e8b;
    background-color: #dbe0eb;
    border-color: #b4bed5; }
  .c-btn.disabled, .c-btn.disabled:hover, .c-btn.disabled:focus, .c-btn.disabled:active, .c-btn.disabled.active, .c-btn[disabled], .c-btn[disabled]:hover, .c-btn[disabled]:focus, .c-btn[disabled]:active, .c-btn[disabled].active,
  fieldset[disabled] .c-btn,
  fieldset[disabled] .c-btn:hover,
  fieldset[disabled] .c-btn:focus,
  fieldset[disabled] .c-btn:active,
  fieldset[disabled] .c-btn.active {
    color: #fff;
    background-color: #dbe0eb;
    border-color: #dbe0eb; }

.c-btn--primary {
  color: #fff;
  background-color: #5fa9ff;
  border-color: #5fa9ff; }
  .c-btn--primary:active, .c-btn--primary.active {
    background-image: none; }
  .c-btn--primary:hover, .c-btn--primary.hover, .c-btn--primary:focus, .c-btn--primary.focus, .c-btn--primary:active, .c-btn--primary.active {
    color: #fff;
    background-color: #7fbaff;
    border-color: #7fbaff; }
  .c-btn--primary.disabled, .c-btn--primary.disabled:hover, .c-btn--primary.disabled:focus, .c-btn--primary.disabled:active, .c-btn--primary.disabled.active, .c-btn--primary[disabled], .c-btn--primary[disabled]:hover, .c-btn--primary[disabled]:focus, .c-btn--primary[disabled]:active, .c-btn--primary[disabled].active,
  fieldset[disabled] .c-btn--primary,
  fieldset[disabled] .c-btn--primary:hover,
  fieldset[disabled] .c-btn--primary:focus,
  fieldset[disabled] .c-btn--primary:active,
  fieldset[disabled] .c-btn--primary.active {
    color: #fff;
    background-color: #dbe0eb;
    border-color: #dbe0eb; }

.c-btn--secondary {
  color: #fff;
  background-color: #8293b9;
  border-color: #8293b9; }
  .c-btn--secondary:active, .c-btn--secondary.active {
    background-image: none; }
  .c-btn--secondary:hover, .c-btn--secondary.hover, .c-btn--secondary:focus, .c-btn--secondary.focus, .c-btn--secondary:active, .c-btn--secondary.active {
    color: #fff;
    background-color: #9ba9c7;
    border-color: #9ba9c7; }
  .c-btn--secondary.disabled, .c-btn--secondary.disabled:hover, .c-btn--secondary.disabled:focus, .c-btn--secondary.disabled:active, .c-btn--secondary.disabled.active, .c-btn--secondary[disabled], .c-btn--secondary[disabled]:hover, .c-btn--secondary[disabled]:focus, .c-btn--secondary[disabled]:active, .c-btn--secondary[disabled].active,
  fieldset[disabled] .c-btn--secondary,
  fieldset[disabled] .c-btn--secondary:hover,
  fieldset[disabled] .c-btn--secondary:focus,
  fieldset[disabled] .c-btn--secondary:active,
  fieldset[disabled] .c-btn--secondary.active {
    color: #fff;
    background-color: #dbe0eb;
    border-color: #dbe0eb; }

.c-btn--aux {
  color: #b4bed5;
  background-color: #4c566c;
  border-color: #4c566c; }
  .c-btn--aux:active, .c-btn--aux.active {
    background-image: none; }
  .c-btn--aux:hover, .c-btn--aux.hover, .c-btn--aux:focus, .c-btn--aux.focus, .c-btn--aux:active, .c-btn--aux.active {
    color: #b4bed5;
    background-color: #707889;
    border-color: #707889; }
  .c-btn--aux.disabled, .c-btn--aux.disabled:hover, .c-btn--aux.disabled:focus, .c-btn--aux.disabled:active, .c-btn--aux.disabled.active, .c-btn--aux[disabled], .c-btn--aux[disabled]:hover, .c-btn--aux[disabled]:focus, .c-btn--aux[disabled]:active, .c-btn--aux[disabled].active,
  fieldset[disabled] .c-btn--aux,
  fieldset[disabled] .c-btn--aux:hover,
  fieldset[disabled] .c-btn--aux:focus,
  fieldset[disabled] .c-btn--aux:active,
  fieldset[disabled] .c-btn--aux.active {
    color: #fff;
    background-color: #dbe0eb;
    border-color: #dbe0eb; }

.c-btn--emphasize {
  color: #fff;
  background-color: #6ad922;
  border-color: #6ad922; }
  .c-btn--emphasize:active, .c-btn--emphasize.active {
    background-image: none; }
  .c-btn--emphasize:hover, .c-btn--emphasize.hover, .c-btn--emphasize:focus, .c-btn--emphasize.focus, .c-btn--emphasize:active, .c-btn--emphasize.active {
    color: #fff;
    background-color: #88e14e;
    border-color: #88e14e; }
  .c-btn--emphasize.disabled, .c-btn--emphasize.disabled:hover, .c-btn--emphasize.disabled:focus, .c-btn--emphasize.disabled:active, .c-btn--emphasize.disabled.active, .c-btn--emphasize[disabled], .c-btn--emphasize[disabled]:hover, .c-btn--emphasize[disabled]:focus, .c-btn--emphasize[disabled]:active, .c-btn--emphasize[disabled].active,
  fieldset[disabled] .c-btn--emphasize,
  fieldset[disabled] .c-btn--emphasize:hover,
  fieldset[disabled] .c-btn--emphasize:focus,
  fieldset[disabled] .c-btn--emphasize:active,
  fieldset[disabled] .c-btn--emphasize.active {
    color: #fff;
    background-color: #dbe0eb;
    border-color: #dbe0eb; }

.c-btn--critical {
  color: #fff;
  background-color: #fe7877;
  border-color: #fe7877; }
  .c-btn--critical:active, .c-btn--critical.active {
    background-image: none; }
  .c-btn--critical:hover, .c-btn--critical.hover, .c-btn--critical:focus, .c-btn--critical.focus, .c-btn--critical:active, .c-btn--critical.active {
    color: #fff;
    background-color: #fe9392;
    border-color: #fe9392; }
  .c-btn--critical.disabled, .c-btn--critical.disabled:hover, .c-btn--critical.disabled:focus, .c-btn--critical.disabled:active, .c-btn--critical.disabled.active, .c-btn--critical[disabled], .c-btn--critical[disabled]:hover, .c-btn--critical[disabled]:focus, .c-btn--critical[disabled]:active, .c-btn--critical[disabled].active,
  fieldset[disabled] .c-btn--critical,
  fieldset[disabled] .c-btn--critical:hover,
  fieldset[disabled] .c-btn--critical:focus,
  fieldset[disabled] .c-btn--critical:active,
  fieldset[disabled] .c-btn--critical.active {
    color: #fff;
    background-color: #dbe0eb;
    border-color: #dbe0eb; }

.c-btn--transparent {
  background-color: transparent;
  border-width: 0 !important;
  border-radius: 0 !important;
  color: #5fa9ff;
  text-decoration: none; }
  .c-btn--transparent:hover, .c-btn--transparent:focus, .c-btn--transparent:active {
    text-decoration: underline; }

.c-rounded-btn-with-label {
  display: inline-block;
  color: #414a5d;
  cursor: pointer;
  transition: color 0.1s ease-in; }
  .c-rounded-btn-with-label > [class^="c-btn"] {
    margin-right: 10px; }
  .c-rounded-btn-with-label:hover {
    text-decoration: none;
    color: #8293b9; }
    .c-rounded-btn-with-label:hover .c-btn {
      color: #626e8b;
      background-color: #dbe0eb;
      border-color: #b4bed5; }
      .c-rounded-btn-with-label:hover .c-btn:active, .c-rounded-btn-with-label:hover .c-btn.active {
        background-image: none; }
    .c-rounded-btn-with-label:hover .c-btn--primary {
      color: #fff;
      background-color: #7fbaff;
      border-color: #7fbaff; }
      .c-rounded-btn-with-label:hover .c-btn--primary:active, .c-rounded-btn-with-label:hover .c-btn--primary.active {
        background-image: none; }
    .c-rounded-btn-with-label:hover .c-btn--secondary {
      color: #fff;
      background-color: #707889;
      border-color: #707889; }
      .c-rounded-btn-with-label:hover .c-btn--secondary:active, .c-rounded-btn-with-label:hover .c-btn--secondary.active {
        background-image: none; }
    .c-rounded-btn-with-label:hover .c-btn--aux {
      color: #fff;
      background-color: #9ba9c7;
      border-color: #9ba9c7; }
      .c-rounded-btn-with-label:hover .c-btn--aux:active, .c-rounded-btn-with-label:hover .c-btn--aux.active {
        background-image: none; }
    .c-rounded-btn-with-label:hover .c-btn--emphasize {
      color: #fff;
      background-color: #a0e7a5;
      border-color: #a0e7a5; }
      .c-rounded-btn-with-label:hover .c-btn--emphasize:active, .c-rounded-btn-with-label:hover .c-btn--emphasize.active {
        background-image: none; }
    .c-rounded-btn-with-label:hover .c-btn--critical {
      color: #fff;
      background-color: #fe9392;
      border-color: #fe9392; }
      .c-rounded-btn-with-label:hover .c-btn--critical:active, .c-rounded-btn-with-label:hover .c-btn--critical.active {
        background-image: none; }
  .c-rounded-btn-with-label + .c-rounded-btn-with-label {
    margin-left: 30px; }

/*doc
---
title: Standard buttons
name: 01-standard-buttons
category: 06.Buttons-01.Buttons
---

To create a standard button, add the `.c-btn` class to any `<a>`, `<button>` or `<input>` element.

```slim_example
p
  a.c-btn href="#" Link button
  button.c-btn Button
  input.c-btn type="button" value="Input"
  input.c-btn type="submit" value="Submit"
p
  a.c-btn href="#" リンクボタン
  button.c-btn ボタン
  input.c-btn type="button" value="インプット"
  input.c-btn type="submit" value="サブミット"
```
*/
/*doc
---
title: Variations
name: 02-buttons-variations
category: 06.Buttons-01.Buttons
---

There are several variations for a button. Choose one in context.

* Use `.c-btn--primary` for a primary action
* Use `.c-btn--secondary` for a secondary action
* Use `.c-btn--aux` for an auxiliary action.
* Use `.c-btn--emphasize` for an emphasized action
* Use `.c-btn--critical` for a critical action
* Use `.c-btn--transparent` for a button which background is transparent

```slim_example
p
  a.c-btn--primary href="#" Primary
  a.c-btn--secondary href="#" Secondary
  a.c-btn--aux href="#" Auxiliary
  a.c-btn--emphasize href="#" Emphasize
  a.c-btn--critical href="#" Critical
  a.c-btn--transparent href="#" Transparent

p
  button.c-btn--primary Primary
  button.c-btn--secondary Secondary
  button.c-btn--aux Auxiliary
  button.c-btn--emphasize Emphasize
  button.c-btn--critical Critical
  button.c-btn--transparent Transparent

p
  input.c-btn--primary type="button" value="Primary"
  input.c-btn--secondary type="button" value="Secondary"
  input.c-btn--aux type="button" value="Auxiliary"
  input.c-btn--emphasize type="button" value="Emphasize"
  input.c-btn--critical type="button" value="Critical"
  input.c-btn--transparent type="button" value="Transparent"
```
*/
/*doc
---
title: States
name: 03-buttons-states
category: 06.Buttons-01.Buttons
---

#### Disabled

To mark a button as disabled, add the `disabled` attribute to `<button>` or `<input>` element.

If you use `<a>` element, add the `.disabled` class alongside `.c-btn`.

```slim_example
p
  button.c-btn disabled="disabled" Disabled
  button.c-btn--primary disabled="disabled" Disabled
  button.c-btn--secondary disabled="disabled" Disabled
  button.c-btn--aux disabled="disabled" Disabled
  button.c-btn--emphasize disabled="disabled" Disabled
  button.c-btn--critical disabled="disabled" Disabled
p
  a.c-btn.disabled href="#" Disabled
  a.c-btn--primary.disabled href="#" Disabled
  a.c-btn--secondary.disabled href="#" Disabled
  a.c-btn--aux.disabled href="#" Disabled
  a.c-btn--emphasize.disabled href="#" Disabled
  a.c-btn--critical.disabled href="#" Disabled
```

#### Active

To style a button so that it appears "pressed", add the `.active` class alongside `.c-btn`.

For `<button>` elements, no need to add `:active` as it's a pseudo-class, but if you need to force the same appearance, go ahead and add the `.active`.

```slim_example
p
  a.c-btn.active href="#" Active
  a.c-btn--primary.active href="#" Active
  a.c-btn--secondary.active href="#" Active
  a.c-btn--aux.active href="#" Active
  a.c-btn--emphasize.active href="#" Active
  a.c-btn--critical.active href="#" Active
p
  button.c-btn.active Active
  button.c-btn--primary.active Active
  button.c-btn--secondary.active Active
  button.c-btn--aux.active Active
  button.c-btn--emphasize.active Active
  button.c-btn--critical.active Active
```
*/
/*doc
---
title: Sizes
name: 04-buttons-sizes
category: 06.Buttons-01.Buttons
---

* Add `.-size-small` for small buttons
* Add `.-size-large` for large buttons
* Add `.-size-larger` for larger buttons
* Add `.-size-huge` for huge buttons

```slim_example
p
  button.c-btn.-size-small Small
  button.c-btn--primary.-size-small Small
  button.c-btn--secondary.-size-small Small
p
  button.c-btn Medium
  button.c-btn--primary Medium
  button.c-btn--secondary Medium
p
  button.c-btn.-size-large Large
  button.c-btn--primary.-size-large Large
  button.c-btn--secondary.-size-large Large
p
  button.c-btn.-size-larger Larger
  button.c-btn--primary.-size-larger Larger
  button.c-btn--secondary.-size-larger Larger
p
  button.c-btn.-size-huge Huge
  button.c-btn--primary.-size-huge Huge
  button.c-btn--secondary.-size-huge Huge
```
*/
/*doc
---
title: Widths
name: 05-buttons-widths
category: 06.Buttons-01.Buttons
---

A buttons has a minimum width.

```slim_example
p
  button.c-btn--primary.-size-small OK
  button.c-btn--secondary.-size-small Cancel
p
  button.c-btn--primary OK
  button.c-btn--secondary Cancel
p
  button.c-btn--primary.-size-large OK
  button.c-btn--secondary.-size-large Cancel
p
  button.c-btn--primary.-size-larger OK
  button.c-btn--secondary.-size-larger Cancel
p
  button.c-btn--primary.-size-huge OK
  button.c-btn--secondary.-size-huge Cancel
```

If you need a button which has no minimum width, add `.-width-compact` modifier class.

```slim_example
p
  button.c-btn--primary.-size-small.-width-compact OK
  button.c-btn--secondary.-size-small.-width-compact Cancel
p
  button.c-btn--primary.-width-compact OK
  button.c-btn--secondary.-width-compact Cancel
p
  button.c-btn--primary.-size-large.-width-compact OK
  button.c-btn--secondary.-size-large.-width-compact Cancel
p
  button.c-btn--primary.-size-larger.-width-compact OK
  button.c-btn--secondary.-size-larger.-width-compact Cancel
p
  button.c-btn--primary.-size-huge.-width-compact OK
  button.c-btn--secondary.-size-huge.-width-compact Cancel
```

If you need a button which fits parent container, add `.-width-full` modifier class.

```slim_example
button.c-btn--emphasize.-size-large.-width-full Full width button
```
*/
/*doc
---
title: Buttons with icons
name: 06-buttons-with-icons
category: 06.Buttons-01.Buttons
---

Add `.-with-icon` modifier class to create a button with an icon and a label.

```slim_example
p
  button.c-btn.-size-small.-with-icon
    i.kzicon.kzicon-pencil
    | 編集する
p
  button.c-btn.-with-icon
    i.kzicon.kzicon-gear
    | Settings
p
  button.c-btn--primary.-size-large.-with-icon
    i.kzicon.kzicon-plus
    | 新しいテストを作成する
p
  button.c-btn--primary.-size-larger.-with-icon
    i.kzicon.kzicon-profile
    | Log in
p
  button.c-btn--primary.-size-huge.-with-icon
    i.kzicon.kzicon-phone
    | Contact us
```

If you want to create a button with only an icon, `.-with-icon` class is unnecessary.

```slim_example
button.c-btn--aux
  i.kzicon.kzicon-round-arrow-right.kzicon-spin
```
*/
/*doc
---
title: Shapes
name: 07-buttons-shapes
category: 06.Buttons-01.Buttons
---

#### Square buttons

Add `.-shape-square` class to create a regular square button.

```slim_example
p
  button.c-btn.-shape-square
    i.kzicon.kzicon-plus
  a.c-btn--primary.-shape-square href="#"
    i.kzicon.kzicon-upload
  button.c-btn--secondary.-shape-square
    i.kzicon.kzicon-download
  button.c-btn--critical.-shape-square
    i.kzicon.kzicon-pause

p
  button.c-btn.-shape-square.-size-large
    i.kzicon.kzicon-plus
  a.c-btn--primary.-shape-square.-size-large href="#"
    i.kzicon.kzicon-upload
  button.c-btn--secondary.-shape-square.-size-large
    i.kzicon.kzicon-download
  button.c-btn--critical.-shape-square.-size-large
    i.kzicon.kzicon-pause
```

#### Rounded buttons

Add `.-shape-square` class to create a rounded button.

```slim_example
p
  button.c-btn.-shape-rounded.-size-small
    i.kzicon.kzicon-pause
  a.c-btn--primary.-shape-rounded.-size-small href="#"
    i.kzicon.kzicon-play
  button.c-btn--secondary.-shape-rounded.-size-small
    i.kzicon.kzicon-round-arrow-left
  button.c-btn--critical.-shape-rounded.-size-small
    i.kzicon.kzicon-cancel
p
  button.c-btn.-shape-rounded
    i.kzicon.kzicon-plus
  a.c-btn--primary.-shape-rounded href="#"
    i.kzicon.kzicon-upload
  button.c-btn--secondary.-shape-rounded
    i.kzicon.kzicon-download
  button.c-btn--critical.-shape-rounded
    i.kzicon.kzicon-pause
p
  button.c-btn.-shape-rounded.-size-large
    i.kzicon.kzicon-plus
  a.c-btn--primary.-shape-rounded.-size-large href="#"
    i.kzicon.kzicon-upload
  button.c-btn--secondary.-shape-rounded.-size-large
    i.kzicon.kzicon-download
  button.c-btn--critical.-shape-rounded.-size-large
    i.kzicon.kzicon-pause
```

#### Rounded buttons with labels

Wrap a button and its label text with `.c-rounded-btn-with-label` class.

```slim_example
p
  a.c-rounded-btn-with-label href="#"
    span.c-btn.-shape-rounded.-size-small
      i.kzicon.kzicon-pause
    | Pause
  a.c-rounded-btn-with-label href="#"
    span.c-btn--primary.-shape-rounded.-size-small
      i.kzicon.kzicon-play
    | Play
  a.c-rounded-btn-with-label href="#"
    span.c-btn--critical.-shape-rounded.-size-small
      i.kzicon.kzicon-cancel
    | Cancel

p
  a.c-rounded-btn-with-label href="#"
    span.c-btn.-shape-rounded
      i.kzicon.kzicon-pause
    | Pause
  a.c-rounded-btn-with-label href="#"
    span.c-btn--primary.-shape-rounded
      i.kzicon.kzicon-play
    | Play
  a.c-rounded-btn-with-label href="#"
    span.c-btn--critical.-shape-rounded
      i.kzicon.kzicon-cancel
    | Cancel


p
  a.c-rounded-btn-with-label href="#"
    span.c-btn.-shape-rounded.-size-large
      i.kzicon.kzicon-pause
    | Pause
  a.c-rounded-btn-with-label href="#"
    span.c-btn--primary.-shape-rounded.-size-large
      i.kzicon.kzicon-play
    | Play
  a.c-rounded-btn-with-label href="#"
    span.c-btn--critical.-shape-rounded.-size-large
      i.kzicon.kzicon-cancel
    | Cancel
```

*/
.c-checkbox,
.c-radio {
  position: relative; }
  .c-checkbox label,
  .c-radio label {
    display: inline-block;
    min-height: 20px;
    padding-left: 32px;
    margin-bottom: 0;
    color: #414a5d !important;
    font-size: 13px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    font-weight: 700; }
  .c-checkbox input[type="checkbox"],
  .c-radio input[type="checkbox"], .c-checkbox input[type="radio"],
  .c-radio input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    opacity: 0 !important;
    outline: 0;
    z-index: -1; }
    .c-checkbox input[type="checkbox"][disabled],
    .c-radio input[type="checkbox"][disabled], .c-checkbox input[type="radio"][disabled],
    .c-radio input[type="radio"][disabled] {
      cursor: not-allowed; }
    .c-checkbox input[type="checkbox"] + span::before,
    .c-radio input[type="checkbox"] + span::before, .c-checkbox input[type="radio"] + span::before,
    .c-radio input[type="radio"] + span::before {
      position: absolute;
      content: '';
      top: 1px;
      left: 0;
      width: 20px;
      height: 20px;
      background-color: #fff;
      border: 1px solid #b4bed5; }
    .c-checkbox input[type="checkbox"] + span::after,
    .c-radio input[type="checkbox"] + span::after, .c-checkbox input[type="radio"] + span::after,
    .c-radio input[type="radio"] + span::after {
      position: absolute;
      opacity: 0;
      transition: opacity 0.1s ease-in; }
    .c-checkbox input[type="checkbox"]:checked + span::after,
    .c-radio input[type="checkbox"]:checked + span::after, .c-checkbox input[type="radio"]:checked + span::after,
    .c-radio input[type="radio"]:checked + span::after {
      opacity: 1; }
    .c-checkbox input[type="checkbox"]:disabled + span,
    .c-radio input[type="checkbox"]:disabled + span, .c-checkbox input[type="radio"]:disabled + span,
    .c-radio input[type="radio"]:disabled + span {
      color: #b4bed5;
      cursor: not-allowed; }
      .c-checkbox input[type="checkbox"]:disabled + span::before,
      .c-radio input[type="checkbox"]:disabled + span::before, .c-checkbox input[type="radio"]:disabled + span::before,
      .c-radio input[type="radio"]:disabled + span::before {
        background-color: #f7f9fd;
        border-color: #dbe0eb; }
      .c-checkbox input[type="checkbox"]:disabled + span::after,
      .c-radio input[type="checkbox"]:disabled + span::after, .c-checkbox input[type="radio"]:disabled + span::after,
      .c-radio input[type="radio"]:disabled + span::after {
        color: #c3cbdd; }
  .c-checkbox input[type="checkbox"] + span::before,
  .c-radio input[type="checkbox"] + span::before {
    border-radius: 2px; }
  .c-checkbox input[type="checkbox"] + span::after,
  .c-radio input[type="checkbox"] + span::after {
    top: -5px;
    left: -5px;
    font-family: "KaizenIcons";
    font-size: 32px;
    line-height: 1;
    content: '\e009';
    color: #5fa9ff; }
  .c-checkbox input[type="radio"] + span::before,
  .c-radio input[type="radio"] + span::before {
    border-radius: 10px; }
  .c-checkbox input[type="radio"] + span::after,
  .c-radio input[type="radio"] + span::after {
    content: '';
    top: 6px;
    left: 5px;
    width: 10px;
    height: 10px;
    background-color: #5fa9ff;
    border-radius: 100%; }
  .c-checkbox input[type="radio"][checked]:disabled + span::after,
  .c-radio input[type="radio"][checked]:disabled + span::after {
    opacity: 1;
    background-color: #c3cbdd; }
  .-display-inline.c-checkbox,
  .-display-inline.c-radio {
    display: inline-block;
    margin-right: 20px; }
    .-display-inline.c-checkbox:last-child,
    .-display-inline.c-radio:last-child {
      margin-right: 0; }
  .-bg-darker.c-checkbox input[type="checkbox"] + span::before,
  .-bg-darker.c-radio input[type="checkbox"] + span::before, .-bg-darker.c-checkbox input[type="radio"] + span::before,
  .-bg-darker.c-radio input[type="radio"] + span::before {
    border-color: #414a5d;
    background-color: #8293b9; }
  .-bg-darker.c-checkbox input[type="checkbox"]:disabled + span::before,
  .-bg-darker.c-radio input[type="checkbox"]:disabled + span::before, .-bg-darker.c-checkbox input[type="radio"]:disabled + span::before,
  .-bg-darker.c-radio input[type="radio"]:disabled + span::before {
    border-color: #b4bed5;
    background-color: #dbe0eb; }
  .-bg-darker.c-checkbox input[type="checkbox"] + span::after,
  .-bg-darker.c-radio input[type="checkbox"] + span::after {
    color: #fff; }
  .-bg-darker.c-checkbox input[type="radio"] + span::after,
  .-bg-darker.c-radio input[type="radio"] + span::after {
    background-color: #fff; }
  .-bg-darker.c-checkbox input[type="radio"]:disabled + span::after,
  .-bg-darker.c-radio input[type="radio"]:disabled + span::after {
    background-color: #fff; }
  .-is-loading.c-checkbox *,
  .-is-loading.c-radio * {
    cursor: progress !important; }

/*doc
---
title: Basic
name: 01-checkboxes-and-radios-basic
category: 07.Forms-04.Checkboxes and Radios
---

Wrap a label and a checkbox/radio control with `.c-checkbox` or `.c-radio` class to align properly. Don't forget `<span>` element inside `<label>`.

```slim_example
.c-form-group
  label Check options
  .c-checkbox
    label
      input type="checkbox"
      span Checkbox 1
  .c-checkbox
    label
      input type="checkbox"
      span Checkbox 2

.c-form-group
  label Choose options
  .c-radio
    label
      input type="radio" name="radio-options" checked="checked"
      span Radio 1
  .c-radio
    label
      input type="radio" name="radio-options"
      span Radio 2
```
*/
/*doc
---
title: Inline
name: 02-checkboxes-and-radios-inline
category: 07.Forms-04.Checkboxes and Radios
---

Use the `.-display-inline` classes on a series of checkboxes or radios for controls that appear on the same line.

```slim_example
.c-form-group
  label Check options
  .c-checkbox.-display-inline
    label
      input type="checkbox"
      span Checkbox 1
  .c-checkbox.-display-inline
    label
      input type="checkbox"
      span Checkbox 2

.c-form-group
  label Choose options
  .c-radio.-display-inline
    label
      input type="radio" name="inline-radio-options" checked="checked"
      span Radio 1
  .c-radio.-display-inline
    label
      input type="radio" name="inline-radio-options"
      span Radio 2
```
*/
/*doc
---
title: Disabled state
name: 03-checkboxes-and-radios-disabled-state
category: 07.Forms-04.Checkboxes and Radios
---

Add the `disabled` boolean attribute on a checkbox or radio.

```slim_example
.c-form-group
  .c-checkbox
    label
      input type="checkbox" disabled="disabled"
      span Disabled checkbox
  .c-checkbox
    label
      input type="checkbox" disabled="disabled" checked="checked"
      span Disabled checkbox

.c-form-group
  .c-radio
    label
      input type="radio" name="disabled-radio-options" disabled="disabled" checked="checked"
      span Disabled radio
  .c-radio
    label
      input type="radio" name="disabled-radio-options" disabled="disabled"
      span Disabled radio
```
*/
/*doc
---
title: Loading state
name: 04-checkboxes-and-radios-loading-state
category: 07.Forms-04.Checkboxes and Radios
---

Add `-is-loading` class to represent a loading state. Use together with the `disabled` attribute to avoid changing values while loading.

```slim_example
.c-form-group
  .c-checkbox.-is-loading
    label
      input type="checkbox" disabled="disabled"
      span Disabled checkbox
  .c-checkbox.-is-loading
    label
      input type="checkbox" disabled="disabled" checked="checked"
      span Disabled checkbox

.c-form-group
  .c-radio.-is-loading
    label
      input type="radio" name="disabled-radio-options" disabled="disabled" checked="checked"
      span Disabled radio
  .c-radio.-is-loading
    label
      input type="radio" name="disabled-radio-options" disabled="disabled"
      span Disabled radio
```
*/
/*doc
---
title: Color Variation
name: 05-checkboxes-and-radios-bg-color
category: 07.Forms-04.Checkboxes and Radios
---

Wrap a label and a checkbox/radio control with `.c-checkbox.-bg-darker` or `.c-radio.-bg-darker` class to align properly. Don't forget `<span>` element inside `<label>`.

```slim_example
.c-form-group
  label Check options
  .c-checkbox.-bg-darker
    label
      input type="checkbox" checked="checked"
      span Checkbox 1
  .c-checkbox.-bg-darker
    label
      input type="checkbox"
      span Checkbox 2

.c-form-group
  .c-checkbox.-bg-darker
    label
      input type="checkbox" checked="checked" disabled="disabled"
      span Checkbox 1
  .c-checkbox.-bg-darker
    label
      input type="checkbox" disabled="disabled"
      span Checkbox 2


.c-form-group
  label Choose options
  .c-radio.-bg-darker
    label
      input type="radio" name="radio-options" checked="checked"
      span Radio 1
  .c-radio.-bg-darker
    label
      input type="radio" name="radio-options"
      span Radio 2

.c-form-group
  .c-radio.-bg-darker
    label
      input type="radio" name="radio-options-disabled" checked="checked" disabled="disabled"
      span Radio 1
  .c-radio.-bg-darker
    label
      input type="radio" name="radio-options-disabled" disabled="disabled"
      span Radio 2
```
*/
code {
  font-family: "Source Code Pro", Consolas, Menlo, Courier, monospace;
  margin: 0;
  padding: .2em 0;
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 3px; }
  code::before, code::after {
    letter-spacing: -.2em;
    content: "\00a0"; }

pre,
input[readonly][type="text"].code-snippet,
textarea[readonly].code-snippet {
  display: block;
  margin: 0 0 10px;
  padding: 12px 20px 13px;
  font-family: "Source Code Pro", Consolas, Menlo, Courier, monospace;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #4c566c;
  color: #57d68d;
  line-height: inherit;
  border-radius: 4px;
  cursor: text; }

pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background-color: transparent;
  border-radius: 0; }
  pre code::before, pre code::after {
    content: ""; }

/*doc
---
title: Inline
name: 01-code-inline
category: 03.Typography-04.Code
---

Wrap inline snippets of code with `<code>`.

```slim_example
= 'For example, '
code &lt;section&gt;
= ' should be wrapped as inline.'
```
*/
/*doc
---
title: Block
name: 02-code-block
category: 03.Typography-04.Code
---

Use `<pre>` for multiple lines of code.

```slim_example
pre
  code
    | &lt;h1&gt;Sample heading here...&lt;/h1&gt;

pre
  code
    | &lt;h1&gt;Sample heading here...&lt;/h1&gt;
      &lt;p&gt;Sample content here...&lt;/p&gt;
```
*/
/*doc
---
title: Selectable
name: 03-code-selectable
category: 03.Typography-04.Code
---

For showing a code snippet which is selected automatically on clicking, add `.code-snippet` to a `<input type="text">` or `<textarea>` element.

Don't forget to add `readonly` attribute and `onclick="this.select()"`.

```slim_example
input.code-snippet type="text" readonly="readonly" value="<h1>Sample heading here...</h1>" onclick="this.select()"

textarea.code-snippet readonly="readonly" onclick="this.select()"
  | &lt;h1&gt;Sample heading here...&lt;/h1&gt;
    &lt;p&gt;Sample content here...&lt;/p&gt;
```
*/
/*doc
---
title: Syntax highlight
name: 03-code-syntax-highlight
category: 03.Typography-04.Code
---

wip

*/
.c-datepicker {
  position: absolute;
  z-index: 1001;
  width: auto;
  vertical-align: top;
  margin-top: 5px;
  padding: 15px;
  border: 1px solid #ebedef;
  border-radius: 4px;
  background-color: #fff;
  color: #4c566c;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: u-fadeIn .2s ease-in-out;
  transform-origin: 0 0; }
  .c-datepicker > * {
    outline: none; }

.c-datepicker__nav {
  text-align: center;
  margin-bottom: 10px;
  line-height: 40px; }

.c-datepicker__previous {
  float: left;
  color: #4c566c; }

.c-datepicker__next {
  float: right;
  color: #4c566c; }

.c-datepicker__month-year-picker:first-child {
  margin-right: .5em; }

.c-datepicker__table {
  width: 100%; }
  .c-datepicker__table th,
  .c-datepicker__table td {
    padding: 2px;
    text-align: center; }
  .c-datepicker__table th {
    font-size: 13px; }
  .c-datepicker__table a,
  .c-datepicker__table span {
    display: block;
    width: 38px;
    line-height: 32px;
    color: #4c566c;
    text-decoration: none;
    border-radius: 3px; }
  .c-datepicker__table a:hover, .c-datepicker__table a.c-datepicker__date--active {
    background-color: #f2f6fa; }
  .c-datepicker__table a.c-datepicker__date--muted {
    color: #b4bed5; }
  .c-datepicker__table a.c-datepicker__date--selected {
    background-color: #5fa9ff;
    color: #fff; }
  .c-datepicker__table span {
    background-color: #dbe0eb;
    color: #b4bed5; }

/*doc
---
title: Basic
name: 01-datepicker-basic
category: 07.Forms-08.Datepickers
---

```slim_example
sass:
  #datePicker
    display: none

button#datePickerToggle.c-btn Click me

#datePicker.c-datepicker
  .c-datepicker__nav
    a.c-datepicker__previous href=""
      i.kzicon.kzicon-arrow-left
    a.c-datepicker__next href=""
      i.kzicon.kzicon-arrow-right
    .c-datepicker__heading
      span.c-datepicker__month-year-picker February
      span.c-datepicker__month-year-picker 2015
  table.c-datepicker__table
    tr
      th Mon
      th Tue
      th Wed
      th Thu
      th Fri
      th Sat
      th Sun
    tr
      td: span data-date="2015-01-26T00:00:00+09:00" 26
      td: span data-date="2015-01-27T00:00:00+09:00" 27
      td: span data-date="2015-01-28T00:00:00+09:00" 28
      td: a.c-datepicker__date--muted href="" data-date="2015-01-29T00:00:00+09:00" 29
      td: a.c-datepicker__date--muted href="" data-date="2015-01-30T00:00:00+09:00" 30
      td: a.c-datepicker__date--muted href="" data-date="2015-01-31T00:00:00+09:00" 31
      td: a href="" data-date="2015-02-01T00:00:00+09:00" 1
    tr
      td: a href="" data-date="2015-02-02T00:00:00+09:00" 2
      td: a href="" data-date="2015-02-03T00:00:00+09:00" 3
      td: a href="" data-date="2015-02-04T00:00:00+09:00" 4
      td: a.c-datepicker__date--selected href="" data-date="2015-02-05T00:00:00+09:00" 5
      td: a href="" data-date="2015-02-06T00:00:00+09:00" 6
      td: a href="" data-date="2015-02-07T00:00:00+09:00" 7
      td: a href="" data-date="2015-02-08T00:00:00+09:00" 8
    tr
      td: a href="" data-date="2015-02-09T00:00:00+09:00" 9
      td: a href="" data-date="2015-02-10T00:00:00+09:00" 10
      td: a href="" data-date="2015-02-11T00:00:00+09:00" 11
      td: a href="" data-date="2015-02-12T00:00:00+09:00" 12
      td: a href="" data-date="2015-02-13T00:00:00+09:00" 13
      td: a href="" data-date="2015-02-14T00:00:00+09:00" 14
      td: a href="" data-date="2015-02-15T00:00:00+09:00" 15
    tr
      td: a href="" data-date="2015-02-16T00:00:00+09:00" 16
      td: a href="" data-date="2015-02-17T00:00:00+09:00" 17
      td: a href="" data-date="2015-02-18T00:00:00+09:00" 18
      td: a href="" data-date="2015-02-19T00:00:00+09:00" 19
      td: a href="" data-date="2015-02-20T00:00:00+09:00" 20
      td: a href="" data-date="2015-02-21T00:00:00+09:00" 21
      td: a href="" data-date="2015-02-22T00:00:00+09:00" 22
    tr
      td: a href="" data-date="2015-02-23T00:00:00+09:00" 23
      td: a href="" data-date="2015-02-24T00:00:00+09:00" 24
      td: a href="" data-date="2015-02-25T00:00:00+09:00" 25
      td: a href="" data-date="2015-02-26T00:00:00+09:00" 26
      td: a href="" data-date="2015-02-27T00:00:00+09:00" 27
      td: a href="" data-date="2015-02-28T00:00:00+09:00" 28
      td: a.c-datepicker__date--muted href="" data-date="2015-03-01T00:00:00+09:00" 1

javascript:
  document.addEventListener("click", function(e) {
    if (e.srcElement.id == 'datePickerToggle') {
      e.preventDefault();
      document.getElementById('datePicker').style.display = 'block';
    } else {
      document.getElementById('datePicker').style.display = 'none';
    }
  });
```
*/
.c-dropdown {
  display: inline-block;
  vertical-align: middle; }
  .c-dropdown a:focus {
    outline: none !important; }
  .c-dropdown.-scrollable .c-dropdown__menu {
    max-height: 288px;
    overflow-y: scroll;
    border-top: 1px solid #ebedef; }
  .c-dropdown.-scrollable-compact .c-dropdown__menu {
    max-height: 138px;
    overflow-y: scroll;
    border-top: 1px solid #ebedef; }
  .c-dropdown.-color-dark .c-dropdown__toggle,
  .c-dropdown.-color-dark .c-dropdown__item {
    background-color: #626e8b;
    color: #b4bed5; }
    .c-dropdown.-color-dark .c-dropdown__toggle:active, .c-dropdown.-color-dark .c-dropdown__toggle:focus, .c-dropdown.-color-dark .c-dropdown__toggle:hover,
    .c-dropdown.-color-dark .c-dropdown__item:active,
    .c-dropdown.-color-dark .c-dropdown__item:focus,
    .c-dropdown.-color-dark .c-dropdown__item:hover {
      color: #fff;
      background-color: #4c566c; }
  .c-dropdown.-color-dark .c-dropdown__toggle,
  .c-dropdown.-color-dark .c-dropdown__menu {
    border-color: #626e8b; }
  .c-dropdown.-color-dark .c-dropdown__item--primary {
    color: #fff;
    background-color: #4c566c; }
    .c-dropdown.-color-dark .c-dropdown__item--primary:hover {
      background-color: #707889; }
  .c-dropdown.-width-compact .c-dropdown__item {
    padding-right: 20px; }
  .c-dropdown.-width-wide {
    width: 520px; }
    .c-dropdown.-width-wide .c-dropdown__body,
    .c-dropdown.-width-wide .c-dropdown__toggle,
    .c-dropdown.-width-wide .c-dropdown__menu {
      width: 520px;
      max-width: 520px; }
  .c-dropdown.-width-full {
    width: 100%; }
    .c-dropdown.-width-full .c-dropdown__body,
    .c-dropdown.-width-full .c-dropdown__toggle,
    .c-dropdown.-width-full .c-dropdown__menu {
      width: 100%;
      max-width: none; }

.c-dropdown__body {
  float: left;
  display: block;
  position: relative;
  height: 30px;
  z-index: 1000;
  font-weight: bold; }
  .c-dropdown__body.disabled .c-dropdown__toggle {
    background-color: #f7f9fd;
    color: #dbe0eb;
    border-color: #ebedef;
    pointer-events: none;
    cursor: not-allowed; }
    .c-dropdown__body.disabled .c-dropdown__toggle:hover, .c-dropdown__body.disabled .c-dropdown__toggle:active {
      background-color: #f7f9fd; }

.c-dropdown__toggle {
  position: relative;
  display: block;
  height: 100%;
  line-height: 30px;
  padding-right: 50px;
  padding-left: 8px;
  border: 1px solid #b4bed5;
  border-radius: 4px;
  background-color: #f7f9fd;
  font-size: 12px;
  color: #626e8b;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: background-color 0.1s ease-in;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }
  .c-dropdown__toggle:hover, .c-dropdown__toggle:active {
    background-color: #dbe0eb;
    text-decoration: none; }
  .c-dropdown__toggle:focus {
    text-decoration: none; }
  .c-dropdown__toggle .kzicon-arrow-down:last-child {
    position: absolute;
    top: 0;
    right: 0;
    transition: transform 0.1s ease-in;
    margin-top: -1px; }
  .c-dropdown__toggle .kzicon {
    margin-top: -3px; }
    .c-dropdown__toggle .kzicon:first-child {
      margin-left: -8px; }

.open {
  z-index: 1001; }
  .open .c-dropdown__toggle {
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0; }
    .open .c-dropdown__toggle .kzicon-arrow-down {
      transform: rotate(180deg); }
  .open .c-dropdown__menu {
    opacity: 1;
    visibility: visible; }

.c-dropdown__menu {
  opacity: 0;
  visibility: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  border-right: 1px solid #b4bed5;
  border-bottom: 1px solid #b4bed5;
  border-left: 1px solid #b4bed5;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  max-width: 300px; }
  .c-dropdown__menu > .active .c-dropdown__item,
  .c-dropdown__menu > .active .c-dropdown__item:hover {
    background-color: #6ad922;
    color: #fff;
    cursor: default; }
  .c-dropdown__menu li:last-child .c-dropdown__item {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px; }

.c-dropdown__item {
  display: block;
  padding-right: 40px;
  padding-left: 8px;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: #626e8b;
  background-color: #f7f9fd;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }
  .c-dropdown__item:hover {
    text-decoration: none;
    color: #fff;
    background-color: #b4bed5; }
  .c-dropdown__item:active {
    text-decoration: none;
    color: #fff;
    background-color: #7fbaff; }
  .c-dropdown__item .kzicon {
    margin-top: -3px; }
    .c-dropdown__item .kzicon:first-child {
      margin-left: -8px; }

.c-dropdown__item--primary {
  display: block;
  padding-right: 50px;
  padding-left: 50px;
  height: 40px;
  line-height: 40px;
  background-color: #5fa9ff;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  cursor: pointer; }
  .c-dropdown__item--primary:hover {
    text-decoration: none;
    background-color: #7fbaff; }

/*doc
---
title: Basic
name: 01-dropdown-basic
category: 07.Forms-03.Selects (Dropdowns)
---

A dropdown requires `boostrap.js`. Include `bootstrap.js` or `bootstrap.min.js` in your pages.

Add `data-toggle="dropdown"` attribute to toggle a dropdown menu.

```slim_example
p
  .c-dropdown
    .c-dropdown__body
      .c-dropdown__toggle data-toggle="dropdown"
        | Order a beer you like to drink first today
        i.kzicon.kzicon-arrow-down
      ul.c-dropdown__menu
        li: a.c-dropdown__item Yona Yona Ale
        li.active: a.c-dropdown__item Tokyo Black
        li: a.c-dropdown__item Indian Aooni
        li: a.c-dropdown__item Yona Yona Real Ale
        li: a.c-dropdown__item Wednesday cat

  button.c-btn Save

p
  .c-dropdown
    .c-dropdown__body
      .c-dropdown__toggle data-toggle="dropdown"
        | More actions
        i.kzicon.kzicon-arrow-down
      ul.c-dropdown__menu
        li: a.c-dropdown__item Yona Yona Ale
        li.active: a.c-dropdown__item Tokyo Black
        li: a.c-dropdown__item Indian Aooni
        li: a.c-dropdown__item Yona Yona Real Ale
        li: a.c-dropdown__item Wednesday cat

  .c-dropdown
    .c-dropdown__body
      .c-dropdown__toggle data-toggle="dropdown"
        | Action 2
        i.kzicon.kzicon-arrow-down
      ul.c-dropdown__menu
        li: a.c-dropdown__item Action 1
        li.active: a.c-dropdown__item Action 2
        li: a.c-dropdown__item Action 3
        li: a.c-dropdown__item Action 4
        li: a.c-dropdown__item Action 5

p
  .c-dropdown
    .c-dropdown__body
      .c-dropdown__toggle data-toggle="dropdown"
        | Only one beer
        i.kzicon.kzicon-arrow-down
      ul.c-dropdown__menu
        li: a.c-dropdown__item Yona Yona Ale

  .c-dropdown
    .c-dropdown__body
      .c-dropdown__toggle data-toggle="dropdown"
        span.kzicon.kzicon-goal-page_visit
        span Set Goal
        i.kzicon.kzicon-arrow-down
      ul.c-dropdown__menu
        li.active: a.c-dropdown__item
          span.kzicon.kzicon-goal-click
          span Goal #1
        li: a.c-dropdown__item
          span.kzicon.kzicon-goal-click
          span Goal #2
```
*/
/*doc
---
title: Colors
name: 02-dropdown-dark
category: 07.Forms-03.Selects (Dropdowns)
---

Add `.-color-dark` if you need dark dropdown.

```slim_example
.c-dropdown.-color-dark
  .c-dropdown__body
    .c-dropdown__toggle data-toggle="dropdown"
      | Order a beer you like to drink first today
      i.kzicon.kzicon-arrow-down
    ul.c-dropdown__menu
      li: a.c-dropdown__item Yona Yona Ale
      li.active: a.c-dropdown__item Tokyo Black
      li: a.c-dropdown__item Indian Aooni
      li: a.c-dropdown__item Yona Yona Real Ale
      li: a.c-dropdown__item Wednesday cat
```
*/
/*doc
---
title: Scrollable
name: 03-dropdown-scrollable
category: 07.Forms-03.Selects (Dropdowns)
---

Use `.-scrollable` if you have a lot of options and want to show a scroll bar inside a menu. The first 10 options will be shown.

```slim_example
p
  .c-dropdown.-scrollable
    .c-dropdown__body
      .c-dropdown__toggle data-toggle="dropdown"
        | Tokyo Black
        i.kzicon.kzicon-arrow-down
      ul.c-dropdown__menu
        li: a.c-dropdown__item Yona Yona Ale
        li.active: a.c-dropdown__item Tokyo Black
        li: a.c-dropdown__item Indian Aooni
        li: a.c-dropdown__item Yona Yona Real Ale
        li: a.c-dropdown__item Wednesday cat

  .c-dropdown.-scrollable.-color-dark
    .c-dropdown__body
      .c-dropdown__toggle data-toggle="dropdown"
        | Tokyo Black
        i.kzicon.kzicon-arrow-down
      ul.c-dropdown__menu
        li: a.c-dropdown__item Yona Yona Ale
        li.active: a.c-dropdown__item Tokyo Black
        li: a.c-dropdown__item Indian Aooni
        li: a.c-dropdown__item Yona Yona Real Ale
        li: a.c-dropdown__item Wednesday cat

p
  .c-dropdown.-scrollable
    .c-dropdown__body
      .c-dropdown__toggle data-toggle="dropdown"
        | Tokyo Black
        i.kzicon.kzicon-arrow-down
      ul.c-dropdown__menu
        li: a.c-dropdown__item Yona Yona Ale
        li.active: a.c-dropdown__item Tokyo Black
        li: a.c-dropdown__item Indian Aooni
        li: a.c-dropdown__item Yona Yona Real Ale
        li: a.c-dropdown__item Wednesday cat
        li: a.c-dropdown__item Minoh beer Pilsner
        li: a.c-dropdown__item Minoh beer Stout
        li: a.c-dropdown__item Minoh beer Pale ale
        li: a.c-dropdown__item Minoh beer Pilsner
        li: a.c-dropdown__item Minoh beer Stout
        li: a.c-dropdown__item Minoh beer Pale ale
        li: a.c-dropdown__item Minoh beer Pilsner
        li: a.c-dropdown__item Minoh beer Stout
        li: a.c-dropdown__item Minoh beer Pale ale

  .c-dropdown.-scrollable.-color-dark
    .c-dropdown__body
      .c-dropdown__toggle data-toggle="dropdown"
        | Tokyo Black
        i.kzicon.kzicon-arrow-down
      ul.c-dropdown__menu
        li: a.c-dropdown__item Yona Yona Ale
        li.active: a.c-dropdown__item Tokyo Black
        li: a.c-dropdown__item Indian Aooni
        li: a.c-dropdown__item Yona Yona Real Ale
        li: a.c-dropdown__item Wednesday cat
        li: a.c-dropdown__item Minoh beer Pilsner
        li: a.c-dropdown__item Minoh beer Stout
        li: a.c-dropdown__item Minoh beer Pale ale
        li: a.c-dropdown__item Minoh beer Pilsner
        li: a.c-dropdown__item Minoh beer Stout
        li: a.c-dropdown__item Minoh beer Pale ale
        li: a.c-dropdown__item Minoh beer Pilsner
        li: a.c-dropdown__item Minoh beer Stout
        li: a.c-dropdown__item Minoh beer Pale ale
```

If you need to show less options, use `.-scrollable-compact`.

```slim_example
p
  .c-dropdown.-scrollable-compact
    .c-dropdown__body
      .c-dropdown__toggle data-toggle="dropdown"
        | Tokyo Black
        i.kzicon.kzicon-arrow-down
      ul.c-dropdown__menu
        li: a.c-dropdown__item Yona Yona Ale
        li.active: a.c-dropdown__item Tokyo Black
        li: a.c-dropdown__item Indian Aooni
        li: a.c-dropdown__item Yona Yona Real Ale
        li: a.c-dropdown__item Wednesday cat
        li: a.c-dropdown__item Minoh beer Pilsner
        li: a.c-dropdown__item Minoh beer Stout
        li: a.c-dropdown__item Minoh beer Pale ale
        li: a.c-dropdown__item Minoh beer Pilsner
        li: a.c-dropdown__item Minoh beer Stout
        li: a.c-dropdown__item Minoh beer Pale ale
        li: a.c-dropdown__item Minoh beer Pilsner
        li: a.c-dropdown__item Minoh beer Stout
        li: a.c-dropdown__item Minoh beer Pale ale
```

*/
/*doc
---
title: With an action button
name: 04-dropdown-with-an-action-button
category: 07.Forms-03.Selects (Dropdowns)
---

Use `.c-dropdown__item--primary` to show an primary action item.

```slim_example
.c-dropdown
  .c-dropdown__body
    .c-dropdown__toggle data-toggle="dropdown"
      | Increase flow to a particular page
      i.kzicon.kzicon-arrow-down
    ul.c-dropdown__menu
      li: a.c-dropdown__item Get more click-through visits
      li.active: a.c-dropdown__item Sign-up registration increment
      li: a.c-dropdown__item Increase flow to a particular page
      li: a.c-dropdown__item Longer sessions from current customers
      li: a.c-dropdown__item More page-views from first-time visitors
      li: a.c-dropdown__item--primary Create goal

.c-dropdown.-color-dark
  .c-dropdown__body
    .c-dropdown__toggle data-toggle="dropdown"
      | Increase flow to a particular page
      i.kzicon.kzicon-arrow-down
    ul.c-dropdown__menu
      li: a.c-dropdown__item Get more click-through visits
      li.active: a.c-dropdown__item Sign-up registration increment
      li: a.c-dropdown__item Increase flow to a particular page
      li: a.c-dropdown__item Longer sessions from current customers
      li: a.c-dropdown__item More page-views from first-time visitors
      li: a.c-dropdown__item--primary Create goal
```

*/
/*doc
---
title: Sizes
name: 05-dropdown-sizes
category: 07.Forms-03.Selects (Dropdowns)
---

If you need less padding dropdown, add `.-width-compact` class.

If contains long text, add `-width-wide` or `-width-full` class.

```slim_example
.c-form-group
  label Normal size
  .c-dropdown
    .c-dropdown__body
      .c-dropdown__toggle data-toggle="dropdown"
        | Long long long long long long long long long long long long long long long long long
        i.kzicon.kzicon-arrow-down
      ul.c-dropdown__menu
        li: a.c-dropdown__item short
        li.active: a.c-dropdown__item Long long long long long long long long long long long long long long long long long
        li: a.c-dropdown__item short
        li: a.c-dropdown__item short

.c-form-group
  label Compact size
  .c-dropdown.-width-compact
    .c-dropdown__body
      .c-dropdown__toggle data-toggle="dropdown"
        | Long long long long long long long long long long long long long long long long long
        i.kzicon.kzicon-arrow-down
      ul.c-dropdown__menu
        li: a.c-dropdown__item short
        li.active: a.c-dropdown__item Long long long long long long long long long long long long long long long long long
        li: a.c-dropdown__item short
        li: a.c-dropdown__item short

.c-form-group
  label wide size
  .c-dropdown.-width-wide
    .c-dropdown__body
      .c-dropdown__toggle data-toggle="dropdown"
        | Long long long long long long long long long long long long long long long long long
        i.kzicon.kzicon-arrow-down
      ul.c-dropdown__menu
        li: a.c-dropdown__item short
        li.active: a.c-dropdown__item Long long long long long long long long long long long long long
        li: a.c-dropdown__item short
        li: a.c-dropdown__item short

.c-form-group
  label Full size
  .c-dropdown.-width-full
    .c-dropdown__body
      .c-dropdown__toggle data-toggle="dropdown"
        | Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long
        i.kzicon.kzicon-arrow-down
      ul.c-dropdown__menu
        li: a.c-dropdown__item short
        li.active: a.c-dropdown__item Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long
        li: a.c-dropdown__item short
        li: a.c-dropdown__item short
```

*/
/*doc
---
title: Disabled status
name: 06-dropdown-disabled-status
category: 07.Forms-03.Selects (Dropdowns)
---

Add the `.disabled` class to the `.c-dropdown__body` class and remove the `data-toggle="dropdown"` attribute.

```slim_example
.c-dropdown
  .c-dropdown__body.disabled
    a.c-dropdown__toggle href="#"
      | Choose one
      i.kzicon.kzicon-arrow-down
    ul.c-dropdown__menu
      li
        a.c-dropdown__item href="#" Stout
      li.active
        a.c-dropdown__item href="#" Indian Pale Ale (IPA)
      li
        a.c-dropdown__item href="#" Porter
      li
        a.c-dropdown__item href="#" Weizen
```
*/
.c-input-file {
  position: relative; }
  .c-input-file input[type='file'] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    width: .1px;
    height: .1px;
    opacity: 0; }

/*doc
---
title: File uploads
name: 03-file-uploads
category: 07.Forms-02.Inputs
---

Wrap `input[type="file"]` with `label.c-input-file` class to hide a default style. If you want use our fancy button, add `.c-btn` classes.

```slim_example
label.c-input-file.c-btn.-with-icon
  i.kzicon.kzicon-upload
  | Choose a image
  input type="file"

label.c-input-file.c-btn.-shape-rounded
  i.kzicon.kzicon-upload
  input type="file"
```

*/
.c-form-group--flexbox,
.c-form-group {
  margin-bottom: 24px; }
  .c-form-group--flexbox label,
  .c-form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #626e8b;
    font-size: 12px; }
    .c-form-group--flexbox label small,
    .c-form-group label small {
      font-weight: normal; }
  .c-form-group--flexbox .required::before,
  .c-form-group .required::before {
    content: '*';
    color: #c00;
    margin-left: 5px;
    font-family: Arial, sans-serif; }

.c-form-group--flexbox {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end; }

.c-form-group--flexbox-row {
  margin-right: 12px;
  flex: 1 1 auto; }
  .c-form-group--flexbox-row:last-child {
    margin-right: 0; }
  .c-form-group--flexbox-row.-shrink,
  .c-form-group--flexbox-row button {
    flex: 0 1 auto; }

/*doc
---
title: Basic (Stacked)
name: 01-basic-form
category: 07.Forms-01.Form layout
---

Use `.c-form-group` containing the label and the form elements. A `.required` class inside `.c-form-group` shows a astarisk mark.

The stacked layout **is recommended** for smartphone.

```slim_example
form role="form"
  .c-form-group
    label
      | Username
      i.required
    input type="text" placeholder="Please enter your username"

  .c-form-group
    label
      | Password
      i.required
    input type="password" placeholder="Please enter your password"

  .c-form-group
    label Credit card
    .c-dropdown
      .c-dropdown__body
        a.c-dropdown__toggle data-toggle="dropdown" href="#"
          i.kzicon.kzicon-arrow-down
          | Choose an option
        ul.c-dropdown__menu
          li
            a.c-dropdown__item href="#" VISA
          li
            a.c-dropdown__item href="#" Master
          li
            a.c-dropdown__item href="#" American Express
          li
            a.c-dropdown__item href="#" JCB

  .c-form-group
    label Check your favorite drink
    .c-checkbox
      label
        input type="checkbox"
        span コーヒー
    .c-checkbox
      label
        input type="checkbox"
        span ビール

  .c-form-group
    label Choose your favorite season
    .c-radio.-display-inline
      label
        input type="radio" name="season" checked="checked"
        span 春
    .c-radio.-display-inline
      label
        input type="radio" name="season"
        span 夏
    .c-radio.-display-inline
      label
        input type="radio" name="season"
        span 秋
    .c-radio.-display-inline
      label
        input type="radio" name="season"
        span 冬

  .c-form-group
    label Upload file
    .c-input-file.c-btn--aux
      | Choose a image
      input type="file"

  .c-form-group
    label Comment
    textarea rows="3" placeholder="Enter a comment"

  button.c-btn--primary type="submit" Save and activate
```
*/
/*doc
---
title: Flexible layout
name: 02-flexible-form
category: 07.Forms-01.Form layout
---

You can build a flexible form layout with our grid system.

```slim_example
.c-container--fluid
  .c-row
    .c-col--md-6
      .c-form-group
        label First name
        input type="text" placeholder="Enter your first name"
    .c-col--md-6
      .c-form-group
        label Last name
        input type="text" placeholder="Enter your last name"
  .c-row
    .c-col--md-4
      .c-form-group
        label Tel number
        input type="tel" placeholder="Enter your tel number"
    .c-col--md-8
      .c-form-group
        label Email address
        input type="email" placeholder="Enter your email address"
  .c-row
    .c-col--md-12
      .c-form-group
        label Message
        textarea rows="3" placeholder="Enter your message"
```
*/
/*doc
---
title: Horizontal layout (with Flexbox Layout)
name: 03-horizontal-form
category: 07.Forms-01.Form layout
---
```slim_example
.c-form-group--flexbox
  .c-form-group--flexbox-row
    input.-size-compact type="text" placeholder="Enter your first name"
  // Buttons are always shrink
  button.c-btn--primary type="submit" Save

.c-form-group--flexbox
  .c-form-group--flexbox-row
    label First name
    input.-size-compact type="text" placeholder="Enter your first name"
  // You can add a shrink option
  .c-form-group--flexbox-row.-shrink
    label Last name
    input.-size-compact type="text" placeholder="Enter your last name"
  button.c-btn--primary type="submit" Save
```
*/
/*doc
---
title: Inline layout
name: 04-inline-form
category: 07.Forms-01.Form layout
---
Do you need it?
*/
.c-container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px; }
  .c-container:before, .c-container:after {
    content: " ";
    display: table; }
  .c-container:after {
    clear: both; }
  @media (min-width: 768px) {
    .c-container {
      width: 750px; } }
  @media (min-width: 992px) {
    .c-container {
      width: 970px; } }
  @media (min-width: 1200px) {
    .c-container {
      width: 1170px; } }

.c-container--fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px; }
  .c-container--fluid:before, .c-container--fluid:after {
    content: " ";
    display: table; }
  .c-container--fluid:after {
    clear: both; }

.c-row {
  margin-left: -15px;
  margin-right: -15px; }
  .c-row:before, .c-row:after {
    content: " ";
    display: table; }
  .c-row:after {
    clear: both; }

.c-col--xs-1, .c-col--sm-1, .c-col--md-1, .c-col--lg-1, .c-col--xs-2, .c-col--sm-2, .c-col--md-2, .c-col--lg-2, .c-col--xs-3, .c-col--sm-3, .c-col--md-3, .c-col--lg-3, .c-col--xs-4, .c-col--sm-4, .c-col--md-4, .c-col--lg-4, .c-col--xs-5, .c-col--sm-5, .c-col--md-5, .c-col--lg-5, .c-col--xs-6, .c-col--sm-6, .c-col--md-6, .c-col--lg-6, .c-col--xs-7, .c-col--sm-7, .c-col--md-7, .c-col--lg-7, .c-col--xs-8, .c-col--sm-8, .c-col--md-8, .c-col--lg-8, .c-col--xs-9, .c-col--sm-9, .c-col--md-9, .c-col--lg-9, .c-col--xs-10, .c-col--sm-10, .c-col--md-10, .c-col--lg-10, .c-col--xs-11, .c-col--sm-11, .c-col--md-11, .c-col--lg-11, .c-col--xs-12, .c-col--sm-12, .c-col--md-12, .c-col--lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }

.c-col--xs-1, .c-col--xs-2, .c-col--xs-3, .c-col--xs-4, .c-col--xs-5, .c-col--xs-6, .c-col--xs-7, .c-col--xs-8, .c-col--xs-9, .c-col--xs-10, .c-col--xs-11, .c-col--xs-12 {
  float: left; }

.c-col--xs-1 {
  width: 8.33333%; }

.c-col--xs-2 {
  width: 16.66667%; }

.c-col--xs-3 {
  width: 25%; }

.c-col--xs-4 {
  width: 33.33333%; }

.c-col--xs-5 {
  width: 41.66667%; }

.c-col--xs-6 {
  width: 50%; }

.c-col--xs-7 {
  width: 58.33333%; }

.c-col--xs-8 {
  width: 66.66667%; }

.c-col--xs-9 {
  width: 75%; }

.c-col--xs-10 {
  width: 83.33333%; }

.c-col--xs-11 {
  width: 91.66667%; }

.c-col--xs-12 {
  width: 100%; }

.c-col--xs-pull-0 {
  right: auto; }

.c-col--xs-pull-1 {
  right: 8.33333%; }

.c-col--xs-pull-2 {
  right: 16.66667%; }

.c-col--xs-pull-3 {
  right: 25%; }

.c-col--xs-pull-4 {
  right: 33.33333%; }

.c-col--xs-pull-5 {
  right: 41.66667%; }

.c-col--xs-pull-6 {
  right: 50%; }

.c-col--xs-pull-7 {
  right: 58.33333%; }

.c-col--xs-pull-8 {
  right: 66.66667%; }

.c-col--xs-pull-9 {
  right: 75%; }

.c-col--xs-pull-10 {
  right: 83.33333%; }

.c-col--xs-pull-11 {
  right: 91.66667%; }

.c-col--xs-pull-12 {
  right: 100%; }

.c-col--xs-push-0 {
  left: auto; }

.c-col--xs-push-1 {
  left: 8.33333%; }

.c-col--xs-push-2 {
  left: 16.66667%; }

.c-col--xs-push-3 {
  left: 25%; }

.c-col--xs-push-4 {
  left: 33.33333%; }

.c-col--xs-push-5 {
  left: 41.66667%; }

.c-col--xs-push-6 {
  left: 50%; }

.c-col--xs-push-7 {
  left: 58.33333%; }

.c-col--xs-push-8 {
  left: 66.66667%; }

.c-col--xs-push-9 {
  left: 75%; }

.c-col--xs-push-10 {
  left: 83.33333%; }

.c-col--xs-push-11 {
  left: 91.66667%; }

.c-col--xs-push-12 {
  left: 100%; }

.c-col--xs-offset-0 {
  margin-left: 0%; }

.c-col--xs-offset-1 {
  margin-left: 8.33333%; }

.c-col--xs-offset-2 {
  margin-left: 16.66667%; }

.c-col--xs-offset-3 {
  margin-left: 25%; }

.c-col--xs-offset-4 {
  margin-left: 33.33333%; }

.c-col--xs-offset-5 {
  margin-left: 41.66667%; }

.c-col--xs-offset-6 {
  margin-left: 50%; }

.c-col--xs-offset-7 {
  margin-left: 58.33333%; }

.c-col--xs-offset-8 {
  margin-left: 66.66667%; }

.c-col--xs-offset-9 {
  margin-left: 75%; }

.c-col--xs-offset-10 {
  margin-left: 83.33333%; }

.c-col--xs-offset-11 {
  margin-left: 91.66667%; }

.c-col--xs-offset-12 {
  margin-left: 100%; }

@media (min-width: 768px) {
  .c-col--sm-1, .c-col--sm-2, .c-col--sm-3, .c-col--sm-4, .c-col--sm-5, .c-col--sm-6, .c-col--sm-7, .c-col--sm-8, .c-col--sm-9, .c-col--sm-10, .c-col--sm-11, .c-col--sm-12 {
    float: left; }
  .c-col--sm-1 {
    width: 8.33333%; }
  .c-col--sm-2 {
    width: 16.66667%; }
  .c-col--sm-3 {
    width: 25%; }
  .c-col--sm-4 {
    width: 33.33333%; }
  .c-col--sm-5 {
    width: 41.66667%; }
  .c-col--sm-6 {
    width: 50%; }
  .c-col--sm-7 {
    width: 58.33333%; }
  .c-col--sm-8 {
    width: 66.66667%; }
  .c-col--sm-9 {
    width: 75%; }
  .c-col--sm-10 {
    width: 83.33333%; }
  .c-col--sm-11 {
    width: 91.66667%; }
  .c-col--sm-12 {
    width: 100%; }
  .c-col--sm-pull-0 {
    right: auto; }
  .c-col--sm-pull-1 {
    right: 8.33333%; }
  .c-col--sm-pull-2 {
    right: 16.66667%; }
  .c-col--sm-pull-3 {
    right: 25%; }
  .c-col--sm-pull-4 {
    right: 33.33333%; }
  .c-col--sm-pull-5 {
    right: 41.66667%; }
  .c-col--sm-pull-6 {
    right: 50%; }
  .c-col--sm-pull-7 {
    right: 58.33333%; }
  .c-col--sm-pull-8 {
    right: 66.66667%; }
  .c-col--sm-pull-9 {
    right: 75%; }
  .c-col--sm-pull-10 {
    right: 83.33333%; }
  .c-col--sm-pull-11 {
    right: 91.66667%; }
  .c-col--sm-pull-12 {
    right: 100%; }
  .c-col--sm-push-0 {
    left: auto; }
  .c-col--sm-push-1 {
    left: 8.33333%; }
  .c-col--sm-push-2 {
    left: 16.66667%; }
  .c-col--sm-push-3 {
    left: 25%; }
  .c-col--sm-push-4 {
    left: 33.33333%; }
  .c-col--sm-push-5 {
    left: 41.66667%; }
  .c-col--sm-push-6 {
    left: 50%; }
  .c-col--sm-push-7 {
    left: 58.33333%; }
  .c-col--sm-push-8 {
    left: 66.66667%; }
  .c-col--sm-push-9 {
    left: 75%; }
  .c-col--sm-push-10 {
    left: 83.33333%; }
  .c-col--sm-push-11 {
    left: 91.66667%; }
  .c-col--sm-push-12 {
    left: 100%; }
  .c-col--sm-offset-0 {
    margin-left: 0%; }
  .c-col--sm-offset-1 {
    margin-left: 8.33333%; }
  .c-col--sm-offset-2 {
    margin-left: 16.66667%; }
  .c-col--sm-offset-3 {
    margin-left: 25%; }
  .c-col--sm-offset-4 {
    margin-left: 33.33333%; }
  .c-col--sm-offset-5 {
    margin-left: 41.66667%; }
  .c-col--sm-offset-6 {
    margin-left: 50%; }
  .c-col--sm-offset-7 {
    margin-left: 58.33333%; }
  .c-col--sm-offset-8 {
    margin-left: 66.66667%; }
  .c-col--sm-offset-9 {
    margin-left: 75%; }
  .c-col--sm-offset-10 {
    margin-left: 83.33333%; }
  .c-col--sm-offset-11 {
    margin-left: 91.66667%; }
  .c-col--sm-offset-12 {
    margin-left: 100%; } }

@media (min-width: 992px) {
  .c-col--md-1, .c-col--md-2, .c-col--md-3, .c-col--md-4, .c-col--md-5, .c-col--md-6, .c-col--md-7, .c-col--md-8, .c-col--md-9, .c-col--md-10, .c-col--md-11, .c-col--md-12 {
    float: left; }
  .c-col--md-1 {
    width: 8.33333%; }
  .c-col--md-2 {
    width: 16.66667%; }
  .c-col--md-3 {
    width: 25%; }
  .c-col--md-4 {
    width: 33.33333%; }
  .c-col--md-5 {
    width: 41.66667%; }
  .c-col--md-6 {
    width: 50%; }
  .c-col--md-7 {
    width: 58.33333%; }
  .c-col--md-8 {
    width: 66.66667%; }
  .c-col--md-9 {
    width: 75%; }
  .c-col--md-10 {
    width: 83.33333%; }
  .c-col--md-11 {
    width: 91.66667%; }
  .c-col--md-12 {
    width: 100%; }
  .c-col--md-pull-0 {
    right: auto; }
  .c-col--md-pull-1 {
    right: 8.33333%; }
  .c-col--md-pull-2 {
    right: 16.66667%; }
  .c-col--md-pull-3 {
    right: 25%; }
  .c-col--md-pull-4 {
    right: 33.33333%; }
  .c-col--md-pull-5 {
    right: 41.66667%; }
  .c-col--md-pull-6 {
    right: 50%; }
  .c-col--md-pull-7 {
    right: 58.33333%; }
  .c-col--md-pull-8 {
    right: 66.66667%; }
  .c-col--md-pull-9 {
    right: 75%; }
  .c-col--md-pull-10 {
    right: 83.33333%; }
  .c-col--md-pull-11 {
    right: 91.66667%; }
  .c-col--md-pull-12 {
    right: 100%; }
  .c-col--md-push-0 {
    left: auto; }
  .c-col--md-push-1 {
    left: 8.33333%; }
  .c-col--md-push-2 {
    left: 16.66667%; }
  .c-col--md-push-3 {
    left: 25%; }
  .c-col--md-push-4 {
    left: 33.33333%; }
  .c-col--md-push-5 {
    left: 41.66667%; }
  .c-col--md-push-6 {
    left: 50%; }
  .c-col--md-push-7 {
    left: 58.33333%; }
  .c-col--md-push-8 {
    left: 66.66667%; }
  .c-col--md-push-9 {
    left: 75%; }
  .c-col--md-push-10 {
    left: 83.33333%; }
  .c-col--md-push-11 {
    left: 91.66667%; }
  .c-col--md-push-12 {
    left: 100%; }
  .c-col--md-offset-0 {
    margin-left: 0%; }
  .c-col--md-offset-1 {
    margin-left: 8.33333%; }
  .c-col--md-offset-2 {
    margin-left: 16.66667%; }
  .c-col--md-offset-3 {
    margin-left: 25%; }
  .c-col--md-offset-4 {
    margin-left: 33.33333%; }
  .c-col--md-offset-5 {
    margin-left: 41.66667%; }
  .c-col--md-offset-6 {
    margin-left: 50%; }
  .c-col--md-offset-7 {
    margin-left: 58.33333%; }
  .c-col--md-offset-8 {
    margin-left: 66.66667%; }
  .c-col--md-offset-9 {
    margin-left: 75%; }
  .c-col--md-offset-10 {
    margin-left: 83.33333%; }
  .c-col--md-offset-11 {
    margin-left: 91.66667%; }
  .c-col--md-offset-12 {
    margin-left: 100%; } }

@media (min-width: 1200px) {
  .c-col--lg-1, .c-col--lg-2, .c-col--lg-3, .c-col--lg-4, .c-col--lg-5, .c-col--lg-6, .c-col--lg-7, .c-col--lg-8, .c-col--lg-9, .c-col--lg-10, .c-col--lg-11, .c-col--lg-12 {
    float: left; }
  .c-col--lg-1 {
    width: 8.33333%; }
  .c-col--lg-2 {
    width: 16.66667%; }
  .c-col--lg-3 {
    width: 25%; }
  .c-col--lg-4 {
    width: 33.33333%; }
  .c-col--lg-5 {
    width: 41.66667%; }
  .c-col--lg-6 {
    width: 50%; }
  .c-col--lg-7 {
    width: 58.33333%; }
  .c-col--lg-8 {
    width: 66.66667%; }
  .c-col--lg-9 {
    width: 75%; }
  .c-col--lg-10 {
    width: 83.33333%; }
  .c-col--lg-11 {
    width: 91.66667%; }
  .c-col--lg-12 {
    width: 100%; }
  .c-col--lg-pull-0 {
    right: auto; }
  .c-col--lg-pull-1 {
    right: 8.33333%; }
  .c-col--lg-pull-2 {
    right: 16.66667%; }
  .c-col--lg-pull-3 {
    right: 25%; }
  .c-col--lg-pull-4 {
    right: 33.33333%; }
  .c-col--lg-pull-5 {
    right: 41.66667%; }
  .c-col--lg-pull-6 {
    right: 50%; }
  .c-col--lg-pull-7 {
    right: 58.33333%; }
  .c-col--lg-pull-8 {
    right: 66.66667%; }
  .c-col--lg-pull-9 {
    right: 75%; }
  .c-col--lg-pull-10 {
    right: 83.33333%; }
  .c-col--lg-pull-11 {
    right: 91.66667%; }
  .c-col--lg-pull-12 {
    right: 100%; }
  .c-col--lg-push-0 {
    left: auto; }
  .c-col--lg-push-1 {
    left: 8.33333%; }
  .c-col--lg-push-2 {
    left: 16.66667%; }
  .c-col--lg-push-3 {
    left: 25%; }
  .c-col--lg-push-4 {
    left: 33.33333%; }
  .c-col--lg-push-5 {
    left: 41.66667%; }
  .c-col--lg-push-6 {
    left: 50%; }
  .c-col--lg-push-7 {
    left: 58.33333%; }
  .c-col--lg-push-8 {
    left: 66.66667%; }
  .c-col--lg-push-9 {
    left: 75%; }
  .c-col--lg-push-10 {
    left: 83.33333%; }
  .c-col--lg-push-11 {
    left: 91.66667%; }
  .c-col--lg-push-12 {
    left: 100%; }
  .c-col--lg-offset-0 {
    margin-left: 0%; }
  .c-col--lg-offset-1 {
    margin-left: 8.33333%; }
  .c-col--lg-offset-2 {
    margin-left: 16.66667%; }
  .c-col--lg-offset-3 {
    margin-left: 25%; }
  .c-col--lg-offset-4 {
    margin-left: 33.33333%; }
  .c-col--lg-offset-5 {
    margin-left: 41.66667%; }
  .c-col--lg-offset-6 {
    margin-left: 50%; }
  .c-col--lg-offset-7 {
    margin-left: 58.33333%; }
  .c-col--lg-offset-8 {
    margin-left: 66.66667%; }
  .c-col--lg-offset-9 {
    margin-left: 75%; }
  .c-col--lg-offset-10 {
    margin-left: 83.33333%; }
  .c-col--lg-offset-11 {
    margin-left: 91.66667%; }
  .c-col--lg-offset-12 {
    margin-left: 100%; } }

/*doc
---
title: Two types of containers
name: 01-containers
category: 02.Layout-01.Containers
---

You need to use a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects.

**Note: Containers are not nestable.**

#### Responsive fixed width

Use `.c-container` for a responsive fixed width container.

```html
<div class="c-container">
  // ...
</div>
```

#### Full width

Use `.c-container-fluid` for a full width container, spanning the entire width of your viewport.

```html
<div class="c-container--fluid">
// ...
</div>
```

*/
/*doc
---
title: Basic
name: 01-grid-basic
category: 02.Layout-02.Grid
---

Mobile first, 12-columns, nestable, responsive grid system which is fully compatible with [Bootstrap's grid system](http://getbootstrap.com/css/#grid).

The class names are modified by following this library's naming convention (based on MindBEMding).

<table class="c-table u-mb30">
<thead>
  <tr>
    <th>Boostrap</th>
    <th>Kaizen Platform</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td><code>.container</code></td>
    <td><code>.c-container</code></td>
  </tr>
  <tr>
    <td><code>.container-fluid</code></td>
    <td><code>.c-container--fluid</code></td>
  </tr>
  <tr>
    <td><code>.row</code></td>
    <td><code>.c-row</code></td>
  </tr>
  <tr>
    <td><code>.col-md-*</code></td>
    <td><code>.c-col--md-*</code></td>
  </tr>
  </tbody>
</table>

```slim_example
.c-container--fluid
  .c-row.display
    .c-col--md-2 2
    .c-col--md-2 2
    .c-col--md-2 2
    .c-col--md-2 2
    .c-col--md-2 2
    .c-col--md-2 2

  .c-row.display
    .c-col--md-4 4
    .c-col--md-4 4
    .c-col--md-4 4

  .c-row.display
    .c-col--md-3 3
    .c-col--md-6 6
    .c-col--md-3 3

  .c-row.display
    .c-col--md-2 2
    .c-col--md-8 8
    .c-col--md-2 2

  .c-row.display
    .c-col--md-3 3
    .c-col--md-9 9

  .c-row.display
    .c-col--md-4 4
    .c-col--md-8 8

  .c-row.display
    .c-col--md-5 5
    .c-col--md-7 7

  .c-row.display
    .c-col--md-6 6
    .c-col--md-6 6
```

<div class="c-alert--warning mb40">
  <code>.c-row.display</code> classname in the above example is for displaying grid lines as demo. It's available only in this document. Please use only <code>.c-row</code>.
</div>
*/
/*doc
---
title: Breakpoints
name: 02-breakpoints
category: 02.Layout-02.Grid
---

<table class="c-table u-mb30">
<thead>
  <tr>
    <th>Devices</th>
    <th>Screen size</th>
    <th>Prefix</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Phones (Extra small devices)</td>
    <td><768px</td>
    <td><code>xs</code></td>
  </tr>
  <tr>
    <td>Tablets (Small devices)</td>
    <td>≥768px</td>
    <td><code>sm</code></td>
  </tr>
  <tr>
    <td>Desktop (Medium devices)</td>
    <td>≥992px</td>
    <td><code>md</code></td>
  </tr>
  <tr>
    <td>Wide desktop (Large devices)</td>
    <td>≥1200px</td>
    <td><code>lg</code></td>
  </tr>
  </tbody>
</table>


```scss
// Extra small devices (phones, less than 768px)
// No media query since this is the default

// Small devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Medium devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
```
*/
/*doc
---
title: Responsive grid
name: 03-responsive-grid
category: 02.Layout-02.Grid
---

Try resizing your browser window or checking on various devices.

```slim_example
.c-container--fluid
  .c-row.display
    .c-col--xs-12.c-col--sm-6.c-col--md-8
      span.u-show-for-xs-only 12 in Mobile
      span.u-show-for-sm-only 6 in Tablet
      span.u-show-for-md-only 8 in Desktop
      span.u-show-for-lg-only 8 in Wide desktop
    .c-col--xs-6.c-col--md-4
      span.u-show-for-xs-only 6 in Mobile
      span.u-show-for-sm-only 6 in Tablet
      span.u-show-for-md-only 4 in Desktop
      span.u-show-for-lg-only 4 in Wide desktop

  .c-row.display
    .c-col--xs-6.c-col--sm-4
      span.u-show-for-xs-only 6 in Mobile
      span.u-show-for-sm-only 4 in Tablet
      span.u-show-for-md-only 4 in Desktop
      span.u-show-for-lg-only 4 in Wide desktop
    .c-col--xs-6.c-col--sm-4
      span.u-show-for-xs-only 6 in Mobile
      span.u-show-for-sm-only 4 in Tablet
      span.u-show-for-md-only 4 in Desktop
      span.u-show-for-lg-only 4 in Wide desktop
    .u-clearfix.u-show-for-xs-only
    .c-col--xs-6.c-col--sm-4
      span.u-show-for-xs-only 6 and clear in Mobile
      span.u-show-for-sm-only 4 in Tablet
      span.u-show-for-md-only 4 in Desktop
      span.u-show-for-lg-only 4 in Wide desktop
```
*/
/*doc
---
title: Offsetting columns
name: 04-offsetting-columns
category: 02.Layout-02.Grid
---

Move columns to the right using `.c-col--md-offset-*` classes.

```slim_example
.c-container--fluid
  .c-row.display
    .c-col--md-4 4
    .c-col--md-4.c-col--md-offset-4 4

  .c-row.display
    .c-col--md-3.c-col--md-offset-3 3
    .c-col--md-3.c-col--md-offset-3 3

  .c-row.display
    .c-col--md-6.c-col--md-offset-3 6
```
*/
.c-form-help, .c-form-help--inline {
  color: #414a5d;
  font-weight: normal;
  font-size: 13px; }

.c-form-help {
  display: block;
  margin-top: 5px; }

.c-form-help--inline {
  display: inline-block;
  margin-left: 15px; }

/*doc
---
title: Block level
name: 01-help-text-block-level
category: 07.Forms-06.Help text
---

Use `.c-form-help` to show help text below a control.

```slim_example
.c-form-group
  label Message
  textarea row="4"
  .c-form-help
    | Block level help text here
```
*/
/*doc
---
title: Inline level
name: 02-help-text-inline-level
category: 07.Forms-06.Help text
---

Use `.c-form-help--inline` to show inline help text.

```slim_example
.c-form-group
  label
    | Example Text
    i.required
    span.c-form-help--inline
      | Inline level help text
  input type="text" placeholder="Example Text"

.c-form-group
  label Example Label
  select
    option Choose an option
    option Stout
    option Pale ale
    option Porter
    option Weizen
  span.c-form-help--inline
    | Inline level help text
```
*/
@font-face {
  font-family: "KaizenIcons";
  src: url("../fonts/KaizenIcons.eot");
  src: url("../fonts/KaizenIcons.eot?#iefix") format("eot"), url("../fonts/KaizenIcons.woff2") format("woff2"), url("../fonts/KaizenIcons.woff") format("woff"), url("../fonts/KaizenIcons.ttf") format("truetype"), url("../fonts/KaizenIcons.svg#KaizenIcons") format("svg");
  font-weight: normal;
  font-style: normal; }

.kzicon, .kzicon2, .c-table-sorter:after {
  display: inline-block;
  vertical-align: middle;
  font-family: "KaizenIcons";
  font-size: 30px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.kzicon.-critical {
  color: #fe7877; }

.kzicon.debug {
  background-color: #f7f9fd;
  color: #333; }

.kzicon2 {
  font-size: 24px; }

.kzicon--small {
  font-size: 20px; }

.kzicon--large {
  font-size: 40px; }

.kzicon--flexible-size {
  font-size: 1rem; }

.kzicon-arrow-down:before {
  content: "\E001"; }

.kzicon-arrow-left:before {
  content: "\E002"; }

.kzicon-arrow-right:before {
  content: "\E003"; }

.kzicon-arrow-top:before {
  content: "\E004"; }

.kzicon-bell:before {
  content: "\E005"; }

.kzicon-cancel:before {
  content: "\E006"; }

.kzicon-chart:before {
  content: "\E007"; }

.kzicon-message-empty:before {
  content: "\E008"; }

.kzicon-check:before {
  content: "\E009"; }

.kzicon-credit-card:before {
  content: "\E00A"; }

.kzicon-down:before {
  content: "\E00B"; }

.kzicon-download:before {
  content: "\E00C"; }

.kzicon-experiments:before {
  content: "\E00D"; }

.kzicon-wrench:before {
  content: "\E00E"; }

.kzicon-wrench-small:before {
  content: "\E00F"; }

.kzicon-graph-small:before {
  content: "\E010"; }

.kzicon-left:before {
  content: "\E011"; }

.kzicon-left-text:before {
  content: "\E012"; }

.kzicon-less-text:before {
  content: "\E013"; }

.kzicon-mobile-menu:before {
  content: "\E014"; }

.kzicon-notifications:before {
  content: "\E015"; }

.kzicon-pause:before {
  content: "\E016"; }

.kzicon-phone:before {
  content: "\E017"; }

.kzicon-play:before {
  content: "\E018"; }

.kzicon-plus:before {
  content: "\E019"; }

.kzicon-profile-circle:before {
  content: "\E01A"; }

.kzicon-right:before {
  content: "\E01B"; }

.kzicon-right-text:before {
  content: "\E01C"; }

.kzicon-gear:before {
  content: "\E01D"; }

.kzicon-support:before {
  content: "\E01E"; }

.kzicon-team:before {
  content: "\E01F"; }

.kzicon-text:before {
  content: "\E020"; }

.kzicon-up:before {
  content: "\E021"; }

.kzicon-upload:before {
  content: "\E022"; }

.kzicon-clone:before {
  content: "\E023"; }

.kzicon-diagonal-arrow:before {
  content: "\E024"; }

.kzicon-diagonal-line:before {
  content: "\E025"; }

.kzicon-kaizen-icon1:before {
  content: "\E026"; }

.kzicon-kaizen-icon2:before {
  content: "\E027"; }

.kzicon-kaizen-icon3:before {
  content: "\E028"; }

.kzicon-round-arrow-left:before {
  content: "\E029"; }

.kzicon-round-arrow-right:before {
  content: "\E02A"; }

.kzicon-settings-small:before {
  content: "\E02B"; }

.kzicon-settings:before {
  content: "\E02C"; }

.kzicon-spark:before {
  content: "\E02D"; }

.kzicon-truncated-arrow:before {
  content: "\E02E"; }

.kzicon-minus:before {
  content: "\E02F"; }

.kzicon-message:before {
  content: "\E030"; }

.kzicon-alert:before {
  content: "\E031"; }

.kzicon-profile:before {
  content: "\E032"; }

.kzicon-settings-basic:before {
  content: "\E033"; }

.kzicon-conversions:before {
  content: "\E034"; }

.kzicon-cvr:before {
  content: "\E035"; }

.kzicon-info:before {
  content: "\E036"; }

.kzicon-pencil:before {
  content: "\E037"; }

.kzicon-goal-click:before {
  content: "\E038"; }

.kzicon-goal-page_visit:before {
  content: "\E039"; }

.kzicon-file-text:before {
  content: "\E03A"; }

.kzicon-file-default:before {
  content: "\E03B"; }

.kzicon-file-image:before {
  content: "\E03C"; }

.kzicon-goal:before {
  content: "\E03D"; }

.kzicon-specialized-experiments:before {
  content: "\E03E"; }

.kzicon-crown:before {
  content: "\E03F"; }

.kzicon-marketplace:before {
  content: "\E040"; }

.kzicon-trophy:before {
  content: "\E041"; }

.kzicon-magnifier:before {
  content: "\E042"; }

.kzicon-optimizer:before {
  content: "\E043"; }

.kzicon-customer:before {
  content: "\E044"; }

.kzicon-market:before {
  content: "\E045"; }

.kzicon-organization:before {
  content: "\E046"; }

.kzicon-round:before {
  content: "\E047"; }

.kzicon-specialized-optimizer:before {
  content: "\E048"; }

.kzicon-desktop:before {
  content: "\E049"; }

.kzicon-help-tip-circle:before {
  content: "\E04A"; }

.kzicon-help-tip:before {
  content: "\E04B"; }

.kzicon-mobile:before {
  content: "\E04C"; }

.kzicon-statistic:before {
  content: "\E04D"; }

.kzicon-tooltip:before {
  content: "\E04E"; }

.kzicon-archive:before {
  content: "\E04F"; }

.kzicon-lock-off:before {
  content: "\E050"; }

.kzicon-lock-on:before {
  content: "\E051"; }

.kzicon-caret-down:before {
  content: "\E052"; }

.kzicon-caret-up-down:before {
  content: "\E053"; }

.kzicon-caret-up:before {
  content: "\E054"; }

.kzicon-goal-transaction:before {
  content: "\E055"; }

.kzicon-delete-circle:before {
  content: "\E056"; }

.kzicon-remove-circle:before {
  content: "\E057"; }

.kzicon-trash-bin-01:before {
  content: "\E058"; }

.kzicon-trash-bin-02:before {
  content: "\E059"; }

.kzicon-user-chat:before {
  content: "\E05A"; }

.kzicon-user-favorite:before {
  content: "\E05B"; }

.kzicon-user-special:before {
  content: "\E05C"; }

.kzicon-star:before {
  content: "\E05D"; }

.kzicon-tag-circle:before {
  content: "\E05E"; }

.kzicon-tag:before {
  content: "\E05F"; }

.kzicon-palette:before {
  content: "\E060"; }

.kzicon-blind:before {
  content: "\E061"; }

.kzicon-calendar:before {
  content: "\E062"; }

.kzicon-calendar2:before {
  content: "\E063"; }

.kzicon-heart:before {
  content: "\E064"; }

.kzicon-watch:before {
  content: "\E065"; }

.kzicon-node:before {
  content: "\E066"; }

.kzicon-variations-01:before {
  content: "\E067"; }

.kzicon-variations-02:before {
  content: "\E068"; }

.kzicon-alert-info:before {
  content: "\E069"; }

.kzicon-info-02:before {
  content: "\E06A"; }

.kzicon-dialog-counter:before {
  content: "\E06B"; }

.kzicon-building:before {
  content: "\E06C"; }

.kzicon-building-small:before {
  content: "\E06D"; }

.kzicon-token-1:before {
  content: "\E06E"; }

.kzicon-token-2:before {
  content: "\E06F"; }

.kzicon-token-3:before {
  content: "\E070"; }

.kzicon-token-4:before {
  content: "\E071"; }

.kzicon-team-settings:before {
  content: "\E072"; }

.kzicon-coin1:before {
  content: "\E073"; }

.kzicon-coin2:before {
  content: "\E074"; }

.kzicon-arrow-double-right:before {
  content: "\E075"; }

.kzicon-bell-circle:before {
  content: "\E076"; }

.kzicon-link:before {
  content: "\E077"; }

.kzicon-file-sheet:before {
  content: "\E078"; }

.kzicon-creative:before {
  content: "\E079"; }

.kzicon-atmark:before {
  content: "\E07A"; }

.kzicon-clip:before {
  content: "\E07B"; }

.kzicon-user-plus:before {
  content: "\E07C"; }

.kzicon-enter:before {
  content: "\E07D"; }

.kzicon-chat:before {
  content: "\E07E"; }

.kzicon-bookmark:before {
  content: "\E07F"; }

.kzicon-list:before {
  content: "\E080"; }

.kzicon-send:before {
  content: "\E081"; }

.kzicon-sign-out:before {
  content: "\E082"; }

.kzicon-plus-02:before {
  content: "\E083"; }

.kzicon-new-window:before {
  content: "\E084"; }

.kzicon-cart:before {
  content: "\EA01"; }

.kzicon-goal-event:before {
  content: "\EA02"; }

.kzicon-project-type-display-popup:before {
  content: "\EA03"; }

.kzicon-project-type-redirect-test:before {
  content: "\EA04"; }

.kzicon-project-type-replace-image:before {
  content: "\EA05"; }

.kzicon-project-type-single-page-test:before {
  content: "\EA06"; }

.kzicon-variation-negative:before {
  content: "\EA07"; }

.kzicon-variation-neutral:before {
  content: "\EA08"; }

.kzicon-variation-positive:before {
  content: "\EA09"; }

.kzicon-actions-calendar:before {
  content: "\EA0A"; }

.kzicon-spin {
  animation: kzicon-spin 1.2s infinite linear; }

@keyframes kzicon-spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(359deg); } }

/*doc
---
title: Available icons
name: 01-available-icons
category: 04.Icons-01.Kaizen Icons
---

<div class="c-container--fluid mb40">
<div class="c-row">

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-actions-calendar debug"></i><span class="sg-icon-name">kzicon-actions-calendar</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-alert debug"></i><span class="sg-icon-name">kzicon-alert</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-alert-info debug"></i><span class="sg-icon-name">kzicon-alert-info</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-archive debug"></i><span class="sg-icon-name">kzicon-archive</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-arrow-double-right debug"></i><span class="sg-icon-name">kzicon-arrow-double-right</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-arrow-down debug"></i><span class="sg-icon-name">kzicon-arrow-down</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-arrow-left debug"></i><span class="sg-icon-name">kzicon-arrow-left</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-arrow-right debug"></i><span class="sg-icon-name">kzicon-arrow-right</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-arrow-top debug"></i><span class="sg-icon-name">kzicon-arrow-top</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-atmark debug"></i><span class="sg-icon-name">kzicon-atmark</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-bell debug"></i><span class="sg-icon-name">kzicon-bell</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-bell-circle debug"></i><span class="sg-icon-name">kzicon-bell-circle</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-blind debug"></i><span class="sg-icon-name">kzicon-blind</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-bookmark debug"></i><span class="sg-icon-name">kzicon-bookmark</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-building debug"></i><span class="sg-icon-name">kzicon-building</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-building-small debug"></i><span class="sg-icon-name">kzicon-building-small</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-calendar debug"></i><span class="sg-icon-name">kzicon-calendar</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-calendar2 debug"></i><span class="sg-icon-name">kzicon-calendar2</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-cancel debug"></i><span class="sg-icon-name">kzicon-cancel</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-caret-down debug"></i><span class="sg-icon-name">kzicon-caret-down</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-caret-up debug"></i><span class="sg-icon-name">kzicon-caret-up</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-caret-up-down debug"></i><span class="sg-icon-name">kzicon-caret-up-down</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-cart debug"></i><span class="sg-icon-name">kzicon-cart</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-chart debug"></i><span class="sg-icon-name">kzicon-chart</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-chat debug"></i><span class="sg-icon-name">kzicon-chat</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-check debug"></i><span class="sg-icon-name">kzicon-check</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-clip debug"></i><span class="sg-icon-name">kzicon-clip</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-clone debug"></i><span class="sg-icon-name">kzicon-clone</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-coin1 debug"></i><span class="sg-icon-name">kzicon-coin1</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-coin2 debug"></i><span class="sg-icon-name">kzicon-coin2</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-conversions debug"></i><span class="sg-icon-name">kzicon-conversions</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-creative debug"></i><span class="sg-icon-name">kzicon-creative</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-credit-card debug"></i><span class="sg-icon-name">kzicon-credit-card</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-crown debug"></i><span class="sg-icon-name">kzicon-crown</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-customer debug"></i><span class="sg-icon-name">kzicon-customer</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-cvr debug"></i><span class="sg-icon-name">kzicon-cvr</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-delete-circle debug"></i><span class="sg-icon-name">kzicon-delete-circle</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-desktop debug"></i><span class="sg-icon-name">kzicon-desktop</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-diagonal-arrow debug"></i><span class="sg-icon-name">kzicon-diagonal-arrow</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-diagonal-line debug"></i><span class="sg-icon-name">kzicon-diagonal-line</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-dialog-counter debug"></i><span class="sg-icon-name">kzicon-dialog-counter</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-down debug"></i><span class="sg-icon-name">kzicon-down</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-download debug"></i><span class="sg-icon-name">kzicon-download</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-enter debug"></i><span class="sg-icon-name">kzicon-enter</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-experiments debug"></i><span class="sg-icon-name">kzicon-experiments</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-file-default debug"></i><span class="sg-icon-name">kzicon-file-default</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-file-image debug"></i><span class="sg-icon-name">kzicon-file-image</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-file-sheet debug"></i><span class="sg-icon-name">kzicon-file-sheet</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-file-text debug"></i><span class="sg-icon-name">kzicon-file-text</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-gear debug"></i><span class="sg-icon-name">kzicon-gear</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-goal debug"></i><span class="sg-icon-name">kzicon-goal</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-goal-click debug"></i><span class="sg-icon-name">kzicon-goal-click</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-goal-event debug"></i><span class="sg-icon-name">kzicon-goal-event</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-goal-page_visit debug"></i><span class="sg-icon-name">kzicon-goal-page_visit</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-goal-transaction debug"></i><span class="sg-icon-name">kzicon-goal-transaction</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-graph-small debug"></i><span class="sg-icon-name">kzicon-graph-small</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-heart debug"></i><span class="sg-icon-name">kzicon-heart</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-help-tip debug"></i><span class="sg-icon-name">kzicon-help-tip</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-help-tip-circle debug"></i><span class="sg-icon-name">kzicon-help-tip-circle</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-info debug"></i><span class="sg-icon-name">kzicon-info</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-info-02 debug"></i><span class="sg-icon-name">kzicon-info-02</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-kaizen-icon1 debug"></i><span class="sg-icon-name">kzicon-kaizen-icon1</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-kaizen-icon2 debug"></i><span class="sg-icon-name">kzicon-kaizen-icon2</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-kaizen-icon3 debug"></i><span class="sg-icon-name">kzicon-kaizen-icon3</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-left debug"></i><span class="sg-icon-name">kzicon-left</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-left-text debug"></i><span class="sg-icon-name">kzicon-left-text</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-less-text debug"></i><span class="sg-icon-name">kzicon-less-text</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-link debug"></i><span class="sg-icon-name">kzicon-link</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-list debug"></i><span class="sg-icon-name">kzicon-list</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-lock-off debug"></i><span class="sg-icon-name">kzicon-lock-off</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-lock-on debug"></i><span class="sg-icon-name">kzicon-lock-on</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-magnifier debug"></i><span class="sg-icon-name">kzicon-magnifier</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-market debug"></i><span class="sg-icon-name">kzicon-market</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-marketplace debug"></i><span class="sg-icon-name">kzicon-marketplace</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-message debug"></i><span class="sg-icon-name">kzicon-message</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-message-empty debug"></i><span class="sg-icon-name">kzicon-message-empty</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-minus debug"></i><span class="sg-icon-name">kzicon-minus</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-mobile debug"></i><span class="sg-icon-name">kzicon-mobile</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-mobile-menu debug"></i><span class="sg-icon-name">kzicon-mobile-menu</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-new-window debug"></i><span class="sg-icon-name">kzicon-new-window</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-node debug"></i><span class="sg-icon-name">kzicon-node</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-notifications debug"></i><span class="sg-icon-name">kzicon-notifications</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-optimizer debug"></i><span class="sg-icon-name">kzicon-optimizer</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-organization debug"></i><span class="sg-icon-name">kzicon-organization</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-palette debug"></i><span class="sg-icon-name">kzicon-palette</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-pause debug"></i><span class="sg-icon-name">kzicon-pause</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-pencil debug"></i><span class="sg-icon-name">kzicon-pencil</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-phone debug"></i><span class="sg-icon-name">kzicon-phone</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-play debug"></i><span class="sg-icon-name">kzicon-play</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-plus debug"></i><span class="sg-icon-name">kzicon-plus</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-plus-02 debug"></i><span class="sg-icon-name">kzicon-plus-02</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-profile debug"></i><span class="sg-icon-name">kzicon-profile</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-profile-circle debug"></i><span class="sg-icon-name">kzicon-profile-circle</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-project-type-display-popup debug"></i><span class="sg-icon-name">kzicon-project-type-display-popup</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-project-type-redirect-test debug"></i><span class="sg-icon-name">kzicon-project-type-redirect-test</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-project-type-replace-image debug"></i><span class="sg-icon-name">kzicon-project-type-replace-image</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-project-type-single-page-test debug"></i><span class="sg-icon-name">kzicon-project-type-single-page-test</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-remove-circle debug"></i><span class="sg-icon-name">kzicon-remove-circle</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-right debug"></i><span class="sg-icon-name">kzicon-right</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-right-text debug"></i><span class="sg-icon-name">kzicon-right-text</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-round debug"></i><span class="sg-icon-name">kzicon-round</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-round-arrow-left debug"></i><span class="sg-icon-name">kzicon-round-arrow-left</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-round-arrow-right debug"></i><span class="sg-icon-name">kzicon-round-arrow-right</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-send debug"></i><span class="sg-icon-name">kzicon-send</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-settings debug"></i><span class="sg-icon-name">kzicon-settings</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-settings-basic debug"></i><span class="sg-icon-name">kzicon-settings-basic</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-settings-small debug"></i><span class="sg-icon-name">kzicon-settings-small</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-sign-out debug"></i><span class="sg-icon-name">kzicon-sign-out</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-spark debug"></i><span class="sg-icon-name">kzicon-spark</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-specialized-experiments debug"></i><span class="sg-icon-name">kzicon-specialized-experiments</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-specialized-optimizer debug"></i><span class="sg-icon-name">kzicon-specialized-optimizer</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-star debug"></i><span class="sg-icon-name">kzicon-star</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-statistic debug"></i><span class="sg-icon-name">kzicon-statistic</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-support debug"></i><span class="sg-icon-name">kzicon-support</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-tag debug"></i><span class="sg-icon-name">kzicon-tag</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-tag-circle debug"></i><span class="sg-icon-name">kzicon-tag-circle</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-team debug"></i><span class="sg-icon-name">kzicon-team</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-team-settings debug"></i><span class="sg-icon-name">kzicon-team-settings</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-text debug"></i><span class="sg-icon-name">kzicon-text</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-token-1 debug"></i><span class="sg-icon-name">kzicon-token-1</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-token-2 debug"></i><span class="sg-icon-name">kzicon-token-2</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-token-3 debug"></i><span class="sg-icon-name">kzicon-token-3</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-token-4 debug"></i><span class="sg-icon-name">kzicon-token-4</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-tooltip debug"></i><span class="sg-icon-name">kzicon-tooltip</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-trash-bin-01 debug"></i><span class="sg-icon-name">kzicon-trash-bin-01</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-trash-bin-02 debug"></i><span class="sg-icon-name">kzicon-trash-bin-02</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-trophy debug"></i><span class="sg-icon-name">kzicon-trophy</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-truncated-arrow debug"></i><span class="sg-icon-name">kzicon-truncated-arrow</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-up debug"></i><span class="sg-icon-name">kzicon-up</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-upload debug"></i><span class="sg-icon-name">kzicon-upload</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-user-chat debug"></i><span class="sg-icon-name">kzicon-user-chat</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-user-favorite debug"></i><span class="sg-icon-name">kzicon-user-favorite</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-user-plus debug"></i><span class="sg-icon-name">kzicon-user-plus</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-user-special debug"></i><span class="sg-icon-name">kzicon-user-special</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-variation-negative debug"></i><span class="sg-icon-name">kzicon-variation-negative</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-variation-neutral debug"></i><span class="sg-icon-name">kzicon-variation-neutral</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-variation-positive debug"></i><span class="sg-icon-name">kzicon-variation-positive</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-variations-01 debug"></i><span class="sg-icon-name">kzicon-variations-01</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-variations-02 debug"></i><span class="sg-icon-name">kzicon-variations-02</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-watch debug"></i><span class="sg-icon-name">kzicon-watch</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-wrench debug"></i><span class="sg-icon-name">kzicon-wrench</span>
</div>

<div class="c-col--md-4 sg-icon-example">
  <i class="kzicon kzicon-wrench-small debug"></i><span class="sg-icon-name">kzicon-wrench-small</span>
</div>

</div>
</div>
*/
/*doc
---
title: How to use
name: 02-how-to-use
category: 04.Icons-01.Kaizen Icons
---

You can place icons just about anywhere using the CSS Prefix `kzicon` and the icon's name.
These icons are designed to be used with inline elements (we like the `<i>` tag for brevity, but using a `<span>` is more semantically correct).

```slim_example
i.kzicon.kzicon-arrow-down aria-hidden="true"
| kzicon-arrow-down
```

*/
/*doc
---
title: Sizes
name: 03-sizes
category: 04.Icons-01.Kaizen Icons
---

The default size of every icons is `40x40` px.

```slim_example
i.kzicon.kzicon-arrow-down.debug aria-hidden="true"
```

#### Smaller and larger icons

To create smaller or larger icons, you can use the `.kzicon--large` or `.kzicon--small` classes.

```slim_example
p
  i.kzicon.kzicon-arrow-down.kzicon--small.debug aria-hidden="true"
  | &nbsp;kzicon--small (30x30)
p
  i.kzicon.kzicon-arrow-down.debug aria-hidden="true"
  | &nbsp;defalut size (40x40)
p
  i.kzicon.kzicon-arrow-down.kzicon--large.debug aria-hidden="true"
  | &nbsp;kzicon--large (50x50)
```

#### Flexible sizes

We set `font-size: 40px` to the `.kzicon` class, so icon sizes don't change relatively to their container. If you want to change icon sizes more flexibly, add your custom class to the icon.

```slim_example
scss:
  .custom-huge-icon {
    font-size: 126px;
  }

i.kzicon.kzicon-arrow-down.kzicon.custom-huge-icon aria-hidden="true"
```
*/
/*doc
---
title: Spinning icons
name: 04-spinning-icons
category: 04.Icons-01.Kaizen Icons
---

Add the `kzicon-spin` class to get any icon to rotate.

```slim_example
p
  i.kzicon.kzicon-round-arrow-right.kzicon-spin
  i.kzicon.kzicon-gear.kzicon-spin
```
*/
/*doc
---
title: Responsive images
name: 01-responsive-images
category: 09.Images-01.Images
---

Use `.c-img-responsive` for responsive design. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales nicely to the parent element.

```slim_example
.c-container--fluid
  .c-row
    .c-col--md-2
      img.c-img-responsive src="image.png"
    .c-col--md-3
      img.c-img-responsive src="image.png"
    .c-col--md-4
      img.c-img-responsive src="image.png"
```
*/
/*doc
---
title: Bordered images
name: 02-bordered-images
category: 09.Images-01.Images
---

Use `.c-img-bordered` to add a border to an image.

```slim_example
img.c-img-bordered src="white-image.png" width="200" height="200"
```
*/
.c-img-responsive {
  max-width: 100%;
  height: auto; }

.c-img-bordered {
  border: 1px solid #ebedef; }

.c-label {
  position: relative;
  display: inline-block;
  border-radius: 2px;
  padding-right: 8px;
  padding-left: 8px;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: capitalize;
  text-align: center;
  white-space: nowrap;
  margin: 2px 0;
  background-color: #e2e6ef !important;
  color: #626e8b !important; }
  .c-label + [class*="c-label"] {
    margin-left: 8px; }
  .c-label.-color-slate {
    background-color: #4c566c !important;
    color: #fff !important; }
  .c-label.-color-mint {
    background-color: #88e18e !important;
    color: #fff !important; }
  .c-label.-color-denim {
    background-color: #5fa9ff !important;
    color: #fff !important; }
  .c-label.-color-ash {
    background-color: #b4bed5 !important;
    color: #fff !important; }
  .c-label.-color-aqua {
    background-color: #55d8d1 !important;
    color: #fff !important; }
  .c-label.-color-sky {
    background-color: #5bf !important;
    color: #fff !important; }
  .c-label.-color-metal {
    background-color: #626e8b !important;
    color: #fff !important; }
  .c-label.-color-metal-light {
    background-color: #9ba9c7 !important;
    color: #dbe0eb !important; }
  .c-label.-color-lava {
    background-color: #fe7877 !important;
    color: #fff !important; }
  .c-label.-width-fixed {
    min-width: 124px; }
  .c-label.-with-icon {
    text-align: left;
    padding-left: 28px; }
    .c-label.-with-icon .kzicon {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
      font-size: 28px; }
  .c-label.-with-prefix {
    min-width: 84px;
    border-radius: 0 2px 2px 0;
    margin-left: 8px;
    padding-left: 0;
    padding-right: 0; }
    .c-label.-with-prefix:before {
      position: absolute;
      top: 0;
      left: -8px;
      content: " ";
      width: 8px;
      display: inline-block;
      border-radius: 2px 0 0 2px; }
    .c-label.-with-prefix + [class*=c-label] {
      margin-left: 16px; }
  .c-label.-prefix-mint:before {
    background-color: #88e18e; }
  .c-label.-prefix-eggplant:before {
    background-color: #c29eff; }
  .c-label.-prefix-sky-dark:before {
    background-color: #5bf; }
  .c-label.-prefix-lemon-light:before {
    background-color: #f9d94d; }
  .c-label.-prefix-tangerine:before {
    background-color: #fd925e; }

/*doc
---
title: Basic
name: 01-label-basic
category: 11.Labels-01.Labels
---

Use `.c-label`.

```slim_example
div
  .c-label In review
```
*/
/*doc
---
title: Colors
name: 02-label-colors
category: 11.Labels-01.Labels
---

A label can have different colors. Add `.-color-*` modifier.

```slim_example
.c-label.-color-slate Slate
.c-label.-color-mint Mint
.c-label.-color-denim Denim
.c-label.-color-ash Ash
.c-label.-color-lava Lava
.c-label.-color-sky Sky
.c-label.-color-aqua Aqua
.c-label.-color-metal Metal
.c-label.-color-metal-light Metal light
```
*/
/*doc
---
title: Widths
name: 03-label-widths
category: 11.Labels-01.Labels
---

To make a label be in fixed width, add `.-width-fixed` modifier class.

```slim_example
div
  .c-label.-width-fixed.-color-slate Original design
div
  .c-label.-width-fixed.-color-mint Control
div
  .c-label.-width-fixed.-color-denim Waiting for adoption
div
  .c-label.-width-fixed.-color-ash Draft
div
  .c-label.-color-lava.-width-fixed Edit Requested
```

*/
/*doc
---
title: Labels with icons
name: 04-label-with-icon
category: 11.Labels-01.Labels
---

A label can include an icon. Add `.-with-icon` modifier class.

```slim_example
div
  .c-label.-color-slate.-width-fixed.-with-icon
    i.kzicon.kzicon-round
    | Preparing round
div
  .c-label.-color-lava.-width-fixed.-with-icon
    i.kzicon.kzicon-round
    | Paused
```
*/
/*doc
---
title: Labels with prefixs
name: 05-label-with-prefixes
category: 11.Labels-01.Labels
---

Add `.-with-prefix` and `.-prefix-(mint|eggplant|sky-dark|lemon-light|tangerine)` modifier class.

```slim_example
div
  .c-label.-with-prefix.-prefix-mint.u-text-uppercase Network
  .c-label.-with-prefix.-prefix-mint.u-text-uppercase オープン
div
  .c-label.-with-prefix.-prefix-eggplant.u-text-uppercase Targeting
  .c-label.-with-prefix.-prefix-eggplant.u-text-uppercase ターゲティング
div
  .c-label.-with-prefix.-prefix-sky-dark.u-text-uppercase Specialized
  .c-label.-with-prefix.-prefix-sky-dark.u-text-uppercase 特化型
div
  .c-label.-with-prefix.-prefix-lemon-light.u-text-uppercase Private
  .c-label.-with-prefix.-prefix-lemon-light.u-text-uppercase プライベート
div
  .c-label.-with-prefix.-prefix-tangerine.u-text-uppercase My team
  .c-label.-with-prefix.-prefix-tangerine.u-text-uppercase マイチーム
```
*/
ul,
ol {
  margin-top: 0;
  margin-bottom: 20px;
  padding-left: 2rem; }
  ul.-unstyled,
  ol.-unstyled {
    padding-left: 0;
    list-style: none; }
  ul.-inline,
  ol.-inline {
    margin-bottom: 0;
    padding-left: 0; }
    ul.-inline > li,
    ol.-inline > li {
      display: inline-block;
      margin-right: 30px;
      vertical-align: middle; }
      ul.-inline > li:last-child,
      ol.-inline > li:last-child {
        margin-right: 0; }
  ul ul,
  ul ol,
  ol ul,
  ol ol {
    margin-bottom: 0; }

/*doc
---
title: Unordered
name: 01-list-unordered
category: 13.Lists-01.Lists
---

```slim_example
ul
  li list item
  li list item
  li
    | list item
    ul
      li list item
      li
        | list item
        ul
          li list item
          li list item
  li
    | list item
```
*/
/*doc
---
title: Ordered
name: 02-list-ordered
category: 13.Lists-01.Lists
---

```slim_example
ol
  li list item
  li list item
  li
    | list item
    ol
      li list item
      li
        | list item
        ol
          li list item
          li list item
  li
    | list item
```
*/
/*doc
---
title: Unstyled
name: 03-list-unstyled
category: 13.Lists-01.Lists
---

Use `.-unstyled` class to remove the default `list-style` and left padding on list items. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

```slim_example
ul.-unstyled
  li list item
  li list item
  li
    | list item
    ul
      li list item
      li list item
```
*/
/*doc
---
title: Inline lists
name: 04-list-inline
category: 13.Lists-01.Lists
---

Use `.-inline` class in a `ul` element to make a linear list.

```slim_example
ul.-inline
  li list item
  li list item
  li list item
```
*/
.c-media, .c-media--middle, .c-media--bottom {
  margin-top: 20px; }
  .c-media:first-child, .c-media--middle:first-child, .c-media--bottom:first-child {
    margin-top: 0; }

.c-media__image, .c-media__image--right, .c-media__image--small, .c-media__image--large {
  display: table-cell;
  vertical-align: top;
  padding-right: 20px;
  line-height: 1; }

.c-media__body {
  display: table-cell;
  vertical-align: top;
  width: 10000px; }

.c-media--middle .c-media__image,
.c-media--middle .c-media__body,
.c-media--middle .c-media__image--small,
.c-media--middle .c-media__image--large {
  vertical-align: middle; }

.c-media--bottom .c-media__image,
.c-media--bottom .c-media__body,
.c-media--bottom .c-media__image--small,
.c-media--bottom .c-media__image--large {
  vertical-align: bottom; }

.c-media__image--right {
  padding-left: 20px; }

.c-media__image--small {
  padding-right: 10px; }
  .c-media__image--small.c-media__image--right {
    padding-left: 10px; }

.c-media__image--large {
  padding-right: 40px; }
  .c-media__image--large.c-media__image--right {
    padding-left: 40px; }

/*doc
---
title: Basic
name: 01-medias-basic
category: 14.Media objects-01.Media objects
---

The media object allows you to have an image/flash or other fixed width media to the left or right with some content that describes it in the center.

Use `.c-media`, `.c-media__image` and `.c-media__body` classes to displays a media object (images, video, audio) to the left a content block.

```slim_example
.c-media
  .c-media__image
    img src="image.png" width="100"
  .c-media__body
    | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.c-media
  .c-media__image
    img src="image.png" width="100"
  .c-media__body
    | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
```
*/
/*doc
---
title: Alignment
name: 02-medias-alignment
category: 14.Media objects-01.Media objects
---

#### Vertical alignment

Use `.c-media--middle` instead of `.c-media` to align a media object vertically center.

```slim_example
.c-media--middle
  .c-media__image
    img src="image.png" width="100"
  .c-media__body
    | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.c-media--middle
  .c-media__image
    img src="image.png" width="100"
  .c-media__body
    | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
```

Use `.c-media--bottom` instead of `.c-media` to align a media object vertically bottom.

```slim_example
.c-media--bottom
  .c-media__image
    img src="image.png" width="100"
  .c-media__body
    | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.c-media--bottom
  .c-media__image
    img src="image.png" width="100"
  .c-media__body
    | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
```

#### Horizontal alignment

Use `.c-media__image--right` instead of `.c-media__image` to display a media object to the right of a content block.

```slim_example
.c-media
  .c-media__body
    | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  .c-media__image--right
    img src="image.png" width="100"
```
*/
/*doc
---
title: Sizes
name: 03-medias-sizes
category: 14.Media objects-01.Media objects
---

Use `.c-media__image--small` instead of `.c-media__image` for a small media object (e.g. avatar).

```slim_example
.c-media.c-media--middle
  .c-media__image--small
    img.c-avatar src="image.png"
  .c-media__body
    div User name
    small user@example.com
```

Use `.c-media__image--large` instead of `.c-media__image` for a large media object (e.g. screenshot).

```slim_example
.c-media--middle
  .c-media__image--large
    img src="image.png" width="200"
  .c-media__body
    | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

.c-media--middle
  .c-media__body
    | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  .c-media__image--large.c-media__image--right
    img src="image.png" width="200"
```
*/
/*doc
---
title: Basic
name: 01-message-bubble-basic
category: 11.Labels-04.Message bubbles
---

Use `.c-message-bubble` to display a message bubble icon.

```slim_example
.c-message-bubble
  .c-message-bubble__number 7
.c-message-bubble
  .c-message-bubble__number 99
.c-message-bubble
  .c-message-bubble__number.-small 99+
```

If there are unread messages, add `.-unread` class.

```slim_example
.c-message-bubble.-unread
  .c-message-bubble__number 7
```

If there is no messages, add `.-empty` class.

```slim_example
.c-message-bubble.-empty
```
*/
.c-message-bubble {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  vertical-align: middle; }
  .c-message-bubble::before {
    content: '\e008';
    font-family: 'KaizenIcons';
    font-weight: normal;
    font-size: 40px;
    color: #878fa0;
    line-height: 1; }
  .c-message-bubble.-unread::before {
    color: #fe7877; }
  .c-message-bubble.-empty::before {
    content: '\e030';
    color: #8293b9; }

.c-message-bubble__number {
  position: absolute;
  top: 50%;
  left: 52%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 14px; }
  .c-message-bubble__number.-small {
    font-size: 12px; }

/*doc
---
title: Modal
name: modal
category: 15.Modal
---

wip

```slim_example
.modal-backdrop-demo.in
.c-modal
  i.c-modal__close.kzicon.kzicon-cancel
  .c-modal__header
    | New experiment
  .c-modal__body
    .c-form-group
      label
        | Experiment name
      input type="text" placeholder="Enter a name for your experiment"
    .c-form-group
      label
        | Experiment URL
      input type="text" placeholder="URL of the page you want to optimize"
  .c-modal__footer
    button.c-btn--primary.-size-large
      | Save and continue
    button.c-btn--secondary.-size-large
      | Save and close
```
*/
.modal-backdrop, .modal-backdrop-demo {
  background-color: #414a5d; }
  .in.modal-backdrop, .in.modal-backdrop-demo {
    opacity: .95; }

.modal-backdrop-demo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: .5; }

.c-modal {
  position: relative;
  padding: 36px;
  border-radius: 8px;
  background-color: #fff; }

.c-modal__close {
  position: absolute;
  top: -42px;
  right: -42px;
  color: #fff;
  font-size: 60px;
  cursor: pointer; }

.c-modal__header {
  font-size: 16px;
  margin-bottom: 24px; }

.c-modal__footer {
  text-align: center;
  display: table;
  margin: 0 auto; }
  .c-modal__footer [class*="c-btn"] {
    margin-left: 24px; }
    .c-modal__footer [class*="c-btn"]:last-child {
      margin-left: 0; }
  .c-modal__footer .c-btn--secondary {
    float: left; }

.c-form-control-static {
  margin-bottom: 0; }

/*doc
---
title: Static controls
name: 01-static-controls
category: 07.Forms-05.Static controls
---

When you need to place plain text next to a form label within a form, use the `.c-form-control-static` class on a `<p>`.

```slim_example
form
  .c-form-group
    label Email
    p.c-form-control-static info@kaizenplatform.com
  .c-form-group
    label Password
    input type="password"
```
*/
.c-stat {
  display: inline-block;
  text-align: center; }

.c-stat__value {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 22px;
  line-height: 22px; }

.c-stat__unit {
  display: inline-block;
  margin-right: .1em;
  margin-left: .1em;
  font-size: 14px;
  color: #b4bed5; }

.c-stat__updown--up, .c-stat__updown--down {
  margin-left: .2em;
  font-size: 14px;
  color: #414a5d; }
  .c-stat__updown--up::after, .c-stat__updown--down::after {
    font-family: "KaizenIcons";
    font-weight: normal;
    font-size: 40px;
    margin-left: -10px;
    vertical-align: middle; }

.c-stat__updown--up::after {
  content: '\e021';
  color: #88e18e; }

.c-stat__updown--down::after {
  content: '\e00b';
  color: #fe7877; }

.c-stat__label {
  font-size: 11px;
  color: #8293b9;
  font-weight: bold;
  text-transform: uppercase; }

.c-stats--horizontal {
  display: table; }
  .c-stats--horizontal .c-stat {
    display: table-row;
    text-align: left; }
  .c-stats--horizontal .c-stat__value,
  .c-stats--horizontal .c-stat__label {
    display: table-cell;
    vertical-align: middle; }
  .c-stats--horizontal .c-stat__label {
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
    padding-right: 3em;
    color: #9ba9c7; }
  .c-stats--horizontal .c-stat__value {
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 0;
    line-height: inherit; }

/*doc
---
title: Basic
name: 01-statistic-basic
category: 12.Statistic-01.Statistic
---

```slim_example
.c-stat
  .c-stat__value 234
  .c-stat__label Score
```
*/
/*doc
---
title: Advaned
name: 02-statistic-advaned
category: 12.Statistic-01.Statistic
---

You can show a unit with `span.c-stat__unit` and the raise and fall information with `.c-stat__updown--up` or `.c-stat__updown--down`.

```slim_example
.c-stat
  .c-stat__value
    | 0.95
    span.c-stat__unit %
    span.c-stat__updown--up
  .c-stat__label CVR

.c-stat
  .c-stat__value
    | 79.45
    span.c-stat__unit %
    span.c-stat__updown--down
      | 1.6
  .c-stat__label CVR
```
*/
/*doc
---
title: Horizontal
name: 03-statistic-horizontal
category: 12.Statistic-01.Statistic
---

A statistic can present its measurement horizontally.

```slim_example
.c-stats--horizontal.u-mb20
  .c-stat
    .c-stat__label Score
    .c-stat__value 124
  .c-stat
    .c-stat__label CVR
    .c-stat__value 18.42%
  .c-stat
    .c-stat__label Conversions
    .c-stat__value 75
  .c-stat
    .c-stat__label Visitors
    .c-stat__value 407

.c-stats--horizontal
  .c-stat
    .c-stat__label  Goal
    .c-stat__value Increase the Number of Clicks
  .c-stat
    .c-stat__label  URL
    .c-stat__value: a href="https://bio.danone.co.jp/14days/sp/" https://bio.danone.co.jp/14days/sp/
  .c-stat
    .c-stat__label  Reward
    .c-stat__value $1,400
  .c-stat
    .c-stat__label Deadline
    .c-stat__value Oct 10, 2014
  .c-stat
    .c-stat__label Status
    .c-stat__value Interval 2
```
*/
.c-switch {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 32px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .c-switch input[type="checkbox"] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    opacity: 0 !important;
    outline: 0;
    width: 51px;
    height: 32px;
    cursor: pointer;
    z-index: 1; }
    .c-switch input[type="checkbox"]:checked + .c-switch__toggle {
      background-color: #5fa9ff; }
      .c-switch input[type="checkbox"]:checked + .c-switch__toggle::before {
        transform: translateX(18px); }
    .c-switch input[type="checkbox"]:disabled {
      cursor: not-allowed; }
      .c-switch input[type="checkbox"]:disabled + .c-switch__toggle {
        opacity: .3;
        pointer-events: none; }

.c-switch__toggle {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #dbe0eb;
  border-radius: 16px;
  transition: all 0.1s ease-in; }
  .c-switch__toggle::before {
    position: absolute;
    top: 3px;
    left: 3px;
    content: '';
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background-color: #f7f9fd;
    z-index: 1;
    cursor: pointer;
    transition: all 0.1s ease-in; }

/*doc
---
title: Basic
name: 01-switches-basic
category: 07.Forms-09.Switches
---

```slim_example
div
  label.c-switch
    input type="checkbox"
    div.c-switch__toggle

div
  label.c-switch
    input type="checkbox" checked="checked"
    div.c-switch__toggle
```
*/
/*doc
---
title: Disabled state
name: 02-switches-disabled-state
category: 07.Forms-09.Switches
---

```slim_example
div
  label.c-switch
    input type="checkbox" disabled="disabled"
    div.c-switch__toggle

div
  label.c-switch
    input type="checkbox" checked="checked" disabled="disabled"
    div.c-switch__toggle
```
*/
input[type=range] {
  -webkit-appearance: none;
  width: 100%; }
  input[type=range]:focus {
    outline: none; }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -7.5px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: 0;
    background-color: #5fa9ff;
    cursor: pointer; }
  input[type=range]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: 0;
    background-color: #5fa9ff;
    cursor: pointer; }
  input[type=range]::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: 0;
    background-color: #5fa9ff;
    cursor: pointer; }
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    border-radius: 2.5px;
    background-color: #dbe0eb; }
  input[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    border-radius: 2.5px;
    background-color: #dbe0eb; }
  input[type=range]::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    border-radius: 2.5px;
    border-color: transparent;
    color: transparent;
    background-color: transparent; }
  input[type=range]::-ms-fill-lower {
    background-color: #5fa9ff;
    border-radius: 2.5px; }
  input[type=range]::-ms-fill-upper {
    background-color: #dbe0eb;
    border-radius: 2.5px; }

/*doc
---
title: Basic
name: 01-sliders-basic
category: 07.Forms-07.Range Sliders
---

Use `input[type="range"]` to show a range slider.

```slim_example
input type="range" min="1" max="100" step="1"
```
*/
.c-table, table, .c-table--celled, .c-table--minimal {
  width: 100%;
  max-width: 100%;
  border: 1px solid #dbe0eb; }
  .c-table > thead > tr > th, table > thead > tr > th, .c-table--celled > thead > tr > th, .c-table--minimal > thead > tr > th, .c-table > thead > tr > td, table > thead > tr > td, .c-table--celled > thead > tr > td, .c-table--minimal > thead > tr > td, .c-table > tbody > tr > th, table > tbody > tr > th, .c-table--celled > tbody > tr > th, .c-table--minimal > tbody > tr > th, .c-table > tbody > tr > td, table > tbody > tr > td, .c-table--celled > tbody > tr > td, .c-table--minimal > tbody > tr > td, .c-table > tfoot > tr > th, table > tfoot > tr > th, .c-table--celled > tfoot > tr > th, .c-table--minimal > tfoot > tr > th, .c-table > tfoot > tr > td, table > tfoot > tr > td, .c-table--celled > tfoot > tr > td, .c-table--minimal > tfoot > tr > td {
    padding: 8px;
    border-bottom: 1px solid #dbe0eb; }
  .c-table > thead > tr > th, table > thead > tr > th, .c-table--celled > thead > tr > th, .c-table--minimal > thead > tr > th, .c-table > tbody > tr > th, table > tbody > tr > th, .c-table--celled > tbody > tr > th, .c-table--minimal > tbody > tr > th, .c-table > tfoot > tr > th, table > tfoot > tr > th, .c-table--celled > tfoot > tr > th, .c-table--minimal > tfoot > tr > th {
    background-color: #f7f9fd; }
  .c-table > thead > tr.-is-inactive > td, table > thead > tr.-is-inactive > td, .c-table--celled > thead > tr.-is-inactive > td, .c-table--minimal > thead > tr.-is-inactive > td, .c-table > tbody > tr.-is-inactive > td, table > tbody > tr.-is-inactive > td, .c-table--celled > tbody > tr.-is-inactive > td, .c-table--minimal > tbody > tr.-is-inactive > td, .c-table > tfoot > tr.-is-inactive > td, table > tfoot > tr.-is-inactive > td, .c-table--celled > tfoot > tr.-is-inactive > td, .c-table--minimal > tfoot > tr.-is-inactive > td {
    background: #f2f6fa; }
  .c-table th, table th, .c-table--celled th, .c-table--minimal th, .c-table td, table td, .c-table--celled td, .c-table--minimal td {
    text-align: left;
    vertical-align: middle; }
  .c-table > thead, table > thead, .c-table--celled > thead, .c-table--minimal > thead, .c-table > tfoot, table > tfoot, .c-table--celled > tfoot, .c-table--minimal > tfoot {
    background-color: #f7f9fd; }
  .c-table > tbody, table > tbody, .c-table--celled > tbody, .c-table--minimal > tbody {
    background-color: #fff; }
  .-bg-striped.c-table > tbody > tr:nth-child(even), table.-bg-striped > tbody > tr:nth-child(even), .-bg-striped.c-table--celled > tbody > tr:nth-child(even), .-bg-striped.c-table--minimal > tbody > tr:nth-child(even) {
    background-color: #f9fafd; }
  .-width-auto.c-table, table.-width-auto, .-width-auto.c-table--celled, .-width-auto.c-table--minimal {
    width: auto; }
    .-width-auto.c-table > thead > tr > th, table.-width-auto > thead > tr > th, .-width-auto.c-table--celled > thead > tr > th, .-width-auto.c-table--minimal > thead > tr > th, .-width-auto.c-table > thead > tr > td, table.-width-auto > thead > tr > td, .-width-auto.c-table--celled > thead > tr > td, .-width-auto.c-table--minimal > thead > tr > td, .-width-auto.c-table > tbody > tr > th, table.-width-auto > tbody > tr > th, .-width-auto.c-table--celled > tbody > tr > th, .-width-auto.c-table--minimal > tbody > tr > th, .-width-auto.c-table > tbody > tr > td, table.-width-auto > tbody > tr > td, .-width-auto.c-table--celled > tbody > tr > td, .-width-auto.c-table--minimal > tbody > tr > td, .-width-auto.c-table > tfoot > tr > th, table.-width-auto > tfoot > tr > th, .-width-auto.c-table--celled > tfoot > tr > th, .-width-auto.c-table--minimal > tfoot > tr > th, .-width-auto.c-table > tfoot > tr > td, table.-width-auto > tfoot > tr > td, .-width-auto.c-table--celled > tfoot > tr > td, .-width-auto.c-table--minimal > tfoot > tr > td {
      padding-right: 20px;
      padding-left: 20px; }
  .-padding-more.c-table > thead > tr > th, table.-padding-more > thead > tr > th, .-padding-more.c-table--celled > thead > tr > th, .-padding-more.c-table--minimal > thead > tr > th, .-padding-more.c-table > thead > tr > td, table.-padding-more > thead > tr > td, .-padding-more.c-table--celled > thead > tr > td, .-padding-more.c-table--minimal > thead > tr > td, .-padding-more.c-table > tbody > tr > th, table.-padding-more > tbody > tr > th, .-padding-more.c-table--celled > tbody > tr > th, .-padding-more.c-table--minimal > tbody > tr > th, .-padding-more.c-table > tbody > tr > td, table.-padding-more > tbody > tr > td, .-padding-more.c-table--celled > tbody > tr > td, .-padding-more.c-table--minimal > tbody > tr > td, .-padding-more.c-table > tfoot > tr > th, table.-padding-more > tfoot > tr > th, .-padding-more.c-table--celled > tfoot > tr > th, .-padding-more.c-table--minimal > tfoot > tr > th, .-padding-more.c-table > tfoot > tr > td, table.-padding-more > tfoot > tr > td, .-padding-more.c-table--celled > tfoot > tr > td, .-padding-more.c-table--minimal > tfoot > tr > td {
    padding: 20px; }
  .-padding-less.c-table > thead > tr > th, table.-padding-less > thead > tr > th, .-padding-less.c-table--celled > thead > tr > th, .-padding-less.c-table--minimal > thead > tr > th, .-padding-less.c-table > thead > tr > td, table.-padding-less > thead > tr > td, .-padding-less.c-table--celled > thead > tr > td, .-padding-less.c-table--minimal > thead > tr > td, .-padding-less.c-table > tbody > tr > th, table.-padding-less > tbody > tr > th, .-padding-less.c-table--celled > tbody > tr > th, .-padding-less.c-table--minimal > tbody > tr > th, .-padding-less.c-table > tbody > tr > td, table.-padding-less > tbody > tr > td, .-padding-less.c-table--celled > tbody > tr > td, .-padding-less.c-table--minimal > tbody > tr > td, .-padding-less.c-table > tfoot > tr > th, table.-padding-less > tfoot > tr > th, .-padding-less.c-table--celled > tfoot > tr > th, .-padding-less.c-table--minimal > tfoot > tr > th, .-padding-less.c-table > tfoot > tr > td, table.-padding-less > tfoot > tr > td, .-padding-less.c-table--celled > tfoot > tr > td, .-padding-less.c-table--minimal > tfoot > tr > td {
    padding: 5px 10px; }

.c-table--celled > thead > tr > th,
.c-table--celled > thead > tr > td,
.c-table--celled > tbody > tr > th,
.c-table--celled > tbody > tr > td,
.c-table--celled > tfoot > tr > th,
.c-table--celled > tfoot > tr > td {
  border-right: 1px solid #dbe0eb;
  border-left: 1px solid #dbe0eb; }

.c-table--minimal {
  border: 0; }
  .c-table--minimal > thead > tr > th,
  .c-table--minimal > tbody > tr > th,
  .c-table--minimal > tfoot > tr > th {
    background-color: #fff; }
  .c-table--minimal > thead > tr > th {
    border-top: 0; }
  .c-table--minimal > tbody > tr:last-child > th,
  .c-table--minimal > tbody > tr:last-child > td {
    border-bottom: 1px solid #dbe0eb; }
  .c-table--minimal > thead,
  .c-table--minimal > tfoot {
    background-color: #fff; }

.c-table-sorter {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  position: relative;
  padding-right: 40px !important;
  background-clip: padding-box; }
  .c-table--celled .c-table-sorter:before {
    content: ' ';
    position: absolute;
    border-top: 1px solid #dbe0eb;
    border-right: 1px solid #dbe0eb;
    border-left: 1px solid #dbe0eb;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    z-index: 1; }
  .c-table-sorter:after {
    content: '\E053';
    position: absolute;
    top: 6px;
    right: 4px;
    color: #c3cbdd; }
  .c-table-sorter.-ascending:after {
    content: '\E052';
    color: #4c566c; }
  .c-table-sorter.-descending:after {
    content: '\E054';
    color: #4c566c; }
  .c-table-sorter:hover {
    background-color: #ebedef; }

/*doc
---
title: Basic
name: 01-tables-basic
category: 10.Tables-01.Tables
---

Use `.c-table` to style a basic style. You are required to use `<thead>`, `<tbody>` and `<tfoot>` elements.

```slim_example
table.c-table
  thead
    tr
      th Name
      th Status
      th Gender
      th Action
  tbody
    tr
      td Jeremy Smith
      td Approved
      td Male
      td
        a href="#" Edit
    tr
      td Sharon Kelly
      td Approved
      td Female
      td
        a href="#" Edit
    tr
      td Maria Burke
      td Denied
      td Female
      td
        a href="#" Edit
    tr
      td William Schultz
      td Denied
      td Male
      td
        a href="#" Edit
  tfoot
    tr
      td colspan="2"
        i.kzicon.kzicon-arrow-left
        | Prev
      td.u-text-right colspan="2"
        | Next
        i.kzicon.kzicon-arrow-right
```

*/
/*doc
---
title: Text alignment
name: 02-tables-text-aligned
category: 10.Tables-01.Tables
---

Use `.u-text-right` or `.u-text-center` utility classes to adjust the text alignment in a table header, row, or cell.

```slim_example
table.c-table
  thead
    tr
      th Name
      th Status
      th.u-text-right Gender
  tbody
    tr
      td Jeremy Smith
      td Approved
      td.u-text-right Male
    tr
      td Sharon Kelly
      td Approved
      td.u-text-right Female
    tr
      td Maria Burke
      td Denied
      td.u-text-right Female
```
*/
/*doc
---
title: Celled
name: 03-tables-celled
category: 10.Tables-01.Tables
---

Use `.c-table--celled` to add borders to any cell.

```slim_example
table.c-table--celled
  thead
    tr
      th Name
      th Status
      th Gender
  tbody
    tr
      td Jeremy Smith
      td Approved
      td Male
    tr
      td Sharon Kelly
      td Approved
      td Female
    tr
      td Maria Burke
      td Denied
      td Female
  tfoot
    tr
      td 3 people
      td 2 approved
      td
```
*/
/*doc
---
title: Minimal
name: 04-tables-minimal
category: 10.Tables-01.Tables
---

Use `.c-table--minimal` to make a minimal style table.

```slim_example
table.c-table--minimal
  thead
    tr
      th Name
      th Status
      th Gender
  tbody
    tr
      td Jeremy Smith
      td Approved
      td Male
    tr
      td Sharon Kelly
      td Approved
      td Female
    tr
      td Maria Burke
      td Denied
      td Female
  tfoot
    tr
      td 3 people
      td 2 approved
      td
```

Looks good only with `<tbody>`.

```slim_example
table.c-table--minimal
  tbody
    tr
      td Jeremy Smith
      td Approved
      td Male
    tr
      td Sharon Kelly
      td Approved
      td Female
    tr
      td Maria Burke
      td Denied
      td Female
```
*/
/*doc
---
title: Striped
name: 05-tables-striped
category: 10.Tables-01.Tables
---

Use `.-bg-striped` to add zebra-striping to any table row within the `<tbody>`.

```slim_example
table.c-table.-bg-striped
  thead
    tr
      th Name
      th Status
      th Gender
  tbody
    tr
      td Jeremy Smith
      td Approved
      td Male
    tr
      td Sharon Kelly
      td Approved
      td Female
    tr
      td Maria Burke
      td Denied
      td Female
    tr
      td William Schultz
      td Denied
      td Male
```
*/
/*doc
---
title: Auto width
name: 06-tables-auto-width
category: 10.Tables-01.Tables
---

Use `.-width-auto` to collapse spaces.

```slim_example
table.c-table.-width-auto
  thead
    tr
      th Name
      th Status
      th Gender
  tbody
    tr
      td Jeremy Smith
      td Approved
      td Male
    tr
      td Sharon Kelly
      td Approved
      td Female
    tr
      td Maria Burke
      td Denied
      td Female
  tfoot
    tr
      td 3 people
      td 2 approved
      td
```
*/
/*doc
---
title: More Padding
name: 07-tables-more-padding
category: 10.Tables-01.Tables
---

Add `.-padding-more` if you need a table to be more padded.

```slim_example
table.c-table.-padding-more
  thead
    tr
      th Name
      th Status
      th Gender
  tbody
    tr
      td Jeremy Smith
      td Approved
      td Male
    tr
      td Sharon Kelly
      td Approved
      td Female
    tr
      td Maria Burke
      td Denied
      td Female
  tfoot
    tr
      td 3 people
      td 2 approved
      td
```
*/
/*doc
---
title: Less padding
name: 08-tables-less-padding
category: 10.Tables-01.Tables
---

Add `.-padding-less` if you need a table to be more compact.

```slim_example
table.c-table.-padding-less
  thead
    tr
      th Name
      th Status
      th Gender
  tbody
    tr
      td Jeremy Smith
      td Approved
      td Male
    tr
      td Sharon Kelly
      td Approved
      td Female
    tr
      td Maria Burke
      td Denied
      td Female
  tfoot
    tr
      td 3 people
      td 2 approved
      td
```
*/
/*doc
---
title: Nested
name: 09-tables-nested
category: 10.Tables-01.Tables
---

Tables are nestable.

```slim_example
table.c-table--celled
  thead
    tr
      th Name
      th Plan
  tbody
    tr
      td Jeremy Smith
      td Free plan
    tr
      td Sharon Kelly
      td Free plan
    tr
      td Maria Burke
      td
        p Enterpise plan
        table.c-table--compact.c-table--minimal
          thead
            tr
              th Description
              th Amount
          tbody
            tr
              td Basic charge
              td $120.00
            tr
              td Tax
              td $3.00
          tfoot
            tr
              th Total
              td $123.00
```
*/
/*doc
---
title: Control row width
name: 10-tables-row-width
category: 10.Tables-01.Tables
---

Use`.u-nowrap` helpers to avoid line break.

```slim_example
table.c-table--celled
  thead
    tr
      th.u-nowrap Name
      th.u-nowrap Status
      th.u-nowrap Gender
      th profile
  tbody
    tr
      td.u-nowrap Jeremy Smith
      td.u-nowrap Approved
      td.u-nowrap Male
      td Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    tr
      td.u-nowrap Sharon Kelly
      td.u-nowrap Approved
      td.u-nowrap Female
      td Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    tr
      td.u-nowrap Maria Burke
      td.u-nowrap Denied
      td.u-nowrap Female
      td Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  tfoot
    tr
      td.u-nowrap 3 people
      td.u-nowrap 2 approved
      td
      td
```
*/
/*doc
---
title: Table Sorter
name: 11-table-sorter
category: 10.Tables-01.Tables
---

Add `.c-table-sorter` to `th` element if you need a table sort feature.

```slim_example
table.c-table--celled
  thead
    tr
      th.c-table-sorter Name
      th.c-table-sorter.-ascending Test ID
      th.c-table-sorter.-descending Gender
  tbody
    tr
      td Jeremy Smith
      td 001
      td Male
    tr
      td Sharon Kelly
      td 002
      td Female
    tr
      td Maria Burke
      td 003
      td Female
```
*/
/*doc
---
title: Inactive Cell
name: 12-inactive-cell
category: 10.Tables-01.Tables
---

Add `.-is-inactive` to `tr` element to indicate the row is inactive.

```slim_example
table.c-table--celled
  thead
    tr
      th Name
      th Test ID
      th Acitve
  tbody
    tr
      td Jeremy Smith
      td 001
      td Active
    tr.-is-inactive
      td Sharon Kelly
      td 002
      td Inactive
    tr.-is-inactive
      td Maria Burke
      td 003
      td Inactive
```
*/
.c-tabs {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ebedef; }
  .c-tabs > li {
    float: left;
    margin-right: 1px;
    border-right: 1px solid #ebedef;
    border-bottom: 1px solid #ebedef;
    margin: 0 0 -1px !important;
    line-height: 0;
    text-align: center; }
    .c-tabs > li:first-child {
      margin-left: 10px; }
    .c-tabs > li:last-child {
      margin-right: 0; }
    .c-tabs > li > a {
      position: relative;
      color: #9ba9c7;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 12px;
      font-weight: bold;
      cursor: pointer;
      transition: border-color 0.1s ease-in;
      line-height: 1.1;
      min-width: 96px;
      padding: 0 16px;
      height: 42px;
      display: table-cell;
      vertical-align: middle; }
      .c-tabs > li > a br ~ .c-dot-notification {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%); }
    .c-tabs > li:hover {
      background-color: #e2e6ef; }
      .c-tabs > li:hover > a {
        border-color: transparent !important; }
    .c-tabs > li.active, .c-tabs > li.active:hover {
      border-bottom-color: #fff;
      background: #fff; }
      .c-tabs > li.active > a, .c-tabs > li.active:hover > a {
        cursor: default;
        color: #626e8b; }
        .c-tabs > li.active > a:before, .c-tabs > li.active:hover > a:before {
          content: " ";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 5px;
          background: #5fa9ff; }

.c-tab-pane {
  display: none; }
  .c-tab-pane.active {
    display: block; }

.c-tabs--bar {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #ebedef;
  border-bottom: 1px solid #ebedef; }
  .c-tabs--bar .kzicon {
    font-size: 40px; }
  .c-tabs--bar > li {
    flex-grow: 1;
    flex-basis: 0;
    position: relative; }
    .c-tabs--bar > li:not(:last-child) > a {
      border-right: 1px solid #ebedef; }
    .c-tabs--bar > li > a {
      display: block;
      min-width: 105px;
      height: 50px;
      padding: 5px;
      background-color: #f7f9fd;
      color: #8293b9;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 11px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.1s ease-in; }
      .c-tabs--bar > li > a .kzicon,
      .c-tabs--bar > li > a .c-message-bubble {
        margin-right: 15px; }
    .c-tabs--bar > li:hover > a {
      background-color: #dbe0eb; }
    .c-tabs--bar > li.active > a {
      background-color: #5fa9ff;
      color: #fff; }
    .c-tabs--bar > li.active .c-message-bubble::before {
      color: #fff; }
    .c-tabs--bar > li.active .c-message-bubble__number {
      color: #5fa9ff; }

/*doc
---
title: Line styled tabs
name: 01-line-styled-tabs
category: 08.Navigations-01.Tabs
---

Line-styled tabs is for the primary use. You can include an `.c-dot-notification` sign inside a tab. See also a document about "Badge".

```slim_example
sass:
  .tab-example-container
    padding: 40px
    border-right: 1px solid #dbe0eb
    border-bottom: 1px solid #dbe0eb
    border-left: 1px solid #dbe0eb

ul.c-tabs
  li.active
    a href="#" Report
  li
    a href="#"
      | Variations
      .c-dot-notification
  li
    a href="#" Basic information
  li.active
    a href="#"
      | Multi
      br 
      | Line
  li
    a href="#"
      | Multi
      br 
      | Line
      .c-dot-notification
.c-tab-content
  .c-tab-pane.active
    .tab-example-container Report
  .c-tab-pane
    .tab-example-container Variations
  .c-tab-pane
    .tab-example-container Basic Information
```
*/
/*doc
---
title: Bar styled tabs
name: 02-bar-styled tabs
category: 08.Navigations-01.Tabs
---

Bar-styled tabs

```slim_example
sass:
  .bar-tab-example-container
    border-right: 1px solid #dbe0eb
    border-bottom: 1px solid #dbe0eb
    border-left: 1px solid #dbe0eb
  .bar-tab-example-tab-content
    padding: 40px

.bar-tab-example-container
  ul.c-tabs--bar
    li.active
      a href="#"
        i.kzicon.kzicon-chart
        | Report
    li
      a href="#"
        .c-message-bubble.-unread
          .c-message-bubble__number 7
        | New messages
    li
      a href="#"
        .c-message-bubble.-empty
        | No messages
    li
      a href="#"
        .c-message-bubble
          .c-message-bubble__number 7
        | No messages

  .c-tab-content
    .c-tab-pane
      .bar-tab-example-tab-content Report
    .c-tab-pane.active
      .bar-tab-example-tab-content Variations
    .c-tab-pane
      .bar-tab-example-tab-content Basic information
      .c-tab-pane
        .bar-tab-example-tab-content Basic information
```
*/
.c-tag {
  font-size: 10px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  height: 20px;
  margin-left: 5px;
  padding-top: 2px;
  padding-right: 12px;
  padding-bottom: 1px;
  padding-left: 14px;
  color: #fff;
  border-radius: 2px;
  background-color: #8293b9; }
  .c-tag:before {
    position: absolute;
    top: 0;
    left: -5px;
    width: 0;
    height: 0;
    content: '';
    border-top: 10px dotted transparent;
    border-right: 6px solid #8293b9;
    border-bottom: 10px dotted transparent; }
  .c-tag:after {
    position: absolute;
    top: 50%;
    left: 1px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    content: '';
    border-radius: 12px;
    background-color: #fff; }
  .c-tag:hover {
    text-decoration: none; }
  .c-tag + [class*='c-tag'] {
    margin-left: 12px; }
  .c-tag.-with-number {
    padding-right: 2px; }
  .c-tag.-width-full {
    width: 100%; }

.c-tag__number {
  font-size: 11px;
  line-height: 16px;
  display: inline-block;
  float: right;
  min-width: 24px;
  height: 16px;
  margin-left: 12px;
  padding-right: 1px;
  padding-left: 1px;
  text-align: center;
  color: #8293b9;
  border-radius: 2px;
  background-color: #fff; }

/*doc
---
title: Default
name: 01-tag-default
category: 11.Labels-02.Tags
---

Use `c-tag` class to show a tag.

```slim_example
p
  span.c-tag Animal & Pet
  span.c-tag Automotive
  span.c-tag Landing
p
  span.c-tag ペット・動物
  span.c-tag 自動車
  span.c-tag ランディング
```
*/
/*doc
---
title: Adaptive width
name: 02-tag-with-adaptive width
category: 11.Labels-02.Tags
---

Add `-width-full` to make a tag's width adaptive. You can control its width with a wrapper.

```slim_example
p style="width: 100px;"
  a.c-tag.-width-full
    | Animal & Pet
p style="width: 100px;"
  a.c-tag.-width-full
    | Automotive
p style="width: 100px;"
  a.c-tag.-width-full
    | Landing
```
*/
/*doc
---
title: With number
name: 03-tag-with-number
category: 11.Labels-02.Tags
---

Add `-with-number` to show a number inside a tag. Use `.c-tag__number` for the number itself.

```slim_example
p
  a.c-tag.-with-number
    | Animal & Pet
    span.c-tag__number 5
  a.c-tag.-with-number
    | Automotive
    span.c-tag__number 12
  a.c-tag.-with-number
    | Landing
    span.c-tag__number 999
p
  a.c-tag.-with-number
    | ペット・動物
    span.c-tag__number 5
  a.c-tag.-with-number
    | 自動車
    span.c-tag__number 12
  a.c-tag.-with-number
    | ランディング
    span.c-tag__number 99999
```
*/
.c-textfield,
.c-textarea, input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border-width: 1px;
  border-style: solid;
  border-color: #b4bed5;
  border-radius: 4px;
  line-height: 18px;
  box-sizing: border-box;
  color: #4c566c;
  background-color: #fff;
  transition: border, color, background-color, box-shadow, 0.1s ease-in; }
  .c-textfield:focus,
  .c-textarea:focus, input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="datetime"]:focus,
  input[type="datetime-local"]:focus,
  input[type="date"]:focus,
  input[type="month"]:focus,
  input[type="time"]:focus,
  input[type="week"]:focus,
  input[type="number"]:focus,
  input[type="email"]:focus,
  input[type="url"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="color"]:focus,
  textarea:focus, #focusedInputForDemo.c-textfield,
  #focusedInputForDemo.c-textarea, input#focusedInputForDemo[type="text"],
  input#focusedInputForDemo[type="password"],
  input#focusedInputForDemo[type="datetime"],
  input#focusedInputForDemo[type="datetime-local"],
  input#focusedInputForDemo[type="date"],
  input#focusedInputForDemo[type="month"],
  input#focusedInputForDemo[type="time"],
  input#focusedInputForDemo[type="week"],
  input#focusedInputForDemo[type="number"],
  input#focusedInputForDemo[type="email"],
  input#focusedInputForDemo[type="url"],
  input#focusedInputForDemo[type="search"],
  input#focusedInputForDemo[type="tel"],
  input#focusedInputForDemo[type="color"],
  textarea#focusedInputForDemo {
    border-color: #99e1ff;
    box-shadow: 0 0 0 1px #99e1ff;
    outline: 0; }
  .c-textfield::-moz-placeholder,
  .c-textarea::-moz-placeholder, input[type="text"]::-moz-placeholder,
  input[type="password"]::-moz-placeholder,
  input[type="datetime"]::-moz-placeholder,
  input[type="datetime-local"]::-moz-placeholder,
  input[type="date"]::-moz-placeholder,
  input[type="month"]::-moz-placeholder,
  input[type="time"]::-moz-placeholder,
  input[type="week"]::-moz-placeholder,
  input[type="number"]::-moz-placeholder,
  input[type="email"]::-moz-placeholder,
  input[type="url"]::-moz-placeholder,
  input[type="search"]::-moz-placeholder,
  input[type="tel"]::-moz-placeholder,
  input[type="color"]::-moz-placeholder,
  textarea::-moz-placeholder {
    color: #b4bed5;
    opacity: 1; }
  .c-textfield:-ms-input-placeholder,
  .c-textarea:-ms-input-placeholder, input[type="text"]:-ms-input-placeholder,
  input[type="password"]:-ms-input-placeholder,
  input[type="datetime"]:-ms-input-placeholder,
  input[type="datetime-local"]:-ms-input-placeholder,
  input[type="date"]:-ms-input-placeholder,
  input[type="month"]:-ms-input-placeholder,
  input[type="time"]:-ms-input-placeholder,
  input[type="week"]:-ms-input-placeholder,
  input[type="number"]:-ms-input-placeholder,
  input[type="email"]:-ms-input-placeholder,
  input[type="url"]:-ms-input-placeholder,
  input[type="search"]:-ms-input-placeholder,
  input[type="tel"]:-ms-input-placeholder,
  input[type="color"]:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    color: #b4bed5; }
  .c-textfield::-webkit-input-placeholder,
  .c-textarea::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder,
  input[type="password"]::-webkit-input-placeholder,
  input[type="datetime"]::-webkit-input-placeholder,
  input[type="datetime-local"]::-webkit-input-placeholder,
  input[type="date"]::-webkit-input-placeholder,
  input[type="month"]::-webkit-input-placeholder,
  input[type="time"]::-webkit-input-placeholder,
  input[type="week"]::-webkit-input-placeholder,
  input[type="number"]::-webkit-input-placeholder,
  input[type="email"]::-webkit-input-placeholder,
  input[type="url"]::-webkit-input-placeholder,
  input[type="search"]::-webkit-input-placeholder,
  input[type="tel"]::-webkit-input-placeholder,
  input[type="color"]::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: #b4bed5; }
  [disabled].c-textfield,
  [disabled].c-textarea, input[disabled][type="text"],
  input[disabled][type="password"],
  input[disabled][type="datetime"],
  input[disabled][type="datetime-local"],
  input[disabled][type="date"],
  input[disabled][type="month"],
  input[disabled][type="time"],
  input[disabled][type="week"],
  input[disabled][type="number"],
  input[disabled][type="email"],
  input[disabled][type="url"],
  input[disabled][type="search"],
  input[disabled][type="tel"],
  input[disabled][type="color"],
  textarea[disabled], [readonly].c-textfield,
  [readonly].c-textarea, input[readonly][type="text"],
  input[readonly][type="password"],
  input[readonly][type="datetime"],
  input[readonly][type="datetime-local"],
  input[readonly][type="date"],
  input[readonly][type="month"],
  input[readonly][type="time"],
  input[readonly][type="week"],
  input[readonly][type="number"],
  input[readonly][type="email"],
  input[readonly][type="url"],
  input[readonly][type="search"],
  input[readonly][type="tel"],
  input[readonly][type="color"],
  textarea[readonly] {
    cursor: not-allowed;
    color: #c3cbdd;
    background-color: #f7f9fd;
    border-color: #dbe0eb; }
    [disabled].c-textfield:focus,
    [disabled].c-textarea:focus, input[disabled][type="text"]:focus,
    input[disabled][type="password"]:focus,
    input[disabled][type="datetime"]:focus,
    input[disabled][type="datetime-local"]:focus,
    input[disabled][type="date"]:focus,
    input[disabled][type="month"]:focus,
    input[disabled][type="time"]:focus,
    input[disabled][type="week"]:focus,
    input[disabled][type="number"]:focus,
    input[disabled][type="email"]:focus,
    input[disabled][type="url"]:focus,
    input[disabled][type="search"]:focus,
    input[disabled][type="tel"]:focus,
    input[disabled][type="color"]:focus,
    textarea[disabled]:focus, [readonly].c-textfield:focus,
    [readonly].c-textarea:focus, input[readonly][type="text"]:focus,
    input[readonly][type="password"]:focus,
    input[readonly][type="datetime"]:focus,
    input[readonly][type="datetime-local"]:focus,
    input[readonly][type="date"]:focus,
    input[readonly][type="month"]:focus,
    input[readonly][type="time"]:focus,
    input[readonly][type="week"]:focus,
    input[readonly][type="number"]:focus,
    input[readonly][type="email"]:focus,
    input[readonly][type="url"]:focus,
    input[readonly][type="search"]:focus,
    input[readonly][type="tel"]:focus,
    input[readonly][type="color"]:focus,
    textarea[readonly]:focus {
      box-shadow: none; }
  .-is-error.c-textfield,
  .-is-error.c-textarea, input.-is-error[type="text"],
  input.-is-error[type="password"],
  input.-is-error[type="datetime"],
  input.-is-error[type="datetime-local"],
  input.-is-error[type="date"],
  input.-is-error[type="month"],
  input.-is-error[type="time"],
  input.-is-error[type="week"],
  input.-is-error[type="number"],
  input.-is-error[type="email"],
  input.-is-error[type="url"],
  input.-is-error[type="search"],
  input.-is-error[type="tel"],
  input.-is-error[type="color"],
  textarea.-is-error {
    border-color: #fe7877;
    box-shadow: 0 0 0 1px #fe7877; }
    .-is-error.c-textfield:focus,
    .-is-error.c-textarea:focus, input.-is-error[type="text"]:focus,
    input.-is-error[type="password"]:focus,
    input.-is-error[type="datetime"]:focus,
    input.-is-error[type="datetime-local"]:focus,
    input.-is-error[type="date"]:focus,
    input.-is-error[type="month"]:focus,
    input.-is-error[type="time"]:focus,
    input.-is-error[type="week"]:focus,
    input.-is-error[type="number"]:focus,
    input.-is-error[type="email"]:focus,
    input.-is-error[type="url"]:focus,
    input.-is-error[type="search"]:focus,
    input.-is-error[type="tel"]:focus,
    input.-is-error[type="color"]:focus,
    textarea.-is-error:focus {
      box-shadow: 0 0 0 1px #fe7877; }

input[type="text"].-width-medium,
input[type="password"].-width-medium,
input[type="datetime"].-width-medium,
input[type="datetime-local"].-width-medium,
input[type="date"].-width-medium,
input[type="month"].-width-medium,
input[type="time"].-width-medium,
input[type="week"].-width-medium,
input[type="number"].-width-medium,
input[type="email"].-width-medium,
input[type="url"].-width-medium,
input[type="search"].-width-medium,
input[type="tel"].-width-medium,
input[type="color"].-width-medium,
textarea.-width-medium {
  width: 340px; }

input[type="text"].-width-short,
input[type="password"].-width-short,
input[type="datetime"].-width-short,
input[type="datetime-local"].-width-short,
input[type="date"].-width-short,
input[type="month"].-width-short,
input[type="time"].-width-short,
input[type="week"].-width-short,
input[type="number"].-width-short,
input[type="email"].-width-short,
input[type="url"].-width-short,
input[type="search"].-width-short,
input[type="tel"].-width-short,
input[type="color"].-width-short,
textarea.-width-short {
  width: 200px; }

input[type="text"].-width-wide,
input[type="password"].-width-wide,
input[type="datetime"].-width-wide,
input[type="datetime-local"].-width-wide,
input[type="date"].-width-wide,
input[type="month"].-width-wide,
input[type="time"].-width-wide,
input[type="week"].-width-wide,
input[type="number"].-width-wide,
input[type="email"].-width-wide,
input[type="url"].-width-wide,
input[type="search"].-width-wide,
input[type="tel"].-width-wide,
input[type="color"].-width-wide,
textarea.-width-wide {
  width: 520px; }

input[type="text"].-size-compact,
input[type="password"].-size-compact,
input[type="datetime"].-size-compact,
input[type="datetime-local"].-size-compact,
input[type="date"].-size-compact,
input[type="month"].-size-compact,
input[type="time"].-size-compact,
input[type="week"].-size-compact,
input[type="number"].-size-compact,
input[type="email"].-size-compact,
input[type="url"].-size-compact,
input[type="search"].-size-compact,
input[type="tel"].-size-compact,
input[type="color"].-size-compact,
textarea.-size-compact {
  padding: 5px 16px;
  font-size: 12px; }

input[type="text"][size],
input[type="password"][size],
input[type="datetime"][size],
input[type="datetime-local"][size],
input[type="date"][size],
input[type="month"][size],
input[type="time"][size],
input[type="week"][size],
input[type="number"][size],
input[type="email"][size],
input[type="url"][size],
input[type="search"][size],
input[type="tel"][size],
input[type="color"][size],
textarea[size] {
  width: auto; }

input[type="text"].-display-inline,
input[type="password"].-display-inline,
input[type="datetime"].-display-inline,
input[type="datetime-local"].-display-inline,
input[type="date"].-display-inline,
input[type="month"].-display-inline,
input[type="time"].-display-inline,
input[type="week"].-display-inline,
input[type="number"].-display-inline,
input[type="email"].-display-inline,
input[type="url"].-display-inline,
input[type="search"].-display-inline,
input[type="tel"].-display-inline,
input[type="color"].-display-inline,
textarea.-display-inline {
  display: inline-block; }

.c-input--with-icon {
  position: relative; }
  .c-input--with-icon input[type="text"],
  .c-input--with-icon input[type="password"],
  .c-input--with-icon input[type="datetime"],
  .c-input--with-icon input[type="datetime-local"],
  .c-input--with-icon input[type="date"],
  .c-input--with-icon input[type="month"],
  .c-input--with-icon input[type="time"],
  .c-input--with-icon input[type="week"],
  .c-input--with-icon input[type="number"],
  .c-input--with-icon input[type="email"],
  .c-input--with-icon input[type="url"],
  .c-input--with-icon input[type="search"],
  .c-input--with-icon input[type="tel"],
  .c-input--with-icon input[type="color"] {
    padding-left: 40px; }
    .c-input--with-icon input[type="text"]:focus ~ .kzicon,
    .c-input--with-icon input[type="password"]:focus ~ .kzicon,
    .c-input--with-icon input[type="datetime"]:focus ~ .kzicon,
    .c-input--with-icon input[type="datetime-local"]:focus ~ .kzicon,
    .c-input--with-icon input[type="date"]:focus ~ .kzicon,
    .c-input--with-icon input[type="month"]:focus ~ .kzicon,
    .c-input--with-icon input[type="time"]:focus ~ .kzicon,
    .c-input--with-icon input[type="week"]:focus ~ .kzicon,
    .c-input--with-icon input[type="number"]:focus ~ .kzicon,
    .c-input--with-icon input[type="email"]:focus ~ .kzicon,
    .c-input--with-icon input[type="url"]:focus ~ .kzicon,
    .c-input--with-icon input[type="search"]:focus ~ .kzicon,
    .c-input--with-icon input[type="tel"]:focus ~ .kzicon,
    .c-input--with-icon input[type="color"]:focus ~ .kzicon {
      color: #4c566c; }
    .c-input--with-icon input[type="text"].-size-compact,
    .c-input--with-icon input[type="password"].-size-compact,
    .c-input--with-icon input[type="datetime"].-size-compact,
    .c-input--with-icon input[type="datetime-local"].-size-compact,
    .c-input--with-icon input[type="date"].-size-compact,
    .c-input--with-icon input[type="month"].-size-compact,
    .c-input--with-icon input[type="time"].-size-compact,
    .c-input--with-icon input[type="week"].-size-compact,
    .c-input--with-icon input[type="number"].-size-compact,
    .c-input--with-icon input[type="email"].-size-compact,
    .c-input--with-icon input[type="url"].-size-compact,
    .c-input--with-icon input[type="search"].-size-compact,
    .c-input--with-icon input[type="tel"].-size-compact,
    .c-input--with-icon input[type="color"].-size-compact {
      padding-left: 30px; }
      .c-input--with-icon input[type="text"].-size-compact ~ .kzicon,
      .c-input--with-icon input[type="password"].-size-compact ~ .kzicon,
      .c-input--with-icon input[type="datetime"].-size-compact ~ .kzicon,
      .c-input--with-icon input[type="datetime-local"].-size-compact ~ .kzicon,
      .c-input--with-icon input[type="date"].-size-compact ~ .kzicon,
      .c-input--with-icon input[type="month"].-size-compact ~ .kzicon,
      .c-input--with-icon input[type="time"].-size-compact ~ .kzicon,
      .c-input--with-icon input[type="week"].-size-compact ~ .kzicon,
      .c-input--with-icon input[type="number"].-size-compact ~ .kzicon,
      .c-input--with-icon input[type="email"].-size-compact ~ .kzicon,
      .c-input--with-icon input[type="url"].-size-compact ~ .kzicon,
      .c-input--with-icon input[type="search"].-size-compact ~ .kzicon,
      .c-input--with-icon input[type="tel"].-size-compact ~ .kzicon,
      .c-input--with-icon input[type="color"].-size-compact ~ .kzicon {
        font-size: 30px; }
  .c-input--with-icon > .kzicon {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 40px;
    color: #b4bed5;
    transition: color 0.1s ease-in; }
  .c-input--with-icon .-size-compact + .kzicon {
    font-size: 30px; }

.c-input--with-badge, .c-input--with-state {
  position: relative;
  display: inline-block; }
  .c-input--with-badge input[type="text"], .c-input--with-state input[type="text"], .c-input--with-badge input[type="password"], .c-input--with-state input[type="password"], .c-input--with-badge input[type="datetime"], .c-input--with-state input[type="datetime"], .c-input--with-badge input[type="datetime-local"], .c-input--with-state input[type="datetime-local"], .c-input--with-badge input[type="date"], .c-input--with-state input[type="date"], .c-input--with-badge input[type="month"], .c-input--with-state input[type="month"], .c-input--with-badge input[type="time"], .c-input--with-state input[type="time"], .c-input--with-badge input[type="week"], .c-input--with-state input[type="week"], .c-input--with-badge input[type="number"], .c-input--with-state input[type="number"], .c-input--with-badge input[type="email"], .c-input--with-state input[type="email"], .c-input--with-badge input[type="url"], .c-input--with-state input[type="url"], .c-input--with-badge input[type="search"], .c-input--with-state input[type="search"], .c-input--with-badge input[type="tel"], .c-input--with-state input[type="tel"], .c-input--with-badge input[type="color"], .c-input--with-state input[type="color"] {
    padding-right: 50px; }

.c-input--with-badge [class^="c-badge"] {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0, -50%); }

.c-input--with-state.-success::after, .c-input--with-state.-loading::after {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translate(0, -50%);
  font-family: "KaizenIcons";
  font-size: 32px;
  line-height: 0; }

.c-input--with-state.-success::after {
  color: #88e18e;
  content: '\E009'; }

.c-input--with-state.-loading::after {
  color: #c3cbdd;
  content: '\E02A';
  animation: kzicon-spin 1.2s infinite linear; }

.c-input--with-state.-error input[type="text"],
.c-input--with-state.-error input[type="password"],
.c-input--with-state.-error input[type="datetime"],
.c-input--with-state.-error input[type="datetime-local"],
.c-input--with-state.-error input[type="date"],
.c-input--with-state.-error input[type="month"],
.c-input--with-state.-error input[type="time"],
.c-input--with-state.-error input[type="week"],
.c-input--with-state.-error input[type="number"],
.c-input--with-state.-error input[type="email"],
.c-input--with-state.-error input[type="url"],
.c-input--with-state.-error input[type="search"],
.c-input--with-state.-error input[type="tel"],
.c-input--with-state.-error input[type="color"],
.c-input--with-state.-error textarea {
  border-color: #fe7877;
  box-shadow: 0 0 0 1px #fe7877; }
  .c-input--with-state.-error input[type="text"]:focus,
  .c-input--with-state.-error input[type="password"]:focus,
  .c-input--with-state.-error input[type="datetime"]:focus,
  .c-input--with-state.-error input[type="datetime-local"]:focus,
  .c-input--with-state.-error input[type="date"]:focus,
  .c-input--with-state.-error input[type="month"]:focus,
  .c-input--with-state.-error input[type="time"]:focus,
  .c-input--with-state.-error input[type="week"]:focus,
  .c-input--with-state.-error input[type="number"]:focus,
  .c-input--with-state.-error input[type="email"]:focus,
  .c-input--with-state.-error input[type="url"]:focus,
  .c-input--with-state.-error input[type="search"]:focus,
  .c-input--with-state.-error input[type="tel"]:focus,
  .c-input--with-state.-error input[type="color"]:focus,
  .c-input--with-state.-error textarea:focus {
    box-shadow: 0 0 0 1px #fe7877; }

/*doc
---
title: Input fields
name: 01-text-input-fields
category: 07.Forms-02.Inputs
---

Most of form elements are styled based on their type attribute rather than a class. Includes support for all HTML5 types: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, and `color`.

```slim_example
input type="text" placeholder="Please enter your username"
```
*/
/*doc
---
title: Textarea
name: 02-textarea
category: 07.Forms-02.Inputs
---

Set `rows` attribute for height sizing.

```slim_example
textarea rows="4" placeholder="Enter a comment"
```
*/
/*doc
---
title: Sizing
name: 04-text-input-sizing
category: 07.Forms-02.Inputs
---

All text-based `<input>` and `<textarea>` elements are set to `width: 100%;` by default.

You can size inputs using grid columns (like `.c-col--md-4`, `.c-col--sm-6`) or any custom wrapper elements.

```slim_example
.c-form-group
  label Default
  input type="text" placeholder="width: 100%"

.c-row
  .c-col--md-6
    .c-form-group
      label Grid column
      input type="text" placeholder=".c-col--md-6"

/! DO NOT USE ANY STYLE ATTRIBUTES!!!
div style="width: 200px"
  .c-form-group
    label Custom wrapper
    input type="text" placeholder="width: 200px"
```

And you can size inputs with `size` attributes.

```slim_example
.c-form-group
  label
    | Size="2"
    input type="text" size="2" maxlength="2"
.c-form-group
  label
    | Size="10"
    input type="text" size="10" maxlength="2"
.c-form-group
  label
    | Size="20"
    input type="text" size="20" maxlength="2"
```

If you need other sized inputs, add `.-width-medium`, `.-width-short` and `.width-wide` classes.

```slim_example
.c-form-group
  label Short fixed width
  input.-width-short type="text" placeholder="200px width"
.c-form-group
  label Normal Fixed width
  input.-width-medium type="text" placeholder="340px width"
.c-form-group
  label Long fixed width
  input.-width-wide type="text" placeholder="540px width"
```

If you need a less padding input (having same height as a dropdown), add a `.-size-compact` class.

```slim_example
.c-form-group
  label Compact
  input.-size-compact type="text" placeholder="compact text field"
```
*/
/*doc
---
title: Focus state
name: 05-text-input-focus-state
category: 07.Forms-02.Inputs
---

```slim_example
input#focusedInputForDemo type="text" placeholder="Demonstrative focus state"
```

<div class="c-alert--warning mb40">
The above example input uses custom styles in our documentation to demonstrate the <code>:focus</code> state. (<code>#focusedInputForDemo</code>)
</div>

*/
/*doc
---
title: Disabled & Readonly state
name: 06-text-input-disabled-and-readonly-state
category: 07.Forms-02.Inputs
---

Add the `disabled` or `readonly` boolean attribute on an input to prevent user input.

Now, what's the difference between `disabled` and `readonly`?

A `disabled` form element does not receive focus and are skipped in tabbing navigation, on the other hand, a `readonly` elements can receive the focus and are included in tabbed navigation.

Another difference is that a `disabled` element does not send data on submit, but a `readonly` elements sends.

```slim_example
.c-form-group
  label Disabled input
  input type="text" value="You can't edit me and can't focus on me" disabled="disabled"

.c-form-group
  label Readonly input
  input type="text" value="You can't edit me but can focus on me" readonly="readonly"
```
*/
/*doc
---
title: Error state
name: 07-text-input-error-state
category: 07.Forms-02.Inputs
---

Set `.-is-error` class to a `<input>` element.

```slim_example
.c-form-group
  label Email
  input.-is-error type="text" value="info@kaizenplatform.com"
  small.c-form-help.u-text-error This email address is already used. Try another one.

.c-form-group
  label Password
  input.-is-error type="password" placeholder="Set your password"
  small.c-form-help.u-text-error The password you entered is too short. Type more than 8 characters.
```
*/
/*doc
---
title: With icons
name: 08-text-input-with-icons
category: 07.Forms-02.Inputs
---

Use `.c-input-with-icon` to show an icon inside a text input.

```slim_example
.c-form-group
  .c-input--with-icon
    input.-width-short type="text" value="" placeholder=""
    i.kzicon.kzicon-credit-card

.c-form-group
  .c-input--with-icon
    input.-size-compact.-width-medium type="text" value="" placeholder="Search for members by username"
    i.kzicon.kzicon-profile

.c-form-group
  .c-input--with-icon
    input.-size-compact.-width-short type="text" value="" placeholder="YYYY-MM-DD"
    div style="display: none;"
    i.kzicon.kzicon-calendar
```
*/
/*doc
---
title: Ajax validation state (With badges)
name: 09-text-input-ajax-validation-state
category: 07.Forms-02.Inputs
---

Use `.c-input--with-badge` to show a badge inside a text input.

```slim_example
.c-form-group
  label Email
  .c-input--with-badge
    input.-width-medium type="text" value="info@kaizenplatform.com"
    .c-badge--success
      i.kzicon.kzicon-check

.c-form-group
  label Password
  .c-input--with-badge
    input.-width-medium type="password" value="123"
    .c-badge--error
      i.kzicon.kzicon-cancel
  small.c-form-help.u-text-error Too short
```
*/
/*doc
---
title: Text input with state
name: 09-text-input-with-state
category: 07.Forms-02.Inputs
---

```slim_example
.c-form-group
  label Email
  .c-input--with-state.-success
    input.-width-medium type="text" value="info@kaizenplatform.com"

.c-form-group
  label Username
  .c-input--with-state.-loading
    input.-width-medium type="text" value="kaizen"

.c-form-group
  label Password
  .c-input--with-state.-error
    input.-width-medium type="password" value=""
  small.c-form-help.u-text-error Too short

```
*/
.c-alert {
  border: 1px solid transparent;
  margin: 24px 0;
  padding: 16px;
  padding-left: 62px;
  position: relative; }
  .c-alert *:first-child {
    margin-top: 0; }
  .c-alert *:last-child {
    margin-bottom: 0; }
  .c-alert ol,
  .c-alert ul {
    padding-left: 1rem; }
    .c-alert ol li,
    .c-alert ul li {
      margin-bottom: 1rem; }
  .c-alert:before {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 40px;
    font-family: KaizenIcons;
    content: '\E031';
    line-height: 1; }
  .c-alert.-info {
    border-color: #5fa9ff; }
    .c-alert.-info:before {
      color: #5fa9ff;
      content: '\E06A'; }
  .c-alert.-warning {
    border-color: #fcb100; }
    .c-alert.-warning:before {
      color: #fcb100; }
  .c-alert.-critical {
    border-color: #fe7877; }
    .c-alert.-critical:before {
      color: #fe7877; }

/*doc
---
title: Alerts
name: alerts
category: 17.Alerts
---

When you need to notice informing to user, use the `.c-alert`.
`.c-alert` needs a modifier `.-info`, `.-critical` or `.-warning`.

```slim_example
.c-alert.-info
  | Please use this one, for informational notices.

.c-alert.-critical
  | Please use this one, for critical notices.

.c-alert.-warning
  | Please use this one, for non-critical notices.
```


Margins of block/list elements inside `.c-alert` adjusted automaticaly.

```slim_example
.c-alert.-critical
  ul
    li This is a notice informing of situations of the user choice.
    li for example: After submitting the form below the user will have to wait some time to see the changes implemented.
  p
    a href="#" learn more

```

*/
.u-float-right {
  float: right !important; }

.u-float-left {
  float: left !important; }

.u-float-none {
  float: none !important; }

.u-clearfix:before, .u-clearfix:after {
  content: " ";
  display: table; }

.u-clearfix:after {
  clear: both; }

.u-float-clear {
  clear: both !important; }

.u-cursor-pointer {
  cursor: pointer !important; }

.u-hidden {
  display: none !important; }

.u-visibility-hidden {
  visibility: hidden !important; }

.u-display-block {
  display: block !important; }

.u-display-inline-block {
  display: inline-block !important; }

.u-display-flex {
  display: flex; }
  .u-display-flex.-align-items-stretch {
    align-items: stretch; }
  .u-display-flex.-align-items-center {
    align-items: center; }

.u-display-inline-flex {
  display: inline-flex; }
  .u-display-inline-flex.-align-items-stretch {
    align-items: stretch; }
  .u-display-inline-flex.-align-items-center {
    align-items: center; }

.u-flex-item.-flex-grow {
  flex-grow: 1; }

/*doc
---
title: Quick float
name: 02-float-classes
category: 16.Helper classes-01.Helper classes
---

<table class="c-table--celled u-mb30">
<tbody>
  <tr>
    <td><code>.u-float-left</code></td>
    <td>Float an element to the left</td>
  </tr>
  <tr>
    <td><code>.u-float-right</code></td>
    <td>Float an element to the right</td>
  </tr>
  <tr>
    <td><code>.u-clearfix</code></td>
    <td>Clear floats</td>
  </tr>
  <tr>
    <td><code>.u-float-none</code></td>
    <td>Removing a float</td>
  </tbody>
</table>

```slim_example
.u-clearfix
  .u-float-left Float left
  .u-float-right Float right
```
*/
/*doc
---
title: Quick display and visibility
name: 09-display-and-visibility
category: 16.Helper classes-01.Helper classes
---

<table class="c-table--celled u-mb30">
<tbody>
  <tr>
    <td><code>.u-hidden</code></td>
    <td>Hide content</td>
  </tr>
  <tr>
    <td><code>.u-visibility-hidden</code></td>
    <td>Unvisible content</td>
  </tr>
  <tr>
    <td><code>.u-display-block</code></td>
    <td>Display to block content</td>
  </tr>
  <tr>
    <td><code>.u-display-inline-block</code></td>
    <td>Display to inline-block content</td>
  </tr>
  <tr>
    <td><code>.u-display-flex</code></td>
    <td>Display to flexbox content</td>
  </tr>
  </tbody>
</table>

```slim_example
.u-hidden Hidden element
.u-visibility-hidden Hidden element
.u-display-block block element
.u-display-inline-block inline-block element
```
*/
/*doc
---
title: Others
name: 10-others
category: 16.Helper classes-01.Helper classes
---

<table class="c-table--celled u-mb30">
<tbody>
  <tr>
    <td><code>.u-cursor-pointer</code></td>
    <td>Set cursor pointer to element</td>
  </tr>
  </tbody>
</table>


```slim_example
.u-cursor-pointer Clickable element
```

*/
.u-text-right {
  text-align: right !important; }

.u-text-left {
  text-align: left !important; }

.u-text-center {
  text-align: center !important; }

.u-text-top {
  vertical-align: top !important; }

.u-text-middle {
  vertical-align: middle !important; }

.u-text-bottom {
  vertical-align: bottom !important; }

.u-text-tiny {
  font-size: 11px !important; }

.u-text-smaller {
  font-size: 12px !important; }

.u-text-small {
  font-size: 13px !important; }

.u-text-normal {
  font-size: 14px !important; }

.u-text-large {
  font-size: 16px !important; }

.u-text-larger {
  font-size: 18px !important; }

.u-text-huge {
  font-size: 20px !important; }

.u-text-uppercase {
  text-transform: uppercase !important; }

.u-text-lowercase {
  text-transform: lowercase !important; }

.u-text-capitalize {
  text-transform: capitalize !important; }

.u-text-no-transform {
  text-transform: none !important; }

.u-text-link {
  cursor: pointer;
  outline: 0;
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  color: #5fa9ff;
  background: none;
  font-size: inherit; }
  .u-text-link:hover {
    text-decoration: underline; }

.u-text-error {
  color: #fe7877 !important; }

.u-text-warning {
  color: #fcb100 !important; }

.u-text-muted {
  color: #b4bed5 !important; }

.u-text-emphasize {
  color: #fe7877 !important; }

.u-text-white {
  color: #fff !important; }

.u-text-primary {
  color: #5fa9ff !important; }

.u-text-success {
  color: #5cba47 !important; }

.u-text-moderate {
  color: #8d93a1 !important; }

.u-fixed-font-family {
  font-family: Helvetica, Arial, serif; }

.u-monospace-font-family {
  font-family: "Source Code Pro", Consolas, Menlo, Courier, monospace; }

.u-text-ellipsis {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important; }

.u-word-break-all {
  word-break: break-all;
  white-space: normal;
  word-wrap: break-word; }

.u-nowrap {
  white-space: nowrap !important; }

/*doc
---
title: Contextual text colors
name: 01-contextual-text-colors
category: 16.Helper classes-02.Text classes
---

```slim_example
p.u-text-error Error text
p.u-text-warning Warning text
p.u-text-muted Muted text
p.u-text-emphasize Emphasize text
p.u-text-white style="background-color: #000" White text
p.u-text-primary Primary text
p.u-text-success Success text
p.u-text-moderate Moderate text
```
*/
/*doc
---
title: Text alignment
name: 03-text-alignment
category: 16.Helper classes-02.Text classes
---

<table class="c-table--celled u-mb30">
<tbody>
  <tr>
    <td><code>.u-text-left</code></td>
    <td>Align text to the left</td>
  </tr>
  <tr>
    <td><code>.u-text-right</code></td>
    <td>Align text to the right</td>
  </tr>
  <tr>
    <td><code>.u-text-center</code></td>
    <td>Align text to center</td>
  </tr>
  </tbody>
</table>
<table class="c-table--celled u-mb30">
<tbody>
  <tr>
    <td><code>.u-text-top</code></td>
    <td>Align text to the top</td>
  </tr>
  <tr>
    <td><code>.u-text-bottom</code></td>
    <td>Align text to the bottom</td>
  </tr>
  <tr>
    <td><code>.u-text-middle</code></td>
    <td>Align text to middle</td>
  </tr>
  </tbody>
</table>

```slim_example
p.u-text-left Left aligned text.
p.u-text-center Center aligned text.
p.u-text-right Right aligned text.

table.c-table--celled
  tr
    td.u-text-top top aligned text.
    td.u-text-middle middle aligned text.
    td.u-text-bottom bottom aligned text.
    td Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id massa et odio laoreet vestibulum. Duis et bibendum ante, id porta enim. Donec lobortis mauris et facilisis sagittis. Pellentesque aliquam risus nec tortor mollis hendrerit. Phasellus auctor tortor tortor, hendrerit suscipit erat fringilla pellentesque.
```
*/
/*doc
---
title: Text transformation
name: 04-text-transformation
category: 16.Helper classes-02.Text classes
---

<table class="c-table--celled u-mb30">
<tbody>
  <tr>
    <td><code>.u-text-uppercase</code></td>
    <td>Transform text in uppercase</td>
  </tr>
  <tr>
    <td><code>.u-text-lowercase</code></td>
    <td>Transform text in lowercase</td>
  </tr>
  <tr>
    <td><code>.u-text-capitalize</code></td>
    <td>Capitalize text</td>
  </tr>
  <tr>
    <td><code>.u-text-no-transform</code></td>
    <td>No transform text</td>
  </tr>
  <tr>
    <td><code>.u-text-link</code></td>
    <td>Linkify text, just style.</td>
  </tr>
  </tbody>
</table>

```slim_example
p.u-text-uppercase Uppercased text.
p.u-text-lowercase Lowercased text.
p.u-text-capitalize capitalized text.
p.u-text-transform No Transformed Text.
p.u-text-link Linkify text, just style.
```
*/
/*doc
---
title: Text overflow
name: 05-text-overflow
category: 16.Helper classes-02.Text classes
---

<table class="c-table--celled u-mb30">
<tbody>
  <tr>
    <td><code>.u-text-ellipsis</code></td>
    <td>Display an ellipsis ('…') to represent clipped text.</td>
  </tr>
  <tr>
    <td><code>.u-nowrap</code></td>
    <td>Avoid line break.</td>
  </tr>
  <tr>
    <td><code>.u-word-break-all</code></td>
    <td>Force to break line on long word.</td>
  </tr>
  </tbody>
</table>

```slim_example
p.u-text-ellipsis Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

table
  tr
  td.u-nowrap Lorem ipsum
  td Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
table
  tr
  td.u-word-break-all http://gooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooogle.com
```
*/
/*doc
---
title: Font size
name: 06-font-size
category: 16.Helper classes-02.Text classes
---

```slim_example
.u-text-tiny Tiny Sample Text サンプル (1px)
.u-text-smaller Smaller Sample Text サンプル (12px)
.u-text-small Small Sample Text サンプル (13px)
.u-text-normal Normal Sample Text サンプル (14px)
.u-text-large Large Sample Text サンプル (16px)
.u-text-larger Larger Sample Text サンプル (18px)
.u-text-huge Huge Sample Text サンプル (20px)
```
*/
/*doc
---
title: Font families
name: 07-font-families
category: 16.Helper classes-02.Text classes
---

```slim_example
.u-fixed-font-family font-family: Helvetica, Arial, serif;
.u-monospace-font-family font-family: 'Source Code Pro', Consolas, Menlo, Courier, monospace;
```
*/
.u-mt-zero {
  margin-top: 0 !important; }

.u-mt-tiny {
  margin-top: 4px !important; }

.u-mt-smaller {
  margin-top: 8px !important; }

.u-mt-small {
  margin-top: 12px !important; }

.u-mt-normal {
  margin-top: 16px !important; }

.u-mt-large {
  margin-top: 24px !important; }

.u-mt-larger {
  margin-top: 36px !important; }

.u-mt-huge {
  margin-top: 48px !important; }

.u-mr-zero {
  margin-right: 0 !important; }

.u-mr-tiny {
  margin-right: 4px !important; }

.u-mr-smaller {
  margin-right: 8px !important; }

.u-mr-small {
  margin-right: 12px !important; }

.u-mr-normal {
  margin-right: 16px !important; }

.u-mr-large {
  margin-right: 24px !important; }

.u-mr-larger {
  margin-right: 36px !important; }

.u-mr-huge {
  margin-right: 48px !important; }

.u-mb-zero {
  margin-bottom: 0 !important; }

.u-mb-tiny {
  margin-bottom: 4px !important; }

.u-mb-smaller {
  margin-bottom: 8px !important; }

.u-mb-small {
  margin-bottom: 12px !important; }

.u-mb-normal {
  margin-bottom: 16px !important; }

.u-mb-large {
  margin-bottom: 24px !important; }

.u-mb-larger {
  margin-bottom: 36px !important; }

.u-mb-huge {
  margin-bottom: 48px !important; }

.u-ml-zero {
  margin-left: 0 !important; }

.u-ml-tiny {
  margin-left: 4px !important; }

.u-ml-smaller {
  margin-left: 8px !important; }

.u-ml-small {
  margin-left: 12px !important; }

.u-ml-normal {
  margin-left: 16px !important; }

.u-ml-large {
  margin-left: 24px !important; }

.u-ml-larger {
  margin-left: 36px !important; }

.u-ml-huge {
  margin-left: 48px !important; }

.u-mt10 {
  margin-top: 10px !important; }

.u-mb10 {
  margin-bottom: 10px !important; }

.u-ml10 {
  margin-left: 10px !important; }

.u-mr10 {
  margin-right: 10px !important; }

.u-mt20 {
  margin-top: 20px !important; }

.u-mb20 {
  margin-bottom: 20px !important; }

.u-ml20 {
  margin-left: 20px !important; }

.u-mr20 {
  margin-right: 20px !important; }

.u-mt30 {
  margin-top: 30px !important; }

.u-mb30 {
  margin-bottom: 30px !important; }

.u-ml30 {
  margin-left: 30px !important; }

.u-mr30 {
  margin-right: 30px !important; }

.u-mt40 {
  margin-top: 40px !important; }

.u-mb40 {
  margin-bottom: 40px !important; }

.u-ml40 {
  margin-left: 40px !important; }

.u-mr40 {
  margin-right: 40px !important; }

.u-mt50 {
  margin-top: 50px !important; }

.u-mb50 {
  margin-bottom: 50px !important; }

.u-ml50 {
  margin-left: 50px !important; }

.u-mr50 {
  margin-right: 50px !important; }

.u-mt60 {
  margin-top: 60px !important; }

.u-mb60 {
  margin-bottom: 60px !important; }

.u-ml60 {
  margin-left: 60px !important; }

.u-mr60 {
  margin-right: 60px !important; }

.u-mt70 {
  margin-top: 70px !important; }

.u-mb70 {
  margin-bottom: 70px !important; }

.u-ml70 {
  margin-left: 70px !important; }

.u-mr70 {
  margin-right: 70px !important; }

.u-mt80 {
  margin-top: 80px !important; }

.u-mb80 {
  margin-bottom: 80px !important; }

.u-ml80 {
  margin-left: 80px !important; }

.u-mr80 {
  margin-right: 80px !important; }

.u-mt90 {
  margin-top: 90px !important; }

.u-mb90 {
  margin-bottom: 90px !important; }

.u-ml90 {
  margin-left: 90px !important; }

.u-mr90 {
  margin-right: 90px !important; }

.u-mt100 {
  margin-top: 100px !important; }

.u-mb100 {
  margin-bottom: 100px !important; }

.u-ml100 {
  margin-left: 100px !important; }

.u-mr100 {
  margin-right: 100px !important; }

.u-ml1em {
  margin-left: 1em !important; }

.u-mr1em {
  margin-right: 1em !important; }

.u-ml05em {
  margin-left: .5em !important; }

.u-mr05em {
  margin-right: .5em !important; }

.u-p10 {
  padding: 10px !important; }

.u-pt10 {
  padding-top: 10px !important; }

.u-pb10 {
  padding-bottom: 10px !important; }

.u-pl10 {
  padding-left: 10px !important; }

.u-pr10 {
  padding-right: 10px !important; }

.u-p20 {
  padding: 20px !important; }

.u-pt20 {
  padding-top: 20px !important; }

.u-pb20 {
  padding-bottom: 20px !important; }

.u-pl20 {
  padding-left: 20px !important; }

.u-pr20 {
  padding-right: 20px !important; }

.u-p30 {
  padding: 30px !important; }

.u-pt30 {
  padding-top: 30px !important; }

.u-pb30 {
  padding-bottom: 30px !important; }

.u-pl30 {
  padding-left: 30px !important; }

.u-pr30 {
  padding-right: 30px !important; }

.u-p40 {
  padding: 40px !important; }

.u-pt40 {
  padding-top: 40px !important; }

.u-pb40 {
  padding-bottom: 40px !important; }

.u-pl40 {
  padding-left: 40px !important; }

.u-pr40 {
  padding-right: 40px !important; }

.u-p50 {
  padding: 50px !important; }

.u-pt50 {
  padding-top: 50px !important; }

.u-pb50 {
  padding-bottom: 50px !important; }

.u-pl50 {
  padding-left: 50px !important; }

.u-pr50 {
  padding-right: 50px !important; }

.u-p60 {
  padding: 60px !important; }

.u-pt60 {
  padding-top: 60px !important; }

.u-pb60 {
  padding-bottom: 60px !important; }

.u-pl60 {
  padding-left: 60px !important; }

.u-pr60 {
  padding-right: 60px !important; }

.u-p70 {
  padding: 70px !important; }

.u-pt70 {
  padding-top: 70px !important; }

.u-pb70 {
  padding-bottom: 70px !important; }

.u-pl70 {
  padding-left: 70px !important; }

.u-pr70 {
  padding-right: 70px !important; }

.u-p80 {
  padding: 80px !important; }

.u-pt80 {
  padding-top: 80px !important; }

.u-pb80 {
  padding-bottom: 80px !important; }

.u-pl80 {
  padding-left: 80px !important; }

.u-pr80 {
  padding-right: 80px !important; }

.u-p90 {
  padding: 90px !important; }

.u-pt90 {
  padding-top: 90px !important; }

.u-pb90 {
  padding-bottom: 90px !important; }

.u-pl90 {
  padding-left: 90px !important; }

.u-pr90 {
  padding-right: 90px !important; }

.u-p100 {
  padding: 100px !important; }

.u-pt100 {
  padding-top: 100px !important; }

.u-pb100 {
  padding-bottom: 100px !important; }

.u-pl100 {
  padding-left: 100px !important; }

.u-pr100 {
  padding-right: 100px !important; }

.u-pl1em {
  padding-left: 1em !important; }

.u-pr1em {
  padding-right: 1em !important; }

.u-pl05em {
  padding-left: .5em !important; }

.u-pr05em {
  padding-right: .5em !important; }

/*doc
---
title: Quick margin
name: 01-quick-margin
category: 16.Helper classes-03.Spacing classes
---

- `u-mt-(zero|tiny|smaller|small|normal|large|larger|huge)`: margin top spacing
- `u-mr-(zero|tiny|smaller|small|normal|large|larger|huge)`: margin right spacing
- `u-mb-(zero|tiny|smaller|small|normal|large|larger|huge)`: margin bottom spacing
- `u-ml-(zero|tiny|smaller|small|normal|large|larger|huge)`: margin left spacing

```slim_example
.u-mb-zero.bordered-box 0px margin bottom spacing
.u-mb-tiny.bordered-box 4px margin bottom spacing
.u-mb-smaller.bordered-box 8px margin bottom spacing
.u-mb-small.bordered-box 12px margin bottom spacing
.u-mb-normal.bordered-box 16px margin bottom spacing
.u-mb-large.bordered-box 24px margin bottom spacing
.u-mb-larger.bordered-box 36px margin bottom spacing
.u-mb-huge.bordered-box 48px margin bottom spacing
```
*/
/*doc
---
title: Quick spacing on EM
name: 02-quick-spacing-on-em
category: 16.Helper classes-03.Spacing classes
---
```slim_example
.u-pl1em.bordered-box 1em left padding
.u-pr1em.bordered-box 1em right padding
.u-pl05em.bordered-box 0.5em left padding
.u-pr05em.bordered-box 0.5em right padding
.u-ml1em.bordered-box 1em left margin
.u-mr1em.bordered-box 1em right margin
.u-ml05em.bordered-box 0.5em left margin
.u-mr05em.bordered-box 0.5em right margin
```
*/
/*doc
---
title: Quick padding (discarded)
name: 08-quick-padding--discarded
category: 16.Helper classes-03.Spacing classes
---

<table class="c-table--celled u-mb30">
<tbody>
  <tr>
    <td><code>.u-p10</code> ... <code>.u-p100</code></td>
    <td>To add padding for every sides. Use <code>.u-p10</code> to add <code>padding: 10px</code>.<br> Class name will be support upto 100 by 10.</td>
  </tr>
  <tr>
    <td><code>.u-pt10</code> ... <code>.u-pt100</code></td>
    <td>To add top padding. Use <code>.u-pt10</code> to add <code>padding-top: 10px</code>.<br> Class name will be support upto 100 by 10.</td>
  </tr>
  <tr>
    <td><code>.u-pr10</code> ... <code>.u-pr100</code></td>
    <td>To add right padding. Use <code>.u-pr10</code> to add <code>padding-right: 10px</code>.<br> Class name will be support upto 100 by 10.</td>
  </tr>
  <tr>
    <td><code>.u-pb10</code> ... <code>.u-pb100</code></td>
    <td>To add bottom padding. Use <code>.u-pb10</code> to add <code>padding-bottom: 10px</code>.<br> Class name will be support upto 100 by 10.</td>
  </tr>
  <tr>
    <td><code>.u-pl10</code> ... <code>.u-pl100</code></td>
    <td>To add left padding. Use <code>.u-pl10</code> to add <code>padding-left: 10px</code>.<br> Class name will be support upto 100 by 10.</td>
  </tr>
  <tr>
    <td><code>.u-pl1em</code></td>
    <td>To add 1em left padding.</td>
  </tr>
  <tr>
    <td><code>.u-pr1em</code></td>
    <td>To add 1em right padding.</td>
  </tr>
  <tr>
    <td><code>.u-pl05em</code></td>
    <td>To add 0.5em left padding.</td>
  </tr>
  <tr>
    <td><code>.u-pr05em</code></td>
    <td>To add 0.5em right padding.</td>
  </tr>
  </tbody>
</table>

```slim_example
.u-p50.bordered-box 50px paddings
.u-pt50.bordered-box 50px top padding
.u-pr50.bordered-box 50px right padding
.u-pb50.bordered-box 50px bottom padding
.u-pl50.bordered-box 50px left padding
```
*/
/*doc
---
title: Quick margin (discarded)
name: 09-quick-margin--discarded
category: 16.Helper classes-03.Spacing classes
---

<table class="c-table--celled u-mb30">
<tbody>
  <tr>
    <td><code>.u-mt10</code> ... <code>.u-mt100</code></td>
    <td>To add top margin. Use <code>.u-mt10</code> to add <code>margin-top: 10px</code>.<br> Class name will be support upto 100 by 10.</td>
  </tr>
  <tr>
    <td><code>.u-mr10</code> ... <code>.u-mr100</code></td>
    <td>To add right margin. Use <code>.u-mr10</code> to add <code>margin-right: 10px</code>.<br> Class name will be support upto 100 by 10.</td>
  </tr>
  <tr>
    <td><code>.u-mb10</code> ... <code>.u-mb100</code></td>
    <td>To add bottom margin. Use <code>.u-mb10</code> to add <code>margin-bottom: 10px</code>.<br> Class name will be support upto 100 by 10.</td>
  </tr>
  <tr>
    <td><code>.u-ml10</code> ... <code>.u-ml100</code></td>
    <td>To add left margin. Use <code>.u-ml10</code> to add <code>margin-left: 10px</code>.<br> Class name will be support upto 100 by 10.</td>
  </tr>
  <tr>
    <td><code>.u-ml1em</code></td>
    <td>To add 1em left margin.</td>
  </tr>
  <tr>
    <td><code>.u-mr1em</code></td>
    <td>To add 1em right margin.</td>
  </tr>
  <tr>
    <td><code>.u-ml05em</code></td>
    <td>To add 0.5em left margin.</td>
  </tr>
  <tr>
    <td><code>.u-mr05em</code></td>
    <td>To add 0.5em right margin.</td>
  </tr>
  </tbody>
</table>

```slim_example
sass:
  .bordered-box
    border: 1px solid #e2e6ef

.u-mt50.bordered-box 50px top margin
.u-ml50.bordered-box 50px left margin
.u-mb50.bordered-box 50px bottom margin
.u-mr50.bordered-box 50px right margin
```
*/
/*doc
// ---
// title: Visibility classes
// name: 01-visibility-classes
// category: 01.Structure-03.Visibility
// ---
//
// wip
*/
.u-show-for-xs-only,
.u-show-for-sm-only,
.u-show-for-md-only,
.u-show-for-lg-only {
  display: none !important; }

@media (max-width: 767px) {
  .u-show-for-xs-only {
    display: inherit !important; } }

@media (min-width: 768px) and (max-width: 991px) {
  .u-show-for-sm-only {
    display: inherit !important; } }

@media (min-width: 992px) and (max-width: 1199px) {
  .u-show-for-md-only {
    display: inherit !important; } }

@media (min-width: 1200px) {
  .u-show-for-lg-only {
    display: inherit !important; } }

.u-animated {
  animation-duration: 1s;
  animation-fill-mode: both; }

@keyframes u-fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.u-fade-in {
  animation-name: u-fade-in; }

.sg-header {
  background-color: #4c566c;
  color: #fff;
  height: 60px; }
  .sg-header ul li {
    line-height: 60px;
    margin-right: 0; }
    .sg-header ul li a {
      text-align: center;
      color: #8293b9;
      font-size: 11px;
      text-transform: uppercase;
      font-weight: bold;
      display: block;
      padding-right: 1em;
      padding-left: 1em;
      transition: color, background-color .1s ease-in; }
      .sg-header ul li a:hover {
        color: #fff;
        text-decoration: none;
        background-color: #707889; }
    .sg-header ul li.sg-header__logo a {
      padding-right: 0;
      padding-left: 0;
      height: 60px; }
    .sg-header ul li.active a {
      color: #fff; }

#main {
  position: relative;
  min-height: 1px;
  padding: 40px 40px 40px 20px; }

#sidebar {
  position: relative;
  min-height: 1px;
  padding: 40px; }

.sg-sidenav {
  list-style: none; }
  .sg-sidenav li.active a {
    background-color: #5fa9ff;
    color: #fff;
    pointer-events: none; }
  .sg-sidenav li.divider {
    border-top: 1px solid #e2e6ef;
    margin: 20px 0; }
  .sg-sidenav li.sg-group-heading {
    color: #4c566c;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 5px 10px; }
  .sg-sidenav li a {
    display: block;
    margin-bottom: 5px;
    padding: 3px 10px;
    border-radius: 4px;
    color: #707889;
    font-size: 13px; }
    .sg-sidenav li a:hover {
      background-color: #f7f9fd;
      text-decoration: none; }
  .sg-sidenav ul {
    list-style: none;
    font-size: 12px;
    padding-left: 1em;
    margin-bottom: 10px; }

.sg-code-format-swithcher {
  position: fixed;
  bottom: 0;
  right: 20px; }
  .sg-code-format-swithcher a {
    display: inline-block;
    width: 60px;
    text-align: center;
    color: #626e8b;
    padding: 3px 12px;
    font-size: 12px;
    background-color: #f7f9fd;
    border-top: 1px solid #b4bed5;
    border-right: 1px solid #b4bed5; }
    .sg-code-format-swithcher a:hover {
      background-color: #dbe0eb;
      text-decoration: none; }
    .sg-code-format-swithcher a.active {
      background-color: #dbe0eb;
      text-decoration: none;
      cursor: default; }
    .sg-code-format-swithcher a:first-child {
      border-top-left-radius: 4px;
      border-left: 1px solid #b4bed5; }
    .sg-code-format-swithcher a:last-child {
      border-top-right-radius: 4px; }

.sg-example-output {
  position: relative;
  padding: 50px 20px 20px;
  border-color: #dbe0eb;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px 3px 0 0; }
  @media (min-width: 992px) {
    .sg-example-output {
      padding-right: 40px;
      padding-left: 40px; } }
  .sg-example-output::before {
    font-size: 12px;
    position: absolute;
    top: 10px;
    left: 10px;
    content: 'example';
    text-transform: uppercase;
    color: #ccc; }
  .sg-example-output p:last-child {
    margin-bottom: 0; }
  .sg-example-output .c-row.display {
    font-size: 11px;
    margin-bottom: 10px;
    line-height: 2rem;
    border: 1px solid #dbe0eb; }
    .sg-example-output .c-row.display [class^="c-col--"]:nth-child(odd) {
      background-color: #f2f6fa; }
    .sg-example-output .c-row.display [class^="c-col--"]:nth-child(even) {
      background-color: #ebedef; }

.sg-highlighted-code {
  position: relative;
  padding: 20px 20px 20px 20px;
  overflow: auto;
  line-height: 1.6;
  border-radius: 3px;
  border-width: 1px;
  border-color: #dbe0eb;
  border-style: solid;
  background-color: #f2f6fa; }
  .sg-highlighted-code::after {
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 3px;
    width: 50px;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 1px;
    border-radius: 3px;
    font-size: 12px;
    background-color: #dbe0eb;
    color: #394151; }

.sg-example-code > .sg-highlighted-code {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-width: 0; }
  .sg-example-code > .sg-highlighted-code.html {
    display: none; }

.sg-highlighted-code.slim {
  padding-top: 45px; }
  .sg-highlighted-code.slim::after {
    content: "Slim"; }

.sg-highlighted-code.html {
  padding-top: 45px; }
  .sg-highlighted-code.html::after {
    content: "HTML"; }

.sg-highlighted-code.js {
  padding-top: 45px; }
  .sg-highlighted-code.js::after {
    content: "JavaScript"; }

.sg-highlighted-code pre {
  background-color: transparent;
  color: inherit; }

.sg-page-heading {
  padding-bottom: 30px;
  border-bottom: 1px solid #dbe0eb; }

.sg-icon-example {
  margin-bottom: 20px; }

.sg-icon-name {
  margin-left: .5em; }

.sg-cheatsheet {
  font-size: 60px; }

.sg-breakpoint {
  position: fixed;
  bottom: 0;
  left: 20px;
  display: inline-block;
  min-width: 5em;
  background-color: #88e18e;
  color: #fff;
  padding: 3px 6px;
  font-size: 11px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px; }

.sg-inline-color-block {
  display: inline-block;
  margin-right: 10px;
  width: 13px;
  height: 13px;
  border: 1px solid #555459;
  border-radius: 3px; }

h1.styleguide {
  font-size: 26px;
  font-size: 1.85714rem;
  line-height: 1.92308;
  margin-top: 40px;
  margin-bottom: 25px; }

.mb10 {
  margin-bottom: 10px; }

.mb20 {
  margin-bottom: 20px; }

.mb30 {
  margin-bottom: 30px; }

.mb40, .sg-example-code, .sg-highlighted-code {
  margin-bottom: 40px; }

.stuck {
  position: fixed;
  top: 0;
  overflow: scroll;
  height: 100%; }

.anchorjs-link {
  color: #b4bed5;
  text-decoration: none !important;
  line-height: inherit !important; }