Elements

- -

- - - - -

- - - -

- -

Typography

Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.

Headings

H1 Heading 40px

H2 Heading 32px

H3 Heading 28px

H4 Heading 24px

H5 Heading 20px

H6 Heading 16px

- - -

<h1>H1 Heading</h1>
-<h1>H1 Heading <small class="label">40px</small></h1>
-<span class="h1">H1 Heading</span>
-

- -

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

- - -

<p>Lorem ipsum dolor sit amet, ...</p>
-<p>...</p>
-

- -

Semantic text elements

- I18N - <abbr> -

- Bold - <strong> <b> -

- Citation - <cite> -

- Hello World! - <code> -

- ~~Deleted~~ - <del> -

- Emphasis - <em> -

- Italic - <i> -

- Inserted - <ins> -

- Ctrl + S - <kbd> -

- Highlighted - <mark> -

- - 漢 kan - 字 ji - - <ruby> -

- ~~Strikethrough~~ - <s> -

- Sample - <samp> -

- Text _Subscripted - <sub> -

- Text ^{Superscripted} - <sup> -

- 20:00 - <time> -

- Underline - <u> -

- x = y + 2 - <var> -

- -

Optimized for east asian fonts

你好, こんにちは, 안녕하세요

Chinese (Simplified)

革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。

Chinese (Tranditional)

山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」

Japanese

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌に風の前の塵に同じ。

Korean

나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.

Use the lang attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.

- - -

<p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
-<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
-<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
-

- -

And you can use the cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.

祇園精舎の鐘の声、諸行無常の響きあり。

- - -

<p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
-<p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
-

- -

Fonts

Spectre sets the most common and best font-family for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.

- - -

<!-- Western typography targeted -->
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-<!-- Monospace typography targeted -->
-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
-
-<!-- Chinese (lang="zh-Hans" and lang="zh-Hant") targeted -->
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
-<!-- Japanese (lang="ja") targeted -->
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
-<!-- Korean (lang="ko") targeted -->
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
-

- -

Blockquote

-
The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
- - Bill Gates -

- - -

<blockquote>
-  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
-  <cite>- Bill Gates</cite>
-</blockquote>
-

- -

Lists

list item 1
list item 2 -
- list item 2.1
- list item 2.2
- list item 2.3
-

list item 1
list item 2 -
1. list item 2.1
2. list item 2.2
3. list item 2.3
-
list item 3

description list term 1: description list description 1
description list term 2: description list description 2
description list term 3: description list description 3

- - -

<!-- unordered list -->
-<ul>
-  <li>list item 1</li>
-  <li>list item 2
-    <ul>
-      <li>list item 2.1</li>
-      <li>list item 2.2</li>
-      <li>list item 2.3</li>
-    </ul>
-  </li>
-  <li>list item 3</li>
-</ul>
-
-<!-- description list -->
-<dl>
-  <dt>description list term</dt>
-  <dd>description list description</dd>
-</dl>
-

- -

Tables

Tables include default styles for tables and data sets.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name	Genre	Release date
The Shawshank Redemption	Crime, Drama	14 October 1994
The Godfather	Crime, Drama	24 March 1972
Schindler's List	Biography, Drama, History	4 February 1994
Se7en	Crime, Drama, Mystery	22 September 1995

Add the table class to any <table> element. The class will add padding, border and emphasized table header. Use the table-striped class to <table> to add zebra striped style. For hoverable table rows, you can add the table-hover class to enable hover style.

Use the active class to make <tr> element highlighted.

- - -

<table class="table table-striped table-hover">
-  <thead>
-    <tr>
-      <th>name</th>
-      <th>genre</th>
-      <th>release date</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr class="active">
-      <td>The Shawshank Redemption</td>
-      <td>Crime, Drama</td>
-      <td>14 October 1994</td>
-    </tr>
-  </tbody>
-</table>
-

- -

If you need the tables with horizontal scroll, add the table-scroll class to the <table> element.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name	Genre	Director	Rating	Duration	Release date
The Shawshank Redemption	Crime, Drama	Frank Darabont	R	2h 22min	14 October 1994
The Godfather	Crime, Drama	Francis Ford Coppola	R	2h 55min	24 March 1972
Schindler's List	Biography, Drama, History	Steven Spielberg	R	3h 15min	4 February 1994
Se7en	Crime, Drama, Mystery	David Fincher	R	2h 7min	22 September 1995

- - -

<table class="table table-scroll">
-  <!-- table content -->
-</table>
-

- -

Buttons

Buttons include simple button styles for actions in different types and sizes.

- - - -

- -

Add the btn class to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons.

- - -

<button class="btn">default button</button>
-<button class="btn btn-primary">primary button</button>
-<button class="btn btn-link">link button</button>
-

- -

Button colors

- - -

Add the btn-success or btn-error class for success (green) or error (red) button color. If you need more button colors, please use button mixins to create your own button color variants.

- - -

<button class="btn btn-success">success button</button>
-<button class="btn btn-error">error button</button>
-

- -

Button sizes

- - -

Add the btn-sm or btn-lg class for small or large button size. Also, you can add the btn-block class for a full-width button.

- - -

<button class="btn btn-lg">large button</button>
-<button class="btn btn-sm">small button</button>
-
-<button class="btn btn-block">block button</button>
-
-<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
-<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
-<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
-

- -

Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).

- -

- - - -

- - -

<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
-<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
-

- -

Button states

- -

Add the active class for active button state style.

- -

- - - -

- - -

<!-- buttons with active state -->
-<button class="btn active">active button</button>
-

- -

Add the disabled class or the disabled attribute for disabled button state style.

- -

- - - -

- - -

<!-- buttons with disabled state -->
-<button class="btn disabled" tabindex="-1">disabled button</button>
-<button class="btn" disabled tabindex="-1">disabled button</button>
-

- -

A button with the loading class can show loading indicator.

- -

- - - -

- - -

<!-- a button with loading state -->
-<button class="btn loading">button</button>
-

- -

Button groups

- - - -

If you want to use buttons as a group, add the btn-group class to the container. You can add the btn-group-block class for a full-width button group.

- - -

<div class="btn-group btn-group-block">
-  <button class="btn">first button</button>
-  <button class="btn">second button</button>
-  <button class="btn">third button</button>
-</div>
-

- -

Forms

Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

- Name - -

- Email - -

- -

<!-- form input control -->
-<div class="form-group">
-  <label class="form-label" for="input-example-1">Name</label>
-  <input class="form-input" type="text" id="input-example-1" placeholder="Name">
-</div>
-

- -

- Message - -

- -

<!-- form textarea control -->
-<div class="form-group">
-  <label class="form-label" for="input-example-3">Message</label>
-  <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
-</div>
-

- -

- +

+ + Elements +

+ +

- -

<!-- form select control -->
-<div class="form-group">
-  <select class="form-select">
-    <option>Choose an option</option>
-    <option>Slack</option>
-    <option>Skype</option>
-    <option>Hipchat</option>
-  </select>
-</div>
-

- -

- - -

<!-- form radio control -->
-<div class="form-group">
-  <label class="form-label">Gender</label>
-  <label class="form-radio">
-    <input type="radio" name="gender" checked>
-    <i class="form-icon"></i> Male
-  </label>
-  <label class="form-radio">
-    <input type="radio" name="gender">
-    <i class="form-icon"></i> Female
-  </label>
-</div>
-

- -

- - - Send me emails with news and tips -

- - - Send me emails with news and tips - +

+ + Components +

+ +

- -

<!-- form switch control -->
-<div class="form-group">
-  <label class="form-switch">
-    <input type="checkbox">
-    <i class="form-icon"></i> Send me emails with news and tips
-  </label>
-</div>
-

- -

- - - Remember me - +

+ + Utilities +

+ +

- - - Remember me - +

+ + Experimentals +

+ +

- -

<!-- form checkbox control -->
-<div class="form-group">
-  <label class="form-checkbox">
-    <input type="checkbox">
-    <i class="form-icon"></i> Remember me
-  </label>
-</div>
-

- -

You can use :indeterminate pseudo class for indeterminate state of checkboxes.

- -

Horizontal forms

If you want to have a horizontal form, add the form-horizontal class to the <form> container. And add the col-[1-12] and col-xs/sm/lg/xl-[1-12] class to the child elements for responsive form row layout.

- Name -

- -

Typography

Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.

Headings

H1 Heading 40px

- Email -

- -

H2 Heading 32px

- Gender -

- - - Male - - - - Female - -

H3 Heading 28px

- Source -

- -

H4 Heading 24px

- - - Send me emails with news and tips - -

H5 Heading 20px

- Message -

- -

H6 Heading 16px

- - - Remember me - -

- -

- - -

<form class="form-horizontal">
-  <div class="form-group">
-    <div class="col-3 col-sm-12">
-      <label class="form-label" for="input-example-1">Name</label>
-    </div>
-    <div class="col-9 col-sm-12">
-      <input class="form-input" type="text" id="input-example-1" placeholder="Name">
-    </div>
-  </div>
-  <!-- form structure -->
-</form>
-

- -

Form sizes

For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.

- Label -

- -

- Label -

- -

You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.

- -

Form icons

Spectre Form components has Spectre Icons support.

Add a wrapper with the has-icon-left/has-icon-right class to <input> element. And add the icon with form-icon class next to the <input>.

- -

- - -

<!-- form input with Spectre icon -->
-<div class="has-icon-left">
-  <input type="text" class="form-input" placeholder="...">
-  <i class="form-icon icon icon-check"></i>
-</div>
-

- -

You can use the loading class for loading or posting state.

- -

- - -

- -

<!-- form input with loading icon -->
-<div class="has-icon-right">
-  <input type="text" class="form-input" placeholder="...">
-  <i class="form-icon loading"></i>
-</div>
-

- -

Input types

- Email -

- -

<h1>H1 Heading</h1>
+<h1>H1 Heading <small class="label">40px</small></h1>
+<span class="h1">H1 Heading</span>
+

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

<p>Lorem ipsum dolor sit amet, ...</p>
+<p>...</p>
+

Semantic text elements

I18Nabbr

Boldstrongb

+ Citationcite

- URL -

- -

Hello World!code

+ ~~Deleted~~del

- Search -

- -

Emphasisem

Italici

Insertedins

Ctrl + Skbd

+ Highlightedmark

- Tel -

- -

+ 漢 + kan字 + ji + ruby

- Password -

- -

+ ~~Strikethrough~~s

- Number -

- -

Samplesamp

Text _Subscriptedsub

Text ^{Superscripted}sup

+ 20:00time

- Date -

- -

+ Underlineu

- Color -

- -

+ x = + y + 2var

- File -

- -

Input groups

- - -

- slack.com/ - - -

- - -

- slack.com/ - -

- - - - - -

- - -

- slack.com/ - - -

- -

If you want to attach text and button along with an input, add the input-group class to the input container. And add the input-group-addon class to the text element and input-group-btn to the button element.

- - -

<!-- normal input group -->
-<div class="input-group">
-  <span class="input-group-addon">...</span>
-  <input type="text" class="form-input" placeholder="...">
-</div>
-
-<!-- large input group -->
-<div class="input-group">
-  <span class="input-group-addon addon-lg">...</span>
-  <input type="text" class="form-input input-lg" placeholder="...">
-</div>
-
-<!-- normal input group with button -->
-<div class="input-group">
-  <span class="input-group-addon">...</span>
-  <input type="text" class="form-input" placeholder="...">
-  <button class="btn btn-primary input-group-btn">Submit</button>
-</div>
-

- -

Form validation styles

To use form validation styles, add is-success or is-error class to the controls or add has-success or has-error class to parent elements. You can use the form-input-hint class to provide form validation success and error messages.

- Input -

- Name - -

The name is valid.

- Password - -

Passwords must have at least 8 characters.

- Email - -

The Email address is unavailable.

- Select -

- -

The option is invalid.

- -

The option is available.

Optimized for East Asian fonts

你好, こんにちは, 안녕하세요

Chinese (Simplified)

Chinese (Tranditional)

Japanese

Korean

Use the lang attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.

<p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
+<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
+<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
+

And you can use the cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.

+ 祇園 + 精舎の鐘の声、諸行無常の響きあり。 +

<p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
+<p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
+

Fonts

Spectre sets the most common and best font-family for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.

/* Western typography targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+/* Monospace typography targeted */
+font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
+
+/* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+/* Japanese (lang="ja") targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
+/* Korean (lang="ko") targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
+

Blockquote

+
The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
+ - Bill Gates +

<blockquote>
+  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
+  <cite>- Bill Gates</cite>
+</blockquote>
+

Lists

list item 1
list item 2 +
- list item 2.1
- list item 2.2
- list item 2.3
+
list item 3

- Checkbox, Radio and Switch (Error state only) -

- - - I'm not a robot. - +

list item 1
list item 2 +
1. list item 2.1
2. list item 2.2
3. list item 2.3
+
list item 3

- - - Male - - - - Female - +

description list term 1: description list description 1
description list term 2: description list description 2
description list term 3: description list description 3

- - - Send me emails with news and tips - +

<!-- unordered list -->
+<ul>
+  <li>list item 1</li>
+  <li>list item 2
+    <ul>
+      <li>list item 2.1</li>
+      <li>list item 2.2</li>
+      <li>list item 2.3</li>
+    </ul>
+  </li>
+  <li>list item 3</li>
+</ul>
+
+<!-- description list -->
+<dl>
+  <dt>description list term</dt>
+  <dd>description list description</dd>
+</dl>

Tables

Tables include default styles for tables and data sets.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name	Genre	Release date
The Shawshank Redemption	Crime, Drama	14 October 1994
The Godfather	Crime, Drama	24 March 1972
Schindler's List	Biography, Drama, History	4 February 1994
Se7en	Crime, Drama, Mystery	22 September 1995

- - -

<form>
-  <!-- form validation class: has-success -->
-  <div class="form-group has-success">
-    <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input" type="text" id="input-example-1" placeholder="...">
-    <p class="form-input-hint">The name is invalid.</p>
-  </div>
-
-  <!-- form validation class: is-success -->
-  <div class="form-group">
-    <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
-    <p class="form-input-hint">The name is invalid.</p>
-  </div>
-
-  <!-- form validation example for checkbox, radio and switch -->
-  <div class="form-group">
-    <label class="form-checkbox is-error">
-      <input type="checkbox">
-      <i class="form-icon"></i> Remember me
-    </label>
-  </div>
-</form>
-

- -

Form disabled styles

Add the disabled attribute to the element or <fieldset> for a disabled form components style.

- Name - -

- Gender - - - Male - - - - Female - -

- -

- - - Send me emails with news and tips - -

- Message - -

- - - Remember me - -

- -

Icons experimental

Icons are single-element, responsive and pure CSS icons. You can include spectre-icons.css located in the dist folder to your web <head> to have these CSS icons.

- -

icon-arrow-up

- -

icon-arrow-right

- -

icon-arrow-down

- -

icon-arrow-left

- -

icon-upward

- -

icon-forward

- -

icon-downward

- -

icon-back

- -

icon-caret

- -

icon-menu

- -

icon-apps

- -

icon-more-horiz

- -

icon-more-vert

Action icons

- -

icon-resize-horiz

- -

icon-resize-vert

- -

icon-plus

- -

icon-minus

- -

icon-cross

- -

icon-check

- -

icon-stop

- -

icon-shutdown

- -

icon-refresh

- -

icon-search

- -

icon-flag

- -

icon-bookmark

- -

icon-edit

- -

icon-delete

- -

icon-share

- -

icon-download

- -

icon-upload

Object icons

- -

icon-mail

- -

icon-people

- -

icon-message

- -

icon-photo

- -

icon-time

- -

icon-location

- -

icon-link

- -

icon-emoji

- - -

<i class="icon icon-menu"></i>
-

- -

Icon sizes

Use icon-2x, icon-3x and icon-4x classes to increase icon sizes. You can set font-size to have different icon sizes.

icon-2x (32px)

icon-3x (48px)

icon-4x (64px)

- - -

<i class="icon icon-2x icon-mail"></i>
-

- -

Labels

Labels are formatted text tags for highlighted, informative information.

- default label - primary label - secondary label - success label - warning label - error label -

Add the label class to <span> or <small> elements. You can add another class label-primary, label-secondary, label-success, label-warning and label-error for colored labels.

- default label - primary label - secondary label - success label - warning label - error label -

Add the label-rounded class to have rounded labels.

- - -

<span class="label">default label</span>
-<span class="label label-primary">primary label</span>
-

- -

Codes

Codes are inline and multiline code snippets.

For inline code, you can use the element <code>. For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it. The data-lang attribute is rendered as the language name in the top right.

- -

<!-- code snippets -->
-<button class="btn">
-  Submit
-</button>
-

- - -

<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
-  Submit
-&lt;<span class="tag">/button</span>&gt;
-</code></pre>
-

- -

Media

Media includes responsive images, figures and video classes.

Images

Add the img-responsive class to <img> elements. The images will scale with the parent sizes.

- -

Add the img-fit-contain or img-fit-cover class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container). This feature can replace the background image trick. Microsoft Edge support is shipped.

macOS Yosemite Wallpaper — img-fit-contain

- -

<img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
-<img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
-<img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
-

- -

You can use the element <figure> for an image with a caption. Add the figure class to <figure> element. The images with the img-responsive class will be responsive. And the included class figure-caption will provide basic style for caption. Also, you can use text-left, text-center and text-right for caption alignment.

- -

<figure class="figure">
-  <img src="img/osx-yosemite-2.jpg" class="img-responsive ..." alt="...">
-  <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
-</figure>
-

- -

Video

For responsive video, add a container with the video-responsive class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.

Use the active class to make element highlighted.

<table class="table table-striped table-hover">
+  <thead>
+    <tr>
+      <th>name</th>
+      <th>genre</th>
+      <th>release date</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr class="active">
+      <td>The Shawshank Redemption</td>
+      <td>Crime, Drama</td>
+      <td>14 October 1994</td>
+    </tr>
+  </tbody>
+</table>

Buttons

Forms

Icons

Labels

Codes

Media

- -

For responsive video elements, you can add the video-responsive class directly to the video.

- - -

<div class="video-responsive video-responsive-4-3">
-  <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
-</div>
-
-<video class="video-responsive" src="...">...</video>
-

- - -

- - - - + + + \ No newline at end of file diff --git a/docs/getting-started.html b/docs/getting-started.html index 97c85bc..0f3f1ff 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -189,7 +189,6 @@

Then create your project-name.scss file in the root folder. You can use project-name.scss to define your variables.

Compile the Sass file to CSS to get the custom version of Spectre.

// Example of project-name.scss
 // Define variables to override default ones
 $primary-color: #2e5bec;
@@ -199,7 +198,6 @@
 @import "node_modules/spectre.css/src/spectre";

Alternatively, you can create custom _variables.scss and import it to project-name.scss.

// Example of project-name.scss
 @import "variables";
 
@@ -208,7 +206,6 @@
 @import "node_modules/spectre.css/src/forms";

Folder structure

spectre/
 ├── dist/                           // Build folder
 │   ├── spectre-exp.css
@@ -338,7 +335,6 @@
               @mixin button-variant($color: $primary-color);
               @mixin button-outline-variant($color: $primary-color);
             
-            
             <!-- filled button with the success color -->
 .btn-success {
   @include button-variant($success-color);
@@ -355,11 +351,9 @@
             Spectre uses 4px as the unit size. Sizes of components are based on the unit size.
             #Variables - Custom prefix
             There is also a way to add custom prefix to all CSS classes. You can use gulp-css-prefix plugin and add a new Gulp task to enable it.
-            
             npm install gulp-css-prefix
 
             To add spectre- to all classes, you can add the Gulp task to gulpfile.js file.
-            
             var cssPrefix = require('gulp-css-prefix');
 
 gulp.task('prefix', function() {
diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/codes.pug b/docs/src/contents/codes.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/custom.pug b/docs/src/contents/custom.pug
index ce787f7..a21357e 100644
--- a/docs/src/contents/custom.pug
+++ b/docs/src/contents/custom.pug
@@ -64,7 +64,7 @@ ul
     |  to define your variables.
   li Compile the Sass file to CSS to get the custom version of Spectre.
 
-// importing
+//- importing
 pre.code(data-lang='Sass')
   code
     :highlight(lang="scss")
@@ -83,7 +83,7 @@ p
   code project-name.scss
   | .
 
-// custom variables
+//- custom variables
 pre.code(data-lang='Sass')
   code
     :highlight(lang="scss")
@@ -96,7 +96,7 @@ pre.code(data-lang='Sass')
 
 +docs-subheading('folders', 'Folder structure')
 
-// folder structure
+//- folder structure
 pre.code
   code
     :highlight
@@ -221,7 +221,7 @@ ul
     code $color
     | : $primary-color);
 
-// button mixins
+//- button mixins
 pre.code(data-lang='Sass')
   code
     :highlight(lang="scss")
@@ -256,7 +256,7 @@ p
   a(href='https://www.npmjs.com/package/gulp-css-prefix', target='_blank') gulp-css-prefix
   |  plugin and add a new Gulp task to enable it.
 
-// custom prefix
+//- custom prefix
 pre.code(data-lang='Bash')
   code
     :highlight(lang="Bash")
@@ -269,7 +269,7 @@ p
   code gulpfile.js
   |  file.
 
-// custom prefix
+//- custom prefix
 pre.code
   code
     :highlight(lang="JavaScript")
diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/grid.pug b/docs/src/contents/grid.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/icons.pug b/docs/src/contents/icons.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/labels.pug b/docs/src/contents/labels.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/media.pug b/docs/src/contents/media.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/navbar.pug b/docs/src/contents/navbar.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/responsive.pug b/docs/src/contents/responsive.pug
new file mode 100644
index 0000000..e69de29
diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug
new file mode 100644
index 0000000..a66aa34
--- /dev/null
+++ b/docs/src/contents/tables.pug
@@ -0,0 +1,64 @@
+p Tables include default styles for tables and data sets.
+
+.columns
+  .column.col-12
+    table.table.table-striped
+      thead
+        tr
+          th Name
+          th Genre
+          th Release date
+      tbody
+        tr
+          td The Shawshank Redemption
+          td Crime, Drama
+          td 14 October 1994
+        tr
+          td The Godfather
+          td Crime, Drama
+          td 24 March 1972
+        tr
+          td Schindler's List
+          td Biography, Drama, History
+          td 4 February 1994
+        tr
+          td Se7en
+          td Crime, Drama, Mystery
+          td 22 September 1995
+
+p
+  | Add the 
+  code table
+  |  class to any 
+  = ''
+  |  element. The class will add padding, border and emphasized table header. Use the 
+  code table-striped
+  |  class to 
+  = ''
+  |  to add zebra striped style. For hoverable table rows, you can add the 
+  code table-hover
+  |  class to enable hover style.
+p
+  | Use the 
+  code active
+  |  class to make  element highlighted.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          
+            
+            
+            
+          
+        
+        
+          
+            
+            
+            
+          
+        
+      name genre release date
The Shawshank Redemption Crime, Drama 14 October 1994
\ No newline at end of file
diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug
new file mode 100644
index 0000000..47b980a
--- /dev/null
+++ b/docs/src/contents/typography.pug
@@ -0,0 +1,267 @@
+p
+  | Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
+
++docs-subheading('typography-headings', 'Headings')
+
+.columns
+  .column.col-12
+    h1
+      | H1 Heading 
+      small.label 40px
+  .column.col-12
+    h2
+      | H2 Heading 
+      small.label 32px
+  .column.col-12
+    h3
+      | H3 Heading 
+      small.label 28px
+  .column.col-12
+    h4
+      | H4 Heading 
+      small.label 24px
+  .column.col-12
+    h5
+      | H5 Heading 
+      small.label 20px
+  .column.col-12
+    h6
+      | H6 Heading 
+      small.label 16px
+
+//- headings
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      H1 Heading
+      H1 Heading 40px
+      H1 Heading
+
++docs-subheading('typography-paragraphs', 'Paragraphs')
+
+p
+  | Lorem ipsum dolor sit amet, consectetur 
+  a(href='#typography') adipiscing elit. Praesent risus leo, dictum in vehicula sit amet
+  | , feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+p
+  | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+
+//- paragraphs
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      Lorem ipsum dolor sit amet, ...
+      ...
+
++docs-subheading('typography-semantic-text', 'Semantic text elements')
+
+.columns
+  .column.col-6.col-xs-12
+    abbr(title='Internationalization') I18N
+    code.ml-2 abbr
+  .column.col-6.col-xs-12
+    strong Bold
+    code.ml-2 strong
+    code.ml-2 b
+  .column.col-6.col-xs-12
+    cite Citation
+    code.ml-2 cite
+  .column.col-6.col-xs-12
+    code Hello World!
+    code.ml-2 code
+  .column.col-6.col-xs-12
+    del Deleted
+    code.ml-2 del
+  .column.col-6.col-xs-12
+    em Emphasis
+    code.ml-2 em
+  .column.col-6.col-xs-12
+    i Italic
+    code.ml-2 i
+  .column.col-6.col-xs-12
+    ins Inserted
+    code.ml-2 ins
+  .column.col-6.col-xs-12
+    kbd Ctrl + S
+    code.ml-2 kbd
+  .column.col-6.col-xs-12
+    mark Highlighted
+    code.ml-2 mark
+  .column.col-6.col-xs-12
+    ruby
+      | 漢 
+      rt kan
+      | 字 
+      rt ji
+    code.ml-2 ruby
+  .column.col-6.col-xs-12
+    s Strikethrough
+    code.ml-2 s
+  .column.col-6.col-xs-12
+    samp Sample
+    code.ml-2 samp
+  .column.col-6.col-xs-12
+    | Text 
+    sub Subscripted
+    code.ml-2 sub
+  .column.col-6.col-xs-12
+    | Text 
+    sup Superscripted
+    code.ml-2 sup
+  .column.col-6.col-xs-12
+    time 20:00
+    code.ml-2 time
+  .column.col-6.col-xs-12
+    u Underline
+    code.ml-2 u
+  .column.col-6.col-xs-12
+    var x
+    |  = 
+    var y
+    |  + 2
+    code.ml-2 var
+
++docs-subheading('typography-east-asian', 'Optimized for East Asian fonts')
+
+p.h5
+  small(lang='zh-Hans') 你好
+  | , 
+  small(lang='ja') こんにちは
+  | , 
+  small(lang='ko') 안녕하세요
+
+p.h6 Chinese (Simplified)
+p(lang='zh-Hans') 革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
+p.h6 Chinese (Tranditional)
+p(lang='zh-Hant')
+  | 山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
+p.h6 Japanese
+p(lang='ja')
+  | 祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌に風の前の塵に同じ。
+p.h6 Korean
+p(lang='ko')
+  | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
+p
+  | Use the 
+  code lang
+  |  attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      革命不是请客吃饭，不是做文章……
+      祇園精舎の鐘の声、諸行無常の響きあり……
+      나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……
+
+p
+  | And you can use the 
+  code cjk
+  |  class or the 
+  code lang
+  |  attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
+
+p(lang='ja')
+  u 祇園
+  u 精舎
+  | の鐘の声、諸行無常の響きあり。
+p(lang='ja')
+  del 祇園
+  del 精舎
+  | の鐘の声、諸行無常の響きあり。
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      祇園精舎の鐘の声、諸行無常の響きあり。……
+      祇園精舎の鐘の声、諸行無常の響きあり。……
+
++docs-subheading('typography-fonts', 'Fonts')
+
+p
+  | Spectre sets the most common and best 
+  code font-family
+  |  for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.
+
+pre.code
+  code
+    :highlight(lang="scss")
+      /* Western typography targeted */
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+      /* Monospace typography targeted */
+      font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
+
+      /* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+      /* Japanese (lang="ja") targeted */
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
+      /* Korean (lang="ko") targeted */
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
+
++docs-subheading('typography-blockquote', 'Blockquote')
+
+blockquote
+  p
+    | The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
+  cite - Bill Gates
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. 
+        - Bill Gates
+      
+
++docs-subheading('typography-lists', 'Lists')
+
+.columns
+  .column.col-4.col-xs-12
+    ul.list
+      li list item 1
+      li
+        | list item 2
+        ul
+          li list item 2.1
+          li list item 2.2
+          li list item 2.3
+      li list item 3
+  .column.col-4.col-xs-12
+    ol.list
+      li list item 1
+      li
+        | list item 2
+        ol
+          li list item 2.1
+          li list item 2.2
+          li list item 2.3
+      li list item 3
+  .column.col-4.col-xs-12
+    dl.list
+      dt description list term 1
+      dd description list description 1
+      dt description list term 2
+      dd description list description 2
+      dt description list term 3
+      dd description list description 3
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        list item 1
+        list item 2
+          
+            list item 2.1
+            list item 2.2
+            list item 2.3
+          
+        
+        list item 3
+      
+
+      
+      
+        description list term
+        description list description
+      
\ No newline at end of file
diff --git a/docs/src/elements.pug b/docs/src/elements.pug
new file mode 100644
index 0000000..d7cf0f0
--- /dev/null
+++ b/docs/src/elements.pug
@@ -0,0 +1,41 @@
+extends _docs-layout.pug
+
+block variables
+  - var title = 'Elements - Spectre.css CSS Framework'
+  - var description = ''
+  - var current = 'elements'
+
+block docs-content
+  //- Typography
+  +docs-heading('typography', 'Typography')
+    include contents/typography.pug
+    
+  //- Tables
+  +docs-heading('tables', 'Tables')
+    include contents/tables.pug
+
+  //- Buttons
+  +docs-heading('buttons', 'Buttons')
+    include contents/buttons.pug
+
+  //- Forms
+  +docs-heading('forms', 'Forms')
+    include contents/forms.pug
+  
+  //- Icons
+  +docs-heading('icons', 'Icons')
+    include contents/icons.pug
+
+  //- Labels
+  +docs-heading('labels', 'Labels')
+    include contents/labels.pug
+
+  //- Codes
+  +docs-heading('codes', 'Codes')
+    include contents/codes.pug
+  
+  //- Media
+  +docs-heading('media', 'Media')
+    include contents/media.pug
+
+    
\ No newline at end of file
diff --git a/docs/src/getting-started.pug b/docs/src/getting-started.pug
index 19e1db0..d5e8ac3 100644
--- a/docs/src/getting-started.pug
+++ b/docs/src/getting-started.pug
@@ -6,11 +6,11 @@ block variables
   - var current = 'getting-started'
 
 block docs-content
-  //- introduction
+  //- Introduction
   +docs-heading('introduction', 'Introduction')
     include contents/introduction.pug
     
-  //- installation
+  //- Installation
   +docs-heading('installation', 'Installation')
     include contents/installation.pug
 
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index 342ca8c..e17f832 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -195,6 +195,10 @@
     font-size: $font-size-sm;
   }
 
+  .columns {
+    margin-bottom: 1rem;
+  }
+
   .column {
     padding: $layout-spacing;
   }
@@ -463,6 +467,10 @@
     .off-canvas-toggle {
       z-index: $zindex-3;
     }
+
+    .off-canvas-content {
+      width: 100%;
+    }
   }
 
   .docs-sidebar {
@@ -489,11 +497,9 @@
   }
 
   .docs-content {
-    &.off-canvas-content {
-      min-width: auto;
-      padding: 0 1.5rem;
-      width: 100%;
-    }
+    min-width: auto;
+    padding: 0 1.5rem;
+    width: 100%;
 
     .s-title,
     .s-subtitle {
@@ -568,9 +574,7 @@
   }
 
   .docs-content {
-    &.off-canvas-content {
-      padding: 0 .5rem;
-    }
+    padding: 0 .5rem;
 
     .docs-block {
       padding: $unit-2 $unit-h;
-- 
cgit v1.3.1-23-gd82d


From c59e31abc96642d4e54e56e3aa8167806a35f35e Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Sun, 3 Jun 2018 17:37:29 +0800
Subject: Update buttons and forms docs to Pug templates

---
 docs/elements.html               |  941 ++++++++++-
 docs/getting-started.html        |   36 +-
 docs/src/contents/buttons.pug    |  179 ++
 docs/src/contents/forms.pug      |  626 +++++++
 docs/src/contents/tables.pug     |   19 +-
 docs/src/contents/typography.pug |   22 +-
 package-lock.json                | 3349 --------------------------------------
 package.json                     |    8 +-
 8 files changed, 1725 insertions(+), 3455 deletions(-)
 delete mode 100644 package-lock.json

(limited to 'docs/elements.html')

diff --git a/docs/elements.html b/docs/elements.html
index cf1c334..f971860 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -153,15 +153,17 @@
                 H6 Heading 16px


-            <h1>H1 Heading</h1>
-<h1>H1 Heading <small class="label">40px</small></h1>
-<span class="h1">H1 Heading</span>
+            <h1>H1 Heading</h1>
+<h1>H1 Heading <small class="label">40px</small></h1>
+<span class="h1">H1 Heading</span>
 
             #Paragraphs
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+            
             Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
-            <p>Lorem ipsum dolor sit amet, ...</p>
-<p>...</p>
+            <p>Lorem ipsum dolor sit amet, ...</p>
+<p>...</p>
 
             #Semantic text elements
             
@@ -205,7 +207,7 @@


             #Optimized for East Asian fonts
-            你好, こんにちは, 안녕하세요
+            你好, こんにちは,안녕하세요
             Chinese (Simplified)
             革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
             Chinese (Tranditional)
@@ -215,9 +217,9 @@
             Korean
             나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
             Use the lang attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.
-            <p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
-<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
-<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
+            <p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
+<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
+<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
 
             And you can use the cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
             
@@ -228,32 +230,34 @@
               祇園
               精舎の鐘の声、諸行無常の響きあり。
             
-            <p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
-<p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
+            <p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
+<p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
 
             #Fonts
-            Spectre sets the most common and best font-family for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.
+            Spectre sets the most common and best font-family for each OS with fallback support in old systems.
+              There are also fonts targeted East Asian typography.
+            
             /* Western typography targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
 /* Monospace typography targeted */
-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
+font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
 
 /* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
 /* Japanese (lang="ja") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
 /* Korean (lang="ko") targeted */
-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
 
             #Blockquote
             
               The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
               - Bill Gates
             
-            <blockquote>
-  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
-  <cite>- Bill Gates</cite>
-</blockquote>
+            <blockquote>
+  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
+  <cite>- Bill Gates</cite>
+</blockquote>
 
             #Lists
             
@@ -295,23 +299,23 @@


             <!-- unordered list -->
-<ul>
-  <li>list item 1</li>
-  <li>list item 2
-    <ul>
-      <li>list item 2.1</li>
-      <li>list item 2.2</li>
-      <li>list item 2.3</li>
-    </ul>
-  </li>
-  <li>list item 3</li>
-</ul>
+<ul>
+  <li>list item 1</li>
+  <li>list item 2
+    <ul>
+      <li>list item 2.1</li>
+      <li>list item 2.2</li>
+      <li>list item 2.3</li>
+    </ul>
+  </li>
+  <li>list item 3</li>
+</ul>
 
 <!-- description list -->
-<dl>
-  <dt>description list term</dt>
-  <dd>description list description</dd>
-</dl>
+<dl>
+  <dt>description list term</dt>
+  <dd>description list description</dd>
+</dl>


           
             #Tables
@@ -351,31 +355,858 @@


-            Add the table class to any <table> element. The class will add padding, border and emphasized table header. Use the table-striped class to <table> to add zebra striped style. For hoverable table rows, you can add the table-hover class to enable hover style.
+            
Add the table class to any <table> element. 
+              The class will add padding, border and emphasized table header. 
+              Use the table-striped class to <table> to add zebra striped style.
+              For hoverable table rows, you can add the table-hover class to enable hover style.
             
-            Use the active class to make  element highlighted.
-            <table class="table table-striped table-hover">
-  <thead>
-    <tr>
-      <th>name</th>
-      <th>genre</th>
-      <th>release date</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr class="active">
-      <td>The Shawshank Redemption</td>
-      <td>Crime, Drama</td>
-      <td>14 October 1994</td>
-    </tr>
-  </tbody>
-</table>
+            Use the active class to make <tr> element highlighted.
+            <table class="table table-striped table-hover">
+  <thead>
+    <tr>
+      <th>name</th>
+      <th>genre</th>
+      <th>release date</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr class="active">
+      <td>The Shawshank Redemption</td>
+      <td>Crime, Drama</td>
+      <td>14 October 1994</td>
+    </tr>
+  </tbody>
+</table>


           
             #Buttons
+            Buttons include simple button styles for actions in different types and sizes.
+            
+              
+                
+                
+                
+              
+            
+            Add the btn class to <a>, <input> or <button> elements for a default button. 
+              There are classes btn-primary and btn-link for predefined primary and link buttons.
+            
+            <button class="btn">default button</button>
+<button class="btn btn-primary">primary button</button>
+<button class="btn btn-link">link button</button>
+
+            #Button colors
+            
+              
+                
+                
+              
+            
+            Add the btn-success or btn-error class for success (green) or error (red) button color.
+              If you need more button colors, please use button mixins to create your own button color variants.
+            
+            <button class="btn btn-success">success button</button>
+<button class="btn btn-error">error button</button>
+
+            #Button sizes
+            
+              
+                
+                
+              
+              
+                
+                
+              
+              
+                
+                
+              
+            
+            Add the btn-sm or btn-lg class for small or large button size. 
+              Also, you can add the btn-block class for a full-width button.
+            
+            <button class="btn btn-lg">large button</button>
+<button class="btn btn-sm">small button</button>
+
+<button class="btn btn-block">block button</button>
+
+<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
+<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
+<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
+
+            Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).
+            
+              
+                
+                
+                
+              
+              
+                
+                
+                
+              
+            
+            <button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
+<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
+
+            #Button states
+            Add the active class for active button state style.
+            
+              
+                
+                
+                
+              
+            
+            Add the disabled class or the disabled attribute for disabled button state style.
+            
+              
+                
+                
+                
+              
+            
+            <!-- buttons with disabled state -->
+<button class="btn disabled" tabindex="-1">disabled button</button>
+<button class="btn" disabled tabindex="-1">disabled button</button>
+
+            A button with the loading class can show loading indicator.
+            
+              
+                
+                
+                
+              
+            
+            <!-- buttons with loading state -->
+<button class="btn loading">button</button>
+<button class="btn btn-primary loading">primary button</button>
+
+            #Button groups
+            
+              
+                
+                  
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                  
+                
+              
+            
+            
+              
+                
+                  
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                  
+                
+              
+            
+            If you want to use buttons as a group, add the btn-group class to the container.
+              You can add the btn-group-block class for a full-width button group.
+            
+            <div class="btn-group btn-group-block">
+  <button class="btn">first button</button>
+  <button class="btn">second button</button>
+  <button class="btn">third button</button>
+</div> 
           
           
             #Forms
+            Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
+            
+              
+                
+                  Name
+                  
+                
+                
+                  Email
+                  
+                
+              
+            
+            <!-- form input control -->
+<div class="form-group">
+  <label class="form-label" for="input-example-1">Name</label>
+  <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+</div>
+
+            
+              
+                
+                  Message
+                  
+                
+              
+            
+            <!-- form textarea control -->
+<div class="form-group">
+  <label class="form-label" for="input-example-3">Message</label>
+  <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
+</div>
+
+            
+              
+                
+                  
+                
+                
+                  
+                
+              
+            
+            <!-- form select control -->
+<div class="form-group">
+  <select class="form-select">
+    <option>Choose an option</option>
+    <option>Slack</option>
+    <option>Skype</option>
+    <option>Hipchat</option>
+  </select>
+</div>
+
+            
+              
+                
+                  
+                    Gender
+                    
+                       Male
+                    
+                    
+                       Female
+                    
+                  
+                
+              
+            
+            <!-- form radio control -->
+<div class="form-group">
+  <label class="form-label">Gender</label>
+  <label class="form-radio">
+    <input type="radio" name="gender" checked>
+    <i class="form-icon"></i> Male
+  </label>
+  <label class="form-radio">
+    <input type="radio" name="gender">
+    <i class="form-icon"></i> Female
+  </label>
+</div>
+
+            
+              
+                
+                  
+                     Send me emails with news and tips
+                  
+                
+                
+                  
+                     Send me emails with news and tips
+                  
+                
+              
+            
+            <!-- form switch control -->
+<div class="form-group">
+  <label class="form-switch">
+    <input type="checkbox">
+    <i class="form-icon"></i> Send me emails with news and tips
+  </label>
+</div>
+
+            
+              
+                
+                  
+                     Remember me
+                  
+                
+                
+                  
+                     Remember me
+                  
+                
+              
+            
+            <!-- form checkbox control -->
+<div class="form-group">
+  <label class="form-checkbox">
+    <input type="checkbox">
+    <i class="form-icon"></i> Remember me
+  </label>
+</div>
+
+            You can use :indeterminate pseudo class for indeterminate state of checkboxes.
+            #Horizontal forms
+            If you want to have a horizontal form, add the form-horizontal class to the <form> container.
+              And add the col-<1-12> and col-xs/sm/lg/xl-<1-12> class to the child elements for responsive form row layout.
+            
+            
+              
+                
+                  
+                    
+                      Name
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Email
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Gender
+                    
+                    
+                      
+                         Male
+                      
+                      
+                         Female
+                      
+                    
+                  
+                  
+                    
+                      Source
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      
+                         Send me emails with news and tips
+                      
+                    
+                  
+                  
+                    
+                      Message
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      
+                         Remember me
+                      
+                    
+                  
+                
+              
+            
+            <form class="form-horizontal">
+  <div class="form-group">
+    <div class="col-3 col-sm-12">
+      <label class="form-label" for="input-example-1">Name</label>
+    </div>
+    <div class="col-9 col-sm-12">
+      <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+    </div>
+  </div>
+  <!-- form structure -->
+</form>
+
+            #Form sizes
+            For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.
+            
+              
+                Label
+              
+              
+                
+              
+              
+                
+              
+            
+            
+              
+                Label
+              
+              
+                
+              
+              
+                
+              
+            
+            You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.
+            #Form icons
+            Spectre Form components has Spectre Icons support.
+            Add a wrapper with the has-icon-left/has-icon-right class to <input> element.
+              And add the icon with form-icon class next to the <input>.
+            
+            
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+            
+            
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+            
+            <!-- form input with Spectre icon -->
+<div class="has-icon-left">
+  <input type="text" class="form-input" placeholder="...">
+  <i class="form-icon icon icon-check"></i>
+</div>
+
+            You can use the loading class for loading or posting state.
+            
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+            
+            <!-- form input with loading icon -->
+<div class="has-icon-right">
+  <input type="text" class="form-input" placeholder="...">
+  <i class="form-icon loading"></i>
+</div>
+
+            #Input types
+            
+              
+                
+                  
+                    
+                      Email
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      URL
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Search
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Tel
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Password
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Number
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Date
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Color
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      File
+                    
+                    
+                      
+                    
+                  
+                
+              
+            
+            #Input groups
+            
+              
+                
+                  
+                  
+                
+              
+              
+                slack.com/
+                  
+                  
+                
+              
+            
+            
+              
+                
+                  
+                  
+                
+              
+              
+                slack.com/
+                  
+                  
+                
+              
+            
+            
+              
+                
+                  
+                    
+                  
+                  
+                
+              
+              
+                
+                  
+                    
+                  
+                  
+                
+              
+            
+            
+              
+                
+                  
+                  
+                
+              
+              
+                slack.com/
+                  
+                  
+                
+              
+            
+            If you want to attach text and button along with an input, add the input-group class to the input container.
+              And add the input-group-addon class to the text element and input-group-btn to the button element.
+            
+            <!-- normal input group -->
+<div class="input-group">
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="...">
+</div>
+
+<!-- large input group -->
+<div class="input-group">
+  <span class="input-group-addon addon-lg">...</span>
+  <input type="text" class="form-input input-lg" placeholder="...">
+</div>
+
+<!-- normal input group with button -->
+<div class="input-group">
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="...">
+  <button class="btn btn-primary input-group-btn">Submit</button>
+</div>
+
+            #Form validation styles
+            To use form validation styles, you can either add is-success or is-error class to the controls or add has-success or has-error class to parent elements.
+              Use the form-input-hint class to provide form validation success and error messages.
+            
+            
+              
+                
+                  Input
+                  
+                    Name
+                    
+                    The name is valid.
+                  
+                  
+                    Password
+                    
+                    Passwords must have at least 8 characters.
+                  
+                  
+                    Email
+                    
+                    The Email address is unavailable.
+                  
+                
+                
+                  Select
+                  
+                    
+                    The option is invalid.
+                  
+                  
+                    
+                    The option is available.
+                  
+                
+                
+                  Checkbox, Radio and Switch (Error state only)
+                  
+                    
+                       I'm not a robot.
+                    
+                  
+                  
+                    
+                       Male
+                    
+                    
+                       Female
+                    
+                  
+                  
+                    
+                       Send me emails with news and tips
+                    
+                  
+                
+              
+            
+            <form>
+  <!-- form validation class: has-success -->
+  <div class="form-group has-success">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input" type="text" id="input-example-1" placeholder="...">
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
+
+  <!-- form validation class: is-success -->
+  <div class="form-group">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
+
+  <!-- form validation example for checkbox, radio and switch -->
+  <div class="form-group">
+    <label class="form-checkbox is-error">
+      <input type="checkbox">
+      <i class="form-icon"></i> Remember me
+    </label>
+  </div>
+</form>
+
+            #Form disabled styles
+            
+               Add the disabled attribute to the element or <fieldset> for a disabled form components style.
+            
+              
+                
+                  
+                    
+                      Name
+                      
+                    
+                    
+                      Gender
+                      
+                         Male
+                      
+                      
+                         Female
+                      
+                    
+                    
+                      
+                    
+                    
+                      
+                         Send me emails with news and tips
+                      
+                    
+                    
+                      Message
+                      
+                    
+                    
+                      
+                         Remember me
+                      
+                    
+                  
+                
+              
+            
+            <form action="#forms">
+  <fieldset disabled>
+    <div class="form-group">
+      <label class="form-label" for="input-example-19">Name</label>
+      <input class="form-input" type="text" id="input-example-19" placeholder="Name">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Gender</label>
+      <label class="form-radio">
+        <input type="radio" name="gender" disabled>
+        <i class="form-icon"></i> Male
+      </label>
+      <label class="form-radio">
+        <input type="radio" name="gender" disabled>
+        <i class="form-icon"></i> Female
+      </label>
+    </div>
+    <div class="form-group">
+      <select class="form-select" disabled>
+        <option>Choose an option</option>
+        <option>Slack</option>
+        <option>Skype</option>
+        <option>Hipchat</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-switch">
+        <input type="checkbox" disabled>
+        <i class="form-icon"></i> Send me emails with news and tips
+      </label>
+    </div>
+    <div class="form-group">
+      <label class="form-label" for="input-example-20">Message</label>
+      <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea>
+    </div>
+    <div class="form-group">
+      <label class="form-checkbox">
+        <input type="checkbox" disabled>
+        <i class="form-icon"></i> Remember me
+      </label>
+    </div>
+  </fieldset>
           
           
             #Icons
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 0f3f1ff..4d9f7ee 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -142,15 +142,15 @@
             Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):
             Download Spectre.css
             Include spectre.css located in /dist in your website or Web app . Also, you can add spectre-icons.css and spectre-exp.css accordingly.
-            <link rel="stylesheet" href="spectre.min.css">
-<link rel="stylesheet" href="spectre-exp.min.css">
-<link rel="stylesheet" href="spectre-icons.min.css">
+            <link rel="stylesheet" href="spectre.min.css">
+<link rel="stylesheet" href="spectre-exp.min.css">
+<link rel="stylesheet" href="spectre-icons.min.css">
 
             #Install from CDN
             Alternatively, you can use the unpkg or cdnjs CDN to load compiled Spectre.css.
-            <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
-<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
-<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
+            <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
+<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
+<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
 
             #Install with NPM
             npm install spectre.css --save
@@ -191,19 +191,19 @@
             
             // Example of project-name.scss
 // Define variables to override default ones
-$primary-color: #2e5bec;
-$dark-color: #3e396b;
+$primary-color: #2e5bec;
+$dark-color: #3e396b;
 
 // Import full Spectre source code
-@import "node_modules/spectre.css/src/spectre";
+@import "node_modules/spectre.css/src/spectre";
 
             Alternatively, you can create custom _variables.scss and import it to project-name.scss.
             // Example of project-name.scss
-@import "variables";
+@import "variables";
 
 // Import only the needed components
-@import "node_modules/spectre.css/src/buttons";
-@import "node_modules/spectre.css/src/forms";
+@import "node_modules/spectre.css/src/buttons";
+@import "node_modules/spectre.css/src/forms";
 
             #Folder structure
             spectre/
@@ -335,14 +335,14 @@
               @mixin button-variant($color: $primary-color);
               @mixin button-outline-variant($color: $primary-color);
             
-            <!-- filled button with the success color -->
-.btn-success {
-  @include button-variant($success-color);
+            <!-- filled button with the success color -->
+.btn-success {
+  @include button-variant($success-color);
 }
 
-<!-- outlined button with the success color -->
-.btn-outline-success {
-  @include button-outline-variant($success-color);
+<!-- outlined button with the success color -->
+.btn-outline-success {
+  @include button-outline-variant($success-color);
 }
 
             #Variables - Sizes
diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug
index e69de29..8f8dbb1 100644
--- a/docs/src/contents/buttons.pug
+++ b/docs/src/contents/buttons.pug
@@ -0,0 +1,179 @@
+p Buttons include simple button styles for actions in different types and sizes.
+
+.columns
+  .column.col-12
+    button.btn default button
+    button.btn.btn-primary primary button
+    button.btn.btn-link link button
+
+p
+  | Add the #[code btn] class to #{''}, #{''} or #{'
+      
+      
+
++docs-subheading('buttons-colors', 'Button colors')
+
+.columns
+  .column.col-12
+    button.btn.btn-success success button
+    button.btn.btn-error error button
+
+p
+  | Add the #[code btn-success] or #[code btn-error] class for success (green) or error (red) button color.
+  | If you need more button colors, please use 
+  a(href="getting-started.html#variables-buttons") button mixins
+  |  to create your own button color variants.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+
++docs-subheading('buttons-sizes', 'Button sizes')
+
+.columns
+  .column.col-12
+    button.btn.btn-primary.btn-lg
+      | large 
+      i.icon.icon-arrow-down
+    button.btn.btn-primary.btn-lg large button
+  .column.col-12
+    button.btn.btn-primary
+      | normal 
+      i.icon.icon-arrow-down
+    button.btn.btn-primary normal button
+  .column.col-12
+    button.btn.btn-primary.btn-sm
+      | small 
+      i.icon.icon-arrow-down
+    button.btn.btn-primary.btn-sm small button
+
+
+p
+  | Add the #[code btn-sm] or #[code btn-lg] class for small or large button size. 
+  | Also, you can add the #[code btn-block] class for a full-width button.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+
+      
+
+      
+      
+      
+
+p
+  | Please note that you could use the #[code btn-action] class for a square button, or add another #[code circle] class for a round button, which is often used as a Float Action Button (FAB).
+
+.columns
+  .column.col-xs-12
+    button.btn.btn-action.btn-primary.btn-lg
+      i.icon.icon-menu
+    button.btn.btn-action.btn-primary
+      i.icon.icon-menu
+    button.btn.btn-action.btn-primary.btn-sm
+      i.icon.icon-menu
+  .column.col-xs-12
+    button.btn.btn-action.btn-primary.btn-lg.circle
+      i.icon.icon-arrow-up
+    button.btn.btn-action.btn-primary.circle
+      i.icon.icon-arrow-up
+    button.btn.btn-action.btn-primary.btn-sm.circle
+      i.icon.icon-arrow-up
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+
++docs-subheading('buttons-states', 'Button states')
+
+p
+  | Add the #[code active] class for active button state style.
+
+.columns
+  .column.col-12
+    button.btn.active default active
+    button.btn.btn-primary.active primary active
+    button.btn.btn-link.active link active
+
+p
+  | Add the #[code disabled] class or the #[code disabled] attribute for disabled button state style.
+
+.columns
+  .column.col-12
+    button.btn.disabled(tabindex="-1") default disabled
+    button.btn.btn-primary(disabled="" tabindex="-1") primary disabled
+    button.btn.btn-link(disabled="" tabindex="-1") link disabled
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+      
+
+p
+  | A button with the #[code loading] class can show loading indicator.
+
+.columns
+  .column.col-12
+    button.btn.loading default button
+    button.btn.btn-primary.loading primary button
+    button.btn.btn-link.loading link button
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+      
+
++docs-subheading('buttons-groups', 'Button groups')
+
+.columns
+  .column.col-md-12
+    .btn-group
+      button.btn first button
+      button.btn second button
+      button.btn third button
+  .column.col-md-12
+    .btn-group.btn-group-block
+      button.btn.btn-primary first button
+      button.btn.btn-primary second button
+      button.btn.btn-primary third button
+.columns
+  .column.col-md-12
+    .btn-group
+      button.btn.btn-sm.active first button
+      button.btn.btn-sm second button
+      button.btn.btn-sm third button
+  .column.col-md-12
+    .btn-group.btn-group-block
+      button.btn.btn-primary.btn-sm.active first button
+      button.btn.btn-primary.btn-sm second button
+      button.btn.btn-primary.btn-sm third button
+    
+p
+  | If you want to use buttons as a group, add the #[code btn-group] class to the container.
+  | You can add the #[code btn-group-block] class for a full-width button group.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+        
+        
+       
\ No newline at end of file
diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
index e69de29..bcfde1a 100644
--- a/docs/src/contents/forms.pug
+++ b/docs/src/contents/forms.pug
@@ -0,0 +1,626 @@
+p
+  | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
+
+.columns
+  .column.col-6.col-xs-12
+    .form-group
+      label.form-label(for="input-example-1") Name
+      input#input-example-1.form-input(type="text" placeholder="Name")
+    .form-group
+      label.form-label(for="input-example-2") Email
+      input#input-example-2.form-input(type="email" placeholder="Email")
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        Name
+        
+      
+
+.columns
+  .column.col-6.col-xs-12
+    .form-group
+      label.form-label(for="input-example-3") Message
+      textarea#input-example-3.form-input(placeholder="Textarea" rows="3")
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        Message
+        
+      
+
+.columns
+  .column.col-6.col-xs-12
+    .form-group
+      select.form-select
+        option Choose an option
+        option Slack
+        option Skype
+        option Hipchat
+    .form-group
+      select.form-select(multiple="")
+        option Choose an option
+        option Slack
+        option Skype
+        option Hipchat
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        
+      
+
+.columns
+  .column.col-6.col-xs-12
+    form
+      .form-group
+        label.form-label Gender
+        label.form-radio
+          input(type="radio" name="gender" checked="")
+          i.form-icon
+          |  Male
+        label.form-radio
+          input(type="radio" name="gender")
+          i.form-icon
+          |  Female
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        Gender
+        
+          
+           Male
+        
+        
+          
+           Female
+        
+      
+
+.columns
+  .column.col-6.col-xs-12
+    .form-group
+      label.form-switch
+        input(type="checkbox")
+        i.form-icon
+        |  Send me emails with news and tips
+    .form-group
+      label.form-switch
+        input(type="checkbox" checked="")
+        i.form-icon
+        |  Send me emails with news and tips
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        
+          
+           Send me emails with news and tips
+        
+      
+
+.columns
+  .column.col-6.col-xs-12
+    .form-group
+      label.form-checkbox
+        input(type="checkbox")
+        i.form-icon
+        |  Remember me
+    .form-group
+      label.form-checkbox
+        input(type="checkbox" checked="")
+        i.form-icon
+        |  Remember me
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        
+          
+           Remember me
+        
+      
+
+p
+  | You can use #[code :indeterminate] pseudo class for indeterminate state of checkboxes.
+
++docs-subheading('forms-horizontal', 'Horizontal forms')
+
+p
+  | If you want to have a horizontal form, add the #[code form-horizontal] class to the #{''} container.
+  | And add the #[code col-<1-12>] and #[code col-xs/sm/lg/xl-<1-12>] class to the child elements for responsive form row layout.
+
+.columns
+  .column.col-9.col-sm-12
+    form.form-horizontal(action="#forms")
+      .form-group
+        .col-3.col-sm-12
+          label.form-label(for="input-example-4") Name
+        .col-9.col-sm-12
+          input#input-example-4.form-input(type="text" placeholder="Name")
+      .form-group
+        .col-3.col-sm-12
+          label.form-label(for="input-example-5") Email
+        .col-9.col-sm-12
+          input#input-example-5.form-input(type="email" placeholder="Email")
+      .form-group
+        .col-3.col-sm-12
+          label.form-label Gender
+        .col-9.col-sm-12
+          label.form-radio
+            input(type="radio" name="gender")
+            i.form-icon
+            |  Male
+          label.form-radio
+            input(type="radio" name="gender" checked="")
+            i.form-icon
+            |  Female
+      .form-group
+        .col-3.col-sm-12
+          label.form-label Source
+        .col-9.col-sm-12
+          select.form-select(multiple="")
+            option Slack
+            option Skype
+            option Hipchat
+      .form-group
+        .col-9.col-sm-12.col-ml-auto
+          label.form-switch
+            input(type="checkbox")
+            i.form-icon
+            |  Send me emails with news and tips
+      .form-group
+        .col-3.col-sm-12
+          label.form-label(for="input-example-6") Message
+        .col-9.col-sm-12
+          textarea#input-example-6.form-input(placeholder="Textarea" rows="3")
+      .form-group
+        .col-9.col-sm-12.col-ml-auto
+          label.form-checkbox
+            input(type="checkbox")
+            i.form-icon
+            |  Remember me
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          
+            Name
+          
+          
+            
+          
+        
+        
+      
+
++docs-subheading('forms-sizes', 'Form sizes')
+
+p
+  | For smaller or larger input and select controls, you could add the #[code input-sm]/#[code input-lg], #[code select-sm]/#[code select-lg] and #[code label-sm]/#[code label-lg] classes to the elements.
+
+.columns
+  .column.col-4.col-xs-12
+    label.form-label.label-sm Label
+  .column.col-4.col-xs-12
+    input.form-input.input-sm(type="text" placeholder="Name")
+  .column.col-4.col-xs-12
+    select.form-select.select-sm
+      option Choose an option
+      option Slack
+      option Skype
+      option Hipchat
+.columns
+  .column.col-4.col-xs-12
+    label.form-label.label-lg Label
+  .column.col-4.col-xs-12
+    input.form-input.input-lg(type="text" placeholder="Name")
+  .column.col-4.col-xs-12
+    select.form-select.select-lg
+      option Choose an option
+      option Slack
+      option Skype
+      option Hipchat
+
+p
+  | You can add the #[code input-sm]/#[code input-lg] classes to the input-checkbox, input-radio and input-switch to have different sizes.
+
++docs-subheading('forms-icons', 'Form icons')
+
+p
+  | Spectre Form components has 
+  a(href="#icons") Spectre Icons
+  |  support.
+p
+  | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{''} element.
+  | And add the icon with #[code form-icon] class next to the #{''}.
+
+.columns
+  .column.col-4.col-xs-12
+    .has-icon-left
+      input.form-input.input-sm(type="text" placeholder="Name")
+      i.form-icon.icon.icon-arrow-right
+  .column.col-4.col-xs-12
+    .has-icon-left.tooltip(data-tooltip="Lorem ipsum dolor sit amet")
+      input.form-input(type="text" placeholder="Name")
+      i.form-icon.icon.icon-arrow-right
+  .column.col-4.col-xs-12
+    .has-icon-left
+      input.form-input.input-lg(type="text" placeholder="Name")
+      i.form-icon.icon.icon-arrow-right
+.columns
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input.input-sm(type="text" placeholder="Name")
+      i.form-icon.icon.icon-check
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input(type="text" placeholder="Name")
+      i.form-icon.icon.icon-check
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input.input-lg(type="text" placeholder="Name")
+      i.form-icon.icon.icon-check
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        
+        
+      
+
+p
+  | You can use the #[code loading] class for loading or posting state.
+
+.columns
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input.input-sm(type="text" placeholder="Name")
+      i.form-icon.loading
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input(type="text" placeholder="Name")
+      i.form-icon.loading
+  .column.col-4.col-xs-12
+    .has-icon-right
+      input.form-input.input-lg(type="text" placeholder="Name")
+      i.form-icon.loading
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        
+        
+      
+
++docs-subheading('forms-input', 'Input types')
+
+.columns
+  .column.col-9.col-sm-12
+    form.form-horizontal(action="#forms")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-8") Email
+        .col-9
+          input#input-example-8.form-input(type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-9") URL
+        .col-9
+          input#input-example-9.form-input(type="url" placeholder="URL" value="https://github.com/picturepan2/spectre")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-10") Search
+        .col-9
+          input#input-example-10.form-input(type="search" placeholder="Search")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-11") Tel
+        .col-9
+          input#input-example-11.form-input(type="tel" placeholder="Tel" value="1-(888)-888-8888")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-12") Password
+        .col-9
+          input#input-example-12.form-input(type="password" placeholder="Password" value="123456789")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-13") Number
+        .col-9
+          input#input-example-13.form-input(type="number" placeholder="00" value="66")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-14") Date
+        .col-9
+          input#input-example-14.form-input(type="date" value="2016-12-31")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-15") Color
+        .col-9
+          input#input-example-15.form-input(type="color" value="#5755d9")
+      .form-group
+        .col-3
+          label.form-label(for="input-example-16") File
+        .col-9
+          input#input-example-16.form-input(type="file")
+
++docs-subheading('forms-input-groups', 'Input groups')
+
+.columns
+  .column.col-xs-12
+    .input-group
+      input.form-input.input-sm(type="text" placeholder="username")
+      select.form-select.select-sm
+        option Slack
+        option Skype
+        option Hipchat
+  .column.col-xs-12
+    .input-group
+      span.input-group-addon.addon-sm slack.com/
+      input.form-input.input-sm(type="text" placeholder="site name")
+      button.btn.btn-primary.input-group-btn.btn-sm Submit
+.columns
+  .column.col-xs-12
+    .input-group
+      input.form-input(type="text" placeholder="username")
+      select.form-select
+        option Slack
+        option Skype
+        option Hipchat
+  .column.col-xs-12
+    .input-group
+      span.input-group-addon slack.com/
+      input.form-input(type="text" placeholder="site name")
+      button.btn.btn-primary.input-group-btn Submit
+.columns
+  .column.col-xs-12
+    .input-group
+      label.form-switch
+        input(type="checkbox")
+        i.form-icon
+      input.form-input(type="text" placeholder="name")
+  .column.col-xs-12
+    .input-group
+      label.form-checkbox
+        input(type="checkbox")
+        i.form-icon
+      input.form-input(type="text" placeholder="name")
+.columns
+  .column.col-xs-12
+    .input-group
+      input.form-input.input-lg(type="text" placeholder="username")
+      select.form-select.select-lg
+        option Slack
+        option Skype
+        option Hipchat
+  .column.col-xs-12
+    .input-group
+      span.input-group-addon.addon-lg slack.com/
+      input.form-input.input-lg(type="text" placeholder="site name")
+      button.btn.btn-primary.input-group-btn.btn-lg Submit
+
+p
+  | If you want to attach text and button along with an input, add the #[code input-group] class to the input container.
+  | And add the #[code input-group-addon] class to the text element and #[code input-group-btn] to the button element.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        ...
+        
+      
+
+      
+      
+        ...
+        
+      
+
+      
+      
+        ...
+        
+        
+      
+
++docs-subheading('forms-validation', 'Form validation styles')
+
+p
+  | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements.
+  | Use the #[code form-input-hint] class to provide form validation success and error messages.
+
+.columns
+  .column.col-9.col-sm-12
+    fieldset
+      legend Input
+      .form-group
+        label.form-label(for="input-example-17") Name
+        input#input-example-17.form-input.is-success(type="text" placeholder="Name")
+        p.form-input-hint The name is valid.
+      .form-group.has-error
+        label.form-label(for="input-example-18") Password
+        input#input-example-18.form-input(type="password" placeholder="Password")
+        p.form-input-hint Passwords must have at least 8 characters.
+      .form-group
+        label.form-label(for="input-example-21") Email
+        input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$")
+        p.form-input-hint The Email address is unavailable.
+    fieldset
+      legend Select
+      .form-group
+        select.form-select.is-error
+          option Choose an option
+          option Slack
+          option Skype
+          option Hipchat
+        p.form-input-hint The option is invalid.
+      .form-group.has-success
+        select.form-select
+          option Choose an option
+          option Slack
+          option Skype
+          option Hipchat
+        p.form-input-hint The option is available.
+    fieldset
+      legend Checkbox, Radio and Switch (Error state only)
+      .form-group
+        label.form-checkbox.is-error
+          input(type="checkbox" checked="")
+          i.form-icon
+          |  I'm not a robot.
+      .form-group.has-error
+        label.form-radio
+          input(type="radio" name="gender" checked="")
+          i.form-icon
+          |  Male
+        label.form-radio
+          input(type="radio" name="gender")
+          i.form-icon
+          |  Female
+      .form-group
+        label.form-switch.is-error
+          input(type="checkbox" checked="")
+          i.form-icon
+          |  Send me emails with news and tips
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+        
+          Name
+          
+          The name is invalid.
+        
+
+        
+        
+          Name
+          
+          The name is invalid.
+        
+
+        
+        
+          
+            
+             Remember me
+          
+        
+      
+
++docs-subheading('forms-disabled', 'Form disabled styles')
+
+p 
+  | Add the #[code disabled] attribute to the element or #{''} for a disabled form components style.
+
+.columns
+  .column.col-6.col-xs-12
+    form(action="#forms")
+      fieldset(disabled="")
+        .form-group
+          label.form-label(for="input-example-19") Name
+          input#input-example-19.form-input(type="text" placeholder="Name")
+        .form-group
+          label.form-label Gender
+          label.form-radio
+            input(type="radio" name="gender" disabled="")
+            i.form-icon
+            |  Male
+          label.form-radio
+            input(type="radio" name="gender" disabled="")
+            i.form-icon
+            |  Female
+        .form-group
+          select.form-select(disabled="")
+            option Choose an option
+            option Slack
+            option Skype
+            option Hipchat
+        .form-group
+          label.form-switch
+            input(type="checkbox" disabled="")
+            i.form-icon
+            |  Send me emails with news and tips
+        .form-group
+          label.form-label(for="input-example-20") Message
+          textarea#input-example-20.form-input(placeholder="Textarea" rows="3" disabled="")
+        .form-group
+          label.form-checkbox
+            input(type="checkbox" disabled="")
+            i.form-icon
+            |  Remember me
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          
+            Name
+            
+          
+          
+            Gender
+            
+              
+               Male
+            
+            
+              
+               Female
+            
+          
+          
+            
+          
+          
+            
+              
+               Send me emails with news and tips
+            
+          
+          
+            Message
+            
+          
+          
+            
+              
+               Remember me
+            
+          
+        
\ No newline at end of file
diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug
index a66aa34..64e4ffd 100644
--- a/docs/src/contents/tables.pug
+++ b/docs/src/contents/tables.pug
@@ -27,21 +27,12 @@ p Tables include default styles for tables and data sets.
           td 22 September 1995
 
 p
-  | Add the 
-  code table
-  |  class to any 
-  = ''
-  |  element. The class will add padding, border and emphasized table header. Use the 
-  code table-striped
-  |  class to 
-  = ''
-  |  to add zebra striped style. For hoverable table rows, you can add the 
-  code table-hover
-  |  class to enable hover style.
+  | Add the #[code table] class to any #{''} element. 
+  | The class will add padding, border and emphasized table header. 
+  | Use the #[code table-striped] class to #{''} to add zebra striped style.
+  | For hoverable table rows, you can add the #[code table-hover] class to enable hover style.
 p
-  | Use the 
-  code active
-  |  class to make  element highlighted.
+  | Use the #[code active] class to make #{''} element highlighted.
 
 pre.code(data-lang='HTML')
   code
diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug
index 47b980a..28ffc17 100644
--- a/docs/src/contents/typography.pug
+++ b/docs/src/contents/typography.pug
@@ -40,9 +40,8 @@ pre.code(data-lang='HTML')
 +docs-subheading('typography-paragraphs', 'Paragraphs')
 
 p
-  | Lorem ipsum dolor sit amet, consectetur 
-  a(href='#typography') adipiscing elit. Praesent risus leo, dictum in vehicula sit amet
-  | , feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+  | Lorem ipsum dolor sit amet, consectetur #[a(href='#typography') adipiscing elit].
+  | Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
 p
   | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
 
@@ -127,7 +126,7 @@ p.h5
   small(lang='zh-Hans') 你好
   | , 
   small(lang='ja') こんにちは
-  | , 
+  | ,
   small(lang='ko') 안녕하세요
 
 p.h6 Chinese (Simplified)
@@ -142,9 +141,7 @@ p.h6 Korean
 p(lang='ko')
   | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
 p
-  | Use the 
-  code lang
-  |  attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.
+  | Use the #[code lang] attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.
 
 pre.code(data-lang='HTML')
   code
@@ -154,11 +151,7 @@ pre.code(data-lang='HTML')
       나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……
 
 p
-  | And you can use the 
-  code cjk
-  |  class or the 
-  code lang
-  |  attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
+  | And you can use the #[code cjk] class or the #[code lang] attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
 
 p(lang='ja')
   u 祇園
@@ -178,9 +171,8 @@ pre.code(data-lang='HTML')
 +docs-subheading('typography-fonts', 'Fonts')
 
 p
-  | Spectre sets the most common and best 
-  code font-family
-  |  for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.
+  | Spectre sets the most common and best #[code font-family] for each OS with fallback support in old systems.
+  | There are also fonts targeted East Asian typography.
 
 pre.code
   code
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index eb01640..0000000
--- a/package-lock.json
+++ /dev/null
@@ -1,3349 +0,0 @@
-{
-  "name": "spectre.css",
-  "version": "0.4.0",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "abbrev": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
-      "integrity": "sha1-0FVMIlZjbi9W58LlrRg/hZQo2B8=",
-      "dev": true
-    },
-    "ajv": {
-      "version": "4.11.8",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
-      "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
-      "dev": true,
-      "requires": {
-        "co": "4.6.0",
-        "json-stable-stringify": "1.0.1"
-      }
-    },
-    "amdefine": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
-      "dev": true
-    },
-    "ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-      "dev": true
-    },
-    "ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-      "dev": true
-    },
-    "aproba": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.1.2.tgz",
-      "integrity": "sha512-ZpYajIfO0j2cOFTO955KUMIKNmj6zhX8kVztMAxFsDaMwz+9Z9SV0uou2pC9HJqcfpffOsjnbrDMvkNy+9RXPw==",
-      "dev": true
-    },
-    "archy": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
-      "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=",
-      "dev": true
-    },
-    "are-we-there-yet": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
-      "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
-      "dev": true,
-      "requires": {
-        "delegates": "1.0.0",
-        "readable-stream": "2.3.3"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "2.3.3",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
-          "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
-          "dev": true,
-          "requires": {
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "1.0.0",
-            "process-nextick-args": "1.0.7",
-            "safe-buffer": "5.1.1",
-            "string_decoder": "1.0.3",
-            "util-deprecate": "1.0.2"
-          }
-        },
-        "string_decoder": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.1.1"
-          }
-        }
-      }
-    },
-    "arr-diff": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
-      "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
-      "dev": true,
-      "requires": {
-        "arr-flatten": "1.1.0"
-      }
-    },
-    "arr-flatten": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
-      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
-      "dev": true
-    },
-    "array-differ": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
-      "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE=",
-      "dev": true
-    },
-    "array-each": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
-      "integrity": "sha1-p5SvDAWrF1KEbudTofIRoFugxE8=",
-      "dev": true
-    },
-    "array-find-index": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
-      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
-      "dev": true
-    },
-    "array-slice": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.0.0.tgz",
-      "integrity": "sha1-5zA08A3MH0CHYAj9IP6ud71LfC8=",
-      "dev": true
-    },
-    "array-uniq": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
-      "dev": true
-    },
-    "array-unique": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
-      "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
-      "dev": true
-    },
-    "asn1": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
-      "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=",
-      "dev": true
-    },
-    "assert-plus": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
-      "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
-      "dev": true
-    },
-    "async-foreach": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
-      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
-      "dev": true
-    },
-    "asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
-    },
-    "autoprefixer": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.1.3.tgz",
-      "integrity": "sha512-zGy6aRrZjWhR+25n89jYkpLXutg6xdDGKKnVNzkfamnnhK3mYchkKj5GJR14aJiU0x4UqZ1+N728tkFNUL5N2g==",
-      "dev": true,
-      "requires": {
-        "browserslist": "2.4.0",
-        "caniuse-lite": "1.0.30000718",
-        "normalize-range": "0.1.2",
-        "num2fraction": "1.2.2",
-        "postcss": "6.0.10",
-        "postcss-value-parser": "3.3.0"
-      }
-    },
-    "aws-sign2": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
-      "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
-      "dev": true
-    },
-    "aws4": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
-      "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
-      "dev": true
-    },
-    "balanced-match": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
-    },
-    "bcrypt-pbkdf": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
-      "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "tweetnacl": "0.14.5"
-      }
-    },
-    "beeper": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz",
-      "integrity": "sha1-5tXqjF2tABMEpwsiY4RH9pyy+Ak=",
-      "dev": true
-    },
-    "block-stream": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
-      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
-      "dev": true,
-      "requires": {
-        "inherits": "2.0.3"
-      }
-    },
-    "boom": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
-      "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
-      "dev": true,
-      "requires": {
-        "hoek": "2.16.3"
-      }
-    },
-    "brace-expansion": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
-      "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=",
-      "dev": true,
-      "requires": {
-        "balanced-match": "1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "braces": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
-      "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
-      "dev": true,
-      "requires": {
-        "expand-range": "1.8.2",
-        "preserve": "0.2.0",
-        "repeat-element": "1.1.2"
-      }
-    },
-    "browserslist": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.4.0.tgz",
-      "integrity": "sha512-aM2Gt4x9bVlCUteADBS6JP0F+2tMWKM1jQzUulVROtdFWFIcIVvY76AJbr7GDqy0eDhn+PcnpzzivGxY4qiaKQ==",
-      "dev": true,
-      "requires": {
-        "caniuse-lite": "1.0.30000718",
-        "electron-to-chromium": "1.3.18"
-      }
-    },
-    "builtin-modules": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
-      "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
-      "dev": true
-    },
-    "camelcase": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-      "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
-      "dev": true
-    },
-    "camelcase-keys": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
-      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
-      "dev": true,
-      "requires": {
-        "camelcase": "2.1.1",
-        "map-obj": "1.0.1"
-      }
-    },
-    "caniuse-lite": {
-      "version": "1.0.30000718",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000718.tgz",
-      "integrity": "sha1-DdJCkL6xExCy2A9rcKgjwqZab60=",
-      "dev": true
-    },
-    "caseless": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "dev": true
-    },
-    "chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-      "dev": true,
-      "requires": {
-        "ansi-styles": "2.2.1",
-        "escape-string-regexp": "1.0.5",
-        "has-ansi": "2.0.0",
-        "strip-ansi": "3.0.1",
-        "supports-color": "2.0.0"
-      }
-    },
-    "clean-css": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.7.tgz",
-      "integrity": "sha1-ua6k+FZ5iJzz6ui0A0nsTr390DI=",
-      "dev": true,
-      "requires": {
-        "source-map": "0.5.6"
-      }
-    },
-    "cliui": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
-      "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
-      "dev": true,
-      "requires": {
-        "string-width": "1.0.2",
-        "strip-ansi": "3.0.1",
-        "wrap-ansi": "2.1.0"
-      }
-    },
-    "clone": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz",
-      "integrity": "sha1-Jgt6meux7f4kdTgXX3gyQ8sZ0Uk=",
-      "dev": true
-    },
-    "clone-stats": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz",
-      "integrity": "sha1-uI+UqCzzi4eR1YBG6kAprYjKmdE=",
-      "dev": true
-    },
-    "co": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true
-    },
-    "code-point-at": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-      "dev": true
-    },
-    "color-convert": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.0.tgz",
-      "integrity": "sha1-Gsz5fdc5uYO/mU1W/sj5WFNkG3o=",
-      "dev": true,
-      "requires": {
-        "color-name": "1.1.3"
-      }
-    },
-    "color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
-    },
-    "combined-stream": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
-      "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
-      "dev": true,
-      "requires": {
-        "delayed-stream": "1.0.0"
-      }
-    },
-    "commander": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.0.0.tgz",
-      "integrity": "sha1-0bhvkB+LZL2UG96tr5JFMDk76Sg=",
-      "dev": true
-    },
-    "concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
-    },
-    "console-control-strings": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "dev": true
-    },
-    "core-util-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
-    },
-    "cross-spawn": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
-      "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
-      "dev": true,
-      "requires": {
-        "lru-cache": "4.1.1",
-        "which": "1.3.0"
-      },
-      "dependencies": {
-        "lru-cache": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz",
-          "integrity": "sha512-q4spe4KTfsAS1SUHLO0wz8Qiyf1+vMIAgpRYioFYDMNqKfHQbg+AVDH3i4fvpl71/P1L0dBl+fQi+P37UYf0ew==",
-          "dev": true,
-          "requires": {
-            "pseudomap": "1.0.2",
-            "yallist": "2.1.2"
-          }
-        }
-      }
-    },
-    "cryptiles": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
-      "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
-      "dev": true,
-      "requires": {
-        "boom": "2.10.1"
-      }
-    },
-    "csscomb": {
-      "version": "3.1.8",
-      "resolved": "https://registry.npmjs.org/csscomb/-/csscomb-3.1.8.tgz",
-      "integrity": "sha1-qKc4iE9Am6817JRhr8UuHHW9I6I=",
-      "dev": true,
-      "requires": {
-        "commander": "2.0.0",
-        "csscomb-core": "3.0.0-3.1",
-        "gonzales-pe": "3.0.0-28",
-        "vow": "0.4.4"
-      }
-    },
-    "csscomb-core": {
-      "version": "3.0.0-3.1",
-      "resolved": "https://registry.npmjs.org/csscomb-core/-/csscomb-core-3.0.0-3.1.tgz",
-      "integrity": "sha1-tBHI18/g3z8v4d+E0b1kpvAEbGg=",
-      "dev": true,
-      "requires": {
-        "gonzales-pe": "3.0.0-28",
-        "minimatch": "0.2.12",
-        "vow": "0.4.4",
-        "vow-fs": "0.3.2"
-      },
-      "dependencies": {
-        "minimatch": {
-          "version": "0.2.12",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.12.tgz",
-          "integrity": "sha1-6oKgEqxmLH3fqhRPHBR+aUb12vs=",
-          "dev": true,
-          "requires": {
-            "lru-cache": "2.7.3",
-            "sigmund": "1.0.1"
-          }
-        }
-      }
-    },
-    "currently-unhandled": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
-      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
-      "dev": true,
-      "requires": {
-        "array-find-index": "1.0.2"
-      }
-    },
-    "dashdash": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "1.0.0"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-          "dev": true
-        }
-      }
-    },
-    "dateformat": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-2.0.0.tgz",
-      "integrity": "sha1-J0Pjq7XD/CRi5SfcpEXgTp9N7hc=",
-      "dev": true
-    },
-    "decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "dev": true
-    },
-    "defaults": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
-      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
-      "dev": true,
-      "requires": {
-        "clone": "1.0.2"
-      }
-    },
-    "delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true
-    },
-    "delegates": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true
-    },
-    "deprecated": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/deprecated/-/deprecated-0.0.1.tgz",
-      "integrity": "sha1-+cmvVGSvoeepcUWKi97yqpTVuxk=",
-      "dev": true
-    },
-    "detect-file": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-0.1.0.tgz",
-      "integrity": "sha1-STXe39lIhkjgBrASlWbpOGcR6mM=",
-      "dev": true,
-      "requires": {
-        "fs-exists-sync": "0.1.0"
-      }
-    },
-    "duplexer2": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
-      "integrity": "sha1-xhTc9n4vsUmVqRcR5aYX6KYKMds=",
-      "dev": true,
-      "requires": {
-        "readable-stream": "1.1.14"
-      }
-    },
-    "ecc-jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
-      "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "jsbn": "0.1.1"
-      }
-    },
-    "electron-to-chromium": {
-      "version": "1.3.18",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.18.tgz",
-      "integrity": "sha1-PcyZ2j5rZl9qu8ccKK1Ros1zGpw=",
-      "dev": true
-    },
-    "end-of-stream": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-0.1.5.tgz",
-      "integrity": "sha1-jhdyBsPICDfYVjLouTWd/osvbq8=",
-      "dev": true,
-      "requires": {
-        "once": "1.3.3"
-      }
-    },
-    "error-ex": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
-      "integrity": "sha1-+FWobOYa3E6GIcPNoh56dhLDqNw=",
-      "dev": true,
-      "requires": {
-        "is-arrayish": "0.2.1"
-      }
-    },
-    "escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
-    },
-    "expand-brackets": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
-      "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
-      "dev": true,
-      "requires": {
-        "is-posix-bracket": "0.1.1"
-      }
-    },
-    "expand-range": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
-      "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
-      "dev": true,
-      "requires": {
-        "fill-range": "2.2.3"
-      }
-    },
-    "expand-tilde": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-1.2.2.tgz",
-      "integrity": "sha1-C4HrqJflo9MdHD0QL48BRB5VlEk=",
-      "dev": true,
-      "requires": {
-        "os-homedir": "1.0.2"
-      }
-    },
-    "extend": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz",
-      "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=",
-      "dev": true
-    },
-    "extglob": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
-      "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
-      "dev": true,
-      "requires": {
-        "is-extglob": "1.0.0"
-      }
-    },
-    "extsprintf": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-      "dev": true
-    },
-    "fancy-log": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.0.tgz",
-      "integrity": "sha1-Rb4X0Cu5kX1gzP/UmVyZnmyMmUg=",
-      "dev": true,
-      "requires": {
-        "chalk": "1.1.3",
-        "time-stamp": "1.1.0"
-      }
-    },
-    "filename-regex": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
-      "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
-      "dev": true
-    },
-    "fill-range": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz",
-      "integrity": "sha1-ULd9/X5Gm8dJJHCWNpn+eoSFpyM=",
-      "dev": true,
-      "requires": {
-        "is-number": "2.1.0",
-        "isobject": "2.1.0",
-        "randomatic": "1.1.7",
-        "repeat-element": "1.1.2",
-        "repeat-string": "1.6.1"
-      }
-    },
-    "find-index": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/find-index/-/find-index-0.1.1.tgz",
-      "integrity": "sha1-Z101iyyjiS15Whq0cjL4tuLg3eQ=",
-      "dev": true
-    },
-    "find-up": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-      "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
-      "dev": true,
-      "requires": {
-        "path-exists": "2.1.0",
-        "pinkie-promise": "2.0.1"
-      }
-    },
-    "findup-sync": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.4.3.tgz",
-      "integrity": "sha1-QAQ5Kee8YK3wt/SCfExudaDeyhI=",
-      "dev": true,
-      "requires": {
-        "detect-file": "0.1.0",
-        "is-glob": "2.0.1",
-        "micromatch": "2.3.11",
-        "resolve-dir": "0.1.1"
-      }
-    },
-    "fined": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fined/-/fined-1.1.0.tgz",
-      "integrity": "sha1-s33IRLdqL15wgeiE98CuNE8VNHY=",
-      "dev": true,
-      "requires": {
-        "expand-tilde": "2.0.2",
-        "is-plain-object": "2.0.4",
-        "object.defaults": "1.1.0",
-        "object.pick": "1.3.0",
-        "parse-filepath": "1.0.1"
-      },
-      "dependencies": {
-        "expand-tilde": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
-          "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=",
-          "dev": true,
-          "requires": {
-            "homedir-polyfill": "1.0.1"
-          }
-        }
-      }
-    },
-    "first-chunk-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz",
-      "integrity": "sha1-Wb+1DNkF9g18OUzT2ayqtOatk04=",
-      "dev": true
-    },
-    "flagged-respawn": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-0.3.2.tgz",
-      "integrity": "sha1-/xke3c1wiKZ1smEP/8l2vpuAdLU=",
-      "dev": true
-    },
-    "for-in": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
-      "dev": true
-    },
-    "for-own": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
-      "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
-      "dev": true,
-      "requires": {
-        "for-in": "1.0.2"
-      }
-    },
-    "forever-agent": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "dev": true
-    },
-    "form-data": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
-      "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
-      "dev": true,
-      "requires": {
-        "asynckit": "0.4.0",
-        "combined-stream": "1.0.5",
-        "mime-types": "2.1.16"
-      }
-    },
-    "fs-exists-sync": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz",
-      "integrity": "sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=",
-      "dev": true
-    },
-    "fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
-    },
-    "fstream": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
-      "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "4.1.11",
-        "inherits": "2.0.3",
-        "mkdirp": "0.5.1",
-        "rimraf": "2.6.1"
-      },
-      "dependencies": {
-        "graceful-fs": {
-          "version": "4.1.11",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
-          "dev": true
-        }
-      }
-    },
-    "gauge": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
-      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
-      "dev": true,
-      "requires": {
-        "aproba": "1.1.2",
-        "console-control-strings": "1.1.0",
-        "has-unicode": "2.0.1",
-        "object-assign": "4.1.1",
-        "signal-exit": "3.0.2",
-        "string-width": "1.0.2",
-        "strip-ansi": "3.0.1",
-        "wide-align": "1.1.2"
-      },
-      "dependencies": {
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-          "dev": true
-        }
-      }
-    },
-    "gaze": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/gaze/-/gaze-0.5.2.tgz",
-      "integrity": "sha1-QLcJU30k0dRXZ9takIaJ3+aaxE8=",
-      "dev": true,
-      "requires": {
-        "globule": "0.1.0"
-      }
-    },
-    "get-caller-file": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz",
-      "integrity": "sha1-9wLmMSfn4jHBYKgMFVSstw1QR+U=",
-      "dev": true
-    },
-    "get-stdin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true
-    },
-    "getpass": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "1.0.0"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-          "dev": true
-        }
-      }
-    },
-    "glob": {
-      "version": "4.5.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-4.5.3.tgz",
-      "integrity": "sha1-xstz0yJsHv7wTePFbQEvAzd+4V8=",
-      "dev": true,
-      "requires": {
-        "inflight": "1.0.6",
-        "inherits": "2.0.3",
-        "minimatch": "2.0.10",
-        "once": "1.3.3"
-      }
-    },
-    "glob-base": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
-      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
-      "dev": true,
-      "requires": {
-        "glob-parent": "2.0.0",
-        "is-glob": "2.0.1"
-      }
-    },
-    "glob-parent": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
-      "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
-      "dev": true,
-      "requires": {
-        "is-glob": "2.0.1"
-      }
-    },
-    "glob-stream": {
-      "version": "3.1.18",
-      "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-3.1.18.tgz",
-      "integrity": "sha1-kXCl8St5Awb9/lmPMT+PeVT9FDs=",
-      "dev": true,
-      "requires": {
-        "glob": "4.5.3",
-        "glob2base": "0.0.12",
-        "minimatch": "2.0.10",
-        "ordered-read-streams": "0.1.0",
-        "through2": "0.6.5",
-        "unique-stream": "1.0.0"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "1.0.34",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
-          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
-          "dev": true,
-          "requires": {
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "0.0.1",
-            "string_decoder": "0.10.31"
-          }
-        },
-        "through2": {
-          "version": "0.6.5",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
-          "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
-          "dev": true,
-          "requires": {
-            "readable-stream": "1.0.34",
-            "xtend": "4.0.1"
-          }
-        }
-      }
-    },
-    "glob-watcher": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-0.0.6.tgz",
-      "integrity": "sha1-uVtKjfdLOcgymLDAXJeLTZo7cQs=",
-      "dev": true,
-      "requires": {
-        "gaze": "0.5.2"
-      }
-    },
-    "glob2base": {
-      "version": "0.0.12",
-      "resolved": "https://registry.npmjs.org/glob2base/-/glob2base-0.0.12.tgz",
-      "integrity": "sha1-nUGbPijxLoOjYhZKJ3BVkiycDVY=",
-      "dev": true,
-      "requires": {
-        "find-index": "0.1.1"
-      }
-    },
-    "global-modules": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-0.2.3.tgz",
-      "integrity": "sha1-6lo77ULG1s6ZWk+KEmm12uIjgo0=",
-      "dev": true,
-      "requires": {
-        "global-prefix": "0.1.5",
-        "is-windows": "0.2.0"
-      }
-    },
-    "global-prefix": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-0.1.5.tgz",
-      "integrity": "sha1-jTvGuNo8qBEqFg2NSW/wRiv+948=",
-      "dev": true,
-      "requires": {
-        "homedir-polyfill": "1.0.1",
-        "ini": "1.3.4",
-        "is-windows": "0.2.0",
-        "which": "1.3.0"
-      }
-    },
-    "globule": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/globule/-/globule-0.1.0.tgz",
-      "integrity": "sha1-2cjt3h2nnRJaFRt5UzuXhnY0auU=",
-      "dev": true,
-      "requires": {
-        "glob": "3.1.21",
-        "lodash": "1.0.2",
-        "minimatch": "0.2.14"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "3.1.21",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
-          "integrity": "sha1-0p4KBV3qUTj00H7UDomC6DwgZs0=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "1.2.3",
-            "inherits": "1.0.2",
-            "minimatch": "0.2.14"
-          }
-        },
-        "graceful-fs": {
-          "version": "1.2.3",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz",
-          "integrity": "sha1-FaSAaldUfLLS2/J/QuiajDRRs2Q=",
-          "dev": true
-        },
-        "inherits": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.2.tgz",
-          "integrity": "sha1-ykMJ2t7mtUzAuNJH6NfHoJdb3Js=",
-          "dev": true
-        },
-        "minimatch": {
-          "version": "0.2.14",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-          "integrity": "sha1-x054BXT2PG+aCQ6Q775u9TpqdWo=",
-          "dev": true,
-          "requires": {
-            "lru-cache": "2.7.3",
-            "sigmund": "1.0.1"
-          }
-        }
-      }
-    },
-    "glogg": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/glogg/-/glogg-1.0.0.tgz",
-      "integrity": "sha1-f+DxmfV6yQbPUS/urY+Q7kooT8U=",
-      "dev": true,
-      "requires": {
-        "sparkles": "1.0.0"
-      }
-    },
-    "gonzales-pe": {
-      "version": "3.0.0-28",
-      "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-3.0.0-28.tgz",
-      "integrity": "sha1-3VC0HdFbaCooxA5fD/IAeQGsYr0=",
-      "dev": true
-    },
-    "graceful-fs": {
-      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.11.tgz",
-      "integrity": "sha1-dhPHeKGv6mLyXGMKCG1/Osu92Bg=",
-      "dev": true,
-      "requires": {
-        "natives": "1.1.0"
-      }
-    },
-    "gulp": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/gulp/-/gulp-3.9.1.tgz",
-      "integrity": "sha1-VxzkWSjdQK9lFPxAEYZgFsE4RbQ=",
-      "dev": true,
-      "requires": {
-        "archy": "1.0.0",
-        "chalk": "1.1.3",
-        "deprecated": "0.0.1",
-        "gulp-util": "3.0.8",
-        "interpret": "1.0.3",
-        "liftoff": "2.3.0",
-        "minimist": "1.2.0",
-        "orchestrator": "0.3.8",
-        "pretty-hrtime": "1.0.3",
-        "semver": "4.3.6",
-        "tildify": "1.2.0",
-        "v8flags": "2.1.1",
-        "vinyl-fs": "0.3.14"
-      }
-    },
-    "gulp-autoprefixer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/gulp-autoprefixer/-/gulp-autoprefixer-4.0.0.tgz",
-      "integrity": "sha1-4AqMVxuF0GUWrCY0G+kN/Z/B6rA=",
-      "dev": true,
-      "requires": {
-        "autoprefixer": "7.1.3",
-        "gulp-util": "3.0.8",
-        "postcss": "6.0.10",
-        "through2": "2.0.3",
-        "vinyl-sourcemaps-apply": "0.2.1"
-      }
-    },
-    "gulp-clean-css": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-3.7.0.tgz",
-      "integrity": "sha1-VLM1JtyJmTCUn7N7TKz4UcXV2Ts=",
-      "dev": true,
-      "requires": {
-        "clean-css": "4.1.7",
-        "gulp-util": "3.0.8",
-        "through2": "2.0.3",
-        "vinyl-sourcemaps-apply": "0.2.1"
-      }
-    },
-    "gulp-csscomb": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/gulp-csscomb/-/gulp-csscomb-3.0.8.tgz",
-      "integrity": "sha1-3zSCSlgKTH0zUcHo67ateh1aibc=",
-      "dev": true,
-      "requires": {
-        "csscomb": "3.1.8",
-        "gulp-util": "3.0.8",
-        "through2": "2.0.3"
-      }
-    },
-    "gulp-rename": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.2.2.tgz",
-      "integrity": "sha1-OtRCh2PwXidk3sHGfYaNsnVoeBc=",
-      "dev": true
-    },
-    "gulp-sass": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-3.1.0.tgz",
-      "integrity": "sha1-U9xLaKH13f5EJKtMJHZVJpqLdLc=",
-      "dev": true,
-      "requires": {
-        "gulp-util": "3.0.8",
-        "lodash.clonedeep": "4.5.0",
-        "node-sass": "4.5.3",
-        "through2": "2.0.3",
-        "vinyl-sourcemaps-apply": "0.2.1"
-      }
-    },
-    "gulp-util": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.8.tgz",
-      "integrity": "sha1-AFTh50RQLifATBh8PsxQXdVLu08=",
-      "dev": true,
-      "requires": {
-        "array-differ": "1.0.0",
-        "array-uniq": "1.0.3",
-        "beeper": "1.1.1",
-        "chalk": "1.1.3",
-        "dateformat": "2.0.0",
-        "fancy-log": "1.3.0",
-        "gulplog": "1.0.0",
-        "has-gulplog": "0.1.0",
-        "lodash._reescape": "3.0.0",
-        "lodash._reevaluate": "3.0.0",
-        "lodash._reinterpolate": "3.0.0",
-        "lodash.template": "3.6.2",
-        "minimist": "1.2.0",
-        "multipipe": "0.1.2",
-        "object-assign": "3.0.0",
-        "replace-ext": "0.0.1",
-        "through2": "2.0.3",
-        "vinyl": "0.5.3"
-      }
-    },
-    "gulplog": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz",
-      "integrity": "sha1-4oxNRdBey77YGDY86PnFkmIp/+U=",
-      "dev": true,
-      "requires": {
-        "glogg": "1.0.0"
-      }
-    },
-    "har-schema": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz",
-      "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=",
-      "dev": true
-    },
-    "har-validator": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz",
-      "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=",
-      "dev": true,
-      "requires": {
-        "ajv": "4.11.8",
-        "har-schema": "1.0.5"
-      }
-    },
-    "has-ansi": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "2.1.1"
-      }
-    },
-    "has-flag": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
-      "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
-      "dev": true
-    },
-    "has-gulplog": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/has-gulplog/-/has-gulplog-0.1.0.tgz",
-      "integrity": "sha1-ZBTIKRNpfaUVkDl9r7EvIpZ4Ec4=",
-      "dev": true,
-      "requires": {
-        "sparkles": "1.0.0"
-      }
-    },
-    "has-unicode": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true
-    },
-    "hawk": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
-      "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
-      "dev": true,
-      "requires": {
-        "boom": "2.10.1",
-        "cryptiles": "2.0.5",
-        "hoek": "2.16.3",
-        "sntp": "1.0.9"
-      }
-    },
-    "hoek": {
-      "version": "2.16.3",
-      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
-      "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
-      "dev": true
-    },
-    "homedir-polyfill": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz",
-      "integrity": "sha1-TCu8inWJmP7r9e1oWA921GdotLw=",
-      "dev": true,
-      "requires": {
-        "parse-passwd": "1.0.0"
-      }
-    },
-    "hosted-git-info": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.5.0.tgz",
-      "integrity": "sha512-pNgbURSuab90KbTqvRPsseaTxOJCZBD0a7t+haSN33piP9cCM4l0CqdzAif2hUqm716UovKB2ROmiabGAKVXyg==",
-      "dev": true
-    },
-    "http-signature": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
-      "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "0.2.0",
-        "jsprim": "1.4.1",
-        "sshpk": "1.13.1"
-      }
-    },
-    "in-publish": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
-      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
-      "dev": true
-    },
-    "indent-string": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
-      "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
-      "dev": true,
-      "requires": {
-        "repeating": "2.0.1"
-      }
-    },
-    "inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
-      "requires": {
-        "once": "1.3.3",
-        "wrappy": "1.0.2"
-      }
-    },
-    "inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-      "dev": true
-    },
-    "ini": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
-      "integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4=",
-      "dev": true
-    },
-    "interpret": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.0.3.tgz",
-      "integrity": "sha1-y8NcYu7uc/Gat7EKgBURQBr8D5A=",
-      "dev": true
-    },
-    "invert-kv": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
-      "dev": true
-    },
-    "is-absolute": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-0.2.6.tgz",
-      "integrity": "sha1-IN5p89uULvLYe5wto28XIjWxtes=",
-      "dev": true,
-      "requires": {
-        "is-relative": "0.2.1",
-        "is-windows": "0.2.0"
-      }
-    },
-    "is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
-      "dev": true
-    },
-    "is-buffer": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.5.tgz",
-      "integrity": "sha1-Hzsm72E7IUuIy8ojzGwB2Hlh7sw=",
-      "dev": true
-    },
-    "is-builtin-module": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
-      "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
-      "dev": true,
-      "requires": {
-        "builtin-modules": "1.1.1"
-      }
-    },
-    "is-dotfile": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
-      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
-      "dev": true
-    },
-    "is-equal-shallow": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz",
-      "integrity": "sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=",
-      "dev": true,
-      "requires": {
-        "is-primitive": "2.0.0"
-      }
-    },
-    "is-extendable": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
-      "dev": true
-    },
-    "is-extglob": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-      "dev": true
-    },
-    "is-finite": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
-      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
-      "dev": true,
-      "requires": {
-        "number-is-nan": "1.0.1"
-      }
-    },
-    "is-fullwidth-code-point": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-      "dev": true,
-      "requires": {
-        "number-is-nan": "1.0.1"
-      }
-    },
-    "is-glob": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-      "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-      "dev": true,
-      "requires": {
-        "is-extglob": "1.0.0"
-      }
-    },
-    "is-number": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
-      "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=",
-      "dev": true,
-      "requires": {
-        "kind-of": "3.2.2"
-      }
-    },
-    "is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "dev": true,
-      "requires": {
-        "isobject": "3.0.1"
-      },
-      "dependencies": {
-        "isobject": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-          "dev": true
-        }
-      }
-    },
-    "is-posix-bracket": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz",
-      "integrity": "sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=",
-      "dev": true
-    },
-    "is-primitive": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
-      "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=",
-      "dev": true
-    },
-    "is-relative": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-0.2.1.tgz",
-      "integrity": "sha1-0n9MfVFtF1+2ENuEu+7yPDvJeqU=",
-      "dev": true,
-      "requires": {
-        "is-unc-path": "0.1.2"
-      }
-    },
-    "is-typedarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-      "dev": true
-    },
-    "is-unc-path": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-0.1.2.tgz",
-      "integrity": "sha1-arBTpyVzwQJQ/0FqOBTDUXivObk=",
-      "dev": true,
-      "requires": {
-        "unc-path-regex": "0.1.2"
-      }
-    },
-    "is-utf8": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
-      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true
-    },
-    "is-windows": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
-      "integrity": "sha1-3hqm1j6indJIc3tp8f+LgALSEIw=",
-      "dev": true
-    },
-    "isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
-      "dev": true
-    },
-    "isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
-      "dev": true
-    },
-    "isobject": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-      "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
-      "dev": true,
-      "requires": {
-        "isarray": "1.0.0"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        }
-      }
-    },
-    "isstream": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "dev": true
-    },
-    "js-base64": {
-      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.9.tgz",
-      "integrity": "sha1-8OgK4DmkvWVLXygfyT8EqRSn/M4=",
-      "dev": true
-    },
-    "jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "dev": true,
-      "optional": true
-    },
-    "json-schema": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
-      "dev": true
-    },
-    "json-stable-stringify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
-      "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
-      "dev": true,
-      "requires": {
-        "jsonify": "0.0.0"
-      }
-    },
-    "json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "dev": true
-    },
-    "jsonify": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
-      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
-      "dev": true
-    },
-    "jsprim": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
-      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "1.0.0",
-        "extsprintf": "1.3.0",
-        "json-schema": "0.2.3",
-        "verror": "1.10.0"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-          "dev": true
-        }
-      }
-    },
-    "kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-      "dev": true,
-      "requires": {
-        "is-buffer": "1.1.5"
-      }
-    },
-    "lcid": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
-      "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
-      "dev": true,
-      "requires": {
-        "invert-kv": "1.0.0"
-      }
-    },
-    "liftoff": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-2.3.0.tgz",
-      "integrity": "sha1-qY8v9nGD2Lp8+soQVIvX/wVQs4U=",
-      "dev": true,
-      "requires": {
-        "extend": "3.0.1",
-        "findup-sync": "0.4.3",
-        "fined": "1.1.0",
-        "flagged-respawn": "0.3.2",
-        "lodash.isplainobject": "4.0.6",
-        "lodash.isstring": "4.0.1",
-        "lodash.mapvalues": "4.6.0",
-        "rechoir": "0.6.2",
-        "resolve": "1.4.0"
-      }
-    },
-    "load-json-file": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-      "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "4.1.11",
-        "parse-json": "2.2.0",
-        "pify": "2.3.0",
-        "pinkie-promise": "2.0.1",
-        "strip-bom": "2.0.0"
-      },
-      "dependencies": {
-        "graceful-fs": {
-          "version": "4.1.11",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
-          "dev": true
-        },
-        "strip-bom": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
-          "dev": true,
-          "requires": {
-            "is-utf8": "0.2.1"
-          }
-        }
-      }
-    },
-    "lodash": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz",
-      "integrity": "sha1-j1dWDIO1n8JwvT1WG2kAQ0MOJVE=",
-      "dev": true
-    },
-    "lodash._basecopy": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-      "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=",
-      "dev": true
-    },
-    "lodash._basetostring": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz",
-      "integrity": "sha1-0YYdh3+CSlL2aYMtyvPuFVZqB9U=",
-      "dev": true
-    },
-    "lodash._basevalues": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
-      "integrity": "sha1-W3dXYoAr3j0yl1A+JjAIIP32Ybc=",
-      "dev": true
-    },
-    "lodash._getnative": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
-      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=",
-      "dev": true
-    },
-    "lodash._isiterateecall": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
-      "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=",
-      "dev": true
-    },
-    "lodash._reescape": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
-      "integrity": "sha1-Kx1vXf4HyKNVdT5fJ/rH8c3hYWo=",
-      "dev": true
-    },
-    "lodash._reevaluate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
-      "integrity": "sha1-WLx0xAZklTrgsSTYBpltrKQx4u0=",
-      "dev": true
-    },
-    "lodash._reinterpolate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
-      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
-      "dev": true
-    },
-    "lodash._root": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz",
-      "integrity": "sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI=",
-      "dev": true
-    },
-    "lodash.assign": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
-      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
-      "dev": true
-    },
-    "lodash.clonedeep": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
-      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
-      "dev": true
-    },
-    "lodash.escape": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.2.0.tgz",
-      "integrity": "sha1-mV7g3BjBtIzJLv+ucaEKq1tIdpg=",
-      "dev": true,
-      "requires": {
-        "lodash._root": "3.0.1"
-      }
-    },
-    "lodash.isarguments": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
-      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=",
-      "dev": true
-    },
-    "lodash.isarray": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
-      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
-      "dev": true
-    },
-    "lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
-      "dev": true
-    },
-    "lodash.isstring": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=",
-      "dev": true
-    },
-    "lodash.keys": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
-      "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
-      "dev": true,
-      "requires": {
-        "lodash._getnative": "3.9.1",
-        "lodash.isarguments": "3.1.0",
-        "lodash.isarray": "3.0.4"
-      }
-    },
-    "lodash.mapvalues": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
-      "integrity": "sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw=",
-      "dev": true
-    },
-    "lodash.mergewith": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz",
-      "integrity": "sha1-FQzwoWeR9ZA7iJHqsVRgknS96lU=",
-      "dev": true
-    },
-    "lodash.restparam": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-      "integrity": "sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=",
-      "dev": true
-    },
-    "lodash.template": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.2.tgz",
-      "integrity": "sha1-+M3sxhaaJVvpCYrosMU9N4kx0U8=",
-      "dev": true,
-      "requires": {
-        "lodash._basecopy": "3.0.1",
-        "lodash._basetostring": "3.0.1",
-        "lodash._basevalues": "3.0.0",
-        "lodash._isiterateecall": "3.0.9",
-        "lodash._reinterpolate": "3.0.0",
-        "lodash.escape": "3.2.0",
-        "lodash.keys": "3.1.2",
-        "lodash.restparam": "3.6.1",
-        "lodash.templatesettings": "3.1.1"
-      }
-    },
-    "lodash.templatesettings": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.1.tgz",
-      "integrity": "sha1-+zB4RHU7Zrnxr6VOJix0UwfbqOU=",
-      "dev": true,
-      "requires": {
-        "lodash._reinterpolate": "3.0.0",
-        "lodash.escape": "3.2.0"
-      }
-    },
-    "loud-rejection": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
-      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
-      "dev": true,
-      "requires": {
-        "currently-unhandled": "0.4.1",
-        "signal-exit": "3.0.2"
-      }
-    },
-    "lru-cache": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz",
-      "integrity": "sha1-bUUk6LlV+V1PW1iFHOId1y+06VI=",
-      "dev": true
-    },
-    "map-cache": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
-      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
-      "dev": true
-    },
-    "map-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true
-    },
-    "meow": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
-      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
-      "dev": true,
-      "requires": {
-        "camelcase-keys": "2.1.0",
-        "decamelize": "1.2.0",
-        "loud-rejection": "1.6.0",
-        "map-obj": "1.0.1",
-        "minimist": "1.2.0",
-        "normalize-package-data": "2.4.0",
-        "object-assign": "4.1.1",
-        "read-pkg-up": "1.0.1",
-        "redent": "1.0.0",
-        "trim-newlines": "1.0.0"
-      },
-      "dependencies": {
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-          "dev": true
-        }
-      }
-    },
-    "micromatch": {
-      "version": "2.3.11",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
-      "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
-      "dev": true,
-      "requires": {
-        "arr-diff": "2.0.0",
-        "array-unique": "0.2.1",
-        "braces": "1.8.5",
-        "expand-brackets": "0.1.5",
-        "extglob": "0.3.2",
-        "filename-regex": "2.0.1",
-        "is-extglob": "1.0.0",
-        "is-glob": "2.0.1",
-        "kind-of": "3.2.2",
-        "normalize-path": "2.1.1",
-        "object.omit": "2.0.1",
-        "parse-glob": "3.0.4",
-        "regex-cache": "0.4.3"
-      }
-    },
-    "mime-db": {
-      "version": "1.29.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.29.0.tgz",
-      "integrity": "sha1-SNJtI1WJZRcErFkWygYAGRQmaHg=",
-      "dev": true
-    },
-    "mime-types": {
-      "version": "2.1.16",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.16.tgz",
-      "integrity": "sha1-K4WKUuXs1RbbiXrCvodIeDBpjiM=",
-      "dev": true,
-      "requires": {
-        "mime-db": "1.29.0"
-      }
-    },
-    "minimatch": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz",
-      "integrity": "sha1-jQh8OcazjAAbl/ynzm0OHoCvusc=",
-      "dev": true,
-      "requires": {
-        "brace-expansion": "1.1.8"
-      }
-    },
-    "minimist": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-      "dev": true
-    },
-    "mkdirp": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "dev": true,
-      "requires": {
-        "minimist": "0.0.8"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
-        }
-      }
-    },
-    "multipipe": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
-      "integrity": "sha1-Ko8t33Du1WTf8tV/HhoTfZ8FB4s=",
-      "dev": true,
-      "requires": {
-        "duplexer2": "0.0.2"
-      }
-    },
-    "nan": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.6.2.tgz",
-      "integrity": "sha1-5P805slf37WuzAjeZZb0NgWn20U=",
-      "dev": true
-    },
-    "natives": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/natives/-/natives-1.1.0.tgz",
-      "integrity": "sha1-6f+EFBimsux6SV6TmYT3jxY+bjE=",
-      "dev": true
-    },
-    "node-gyp": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.6.2.tgz",
-      "integrity": "sha1-m/vlRWIoYoSDjnUOrAUpWFP6HGA=",
-      "dev": true,
-      "requires": {
-        "fstream": "1.0.11",
-        "glob": "7.1.2",
-        "graceful-fs": "4.1.11",
-        "minimatch": "3.0.4",
-        "mkdirp": "0.5.1",
-        "nopt": "3.0.6",
-        "npmlog": "4.1.2",
-        "osenv": "0.1.4",
-        "request": "2.81.0",
-        "rimraf": "2.6.1",
-        "semver": "5.3.0",
-        "tar": "2.2.1",
-        "which": "1.3.0"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "7.1.2",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "1.0.0",
-            "inflight": "1.0.6",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4",
-            "once": "1.3.3",
-            "path-is-absolute": "1.0.1"
-          }
-        },
-        "graceful-fs": {
-          "version": "4.1.11",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
-          "dev": true
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "1.1.8"
-          }
-        },
-        "semver": {
-          "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
-          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
-          "dev": true
-        }
-      }
-    },
-    "node-sass": {
-      "version": "4.5.3",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.5.3.tgz",
-      "integrity": "sha1-0JydEXlkEjnRuX/8YjH9zsU+FWg=",
-      "dev": true,
-      "requires": {
-        "async-foreach": "0.1.3",
-        "chalk": "1.1.3",
-        "cross-spawn": "3.0.1",
-        "gaze": "1.1.2",
-        "get-stdin": "4.0.1",
-        "glob": "7.1.2",
-        "in-publish": "2.0.0",
-        "lodash.assign": "4.2.0",
-        "lodash.clonedeep": "4.5.0",
-        "lodash.mergewith": "4.6.0",
-        "meow": "3.7.0",
-        "mkdirp": "0.5.1",
-        "nan": "2.6.2",
-        "node-gyp": "3.6.2",
-        "npmlog": "4.1.2",
-        "request": "2.81.0",
-        "sass-graph": "2.2.4",
-        "stdout-stream": "1.4.0"
-      },
-      "dependencies": {
-        "gaze": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.2.tgz",
-          "integrity": "sha1-hHIkZ3rbiHDWeSV+0ziP22HkAQU=",
-          "dev": true,
-          "requires": {
-            "globule": "1.2.0"
-          }
-        },
-        "glob": {
-          "version": "7.1.2",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "1.0.0",
-            "inflight": "1.0.6",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4",
-            "once": "1.3.3",
-            "path-is-absolute": "1.0.1"
-          }
-        },
-        "globule": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.0.tgz",
-          "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=",
-          "dev": true,
-          "requires": {
-            "glob": "7.1.2",
-            "lodash": "4.17.4",
-            "minimatch": "3.0.4"
-          }
-        },
-        "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
-          "dev": true
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "1.1.8"
-          }
-        }
-      }
-    },
-    "node-uuid": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.0.tgz",
-      "integrity": "sha1-B/myM3Vy/2J1x3Xh1IUT86RdemU=",
-      "dev": true
-    },
-    "nopt": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
-      "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
-      "dev": true,
-      "requires": {
-        "abbrev": "1.1.0"
-      }
-    },
-    "normalize-package-data": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
-      "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==",
-      "dev": true,
-      "requires": {
-        "hosted-git-info": "2.5.0",
-        "is-builtin-module": "1.0.0",
-        "semver": "4.3.6",
-        "validate-npm-package-license": "3.0.1"
-      }
-    },
-    "normalize-path": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-      "dev": true,
-      "requires": {
-        "remove-trailing-separator": "1.1.0"
-      }
-    },
-    "normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
-      "dev": true
-    },
-    "npmlog": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
-      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
-      "dev": true,
-      "requires": {
-        "are-we-there-yet": "1.1.4",
-        "console-control-strings": "1.1.0",
-        "gauge": "2.7.4",
-        "set-blocking": "2.0.0"
-      }
-    },
-    "num2fraction": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
-      "dev": true
-    },
-    "number-is-nan": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-      "dev": true
-    },
-    "oauth-sign": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
-      "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=",
-      "dev": true
-    },
-    "object-assign": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
-      "integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=",
-      "dev": true
-    },
-    "object.defaults": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz",
-      "integrity": "sha1-On+GgzS0B96gbaFtiNXNKeQ1/s8=",
-      "dev": true,
-      "requires": {
-        "array-each": "1.0.1",
-        "array-slice": "1.0.0",
-        "for-own": "1.0.0",
-        "isobject": "3.0.1"
-      },
-      "dependencies": {
-        "for-own": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
-          "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
-          "dev": true,
-          "requires": {
-            "for-in": "1.0.2"
-          }
-        },
-        "isobject": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-          "dev": true
-        }
-      }
-    },
-    "object.omit": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz",
-      "integrity": "sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=",
-      "dev": true,
-      "requires": {
-        "for-own": "0.1.5",
-        "is-extendable": "0.1.1"
-      }
-    },
-    "object.pick": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
-      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
-      "dev": true,
-      "requires": {
-        "isobject": "3.0.1"
-      },
-      "dependencies": {
-        "isobject": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-          "dev": true
-        }
-      }
-    },
-    "once": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
-      "integrity": "sha1-suJhVXzkwxTsgwTz+oJmPkKXyiA=",
-      "dev": true,
-      "requires": {
-        "wrappy": "1.0.2"
-      }
-    },
-    "orchestrator": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/orchestrator/-/orchestrator-0.3.8.tgz",
-      "integrity": "sha1-FOfp4nZPcxX7rBhOUGx6pt+UrX4=",
-      "dev": true,
-      "requires": {
-        "end-of-stream": "0.1.5",
-        "sequencify": "0.0.7",
-        "stream-consume": "0.1.0"
-      }
-    },
-    "ordered-read-streams": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-0.1.0.tgz",
-      "integrity": "sha1-/VZamvjrRHO6abbtijQ1LLVS8SY=",
-      "dev": true
-    },
-    "os-homedir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
-      "dev": true
-    },
-    "os-locale": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
-      "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
-      "dev": true,
-      "requires": {
-        "lcid": "1.0.0"
-      }
-    },
-    "os-tmpdir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
-      "dev": true
-    },
-    "osenv": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.4.tgz",
-      "integrity": "sha1-Qv5tWVPfBsgGS+bxdsPQWqqjRkQ=",
-      "dev": true,
-      "requires": {
-        "os-homedir": "1.0.2",
-        "os-tmpdir": "1.0.2"
-      }
-    },
-    "parse-filepath": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.1.tgz",
-      "integrity": "sha1-FZ1hVdQ5BNFsEO9piRHaHpGWm3M=",
-      "dev": true,
-      "requires": {
-        "is-absolute": "0.2.6",
-        "map-cache": "0.2.2",
-        "path-root": "0.1.1"
-      }
-    },
-    "parse-glob": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
-      "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
-      "dev": true,
-      "requires": {
-        "glob-base": "0.3.0",
-        "is-dotfile": "1.0.3",
-        "is-extglob": "1.0.0",
-        "is-glob": "2.0.1"
-      }
-    },
-    "parse-json": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-      "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-      "dev": true,
-      "requires": {
-        "error-ex": "1.3.1"
-      }
-    },
-    "parse-passwd": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
-      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
-      "dev": true
-    },
-    "path-exists": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-      "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
-      "dev": true,
-      "requires": {
-        "pinkie-promise": "2.0.1"
-      }
-    },
-    "path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
-    },
-    "path-parse": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz",
-      "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=",
-      "dev": true
-    },
-    "path-root": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz",
-      "integrity": "sha1-mkpoFMrBwM1zNgqV8yCDyOpHRbc=",
-      "dev": true,
-      "requires": {
-        "path-root-regex": "0.1.2"
-      }
-    },
-    "path-root-regex": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz",
-      "integrity": "sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=",
-      "dev": true
-    },
-    "path-type": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-      "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "4.1.11",
-        "pify": "2.3.0",
-        "pinkie-promise": "2.0.1"
-      },
-      "dependencies": {
-        "graceful-fs": {
-          "version": "4.1.11",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
-          "dev": true
-        }
-      }
-    },
-    "performance-now": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
-      "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=",
-      "dev": true
-    },
-    "pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-      "dev": true
-    },
-    "pinkie": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
-      "dev": true
-    },
-    "pinkie-promise": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
-      "dev": true,
-      "requires": {
-        "pinkie": "2.0.4"
-      }
-    },
-    "postcss": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.10.tgz",
-      "integrity": "sha512-7WOpqea/cQHH1XUXdN1mqoFFmhigW3KAXJ+ssMOk/f6mKmwqFgqqdwsnjLGH+wuY+kwaJvT4whHcfKt5kWga0A==",
-      "dev": true,
-      "requires": {
-        "chalk": "2.1.0",
-        "source-map": "0.5.7",
-        "supports-color": "4.2.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
-          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
-          "dev": true,
-          "requires": {
-            "color-convert": "1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz",
-          "integrity": "sha512-LUHGS/dge4ujbXMJrnihYMcL4AoOweGnw9Tp3kQuqy1Kx5c1qKjqvMJZ6nVJPMWJtKCTN72ZogH3oeSO9g9rXQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "3.2.0",
-            "escape-string-regexp": "1.0.5",
-            "supports-color": "4.2.1"
-          }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.1.tgz",
-          "integrity": "sha512-qxzYsob3yv6U+xMzPrv170y8AwGP7i74g+pbixCfD6rgso8BscLT2qXIuz6TpOaiJZ3mFgT5O9lyT9nMU4LfaA==",
-          "dev": true,
-          "requires": {
-            "has-flag": "2.0.0"
-          }
-        }
-      }
-    },
-    "postcss-value-parser": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
-      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
-      "dev": true
-    },
-    "preserve": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
-      "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
-      "dev": true
-    },
-    "pretty-hrtime": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
-      "dev": true
-    },
-    "process-nextick-args": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
-      "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=",
-      "dev": true
-    },
-    "pseudomap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
-      "dev": true
-    },
-    "punycode": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-      "dev": true
-    },
-    "qs": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz",
-      "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=",
-      "dev": true
-    },
-    "randomatic": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz",
-      "integrity": "sha512-D5JUjPyJbaJDkuAazpVnSfVkLlpeO3wDlPROTMLGKG1zMFNFRgrciKo1ltz/AzNTkqE0HzDx655QOL51N06how==",
-      "dev": true,
-      "requires": {
-        "is-number": "3.0.0",
-        "kind-of": "4.0.0"
-      },
-      "dependencies": {
-        "is-number": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "dev": true,
-          "requires": {
-            "kind-of": "3.2.2"
-          },
-          "dependencies": {
-            "kind-of": {
-              "version": "3.2.2",
-              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "dev": true,
-              "requires": {
-                "is-buffer": "1.1.5"
-              }
-            }
-          }
-        },
-        "kind-of": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
-          "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "1.1.5"
-          }
-        }
-      }
-    },
-    "read-pkg": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-      "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
-      "dev": true,
-      "requires": {
-        "load-json-file": "1.1.0",
-        "normalize-package-data": "2.4.0",
-        "path-type": "1.1.0"
-      }
-    },
-    "read-pkg-up": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-      "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
-      "dev": true,
-      "requires": {
-        "find-up": "1.1.2",
-        "read-pkg": "1.1.0"
-      }
-    },
-    "readable-stream": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
-      "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
-      "dev": true,
-      "requires": {
-        "core-util-is": "1.0.2",
-        "inherits": "2.0.3",
-        "isarray": "0.0.1",
-        "string_decoder": "0.10.31"
-      }
-    },
-    "rechoir": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
-      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
-      "dev": true,
-      "requires": {
-        "resolve": "1.4.0"
-      }
-    },
-    "redent": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
-      "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
-      "dev": true,
-      "requires": {
-        "indent-string": "2.1.0",
-        "strip-indent": "1.0.1"
-      }
-    },
-    "regex-cache": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.3.tgz",
-      "integrity": "sha1-mxpsNdTQ3871cRrmUejp09cRQUU=",
-      "dev": true,
-      "requires": {
-        "is-equal-shallow": "0.1.3",
-        "is-primitive": "2.0.0"
-      }
-    },
-    "remove-trailing-separator": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
-      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
-      "dev": true
-    },
-    "repeat-element": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz",
-      "integrity": "sha1-7wiaF40Ug7quTZPrmLT55OEdmQo=",
-      "dev": true
-    },
-    "repeat-string": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
-      "dev": true
-    },
-    "repeating": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
-      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
-      "dev": true,
-      "requires": {
-        "is-finite": "1.0.2"
-      }
-    },
-    "replace-ext": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
-      "integrity": "sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ=",
-      "dev": true
-    },
-    "request": {
-      "version": "2.81.0",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz",
-      "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=",
-      "dev": true,
-      "requires": {
-        "aws-sign2": "0.6.0",
-        "aws4": "1.6.0",
-        "caseless": "0.12.0",
-        "combined-stream": "1.0.5",
-        "extend": "3.0.1",
-        "forever-agent": "0.6.1",
-        "form-data": "2.1.4",
-        "har-validator": "4.2.1",
-        "hawk": "3.1.3",
-        "http-signature": "1.1.1",
-        "is-typedarray": "1.0.0",
-        "isstream": "0.1.2",
-        "json-stringify-safe": "5.0.1",
-        "mime-types": "2.1.16",
-        "oauth-sign": "0.8.2",
-        "performance-now": "0.2.0",
-        "qs": "6.4.0",
-        "safe-buffer": "5.1.1",
-        "stringstream": "0.0.5",
-        "tough-cookie": "2.3.2",
-        "tunnel-agent": "0.6.0",
-        "uuid": "3.1.0"
-      }
-    },
-    "require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
-      "dev": true
-    },
-    "require-main-filename": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
-      "dev": true
-    },
-    "resolve": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.4.0.tgz",
-      "integrity": "sha512-aW7sVKPufyHqOmyyLzg/J+8606v5nevBgaliIlV7nUpVMsDnoBGV/cbSLNjZAg9q0Cfd/+easKVKQ8vOu8fn1Q==",
-      "dev": true,
-      "requires": {
-        "path-parse": "1.0.5"
-      }
-    },
-    "resolve-dir": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-0.1.1.tgz",
-      "integrity": "sha1-shklmlYC+sXFxJatiUpujMQwJh4=",
-      "dev": true,
-      "requires": {
-        "expand-tilde": "1.2.2",
-        "global-modules": "0.2.3"
-      }
-    },
-    "rimraf": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz",
-      "integrity": "sha1-wjOOxkPfeht/5cVPqG9XQopV8z0=",
-      "dev": true,
-      "requires": {
-        "glob": "7.1.2"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "7.1.2",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "1.0.0",
-            "inflight": "1.0.6",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4",
-            "once": "1.3.3",
-            "path-is-absolute": "1.0.1"
-          }
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "1.1.8"
-          }
-        }
-      }
-    },
-    "safe-buffer": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-      "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-      "dev": true
-    },
-    "sass-graph": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
-      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
-      "dev": true,
-      "requires": {
-        "glob": "7.1.2",
-        "lodash": "4.17.4",
-        "scss-tokenizer": "0.2.3",
-        "yargs": "7.1.0"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "7.1.2",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "1.0.0",
-            "inflight": "1.0.6",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4",
-            "once": "1.3.3",
-            "path-is-absolute": "1.0.1"
-          }
-        },
-        "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
-          "dev": true
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "1.1.8"
-          }
-        }
-      }
-    },
-    "scss-tokenizer": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
-      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
-      "dev": true,
-      "requires": {
-        "js-base64": "2.1.9",
-        "source-map": "0.4.4"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.4.4",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
-          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
-          "dev": true,
-          "requires": {
-            "amdefine": "1.0.1"
-          }
-        }
-      }
-    },
-    "semver": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
-      "integrity": "sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=",
-      "dev": true
-    },
-    "sequencify": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/sequencify/-/sequencify-0.0.7.tgz",
-      "integrity": "sha1-kM/xnQLgcCf9dn9erT57ldHnOAw=",
-      "dev": true
-    },
-    "set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
-      "dev": true
-    },
-    "sigmund": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
-      "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=",
-      "dev": true
-    },
-    "signal-exit": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
-      "dev": true
-    },
-    "sntp": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
-      "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
-      "dev": true,
-      "requires": {
-        "hoek": "2.16.3"
-      }
-    },
-    "source-map": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
-      "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
-      "dev": true
-    },
-    "sparkles": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.0.tgz",
-      "integrity": "sha1-Gsu/tZJDbRC76PeFt8xvgoFQEsM=",
-      "dev": true
-    },
-    "spdx-correct": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-1.0.2.tgz",
-      "integrity": "sha1-SzBz2TP/UfORLwOsVRlJikFQ20A=",
-      "dev": true,
-      "requires": {
-        "spdx-license-ids": "1.2.2"
-      }
-    },
-    "spdx-expression-parse": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz",
-      "integrity": "sha1-m98vIOH0DtRH++JzJmGR/O1RYmw=",
-      "dev": true
-    },
-    "spdx-license-ids": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz",
-      "integrity": "sha1-yd96NCRZSt5r0RkA1ZZpbcBrrFc=",
-      "dev": true
-    },
-    "sshpk": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.1.tgz",
-      "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=",
-      "dev": true,
-      "requires": {
-        "asn1": "0.2.3",
-        "assert-plus": "1.0.0",
-        "bcrypt-pbkdf": "1.0.1",
-        "dashdash": "1.14.1",
-        "ecc-jsbn": "0.1.1",
-        "getpass": "0.1.7",
-        "jsbn": "0.1.1",
-        "tweetnacl": "0.14.5"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-          "dev": true
-        }
-      }
-    },
-    "stdout-stream": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz",
-      "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=",
-      "dev": true,
-      "requires": {
-        "readable-stream": "2.3.3"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "2.3.3",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
-          "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
-          "dev": true,
-          "requires": {
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "1.0.0",
-            "process-nextick-args": "1.0.7",
-            "safe-buffer": "5.1.1",
-            "string_decoder": "1.0.3",
-            "util-deprecate": "1.0.2"
-          }
-        },
-        "string_decoder": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.1.1"
-          }
-        }
-      }
-    },
-    "stream-consume": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/stream-consume/-/stream-consume-0.1.0.tgz",
-      "integrity": "sha1-pB6tGm1ggc63n2WwYZAbbY89HQ8=",
-      "dev": true
-    },
-    "string_decoder": {
-      "version": "0.10.31",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
-      "dev": true
-    },
-    "string-width": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-      "dev": true,
-      "requires": {
-        "code-point-at": "1.1.0",
-        "is-fullwidth-code-point": "1.0.0",
-        "strip-ansi": "3.0.1"
-      }
-    },
-    "stringstream": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
-      "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=",
-      "dev": true
-    },
-    "strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "2.1.1"
-      }
-    },
-    "strip-bom": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-1.0.0.tgz",
-      "integrity": "sha1-hbiGLzhEtabV7IRnqTWYFzo295Q=",
-      "dev": true,
-      "requires": {
-        "first-chunk-stream": "1.0.0",
-        "is-utf8": "0.2.1"
-      }
-    },
-    "strip-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
-      "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
-      "dev": true,
-      "requires": {
-        "get-stdin": "4.0.1"
-      }
-    },
-    "supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-      "dev": true
-    },
-    "tar": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
-      "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
-      "dev": true,
-      "requires": {
-        "block-stream": "0.0.9",
-        "fstream": "1.0.11",
-        "inherits": "2.0.3"
-      }
-    },
-    "through2": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz",
-      "integrity": "sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=",
-      "dev": true,
-      "requires": {
-        "readable-stream": "2.3.3",
-        "xtend": "4.0.1"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "2.3.3",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
-          "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
-          "dev": true,
-          "requires": {
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "1.0.0",
-            "process-nextick-args": "1.0.7",
-            "safe-buffer": "5.1.1",
-            "string_decoder": "1.0.3",
-            "util-deprecate": "1.0.2"
-          }
-        },
-        "string_decoder": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.1.1"
-          }
-        }
-      }
-    },
-    "tildify": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/tildify/-/tildify-1.2.0.tgz",
-      "integrity": "sha1-3OwD9V3Km3qj5bBPIYF+tW5jWIo=",
-      "dev": true,
-      "requires": {
-        "os-homedir": "1.0.2"
-      }
-    },
-    "time-stamp": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz",
-      "integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=",
-      "dev": true
-    },
-    "tough-cookie": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz",
-      "integrity": "sha1-8IH3bkyFcg5sN6X6ztc3FQ2EByo=",
-      "dev": true,
-      "requires": {
-        "punycode": "1.4.1"
-      }
-    },
-    "trim-newlines": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
-      "dev": true
-    },
-    "tunnel-agent": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
-    "tweetnacl": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "dev": true,
-      "optional": true
-    },
-    "unc-path-regex": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
-      "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=",
-      "dev": true
-    },
-    "unique-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-1.0.0.tgz",
-      "integrity": "sha1-1ZpKdUJ0R9mqbJHnAmP40mpLEEs=",
-      "dev": true
-    },
-    "user-home": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz",
-      "integrity": "sha1-K1viOjK2Onyd640PKNSFcko98ZA=",
-      "dev": true
-    },
-    "util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
-    },
-    "uuid": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
-      "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g==",
-      "dev": true
-    },
-    "v8flags": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-2.1.1.tgz",
-      "integrity": "sha1-qrGh+jDUX4jdMhFIh1rALAtV5bQ=",
-      "dev": true,
-      "requires": {
-        "user-home": "1.1.1"
-      }
-    },
-    "validate-npm-package-license": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz",
-      "integrity": "sha1-KAS6vnEq0zeUWaz74kdGqywwP7w=",
-      "dev": true,
-      "requires": {
-        "spdx-correct": "1.0.2",
-        "spdx-expression-parse": "1.0.4"
-      }
-    },
-    "verror": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "1.0.0",
-        "core-util-is": "1.0.2",
-        "extsprintf": "1.3.0"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-          "dev": true
-        }
-      }
-    },
-    "vinyl": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.5.3.tgz",
-      "integrity": "sha1-sEVbOPxeDPMNQyUTLkYZcMIJHN4=",
-      "dev": true,
-      "requires": {
-        "clone": "1.0.2",
-        "clone-stats": "0.0.1",
-        "replace-ext": "0.0.1"
-      }
-    },
-    "vinyl-fs": {
-      "version": "0.3.14",
-      "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-0.3.14.tgz",
-      "integrity": "sha1-mmhRzhysHBzqX+hsCTHWIMLPqeY=",
-      "dev": true,
-      "requires": {
-        "defaults": "1.0.3",
-        "glob-stream": "3.1.18",
-        "glob-watcher": "0.0.6",
-        "graceful-fs": "3.0.11",
-        "mkdirp": "0.5.1",
-        "strip-bom": "1.0.0",
-        "through2": "0.6.5",
-        "vinyl": "0.4.6"
-      },
-      "dependencies": {
-        "clone": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/clone/-/clone-0.2.0.tgz",
-          "integrity": "sha1-xhJqkK1Pctv1rNskPMN3JP6T/B8=",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "1.0.34",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
-          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
-          "dev": true,
-          "requires": {
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "0.0.1",
-            "string_decoder": "0.10.31"
-          }
-        },
-        "through2": {
-          "version": "0.6.5",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
-          "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
-          "dev": true,
-          "requires": {
-            "readable-stream": "1.0.34",
-            "xtend": "4.0.1"
-          }
-        },
-        "vinyl": {
-          "version": "0.4.6",
-          "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.4.6.tgz",
-          "integrity": "sha1-LzVsh6VQolVGHza76ypbqL94SEc=",
-          "dev": true,
-          "requires": {
-            "clone": "0.2.0",
-            "clone-stats": "0.0.1"
-          }
-        }
-      }
-    },
-    "vinyl-sourcemaps-apply": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz",
-      "integrity": "sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=",
-      "dev": true,
-      "requires": {
-        "source-map": "0.5.6"
-      }
-    },
-    "vow": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/vow/-/vow-0.4.4.tgz",
-      "integrity": "sha1-yf5GCRKdf1qmIVCOvmS1HJW8e5g=",
-      "dev": true
-    },
-    "vow-fs": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/vow-fs/-/vow-fs-0.3.2.tgz",
-      "integrity": "sha1-6isDTYXh24wnfrLpqG0cFfXTjno=",
-      "dev": true,
-      "requires": {
-        "glob": "3.2.8",
-        "node-uuid": "1.4.0",
-        "vow": "0.4.4",
-        "vow-queue": "0.3.1"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "3.2.8",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.8.tgz",
-          "integrity": "sha1-VQb0MRchvMYYx9jboUQYh1AwcHM=",
-          "dev": true,
-          "requires": {
-            "inherits": "2.0.3",
-            "minimatch": "0.2.14"
-          }
-        },
-        "minimatch": {
-          "version": "0.2.14",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
-          "integrity": "sha1-x054BXT2PG+aCQ6Q775u9TpqdWo=",
-          "dev": true,
-          "requires": {
-            "lru-cache": "2.7.3",
-            "sigmund": "1.0.1"
-          }
-        }
-      }
-    },
-    "vow-queue": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/vow-queue/-/vow-queue-0.3.1.tgz",
-      "integrity": "sha1-WYxRoVsKgabV/AX0dhzrRi3h6Gg=",
-      "dev": true,
-      "requires": {
-        "vow": "0.4.4"
-      }
-    },
-    "which": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
-      "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==",
-      "dev": true,
-      "requires": {
-        "isexe": "2.0.0"
-      }
-    },
-    "which-module": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
-      "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=",
-      "dev": true
-    },
-    "wide-align": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
-      "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
-      "dev": true,
-      "requires": {
-        "string-width": "1.0.2"
-      }
-    },
-    "wrap-ansi": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
-      "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
-      "dev": true,
-      "requires": {
-        "string-width": "1.0.2",
-        "strip-ansi": "3.0.1"
-      }
-    },
-    "wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
-    },
-    "xtend": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
-      "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
-      "dev": true
-    },
-    "y18n": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
-      "dev": true
-    },
-    "yallist": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-      "dev": true
-    },
-    "yargs": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
-      "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
-      "dev": true,
-      "requires": {
-        "camelcase": "3.0.0",
-        "cliui": "3.2.0",
-        "decamelize": "1.2.0",
-        "get-caller-file": "1.0.2",
-        "os-locale": "1.4.0",
-        "read-pkg-up": "1.0.1",
-        "require-directory": "2.1.1",
-        "require-main-filename": "1.0.1",
-        "set-blocking": "2.0.0",
-        "string-width": "1.0.2",
-        "which-module": "1.0.0",
-        "y18n": "3.2.1",
-        "yargs-parser": "5.0.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
-          "dev": true
-        }
-      }
-    },
-    "yargs-parser": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
-      "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
-      "dev": true,
-      "requires": {
-        "camelcase": "3.0.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
-          "dev": true
-        }
-      }
-    }
-  }
-}
diff --git a/package.json b/package.json
index de9ec69..b65da1f 100644
--- a/package.json
+++ b/package.json
@@ -26,11 +26,11 @@
   "devDependencies": {
     "gulp": "latest",
     "gulp-autoprefixer": "latest",
-    "gulp-clean-css": "^3.7.0",
-    "gulp-csscomb": "^3.0.8",
-    "gulp-rename": "^1.2.2",
+    "gulp-clean-css": "latest",
+    "gulp-csscomb": "latest",
+    "gulp-rename": "latest",
     "gulp-sass": "latest",
-    "gulp-pug": "^4.0.1",
+    "gulp-pug": "latest",
     "jstransformer-highlight": "latest",
     "jstransformer-markdown-it": "latest"
   },
-- 
cgit v1.3.1-23-gd82d


From 611c666dbcbae64c233f0f335a09a2cee36c7132 Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Sun, 3 Jun 2018 17:45:42 +0800
Subject: Update labels docs to Pug template

---
 docs/elements.html           | 17 +++++++++++++++++
 docs/src/contents/labels.pug | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)

(limited to 'docs/elements.html')

diff --git a/docs/elements.html b/docs/elements.html
index f971860..ae803f4 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1213,6 +1213,23 @@
           
           
             #Labels
+            Labels are formatted text tags for highlighted, informative information.
+            
+              default labelprimary labelsecondary labelsuccess labelwarning labelerror label
+            
+            Add the label class to <span> or <small> elements.
+              You can add another class label-primary, label-secondary, label-success, label-warning and label-error for colored labels.
+            
+            
+              default labelprimary label
+            
+            Add the label-rounded class to have rounded labels.
+            <!-- normal labels -->
+<span class="label">default label</span>
+<span class="label label-primary">primary label</span>
+
+<!-- rounded labels -->
+<span class="label label-rounded label-primary">primary label</span>
           
           
             #Codes
diff --git a/docs/src/contents/labels.pug b/docs/src/contents/labels.pug
index e69de29..2d55412 100644
--- a/docs/src/contents/labels.pug
+++ b/docs/src/contents/labels.pug
@@ -0,0 +1,32 @@
+p Labels are formatted text tags for highlighted, informative information.
+
+.columns
+  .column
+    span.label.mr-1 default label
+    span.label.label-primary.mr-1 primary label
+    span.label.label-secondary.mr-1 secondary label
+    span.label.label-success.mr-1 success label
+    span.label.label-warning.mr-1 warning label
+    span.label.label-error error label
+  
+p
+  | Add the #[code label] class to #{''} or #{''} elements.
+  | You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels.
+
+.columns
+  .column
+    span.label.label-rounded.mr-1 default label
+    span.label.label-rounded.label-primary primary label
+
+p
+  | Add the #[code label-rounded] class to have rounded labels.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      default label
+      primary label
+
+      
+      primary label
\ No newline at end of file
-- 
cgit v1.3.1-23-gd82d


From f7344f3e056a94640b6260ad7b7badfd33646c37 Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Sun, 3 Jun 2018 18:07:08 +0800
Subject: Update code and media docs to new Pug templates

---
 README.md                   |  2 +-
 docs/elements.html          | 75 ++++++++++++++++++++++++++++++++++++++++++++-
 docs/src/contents/code.pug  | 22 +++++++++++++
 docs/src/contents/codes.pug |  0
 docs/src/contents/media.pug | 73 +++++++++++++++++++++++++++++++++++++++++++
 docs/src/elements.pug       |  4 +--
 6 files changed, 172 insertions(+), 4 deletions(-)
 create mode 100644 docs/src/contents/code.pug
 delete mode 100644 docs/src/contents/codes.pug

(limited to 'docs/elements.html')

diff --git a/README.md b/README.md
index 711be7e..c5a47a8 100644
--- a/README.md
+++ b/README.md
@@ -52,7 +52,7 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 - [Forms](https://picturepan2.github.io/spectre/elements.html#forms)
 - [Icons](https://picturepan2.github.io/spectre/elements.html#icons) - CSS only
 - [Labels](https://picturepan2.github.io/spectre/elements.html#labels)
-- [Codes](https://picturepan2.github.io/spectre/elements.html#codes)
+- [Code](https://picturepan2.github.io/spectre/elements.html#code)
 - [Media](https://picturepan2.github.io/spectre/elements.html#media)
 
 ### Layout
diff --git a/docs/elements.html b/docs/elements.html
index ae803f4..e7b4e82 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1232,10 +1232,83 @@
 <span class="label label-rounded label-primary">primary label</span>
           

           
-            #Codes
+            #Code
+            Code is used for styling inline and multiline code snippets.
+            For inline code, you can use the <code> element. 
+              For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it.
+              The data-lang ibute is rendered as the language name in the top right.
+            
+            <!-- code snippets -->
+<button class="btn">
+  Submit
+</button>
+
+            <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
+  Submit
+&lt;<span class="tag">/button</span>&gt;
+</code></pre>
           
           
             #Media
+            Media includes responsive images, figures and video classes.
+            #Images
+            Add the img-responsive class to <img> elements. The images will scale with the parent sizes.
+            
+              
+            
+            Add the img-fit-contain or img-fit-cover class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container).
+              This feature can replace the classic background image trick. Microsoft Edge support is shipped  with Build Number 16299+.
+            
+            
+              
+                
+                  img-fit-contain
+                
+              
+              
+                
+                  img-fit-cover
+                
+              
+            
+            <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
+<img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
+<img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
+
+            #Figure
+            You can use the element <figure> for an image with a caption.
+              Add the figure class to <figure> element.
+              The images with the img-responsive class will be responsive.
+              And the included class figure-caption will provide basic style for caption.
+              Also, you can use text-left, text-center and text-right for caption alignment.
+            
+            
+              
+                
+                  macOS Yosemite wallpaper
+                
+              
+            
+            #Video
+            For responsive video, add a container with the video-responsive class. 
+              Insert any YouTube, Youku or other iframe/embed video inside the container. 
+              The ratio is 16:9 by default.
+              You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.
+            
+            
+              
+                
+                  
+                
+              
+            
+            For responsive <video> elements, you can add the video-responsive class directly.
+            <div class="video-responsive video-responsive-4-3">
+  <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
+</div>
+
+<video class="video-responsive" src="...">...</video>
           
         
       
diff --git a/docs/src/contents/code.pug b/docs/src/contents/code.pug
new file mode 100644
index 0000000..f1ee876
--- /dev/null
+++ b/docs/src/contents/code.pug
@@ -0,0 +1,22 @@
+p Code is used for styling inline and multiline code snippets.
+p
+  | For inline code, you can use the #{''} element. 
+  | For multiline code snippet blocks, you can use #{''} with the #[code code] class as a container, and add #{''} inside it.
+  | The #[code data-lang] ibute is rendered as the language name in the top right.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- code snippets -->
+      <button class="btn">
+        Submit
+      </button>
+      
\ No newline at end of file
diff --git a/docs/src/contents/codes.pug b/docs/src/contents/codes.pug
deleted file mode 100644
index e69de29..0000000
diff --git a/docs/src/contents/media.pug b/docs/src/contents/media.pug
index e69de29..fcb8d36 100644
--- a/docs/src/contents/media.pug
+++ b/docs/src/contents/media.pug
@@ -0,0 +1,73 @@
+p Media includes responsive images, figures and video classes.
+
++docs-subheading('media-images', 'Images')
+
+p
+  | Add the #[code img-responsive] class to #{''} elements. The images will scale with the parent sizes.
+
+.columns
+  .column.col-12
+    img.img-responsive.rounded(src="img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper")
+
+p
+  | Add the #[code img-fit-contain] or #[code img-fit-cover] class to #{''} or #{''} for an image with a caption.
+  | Add the #[code figure] class to #{''} element.
+  | The images with the #[code img-responsive] class will be responsive.
+  | And the included class #[code figure-caption] will provide basic style for caption.
+  | Also, you can use #[code text-left], #[code text-center] and #[code text-right] for caption alignment.
+
+.columns
+  .column.col-12
+    figure.figure
+      img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
+      figcaption.figure-caption.text-center macOS Yosemite wallpaper
+
++docs-subheading('media-video', 'Video')
+
+p
+  | For responsive video, add a container with the #[code video-responsive] class. 
+  | Insert any YouTube, Youku or other iframe/embed video inside the container. 
+  | The ratio is 16:9 by default.
+  | You may add #[code video-responsive-4-3] for 4:3 ratio video container or #[code video-responsive-1-1] for 1:1 ratio.
+
+.columns
+  .column.col-12
+    .video-responsive
+      iframe(width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen="")
+
+p
+  | For responsive #{'
         
-          
-            #Typography
+          
+            #Typography
             Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
             #Headings
             
@@ -317,8 +317,8 @@
   <dd>description list description</dd>
 </dl>
           
-          
-            #Tables
+          
+            #Tables
             Tables include default styles for tables and data sets.
             
               
@@ -378,8 +378,8 @@
   </tbody>
 </table>
           
-          
-            #Buttons
+          
+            #Buttons
             Buttons include simple button styles for actions in different types and sizes.
             
               
@@ -526,8 +526,8 @@
   <button class="btn">third button</button>
 </div> 
           
-          
-            #Forms
+          
+            #Forms
             Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
             
               
@@ -1208,11 +1208,11 @@
     </div>
   </fieldset>
           
-          
-            #Icons
+          
+            #Icons
           
-          
-            #Labels
+          
+            #Labels
             Labels are formatted text tags for highlighted, informative information.
             
               default labelprimary labelsecondary labelsuccess labelwarning labelerror label
@@ -1231,8 +1231,8 @@
 <!-- rounded labels -->
 <span class="label label-rounded label-primary">primary label</span>
           
-          
-            #Code
+          
+            #Code
             Code is used for styling inline and multiline code snippets.
             For inline code, you can use the <code> element. 
               For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it.
@@ -1249,8 +1249,8 @@
 &lt;<span class="tag">/button</span>&gt;
 </code></pre>
           
-          
-            #Media
+          
+            #Media
             Media includes responsive images, figures and video classes.
             #Images
             Add the img-responsive class to <img> elements. The images will scale with the parent sizes.
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 4d9f7ee..2665d0c 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -46,7 +46,7 @@
                   Forms
                   Icons
                   Labels
-                  Codes
+                  Code
                   Media
                 
               
@@ -129,14 +129,14 @@
       

       
         
-          
-            #Introduction
+          
+            #Introduction
              Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.
             
                Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
           
-          
-            #Installation
+          
+            #Installation
             There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.
             #Install manually
             Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):
@@ -161,8 +161,8 @@
             #Install from Bower
             bower install spectre.css --save
           
-          
-            #Custom version
+          
+            #Custom version
             You can customize your version of Spectre.css by editing Sass files in /src directory or removing unneeded components from .scss source files.
             Sass Source Code
             If you are looking for Less version of Spectre.css, please switch to Less branch.
@@ -364,11 +364,11 @@ gulp.task('prefix', 
             After you compile your version of Spectre in the /dist, run gulp prefix in the directory of Spectre.
           
-          
-            #Accessibility
+          
+            #Accessibility
           
-          
-            #Browser support
+          
+            #Browser support
             Spectre uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:
             
               Chrome LAST 4
@@ -380,8 +380,8 @@ gulp.task('prefix', 
             Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.
           
-          
-            #What's new
+          
+            #What's new
             September 2017
             
               Off-canvas: navigation layout that the sidebar can slide in and out of the viewport NEW
diff --git a/docs/layout.html b/docs/layout.html
index dd4fae5..b20594a 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -1,799 +1,1326 @@
 
 
-
-  
-  
-  
-  
-  
-  Layout - Spectre.css CSS Framework
-  
-  
-  
-  
-  
-  
-
-
-  
-    
-      
-        
-      
-      GitHub
-    
-
-    
-      
-        
-          
-          SPECTRE
-        
-      
-      
-        
-          
-            
-            
-              Getting started
-            
-            
-              
-                
-                  Introduction
-                
-                
-                  Installation
-                
-                
-                  Custom version
-                
-                
-                  Browser support
-                
-                
-                  What's new
-                
-              
+  
+    Elements - Spectre.css CSS Framework
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    
+      GitHub
+      
+        
+            SPECTRE
+        
+          
+            
+              
+              Getting started
+              
+                
+                  Introduction
+                  Installation
+                  Custom version
+                  Browser support
+                  What's new
+                
+              
             
-          
-          
-            
-            
-              Elements
-            
-            
-              
-                
-                  Typography
-                
-                
-                  Tables
-                
-                
-                  Buttons
-                
-                
-                  Forms
-                
-                
-                  Icons
-                
-                
-                  Labels
-                
-                
-                  Codes
-                
-                
-                  Media
-                
-              
+            
+              
+              Elements
+              
+                
+                  Typography
+                  Tables
+                  Buttons
+                  Forms
+                  Icons
+                  Labels
+                  Code
+                  Media
+                
+              
             
-          
-          
-            
-            
-              Layout
-            
-            
-              
-                
-                  Flexbox grid
-                
-                
-                  Responsive
-                
-                
-                  Navbar
-                
-              
+            
+              
+              Layout
+              
+                
+                  Flexbox grid
+                  Responsive
+                  Navbar
+                
+              
             
-          
-          
-            
-            
-              Components
-            
-            
-              
-                
-                  Accordions
-                
-                
-                  Avatars
-                
-                
-                  Badges
-                
-                
-                  Bars
-                
-                
-                  Breadcrumbs
-                
-                
-                  Cards
-                
-                
-                  Chips
-                
-                
-                  Empty states
-                
-                
-                  Menus
-                
-                
-                  Modals
-                
-                
-                  Navs
-                
-                
-                  Pagination
-                
-                
-                  Panels
-                
-                
-                  Popovers
-                
-                
-                  Steps
-                
-                
-                  Tabs
-                
-                
-                  Tiles
-                
-                
-                  Toasts
-                
-                
-                  Tooltips
-                
-              
+            
+              
+              Components
+              
+                
+                  Accordions
+                  Avatars
+                  Badges
+                  Bars
+                  Breadcrumbs
+                  Cards
+                  Chips
+                  Empty states
+                  Menus
+                  Modals
+                  Navs
+                  Pagination
+                  Panels
+                  Popovers
+                  Steps
+                  Tabs
+                  Tiles
+                  Toasts
+                  Tooltips
+                
+              
             
-          
-          
-            
-            
-              Utilities
-            
-            
-              
-                
-                  Colors
-                
-                
-                  Cursors
-                
-                
-                  Display
-                
-                
-                  Divider
-                
-                
-                  Loading
-                
-                
-                  Position
-                
-                
-                  Shapes
-                
-                
-                  Text
-                
-              
+            
+              
+              Utilities
+              
+                
+                  Colors
+                  Cursors
+                  Display
+                  Divider
+                  Loading
+                  Position
+                  Shapes
+                  Text
+                
+              
             
-          
-          
-            
-            
-              Experimentals
-            
-            
-              
-                
-                  Autocomplete
-                
-                
-                  Calendars
-                
-                
-                  Carousels
-                
-                
-                  Comparison sliders
-                
-                
-                  Filters
-                
-                
-                  Meters
-                
-                
-                  Off-canvas
-                
-                
-                  Parallax
-                
-                
-                  Progress
-                
-                
-                  Sliders
-                
-                
-                  Timelines
-                
-              
+            
+              
+              Experimentals
+              
+                
+                  Autocomplete
+                  Calendars
+                  Carousels
+                  Comparison sliders
+                  Filters
+                  Meters
+                  Off-canvas
+                  Parallax
+                  Progress
+                  Sliders
+                  Timelines
+                
+              
             
           
         
-      
-    
-
-    
-      
-    
-      
-        #Layout
-      
-
-      
-        
-          
-            
-            
-            
-            
-          
-          
-            
-            
-            
-          
-        
-      
-
-      
-        #Flexbox grid
-        
-          Layout includes flexbox based responsive grid system with 12 columns. 
-        
-        
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-        
-
-        
-          
-            col-12 (100%)
-          
-        
-        
-          
-            col-9 (75%)
-          
-        
-        
-          
-            col-6 (50%)
-          
-        
-        
-          
-            col-3 (25%)
-          
-        
-
-        
-          Add the columns class to a container with the container class. And add any element you want with the column class inside the container. These columns will take up the space equally. You can specific the width of each column by adding class col-[1-12].
-          And you can add the col-gapless class to the columns to have gapless columns.
-        
-
-        
-          
-            col-6 (gapless)
-          
-          
-            col-6 (gapless)
-          
-        
+      

+      
+        
+          
+            #Typography
+            Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
+            #Headings
+            
+              
+                H1 Heading 40px
+              
+              
+                H2 Heading 32px
+              
+              
+                H3 Heading 28px
+              
+              
+                H4 Heading 24px
+              
+              
+                H5 Heading 20px
+              
+              
+                H6 Heading 16px
+              
+            
+            <h1>H1 Heading</h1>
+<h1>H1 Heading <small class="label">40px</small></h1>
+<span class="h1">H1 Heading</span>
+
+            #Paragraphs
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+            
+            Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+            <p>Lorem ipsum dolor sit amet, ...</p>
+<p>...</p>
+
+            #Semantic text elements
+            
+              I18Nabbr
+              Boldstrongb
+              
+                Citationcite
+              
+              Hello World!code
+              
+                Deleteddel
+              
+              Emphasisem
+              Italici
+              Insertedins
+              Ctrl + Skbd
+              
+                Highlightedmark
+              
+              
+                漢 
+                  kan字 
+                  ji
+                ruby
+              
+              
+                Strikethroughs
+              
+              Samplesamp
+              Text _Subscriptedsub
+              Text ^{Superscripted}sup
+              
+                20:00time
+              
+              
+                Underlineu
+              
+              
+                x = 
+                y + 2var
+              
+            
+            #Optimized for East Asian fonts
+            你好, こんにちは,안녕하세요
+            Chinese (Simplified)
+            革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
+            Chinese (Tranditional)
+            山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
+            Japanese
+            祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌に風の前の塵に同じ。
+            Korean
+            나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
+            Use the lang attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.
+            <p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
+<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
+<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
+
+            And you can use the cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
+            
+              祇園
+              精舎の鐘の声、諸行無常の響きあり。
+            
+            
+              祇園
+              精舎の鐘の声、諸行無常の響きあり。
+            
+            <p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
+<p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
+
+            #Fonts
+            Spectre sets the most common and best font-family for each OS with fallback support in old systems.
+              There are also fonts targeted East Asian typography.
+            
+            /* Western typography targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+/* Monospace typography targeted */
+font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
 
-        
-          By default, Spectre grid has multi-line flexbox enabled. You can add the col-oneline class to columns to make all its child columns positioned in the same single row.
-        
+/* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+/* Japanese (lang="ja") targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
+/* Korean (lang="ko") targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
+
+            #Blockquote
+            
+              The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
+              - Bill Gates
+            
+            <blockquote>
+  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
+  <cite>- Bill Gates</cite>
+</blockquote>
+
+            #Lists
+            
+              
+                
+                  list item 1
+                  list item 2
+                    
+                      list item 2.1
+                      list item 2.2
+                      list item 2.3
+                    
+                  
+                  list item 3
+                
+              
+              
+                
+                  list item 1
+                  list item 2
+                    
+                      list item 2.1
+                      list item 2.2
+                      list item 2.3
+                    
+                  
+                  list item 3
+                
+              
+              
+                
+                  description list term 1
+                  description list description 1
+                  description list term 2
+                  description list description 2
+                  description list term 3
+                  description list description 3
+                
+              
+            
+            <!-- unordered list -->
+<ul>
+  <li>list item 1</li>
+  <li>list item 2
+    <ul>
+      <li>list item 2.1</li>
+      <li>list item 2.2</li>
+      <li>list item 2.3</li>
+    </ul>
+  </li>
+  <li>list item 3</li>
+</ul>
 
-        
-          
-            col-8
+<!-- description list -->
+<dl>
+  <dt>description list term</dt>
+  <dd>description list description</dd>
+</dl>
           
-          
-            col-8
+          
+            #Tables
+            Tables include default styles for tables and data sets.
+            
+              
+                

+                  
+                    
+                      
+                      
+                      
+                    
+                  
+                  
+                    
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                    
+                    
+                      
+                      
+                      
+                    
+                  
+                Name Genre Release date
The Shawshank Redemption Crime, Drama 14 October 1994
The Godfather Crime, Drama 24 March 1972
Schindler's List Biography, Drama, History 4 February 1994
Se7en Crime, Drama, Mystery 22 September 1995

+              

+

Add the table class to any <table> element. + The class will add padding, border and emphasized table header. + Use the table-striped class to <table> to add zebra striped style. + For hoverable table rows, you can add the table-hover class to enable hover style. +

Use the active class to make <tr> element highlighted.

<table class="table table-striped table-hover">
+  <thead>
+    <tr>
+      <th>name</th>
+      <th>genre</th>
+      <th>release date</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr class="active">
+      <td>The Shawshank Redemption</td>
+      <td>Crime, Drama</td>
+      <td>14 October 1994</td>
+    </tr>
+  </tbody>
+</table>

- - -

<div class="container">
-  <div class="columns">
-    <div class="column col-6">col-6</div>
-    <div class="column col-3">col-3</div>
-    <div class="column col-2">col-2</div>
-    <div class="column col-1">col-1</div>
-  </div>
-
-  <div class="columns col-gapless">
-    <div class="column col-6">col-6</div>
-    <div class="column col-6">col-6</div>
-  </div>
-
-  <div class="columns col-oneline">
-    <div class="column col-8">col-8</div>
-    <div class="column col-8">col-8</div>
-  </div>
-</div>
+          
+            #Buttons
+            Buttons include simple button styles for actions in different types and sizes.
+            
+              
+                
+                
+                
+              
+            
+            Add the btn class to <a>, <input> or <button> elements for a default button. 
+              There are classes btn-primary and btn-link for predefined primary and link buttons.
+            
+            <button class="btn">default button</button>
+<button class="btn btn-primary">primary button</button>
+<button class="btn btn-link">link button</button>
 
+            #Button colors
+            
+              
+                
+                
+              
+            
+            Add the btn-success or btn-error class for success (green) or error (red) button color.
+              If you need more button colors, please use button mixins to create your own button color variants.
+            
+            <button class="btn btn-success">success button</button>
+<button class="btn btn-error">error button</button>
+
+            #Button sizes
+            
+              
+                
+                
+              
+              
+                
+                
+              
+              
+                
+                
+              
+            
+            Add the btn-sm or btn-lg class for small or large button size. 
+              Also, you can add the btn-block class for a full-width button.
+            
+            <button class="btn btn-lg">large button</button>
+<button class="btn btn-sm">small button</button>
 
-        Grid offset
-        
-          The Flexbox grid provides margin auto utilities to set offset. There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.
-        
+<button class="btn btn-block">block button</button>
 
-        
-          
-            col-2
-          
-          
-            col-4 col-mx-auto
-          
-        
-        
-          
-            col-2
-          
-          
-            col-4 col-ml-auto
-          
-        
-        
-          
-            col-4 col-ml-auto
-          
-          
-            col-2
-          
-        
-        
-          
-            col-4 col-mx-auto
-          
-          
-            col-2
-          
-        
-        
-          
-            col-4 col-mr-auto
-          
-          
-            col-2
-          
-        
-        
-          
-            col-4 col-mx-auto
-          
-        
-
-
-<div class="container">
-  <div class="columns">
-    <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
-    <div class="column col-2">col-2</div>
-  </div>
-</div>
+<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
+<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
+<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
 
-
-        Grid nesting
-        
-          To nest grids, add the new columns and column structure within an existing column.
-        
-        
-          
-            col-6
+            Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).
             
-              
-                col-6
+              
+                
+                
+                
               
-              
-                col-6
+              
+                
+                
+                
               
             
-          
-          
-            col-6
-          
-        
-
-
-<div class="container">
-  <div class="columns">
-    <div class="column col-6">col-6
-      <div class="columns">
-        <div class="column col-6">col-6</div>
-        <div class="column col-6">col-6</div>
-      </div>
-    </div>
-    <div class="column col-6">col-6</div>
-  </div>
-</div>
+            <button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
+<button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
 
-
-      

-
-      
-        
-          
-        
-      
-
-      
-        #Responsive
-        
-          Spectre provides a neat responsive layout grid system and responsive visibility utilities. 
-        
-        
-          
-            col-10 
 col-lg-8 
 col-md-6 
 col-sm-4
-          
-          
-            col-2 
 col-lg-4 
 col-md-6 
 col-sm-8
+            #Button states
+            Add the active class for active button state style.
+            
+              
+                
+                
+                
+              
+            
+            Add the disabled class or the disabled attribute for disabled button state style.
+            
+              
+                
+                
+                
+              
+            
+            <!-- buttons with disabled state -->
+<button class="btn disabled" tabindex="-1">disabled button</button>
+<button class="btn" disabled tabindex="-1">disabled button</button>
+
+            A button with the loading class can show loading indicator.
+            
+              
+                
+                
+                
+              
+            
+            <!-- buttons with loading state -->
+<button class="btn loading">button</button>
+<button class="btn btn-primary loading">primary button</button>
+
+            #Button groups
+            
+              
+                
+                  
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                  
+                
+              
+            
+            
+              
+                
+                  
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                  
+                
+              
+            
+            If you want to use buttons as a group, add the btn-group class to the container.
+              You can add the btn-group-block class for a full-width button group.
+            
+            <div class="btn-group btn-group-block">
+  <button class="btn">first button</button>
+  <button class="btn">second button</button>
+  <button class="btn">third button</button>
+</div> 
           
-        
-
-        
-          There are col-xs-[1-12], col-sm-[1-12], col-md-[1-12], col-lg-[1-12] and col-xl-[1-12] available for flexible grid across mobile, tablet and desktop viewport usage.
-          
-            col-xs-[1-12] apply to window width smaller than or equal to 480px. 
-            col-sm-[1-12] apply to window width smaller than or equal to 600px. 
-            col-md-[1-12] apply to window width smaller than or equal to 840px. 
-            col-lg-[1-12] apply to window width smaller than or equal to 960px. 
-            col-xl-[1-12] apply to window width smaller than or equal to 1280px. 
-            col-[1-12] apply to all window width, including the width wider than 1280px. 
-          
-        
-
-
-<div class="container">
-  <div class="columns">
-    <div class="column col-xs-6">col-xs-6</div>
-    <div class="column col-xs-3">col-xs-3</div>
-    <div class="column col-xs-3">col-xs-3</div>
-  </div>
-</div>
+          
+            #Forms
+            Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
+            
+              
+                
+                  Name
+                  
+                
+                
+                  Email
+                  
+                
+              
+            
+            <!-- form input control -->
+<div class="form-group">
+  <label class="form-label" for="input-example-1">Name</label>
+  <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+</div>
 
-
-        Responsive container
-        
-          The responsive layout also provides fixed-width containers. Use grid-xs(480px), grid-sm (600px), grid-md (840px), grid-lg (960px) or grid-xl (1280px) to container for a fixed-width container with the specific max-width.
-        
-
-
-<!-- 100% width container with max-width set to grid-lg (960px) -->
-<div class="container grid-lg">
-  <div class="columns">
-    ...
-  </div>
-</div>
+            
+              
+                
+                  Message
+                  
+                
+              
+            
+            <!-- form textarea control -->
+<div class="form-group">
+  <label class="form-label" for="input-example-3">Message</label>
+  <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
+</div>
 
+            
+              
+                
+                  
+                
+                
+                  
+                
+              
+            
+            <!-- form select control -->
+<div class="form-group">
+  <select class="form-select">
+    <option>Choose an option</option>
+    <option>Slack</option>
+    <option>Skype</option>
+    <option>Hipchat</option>
+  </select>
+</div>
+
+            
+              
+                
+                  
+                    Gender
+                    
+                       Male
+                    
+                    
+                       Female
+                    
+                  
+                
+              
+            
+            <!-- form radio control -->
+<div class="form-group">
+  <label class="form-label">Gender</label>
+  <label class="form-radio">
+    <input type="radio" name="gender" checked>
+    <i class="form-icon"></i> Male
+  </label>
+  <label class="form-radio">
+    <input type="radio" name="gender">
+    <i class="form-icon"></i> Female
+  </label>
+</div>
+
+            
+              
+                
+                  
+                     Send me emails with news and tips
+                  
+                
+                
+                  
+                     Send me emails with news and tips
+                  
+                
+              
+            
+            <!-- form switch control -->
+<div class="form-group">
+  <label class="form-switch">
+    <input type="checkbox">
+    <i class="form-icon"></i> Send me emails with news and tips
+  </label>
+</div>
+
+            
+              
+                
+                  
+                     Remember me
+                  
+                
+                
+                  
+                     Remember me
+                  
+                
+              
+            
+            <!-- form checkbox control -->
+<div class="form-group">
+  <label class="form-checkbox">
+    <input type="checkbox">
+    <i class="form-icon"></i> Remember me
+  </label>
+</div>
+
+            You can use :indeterminate pseudo class for indeterminate state of checkboxes.
+            #Horizontal forms
+            If you want to have a horizontal form, add the form-horizontal class to the <form> container.
+              And add the col-<1-12> and col-xs/sm/lg/xl-<1-12> class to the child elements for responsive form row layout.
+            
+            
+              
+                
+                  
+                    
+                      Name
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Email
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Gender
+                    
+                    
+                      
+                         Male
+                      
+                      
+                         Female
+                      
+                    
+                  
+                  
+                    
+                      Source
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      
+                         Send me emails with news and tips
+                      
+                    
+                  
+                  
+                    
+                      Message
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      
+                         Remember me
+                      
+                    
+                  
+                
+              
+            
+            <form class="form-horizontal">
+  <div class="form-group">
+    <div class="col-3 col-sm-12">
+      <label class="form-label" for="input-example-1">Name</label>
+    </div>
+    <div class="col-9 col-sm-12">
+      <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+    </div>
+  </div>
+  <!-- form structure -->
+</form>
+
+            #Form sizes
+            For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.
+            
+              
+                Label
+              
+              
+                
+              
+              
+                
+              
+            
+            
+              
+                Label
+              
+              
+                
+              
+              
+                
+              
+            
+            You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.
+            #Form icons
+            Spectre Form components has Spectre Icons support.
+            Add a wrapper with the has-icon-left/has-icon-right class to <input> element.
+              And add the icon with form-icon class next to the <input>.
+            
+            
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+            
+            
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+            
+            <!-- form input with Spectre icon -->
+<div class="has-icon-left">
+  <input type="text" class="form-input" placeholder="...">
+  <i class="form-icon icon icon-check"></i>
+</div>
+
+            You can use the loading class for loading or posting state.
+            
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+              
+                
+                  
+                
+              
+            
+            <!-- form input with loading icon -->
+<div class="has-icon-right">
+  <input type="text" class="form-input" placeholder="...">
+  <i class="form-icon loading"></i>
+</div>
+
+            #Input types
+            
+              
+                
+                  
+                    
+                      Email
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      URL
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Search
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Tel
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Password
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Number
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Date
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      Color
+                    
+                    
+                      
+                    
+                  
+                  
+                    
+                      File
+                    
+                    
+                      
+                    
+                  
+                
+              
+            
+            #Input groups
+            
+              
+                
+                  
+                  
+                
+              
+              
+                slack.com/
+                  
+                  
+                
+              
+            
+            
+              
+                
+                  
+                  
+                
+              
+              
+                slack.com/
+                  
+                  
+                
+              
+            
+            
+              
+                
+                  
+                    
+                  
+                  
+                
+              
+              
+                
+                  
+                    
+                  
+                  
+                
+              
+            
+            
+              
+                
+                  
+                  
+                
+              
+              
+                slack.com/
+                  
+                  
+                
+              
+            
+            If you want to attach text and button along with an input, add the input-group class to the input container.
+              And add the input-group-addon class to the text element and input-group-btn to the button element.
+            
+            <!-- normal input group -->
+<div class="input-group">
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="...">
+</div>
 
-        Responsive visibility
-        
-          The responsive visibility utilities help show and hide elements on specific viewport sizes. 
-        
-        
-          
-            
-              
-              
-              
-              
-              
-              
-            
-          
-          
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-          
-        size-xs size-sm size-md size-lg size-xl
hide-xs 
hide-sm 
hide-md 
hide-lg 
hide-xl 
-
-        
-          For hiding elements on specific viewport sizes, there are classes hide-xs, hide-sm, hide-md, hide-lg and hide-xl available.
-          
-            hide-xs hides elements when the window width is smaller than or equal to 480px. 
-            hide-sm hides elements when the window width is smaller than or equal to 600px. 
-            hide-md hides elements when the window width is smaller than or equal to 840px. 
-            hide-lg hides elements when the window width is smaller than or equal to 960px. 
-            hide-xl hides elements when the window width is smaller than or equal to 1280px. 
-          
-        
+<!-- large input group -->
+<div class="input-group">
+  <span class="input-group-addon addon-lg">...</span>
+  <input type="text" class="form-input input-lg" placeholder="...">
+</div>
 
-        
-          
-            
-              
-              
-              
-              
-              
-              
-            
-          
-          
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-            
-              
-              
-              
-              
-              
-              
-            
-          
-        size-xs size-sm size-md size-lg size-xl
show-xs 
show-sm 
show-md 
show-lg 
show-xl 
+<!-- normal input group with button -->
+<div class="input-group">
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="...">
+  <button class="btn btn-primary input-group-btn">Submit</button>
+</div>
+
+            #Form validation styles
+            To use form validation styles, you can either add is-success or is-error class to the controls or add has-success or has-error class to parent elements.
+              Use the form-input-hint class to provide form validation success and error messages.
+            
+            
+              
+                
+                  Input
+                  
+                    Name
+                    
+                    The name is valid.
+                  
+                  
+                    Password
+                    
+                    Passwords must have at least 8 characters.
+                  
+                  
+                    Email
+                    
+                    The Email address is unavailable.
+                  
+                
+                
+                  Select
+                  
+                    
+                    The option is invalid.
+                  
+                  
+                    
+                    The option is available.
+                  
+                
+                
+                  Checkbox, Radio and Switch (Error state only)
+                  
+                    
+                       I'm not a robot.
+                    
+                  
+                  
+                    
+                       Male
+                    
+                    
+                       Female
+                    
+                  
+                  
+                    
+                       Send me emails with news and tips
+                    
+                  
+                
+              
+            
+            <form>
+  <!-- form validation class: has-success -->
+  <div class="form-group has-success">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input" type="text" id="input-example-1" placeholder="...">
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
 
-        
-          For showing elements on specific viewport sizes, there are classes show-xs, show-sm, show-md, show-lg and show-xl available.
-          
-            show-xs shows elements when the window width is smaller than or equal to 480px. 
-            show-sm shows elements when the window width is smaller than or equal to 600px. 
-            show-md shows elements when the window width is smaller than or equal to 840px. 
-            show-lg shows elements when the window width is smaller than or equal to 960px. 
-            show-xl shows elements when the window width is smaller than or equal to 1280px. 
-          
-          Spectre also has a responsive web test tool Responsive Resizer. You can clone the GitHub Repo to use it locally or use it online.
-          Responsive Resizer
-        
-      

+  <!-- form validation class: is-success -->
+  <div class="form-group">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
 
-      
-        #Navbar
-        
-          Navbar is a layout container that appears in the header of apps and websites. 
-        
-        
-          
-            
-              
-                Spectre.css
-                Docs
-                GitHub
-              
-              
-                
-                  
-                  
-                
+  <!-- form validation example for checkbox, radio and switch -->
+  <div class="form-group">
+    <label class="form-checkbox is-error">
+      <input type="checkbox">
+      <i class="form-icon"></i> Remember me
+    </label>
+  </div>
+</form>
+

+            #Form disabled styles
+            
+               Add the disabled attribute to the element or <fieldset> for a disabled form components style.
+            
+              
+                
+                  
+                    
+                      Name
+                      
+                    
+                    
+                      Gender
+                      
+                         Male
+                      
+                      
+                         Female
+                      
+                    
+                    
+                      
+                    
+                    
+                      
+                         Send me emails with news and tips
+                      
+                    
+                    
+                      Message
+                      
+                    
+                    
+                      
+                         Remember me
+                      
+                    
+                  
+                
               
             
+            <form action="#forms">
+  <fieldset disabled>
+    <div class="form-group">
+      <label class="form-label" for="input-example-19">Name</label>
+      <input class="form-input" type="text" id="input-example-19" placeholder="Name">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Gender</label>
+      <label class="form-radio">
+        <input type="radio" name="gender" disabled>
+        <i class="form-icon"></i> Male
+      </label>
+      <label class="form-radio">
+        <input type="radio" name="gender" disabled>
+        <i class="form-icon"></i> Female
+      </label>
+    </div>
+    <div class="form-group">
+      <select class="form-select" disabled>
+        <option>Choose an option</option>
+        <option>Slack</option>
+        <option>Skype</option>
+        <option>Hipchat</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-switch">
+        <input type="checkbox" disabled>
+        <i class="form-icon"></i> Send me emails with news and tips
+      </label>
+    </div>
+    <div class="form-group">
+      <label class="form-label" for="input-example-20">Message</label>
+      <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea>
+    </div>
+    <div class="form-group">
+      <label class="form-checkbox">
+        <input type="checkbox" disabled>
+        <i class="form-icon"></i> Remember me
+      </label>
+    </div>
+  </fieldset>
           

-        

-        
-          The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the navbar-section class will be evenly distributed in the container.
-        
+          
+            #Icons
+          
+          
+            #Labels
+            Labels are formatted text tags for highlighted, informative information.
+            
+              default labelprimary labelsecondary labelsuccess labelwarning labelerror label
+            
+            Add the label class to <span> or <small> elements.
+              You can add another class label-primary, label-secondary, label-success, label-warning and label-error for colored labels.
+            
+            
+              default labelprimary label
+            
+            Add the label-rounded class to have rounded labels.
+            <!-- normal labels -->
+<span class="label">default label</span>
+<span class="label label-primary">primary label</span>
 
-
-<header class="navbar">
-  <section class="navbar-section">
-    <a href="#" class="navbar-brand mr-2">Spectre.css</a>
-    <a href="#" class="btn btn-link">Docs</a>
-    <a href="https://github.com/picturepan2/spectre" class="btn btn-link">GitHub</a>
-  </section>
-  <section class="navbar-section">
-    <div class="input-group input-inline">
-      <input class="form-input" type="text" placeholder="search">
-      <button class="btn btn-primary input-group-btn">Search</button>
-    </div>
-  </section>
-</header>
+<!-- rounded labels -->
+<span class="label label-rounded label-primary">primary label</span>
+          

+          
+            #Code
+            Code is used for styling inline and multiline code snippets.
+            For inline code, you can use the <code> element. 
+              For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it.
+              The data-lang ibute is rendered as the language name in the top right.
+            
+            <!-- code snippets -->
+<button class="btn">
+  Submit
+</button>
 
-
-        
-          You can use navbar-center class to have a centered section.
-        
-
-        
-          
-            
-              
-                Docs
-                Examples
+            <pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
+  Submit
+&lt;<span class="tag">/button</span>&gt;
+</code></pre>
+          
+          
+            #Media
+            Media includes responsive images, figures and video classes.
+            #Images
+            Add the img-responsive class to <img> elements. The images will scale with the parent sizes.
+            
+              
+            
+            Add the img-fit-contain or img-fit-cover class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container).
+              This feature can replace the classic background image trick. Microsoft Edge support is shipped  with Build Number 16299+.
+            
+            
+              
+                
+                  img-fit-contain
+                
               
-              
-                
+              
+                
+                  img-fit-cover
+                
+              
+            
+            <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
+<img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
+<img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
+
+            #Figure
+            You can use the element <figure> for an image with a caption.
+              Add the figure class to <figure> element.
+              The images with the img-responsive class will be responsive.
+              And the included class figure-caption will provide basic style for caption.
+              Also, you can use text-left, text-center and text-right for caption alignment.
+            
+            
+              
+                
+                  macOS Yosemite wallpaper
+                
               
-              
-                Twitter
-                GitHub
+            
+            #Video
+            For responsive video, add a container with the video-responsive class. 
+              Insert any YouTube, Youku or other iframe/embed video inside the container. 
+              The ratio is 16:9 by default.
+              You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.
+            
+            
+              
+                
+                  
+                
               
             
+            For responsive <video> elements, you can add the video-responsive class directly.
+            <div class="video-responsive video-responsive-4-3">
+  <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
+</div>
+
+<video class="video-responsive" src="...">...</video>
           
         
-
-
-<header class="navbar">
-  <section class="navbar-section">
-    <a href="#" class="btn btn-link">Docs</a>
-    <a href="#" class="btn btn-link">Examples</a>
-  </section>
-  <section class="navbar-center">
-    <!-- centered logo or brand -->
-  </section>
-  <section class="navbar-section">
-    <a href="#" class="btn btn-link">Twitter</a>
-    <a href="#" class="btn btn-link">GitHub</a>
-  </section>
-</header>
-
-
       
-
-      
-        GitHub | Twitter | PayPal Donate | Version 
-        Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
-      
-
     
-  
-
-  
-
-
+    
+  
+
\ No newline at end of file
diff --git a/docs/src/_docs-layout.pug b/docs/src/_docs-layout.pug
index 7ae771c..ae2da02 100644
--- a/docs/src/_docs-layout.pug
+++ b/docs/src/_docs-layout.pug
@@ -32,7 +32,7 @@ block content
             {url: '#forms', name: 'Forms'},
             {url: '#icons', name: 'Icons'},
             {url: '#labels', name: 'Labels'},
-            {url: '#codes', name: 'Codes'},
+            {url: '#code', name: 'Code'},
             {url: '#media', name: 'Media'}
           )
           +docs-accordion(
diff --git a/docs/src/_mixins.pug b/docs/src/_mixins.pug
index 54e76d7..ccbe89e 100644
--- a/docs/src/_mixins.pug
+++ b/docs/src/_mixins.pug
@@ -9,8 +9,8 @@ mixin docs-accordion(id, name, ...pages)
             a(href=id + '.html' + page.url)= page.name
 
 mixin docs-heading(id, name)
-  .container
-    h3.s-title(id=id)
+  .container(id=id)
+    h3.s-title
       a.anchor(href='#'+id aria-hidden='true') #
       | #{name}
     if block
diff --git a/docs/src/elements.pug b/docs/src/elements.pug
index 809fe0f..3f1e270 100644
--- a/docs/src/elements.pug
+++ b/docs/src/elements.pug
@@ -36,6 +36,4 @@ block docs-content
   
   //- Media
   +docs-heading('media', 'Media')
-    include contents/media.pug
-
-    
\ No newline at end of file
+    include contents/media.pug
\ No newline at end of file
diff --git a/docs/src/layout.pug b/docs/src/layout.pug
new file mode 100644
index 0000000..3f1e270
--- /dev/null
+++ b/docs/src/layout.pug
@@ -0,0 +1,39 @@
+extends _docs-layout.pug
+
+block variables
+  - var title = 'Elements - Spectre.css CSS Framework'
+  - var description = ''
+  - var current = 'elements'
+
+block docs-content
+  //- Typography
+  +docs-heading('typography', 'Typography')
+    include contents/typography.pug
+    
+  //- Tables
+  +docs-heading('tables', 'Tables')
+    include contents/tables.pug
+
+  //- Buttons
+  +docs-heading('buttons', 'Buttons')
+    include contents/buttons.pug
+
+  //- Forms
+  +docs-heading('forms', 'Forms')
+    include contents/forms.pug
+  
+  //- Icons
+  +docs-heading('icons', 'Icons')
+    include contents/icons.pug
+
+  //- Labels
+  +docs-heading('labels', 'Labels')
+    include contents/labels.pug
+
+  //- Codes
+  +docs-heading('code', 'Code')
+    include contents/code.pug
+  
+  //- Media
+  +docs-heading('media', 'Media')
+    include contents/media.pug
\ No newline at end of file
-- 
cgit v1.3.1-23-gd82d


From b903b30d81eb531eead430db3c9cc934ab5dea8f Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Mon, 4 Jun 2018 21:12:57 +0800
Subject: Update old docs to new Pug templates

---
 README.md                           |    4 +-
 docs/components.html                | 3661 ++++++++++++++---------------------
 docs/elements.html                  |    4 +-
 docs/experimentals.html             | 2012 +++++++++----------
 docs/getting-started.html           |    4 +-
 docs/layout.html                    |    4 +-
 docs/src/_docs-layout.pug           |    4 +-
 docs/src/components.pug             |   83 +
 docs/src/contents/accordions.pug    |  113 ++
 docs/src/contents/autocomplete.pug  |  119 ++
 docs/src/contents/avatars.pug       |   93 +
 docs/src/contents/badges.pug        |   59 +
 docs/src/contents/bars.pug          |   84 +
 docs/src/contents/breadcrumbs.pug   |   45 +
 docs/src/contents/calendars.pug     |  195 ++
 docs/src/contents/cards.pug         |   94 +
 docs/src/contents/carousels.pug     |   39 +
 docs/src/contents/chips.pug         |   44 +
 docs/src/contents/colors.pug        |   89 +
 docs/src/contents/comparison.pug    |   29 +
 docs/src/contents/cursor.pug        |   31 +
 docs/src/contents/display.pug       |   26 +
 docs/src/contents/divider.pug       |   54 +
 docs/src/contents/empty.pug         |   50 +
 docs/src/contents/experimentals.pug |    4 +
 docs/src/contents/filters.pug       |  107 +
 docs/src/contents/loading.pug       |   21 +
 docs/src/contents/menu.pug          |  184 ++
 docs/src/contents/meters.pug        |   22 +
 docs/src/contents/modals.pug        |  141 ++
 docs/src/contents/nav.pug           |   57 +
 docs/src/contents/off-canvas.pug    |   45 +
 docs/src/contents/pagination.pug    |  102 +
 docs/src/contents/panels.pug        |  114 ++
 docs/src/contents/parallax.pug      |   34 +
 docs/src/contents/popovers.pug      |   82 +
 docs/src/contents/position.pug      |   40 +
 docs/src/contents/progress.pug      |   17 +
 docs/src/contents/shapes.pug        |   17 +
 docs/src/contents/sliders.pug       |   18 +
 docs/src/contents/steps.pug         |   47 +
 docs/src/contents/tabs.pug          |  132 ++
 docs/src/contents/text.pug          |   36 +
 docs/src/contents/tiles.pug         |   92 +
 docs/src/contents/timelines.pug     |   81 +
 docs/src/contents/toasts.pug        |   49 +
 docs/src/contents/tooltips.pug      |   24 +
 docs/src/experimentals.pug          |   55 +
 docs/src/utilities.pug              |   39 +
 docs/utilities.html                 | 1060 ++++------
 50 files changed, 5557 insertions(+), 4003 deletions(-)
 create mode 100644 docs/src/components.pug
 create mode 100644 docs/src/contents/accordions.pug
 create mode 100644 docs/src/contents/autocomplete.pug
 create mode 100644 docs/src/contents/avatars.pug
 create mode 100644 docs/src/contents/badges.pug
 create mode 100644 docs/src/contents/bars.pug
 create mode 100644 docs/src/contents/breadcrumbs.pug
 create mode 100644 docs/src/contents/calendars.pug
 create mode 100644 docs/src/contents/cards.pug
 create mode 100644 docs/src/contents/carousels.pug
 create mode 100644 docs/src/contents/chips.pug
 create mode 100644 docs/src/contents/colors.pug
 create mode 100644 docs/src/contents/comparison.pug
 create mode 100644 docs/src/contents/cursor.pug
 create mode 100644 docs/src/contents/display.pug
 create mode 100644 docs/src/contents/divider.pug
 create mode 100644 docs/src/contents/empty.pug
 create mode 100644 docs/src/contents/experimentals.pug
 create mode 100644 docs/src/contents/filters.pug
 create mode 100644 docs/src/contents/loading.pug
 create mode 100644 docs/src/contents/menu.pug
 create mode 100644 docs/src/contents/meters.pug
 create mode 100644 docs/src/contents/modals.pug
 create mode 100644 docs/src/contents/nav.pug
 create mode 100644 docs/src/contents/off-canvas.pug
 create mode 100644 docs/src/contents/pagination.pug
 create mode 100644 docs/src/contents/panels.pug
 create mode 100644 docs/src/contents/parallax.pug
 create mode 100644 docs/src/contents/popovers.pug
 create mode 100644 docs/src/contents/position.pug
 create mode 100644 docs/src/contents/progress.pug
 create mode 100644 docs/src/contents/shapes.pug
 create mode 100644 docs/src/contents/sliders.pug
 create mode 100644 docs/src/contents/steps.pug
 create mode 100644 docs/src/contents/tabs.pug
 create mode 100644 docs/src/contents/text.pug
 create mode 100644 docs/src/contents/tiles.pug
 create mode 100644 docs/src/contents/timelines.pug
 create mode 100644 docs/src/contents/toasts.pug
 create mode 100644 docs/src/contents/tooltips.pug
 create mode 100644 docs/src/experimentals.pug
 create mode 100644 docs/src/utilities.pug

(limited to 'docs/elements.html')

diff --git a/README.md b/README.md
index c5a47a8..8d249e9 100644
--- a/README.md
+++ b/README.md
@@ -69,8 +69,8 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 - [Cards](https://picturepan2.github.io/spectre/components.html#cards)
 - [Chips](https://picturepan2.github.io/spectre/components.html#chips)
 - [Empty states](https://picturepan2.github.io/spectre/components.html#empty)
-- [Menus](https://picturepan2.github.io/spectre/components.html#menus)
-- [Navs](https://picturepan2.github.io/spectre/components.html#navs)
+- [Menu](https://picturepan2.github.io/spectre/components.html#menu)
+- [Nav](https://picturepan2.github.io/spectre/components.html#nav)
 - [Modals](https://picturepan2.github.io/spectre/components.html#modals)
 - [Pagination](https://picturepan2.github.io/spectre/components.html#pagination)
 - [Panels](https://picturepan2.github.io/spectre/components.html#panels)
diff --git a/docs/components.html b/docs/components.html
index fb2ddd8..4185433 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1,2384 +1,1633 @@
 
 
-
-  
-  
-  
-  
-  
-  Components - Spectre.css CSS Framework
-  
-  
-  
-  
-  
-  
-
-
-  
-    
-      
-        
-      
-      GitHub
-    
-
-    
-      
-        
-          
-          SPECTRE
-        
-      
-      
-        
-          
-            
-            
-              Getting started
-            
-            
-              
-                
-                  Introduction
-                
-                
-                  Installation
-                
-                
-                  Custom version
-                
-                
-                  Browser support
-                
-                
-                  What's new
-                
-              
-            
-          
-          
-            
-            
-              Elements
-            
-            
-              
-                
-                  Typography
-                
-                
-                  Tables
-                
-                
-                  Buttons
-                
-                
-                  Forms
-                
-                
-                  Icons
-                
-                
-                  Labels
-                
-                
-                  Codes
-                
-                
-                  Media
-                
-              
-            
-          
-          
-            
-            
-              Layout
-            
-            
-              
-                
-                  Flexbox grid
-                
-                
-                  Responsive
-                
-                
-                  Navbar
-                
-              
-            
-          
-          
-            
-            
-              Components
-            
-            
-              
-                
-                  Accordions
-                
-                
-                  Avatars
-                
-                
-                  Badges
-                
-                
-                  Bars
-                
-                
-                  Breadcrumbs
-                
-                
-                  Cards
-                
-                
-                  Chips
-                
-                
-                  Empty states
-                
-                
-                  Menus
-                
-                
-                  Modals
-                
-                
-                  Navs
-                
-                
-                  Pagination
-                
-                
-                  Panels
-                
-                
-                  Popovers
-                
-                
-                  Steps
-                
-                
-                  Tabs
-                
-                
-                  Tiles
-                
-                
-                  Toasts
-                
-                
-                  Tooltips
-                
-              
-            
-          
-          
-            
-            
-              Utilities
-            
-            
-              
-                
-                  Colors
-                
-                
-                  Cursors
-                
-                
-                  Display
-                
-                
-                  Divider
-                
-                
-                  Loading
-                
-                
-                  Position
-                
-                
-                  Shapes
-                
-                
-                  Text
-                
-              
-            
-          
-          
-            
-            
-              Experimentals
-            
-            
-              
-                
-                  Autocomplete
-                
-                
-                  Calendars
-                
-                
-                  Carousels
-                
-                
-                  Comparison sliders
-                
-                
-                  Filters
-                
-                
-                  Meters
-                
-                
-                  Off-canvas
-                
-                
-                  Parallax
-                
-                
-                  Progress
-                
-                
-                  Sliders
-                
-                
-                  Timelines
-                
-              
-            
-          
-        
-      
-    
-
-    
-
-    
-      
-        #Components
-      
-
-      
-        
-          
-            
-            
-            
-            
-          
-          
-            
-            
-            
-          
-        
-      
-      
-      
-        #Accordions
-        
-          Accordions are used to toggle sections of content.
-        
-        
-          
+  
+    Components - Spectre.css CSS Framework
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    
+      GitHub
+      
+        
+            SPECTRE
+        
+          
             
-              
-              
-                
-                Elements
-              
+              
+              Getting started
               
                 
-                  
-                    Element 1
-                  
-                  
-                    Element 2
-                  
+                  Introduction
+                  Installation
+                  Custom version
+                  Browser support
+                  What's new
                 
               
             
             
-              
-              
-                
-                Layout
-              
+              
+              Elements
               
                 
-                  
-                    Layout 1
-                  
-                  
-                    Layout 2
-                  
+                  Typography
+                  Tables
+                  Buttons
+                  Forms
+                  Icons
+                  Labels
+                  Code
+                  Media
                 
               
             
             
-              
-              
-                
-                Components
-              
+              
+              Layout
               
                 
-                  
-                    Component 1
-                  
-                  
-                    Component 2
-                  
+                  Flexbox grid
+                  Responsive
+                  Navbar
                 
               
             
-          
-          
             
-              
-              
-                Elements
-              
+              
+              Components
               
                 
-                  
-                    Element 1
-                  
-                  
-                    Element 2
-                  
+                  Accordions
+                  Avatars
+                  Badges
+                  Bars
+                  Breadcrumbs
+                  Cards
+                  Chips
+                  Empty states
+                  Menu
+                  Modals
+                  Nav
+                  Pagination
+                  Panels
+                  Popovers
+                  Steps
+                  Tabs
+                  Tiles
+                  Toasts
+                  Tooltips
                 
               
             
             
-              
-              
-                Layout
-              
+              
+              Utilities
               
                 
-                  
-                    Layout 1
-                  
-                  
-                    Layout 2
-                  
+                  Colors
+                  Cursors
+                  Display
+                  Divider
+                  Loading
+                  Position
+                  Shapes
+                  Text
                 
               
             
             
-              
-              
-                Components
-              
+              
+              Experimentals
               
                 
-                  
-                    Component 1
-                  
-                  
-                    Component 2
-                  
+                  Autocomplete
+                  Calendars
+                  Carousels
+                  Comparison sliders
+                  Filters
+                  Meters
+                  Off-canvas
+                  Parallax
+                  Progress
+                  Sliders
+                  Timelines
                 
               
             
           
         
-
-
-<!-- standard Accordions example -->
-<div class="accordion">
-  <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
-  <label class="accordion-header">
-    <i class="icon icon-arrow-right mr-1"></i>
+      

+      
+        
+          
+            #Accordions
+            Accordions are used to toggle sections of content.
+            
+              
+                
+                  
+                  Elements
+                  
+                    
+                      Element 1
+                      Element 2
+                    
+                  
+                
+                
+                  
+                  Layout
+                  
+                    
+                      Layout 1
+                      Layout 2
+                    
+                  
+                
+                
+                  
+                  Components
+                  
+                    
+                      Component 1
+                      Component 2
+                    
+                  
+                
+              
+              
+                
+                  
+                  Elements
+                  
+                    
+                      Element 1
+                      Element 2
+                    
+                  
+                
+                
+                  
+                  Layout
+                  
+                    
+                      Layout 1
+                      Layout 2
+                    
+                  
+                
+                
+                  
+                  Components
+                  
+                    
+                      Component 1
+                      Component 2
+                    
+                  
+                
+              
+            
+            <!-- standard Accordions example -->
+<div class="accordion">
+  <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
+  <label class="accordion-header">
+    <i class="icon icon-arrow-right mr-1"></i>
     Title
-  </label>
-  <div class="accordion-body">
-    <!-- Accordions content -->
-  </div>
-</div>
-
-<!-- mutually exclusive Accordions example (with same input names) -->
-<div class="accordion">
-  <input type="radio" id="accordion-1" name="accordion-radio" hidden>
-  <label class="accordion-header">
+  </label>
+  <div class="accordion-body">
+    <!-- Accordions content -->
+  </div>
+</div>
+
+<!-- mutually exclusive Accordions example (with same input names) -->
+<div class="accordion">
+  <input type="radio" id="accordion-1" name="accordion-radio" hidden>
+  <label class="accordion-header">
     Title
-  </label>
-  <div class="accordion-body">
-    <!-- Accordions content -->
-  </div>
-</div>
+  </label>
+  <div class="accordion-body">
+    <!-- Accordions content -->
+  </div>
+</div>
 
-
-        
-          Alternatively, you can use details and summary instead of input radio or checkbox trick. Add the open attribute to details to expand it. Microsoft Edge support is in development.
-        
-
-
-<!-- details and summary Accordions example -->
-<details class="accordion" open>
-  <summary class="accordion-header">
-    <i class="icon icon-arrow-right mr-1"></i>
+            Alternatively, you can use details and summary instead of input radio or checkbox trick.
+              Add the open attribute to details to expand it.
+              Microsoft Edge support is under consideration.
+            
+            <!-- details and summary Accordions example -->
+<details class="accordion" open>
+  <summary class="accordion-header">
+    <i class="icon icon-arrow-right mr-1"></i>
     Title
-  </summary>
-  <div class="accordion-body">
-    <!-- Accordions content -->
-  </div>
-</details>
-
-
-      

-
-      
-        
-          
-        
-      
-
-      
-        #Avatars
-        
-          Avatars are user profile pictures. 
-        
-        
-          
-            
-              
-            
-            
-              
-            
-            
-              
-            
-            
-              
-            
-            
-              
-            
-          
-          
-            
-            
-            
-            
-            
-          
-        
-        
-          Add the avatar class to <img> element. There are 4 additional sizes available, including avatar-xl (64px), avatar-lg (48px), avatar-sm (24px), and avatar-xs (16px). By default, the avatar size is 32px.
-          For users who don't have profile pictures, you may use their initials for avatars. Add the avatar class and avatar size class to <div> element. The data-initial attribute is the name appear inside the avatar.
-        
-        
-          
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-            
-              
-              
-            
-          
-        
-
-
-<!-- Basic avatar examples -->
-<figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" alt="...">
-</figure>
-
-<figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" alt="...">
-  <img src="img/avatar-5.png" class="avatar-icon" alt="...">
-</figure>
-
-<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
-
-<!-- Show initals when avatar image is unavailable or not fully loaded -->
-<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
-  <img src="img/avatar-1.png" alt="...">
-</figure>
-
-
-        
-          
-            
-              
-            
-            
-              
-            
-            
-              
-            
-            
-              
-            
-            
-              
-            
-          
-        
-        
-          Avatars support presence indicators. You can add an i element with the avatar-presence class, and add online, busy or away class for different status colors. The default is gray which means offline. 
-        
-
-
-<figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" alt="...">
-  <i class="avatar-presence online"></i>
-</figure>
-
-
-      
-
-      
-        #Badges
-        
-          Badges are often used as unread number indicators.
-        
-        
-          
-            
-              Notifications
-            
-          
-          
-            
-              Notifications
-            
-          
-          
-            
-              Notifications
-            
-          
-          
-            
-              Notifications
-            
-          
-        
-        
-          Add the badge class to non self closing elements. And add the data-badge attribute to define the content of a badge. The badge will appear in the top-right direction of the element. 
-          If there is no data-badge or the attribute is not specified, the badge will appear as a dot.
-        
-        
-          
-            
-            
-          
-          
-            
-            
-          
-          
-            
-              
-            
-            
-              
-            
-            
-              
-            
-          
-        
-        
-          Badges support button and avatars elements as well. 
-        
-
-
-<span class="badge">
-  Notifications
-</span>
-
-<span class="badge" data-badge="8">
-  Notifications
-</span>
-
-<button class="btn badge" data-badge="8">
-  Button
-</button>
-
-<figure class="avatar badge" data-badge="8" data-initial="YZ">
-  <img src="img/avatar-3.png" alt="YZ">
-</figure>
-
-
-      
-
-      
-        #Bars
-        
-          Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 progress, meter and input range elements.
-        
-        
-          
-            
-              
-            
-          
-        
-        
-          
-            
-              
+  </summary>
+  <div class="accordion-body">
+    <!-- Accordions content -->
+  </div>
+</details>

+          

+          
+            #Avatars
+            Avatars are user profile pictures. 
+            
+              
+                
+                
+                
+                
+                
+              
+              
+                
+                
+                
+                
+                
+              
             
-          
-


-        
-          
-            
-              25%
-              15%
-              10%
-              15%
+            Add the avatar class to <img> element.
+              There are 4 additional sizes available, including avatar-xl(64px), avatar-lg(48px), avatar-sm(24px), and avatar-xs(16px).
+              By default, the avatar size is 32px.
+            
+            
+              For users who don't have profile pictures, you may use their initials for avatars.
+              Add the avatar class and avatar size class to <div>  element.
+              The data-initial attribute is the name appear inside the avatar.
+            
+            
+              
+                
+                
+                
+                
+                
+              
             
-          
-        
-        
-          Add a container element with the bar class. And add child elements with the bar-item class. The width percentage value is needed for every bar-item.
-          There is the bar-sm class for thinner Bars. Also, you could use Tooltips for any bar-item.
-        
-
-
-<div class="bar bar-sm">
-  <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-
-<!-- multi-bars -->
-<div class="bar">
-  <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
-  <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
-</div>
-
-
-        Slider bars
-        
-          
-            
-              
-                
+            <!-- Basic avatar examples -->
+<figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" alt="...">
+</figure>
+
+<figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" alt="...">
+  <img src="img/avatar-5.png" class="avatar-icon" alt="...">
+</figure>
+
+<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
+
+<!-- Show initals when avatar image is unavailable or not fully loaded -->
+<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
+  <img src="img/avatar-1.png" alt="...">
+</figure>
+  
+            
+              
+                
+                
+                
+                
+                
               
             
-          
-        
-        
-          
-            
-              
-                
+            
+              Avatars support presence indicators.
+              You can add an <i> element with the avatar-presence class, and add online, busy or away class for different status colors.
+              The default is gray which means offline.
+            
+            <figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" alt="...">
+  <i class="avatar-presence online"></i>
+</figure>
+          
+          
+            #Badges
+            Badges are often used as unread number indicators.
+            
+              Notifications
+              Notifications
+              Notifications
+              Notifications
+            
+            Add the badge class to non self closing elements.
+              And add the data-badge attribute to define the content of a badge.
+              The badge will appear in the top-right direction of the element.
+            
+            If there is no data-badge or the attribute is not specified, the badge will appear as a dot.
+            
+              
+                
+                
               
-              
-                
+              
+                
+                
               
-            
-          
-        
-
-        
-          You can add the bar-slider class to the Bars container. And add child elements with the bar-item class and bar-slider-btn inside bar-item. You need to set the bar-item width manually to have the slider point.
-          If there are two bar-item divs in one bar-slider, you will have a range slider.
-        
-
-
-<!-- slider -->
-<div class="bar bar-slider">
-  <div class="bar-item" role="progressbar" style="width:25%;">
-    <button class="bar-slider-btn btn" role="slider"></button>
-  </div>
-</div>
-
-<!-- range slider -->
-<div class="bar bar-slider">
-  <div class="bar-item" role="progressbar" style="width:15%;">
-    <button class="bar-slider-btn btn" role="slider"></button>
-  </div>
-  <div class="bar-item" role="progressbar" style="width:65%;">
-    <button class="bar-slider-btn btn" role="slider"></button>
-  </div>
-</div>
-
-
-      
-
-      
-        #Breadcrumbs
-        
-          Breadcrumbs are used as navigational hierarchies to indicate current location.
-        
-        
-            
-                
-                  
-                    Home
-                  
-                  
-                    Settings
-                  
-                
+              
+                
+                
+                
               
-          
-            
-              
-                Home
-              
-              
-                Settings
-              
-              
-                Change avatar
-              
-            
-          
-          
-            
-              
-                Home
-              
-              
-                Settings
-              
-              Search result:
-                Spectre
-              
-            
-          
-        
-        
-          Add a container element with the breadcrumb class. And add child elements with the breadcrumb-item class.
-        
-
-
-<ul class="breadcrumb">
-  <li class="breadcrumb-item">
-    <a href="#">Home</a>
-  </li>
-  <li class="breadcrumb-item">
-    <a href="#">Settings</a>
-  </li>
-  <li class="breadcrumb-item">
-    <a href="#">Change avatar</a>
-  </li>
-</ul>
-
+            
+            Badges support button and avatars elements as well.
+            <span class="badge">
+  Notifications
+</span>
 
-      

+<span class="badge" data-badge="8">
+  Notifications
+</span>
 
-      
-        #Cards
-        
-          Cards are flexible content containers.
-        
-        
-          
-            
-              
-                
-              
-              
-                Microsoft
-                Software and hardware
-              
-              
-                Empower every person and every organization on the planet to achieve more.
-              
-              
-                Do
+<button class="btn badge" data-badge="8">
+  Button
+</button>
+
+<figure class="avatar badge" data-badge="8" data-initial="YZ">
+  <img src="img/avatar-3.png" alt="YZ">
+</figure>
+          
+          
+            #Bars
+            
+              Bars represent the progress of a task or the value within the known range.
+              Bars are custom components for displaying HTML5 <progress>, <meter> and input range elements.
+            
+            
+              
+                
+                  
+                
               
             
-          
-          
-            
-              
-                Apple
-                Hardware and software
-              
-              
-                
-              
-              
-                To make a contribution to the world by making tools for the mind that advance humankind.
-              
-              
-                
-                  
-                  
-                  
+            
+              
+                
+                  
                 
               
             
-          
-          
-            
-              
-                
+            
+              
+                
+                  25%
+                  15%
+                  10%
+                  15%
+                
               
-              
-                
-                Google I/O
-                Software and hardware
+            
+            Add a container element with the bar class.
+              And add child elements with the bar-item class.
+              The width percentage value is needed for every bar-item.
+            
+            There is the bar-sm class for thinner Bars.
+              Also, you could use Tooltips for any bar-item.
+            
+            <div class="bar bar-sm">
+  <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<!-- multi-bars -->
+<div class="bar">
+  <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
+  <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
+</div>
+
+            #Slider bars
+            
+              
+                
+                  
+                    
+                  
+                
               
-              
-                An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
+            
+            
+              
+                
+                  
+                    
+                  
+                  
+                    
+                  
+                
               
             
-          
-          
-            
-              
-                
+            You can add the bar-slider class to the Bars container.
+              And add child elements with the bar-item class and bar-slider-btn inside bar-item.
+              You need to set the bar-item width manually to have the slider point.
+            
+            If there are two bar-item divs in one bar-slider, you will have a range slider.
+            <!-- slider -->
+<div class="bar bar-slider">
+  <div class="bar-item" role="progressbar" style="width:25%;">
+    <button class="bar-slider-btn btn" role="slider"></button>
+  </div>
+</div>
+
+<!-- range slider -->
+<div class="bar bar-slider">
+  <div class="bar-item" role="progressbar" style="width:15%;">
+    <button class="bar-slider-btn btn" role="slider"></button>
+  </div>
+  <div class="bar-item" role="progressbar" style="width:65%;">
+    <button class="bar-slider-btn btn" role="slider"></button>
+  </div>
+</div>
+          
+          
+            #Breadcrumbs
+            Breadcrumbs are used as navigational hierarchies to indicate current location.
+            
+              
+                
+                  Home
+                  Settings
+                
               
-              
-                Buy
-                Share
+              
+                
+                  Home
+                  Settings
+                  Change avatar
+                
               
-              
-                Surface Studio. Turn your desk into a Studio. Surface Studio is designed for the creative process.
+              
+                
+                  Home
+                  Settings
+                  Search result:Spectre
+                
               
             
-          
-          
-            
-              
-                Apple
-                Hardware and software
-              
-              
-                To make a contribution to the world by making tools for the mind that advance humankind.
+            Add a container element with the breadcrumb class.
+              And add child elements with the breadcrumb-item class.
+            
+            <ul class="breadcrumb">
+  <li class="breadcrumb-item">
+    <a href="#">Home</a>
+  </li>
+  <li class="breadcrumb-item">
+    <a href="#">Settings</a>
+  </li>
+  <li class="breadcrumb-item">
+    <a href="#">Change avatar</a>
+  </li>
+</ul>
+          
+          
+            #Cards
+            Cards are flexible content containers.
+            
+              
+                
+                  
+                  
+                    Microsoft
+                    Software and hardware
+                  
+                  Empower every person and every organization on the planet to achieve more.
+                  Do
+                
               
-              
-                
+              
+                
+                  
+                    Apple
+                    Hardware and software
+                  
+                  
+                  To make a contribution to the world by making tools for the mind that advance humankind.
+                  
+                    
+                      
+                      
+                      
+                    
+                  
+                
               
-            
-          
-          
-            
-              
-                Google
-                Software and hardware
+              
+                
+                  
+                  
+                    
+                    Google I/O
+                    Software and hardware
+                  
+                  An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
+                
               
-              
-                Organize the world’s information and make it universally accessible and useful.
+              
+                
+                  
+                  BuyShare
+                  Surface Studio. Turn your desk into a Studio. Surface Studio is designed for the creative process.
+                
               
-              
-                
+              
+                
+                  
+                    Apple
+                    Hardware and software
+                  
+                  To make a contribution to the world by making tools for the mind that advance humankind.
+                  
+                
               
-              
-                Search
-                Share
+              
+                
+                  
+                    Google
+                    Software and hardware
+                  
+                  Organize the world’s information and make it universally accessible and useful.
+                  
+                  SearchShare
+                
               
             
-          
-        
-        
-          Add a container element with the card class. And add child elements with the card-image, card-header, card-body and/or card-footer classes. The card-image can be placed in any position. 
-        
-
-
-<div class="card">
-  <div class="card-image">
-    <img src="img/osx-el-capitan.jpg" class="img-responsive">
-  </div>
-  <div class="card-header">
-    <div class="card-title h5">Microsoft</div>
-    <div class="card-subtitle text-gray">Software and hardware</div>
-  </div>
-  <div class="card-body">
+            Add a container element with the card class.
+              And add child elements with the card-image, card-header, card-body and/or card-footer classes.
+              The card-image can be placed in any position.
+            
+            <div class="card">
+  <div class="card-image">
+    <img src="img/osx-el-capitan.jpg" class="img-responsive">
+  </div>
+  <div class="card-header">
+    <div class="card-title h5">Microsoft</div>
+    <div class="card-subtitle text-gray">Software and hardware</div>
+  </div>
+  <div class="card-body">
     Empower every person and every organization on the planet to achieve more.
-  </div>
-  <div class="card-footer">
-    <button class="btn btn-primary">Do</button>
-  </div>
-</div>
-
-
-      

-
-      
-        #Chips
-        
-          Chips are complex entities in small blocks. 
-        
-        
-          
-            
-              Crime
-            
-            
-              Drama
-            
-            
-              Biography
-              
-            
-            
-              Mystery
-              
-            
-          
-          
-            
-              
-              Tony Stark
-            
-            
-              
-              Thor Odinson
-            
-            
-              
-              Steve Rogers
+  </div>
+  <div class="card-footer">
+    <button class="btn btn-primary">Do</button>
+  </div>
+</div>
+          
+          
+            #Chips
+            Chips are complex entities in small blocks. 
+            
+              CrimeDramaBiographyMystery
+              
+                
+                  Tony Stark
+                
+                Thor Odinson
+                Steve Rogers
+              
             
-          
-        
-        
-          Add a container element with the chip class. And add child text element, buttons or avatars with the avatar class.
-        
+            Add a container element with the chip class.
+              And add child text element, buttons or avatars with the avatar class.
+            
+            <span class="chip">Crime</span>
 
-
-<span class="chip">Crime</span>
-  
-<span class="chip">
+<span class="chip">
   Biography
-  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
-</span>
+  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+</span>
 
-<div class="chip">
-  <img src="img/avatar-1.png" class="avatar avatar-sm">
+<div class="chip">
+  <img src="img/avatar-1.png" class="avatar avatar-sm">
   Yan Zhu
-  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
-</div>
-
-
-      

-
-      
-        #Empty states
-        
-          Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
-        
-        
-          
-            
-              
-                
+  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+</div>
+          
+          
+            #Empty states
+            Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
+            
+              
+                
+                  
+                  You have no new messages
+                  Click the button to start a conversation
+                  
+                    
+                  
+                
               
-              You have no new messages
-              Click the button to start a conversation
-              
-                
+              
+                
+                  
+                  You've successfully signed up
+                  Click the button to invite your friends
+                  
+                    
+                  
+                  
+                    
+                  
+                
               
-            
-          
-          
-            
-              
-                
-              
-              You've successfully signed up
-              Click the button to invite your friends
-              
-                
-              
-              
-                
+              
+                
+                  
+                  You are not following anyone
+                  Start to meet new friends
+                  
+                    
+                    
+                  
+                
               
             
-          
-          
-            
-              
-                
+            
+              An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements.
+              Add empty-icon, empty-title, empty-subtitle or empty-action to the elements.
+              HTML structure is exampled below.
+            
+            <div class="empty">
+  <div class="empty-icon">
+    <i class="icon icon-people"></i>
+  </div>
+  <p class="empty-title h5">You have no new messages</p>
+  <p class="empty-subtitle">Click the button to start a conversation.</p>
+  <div class="empty-action">
+    <button class="btn btn-primary">Send a message</button>
+  </div>
+</div>
+          
+          
+            #Menu
+            Menus are vertical list of links or buttons for actions and navigation.
+            
+              
+                
+                  
+                    
+                      
+                      Steve Rogers
+                    
+                  
+                  
+                  
+                    
+                      2
+                    
My profile
+                  
+                  Settings
+                  Logout
+                
               
-              You are not following anyone
-              Start to meet new friends
-              
-                
-                
+              
+                
+                  
+                  Slack
+                  Hipchat
+                  Skype
+                
               
-            
-          
-        
-
-        
-          An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. Add empty-icon, empty-title, empty-subtitle or empty-action to the elements. HTML structure is exampled below. 
-        
-
-
-<div class="empty">
-  <div class="empty-icon">
-    <i class="icon icon-people"></i>
-  </div>
-  <p class="empty-title h5">You have no new messages</p>
-  <p class="empty-subtitle">Click the button to start a conversation.</p>
-  <div class="empty-action">
-    <button class="btn btn-primary">Send a message</button>
-  </div>
-</div>
-
-
-      
-
-      
-        #Menus
-        
-          Menus are vertical list of links or buttons for actions and navigation.
-        
-        
-          
-            
-              
-                
-                  
-                    
-                  
-                  
-                    Steve Rogers
-                  
-                
-              
-              
-              
-                
-                  2
-                
-                
-                  My profile
-                
-              
-              
-                
-                  Settings
-                
-              
-              
-                
-                  Logout
-                
-              
-            
-          
-          
-            
-              
-              
-                Slack
-              
-              
-                Hipchat
-              
-              
-                Skype
-              
-            
-          
-          
-            
-              
-                
-                  
-                   form-checkbox
-                
-              
-              
-                
-                  
-                   form-radio
-                
-              
-              
-                
-                  
-                   form-switch
-                
-              
-            
-          
-        
-        
-          Add a container element with the menu class. And add child elements with the menu-item class. You can separate menu items with a divider. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
-          Menus also have Form controls (checkbox, radio and checkbox) support.
-        
-
-
-<ul class="menu">
-  <!-- menu header text -->
-  <li class="divider" data-content="LINKS">
-  </li>
-  <!-- menu item standard -->
-  <li class="menu-item">
-    <a href="#">
-      <i class="icon icon-link"></i> Slack
-    </a>
-  </li>
-  <!-- menu item with form control -->
-  <li class="menu-item">
-    <label class="form-checkbox">
-      <input type="checkbox">
-      <i class="form-icon"></i> form-checkbox
-    </label>
-  </li>
-  <!-- menu divider -->
-  <li class="divider"></li>
-  <!-- menu item with badge -->
-  <li class="menu-item">
-    <div class="menu-badge">
-      <label class="label label-primary">2</label>
-    </div>
-    <a href="#">
-      <i class="icon icon-link"></i> Settings
-    </a>
-  </li>
-</ul>
-
-
-        #Dropdown menus
-        
-          The dropdown is a combination of buttons and menus.
-        
-        
-          
-            
-              
-                dropdown button
-                
+              
                 
                   
-                    
-                      Slack
-                    
+                    
+                       form-checkbox
+                    
                   
                   
-                    
-                      Hipchat
-                    
+                    
+                       form-radio
+                    
                   
                   
-                    
-                      Skype
-                    
+                    
+                       form-switch
+                    
                   
                 
               
             
-          
-          
-            
-              dropdown button 
-              
-                
-                  
-                    Slack
-                  
-                
-                
-                  
-                    Hipchat
-                  
-                
-                
-                  
-                    Skype
-                  
-                
-              
+            Add a container element with the menu class.
+              And add child elements with the menu-item class.
+              You can separate menu items with a divider.
+              Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
+            
+            Menus also have Form controls (checkbox, radio and checkbox) support.
+            <ul class="menu">
+  <!-- menu header text -->
+  <li class="divider" data-content="LINKS">
+  </li>
+  <!-- menu item standard -->
+  <li class="menu-item">
+    <a href="#">
+      <i class="icon icon-link"></i> Slack
+    </a>
+  </li>
+  <!-- menu item with form control -->
+  <li class="menu-item">
+    <label class="form-checkbox">
+      <input type="checkbox">
+      <i class="form-icon"></i> form-checkbox
+    </label>
+  </li>
+  <!-- menu divider -->
+  <li class="divider"></li>
+  <!-- menu item with badge -->
+  <li class="menu-item">
+    <div class="menu-badge">
+      <label class="label label-primary">2</label>
+    </div>
+    <a href="#">
+      <i class="icon icon-link"></i> Settings
+    </a>
+  </li>
+</ul>
+  
+            #Dropdown menu
+            The dropdown is a combination of buttons and menus.
+            
+              
+                
+                  dropdown button
+                    
+                      Slack
+                      Hipchat
+                      Skype
+                    
+                  
+                
+              
+              
+                dropdown button 
+                  
+                    Slack
+                    Hipchat
+                    Skype
+                  
+                
+              
             
-          
-        
-        
-          Dropdown menus component is built entirely in CSS. It is triggered by :focus event.
-          Add a container element with the dropdown class. And add a focusable element with the dropdown-toggle class for the button and a menu component right next to it. You also need to add tabindex to make the buttons focusable.
-          If the dropdown is close to the right edge of the browser, you can add the dropdown-right class to the container to prevent it appearing off screen.
-        
-        
-          
-            
-              dropdown button 
-              
-                
-                  Slack
-                
-                
-                  Hipchat
-                
-                
-                  Skype
-                
-              
+            Dropdown menus component is built entirely in CSS. It is triggered by :focus event.
+            Add a container element with the dropdown class.
+              And add a focusable element with the dropdown-toggle class for the button and a menu component right next to it.
+              You also need to add tabindex to make the buttons focusable.
+            
+            If the dropdown is close to the right edge of the browser, you can add the dropdown-right class to the container to prevent it appearing off screen.
+            
+              
+                dropdown button 
+                  
+                    Slack
+                    Hipchat
+                    Skype
+                  
+                
+              
             
-          
-        
-        
-          Also, you can implement your JS to interact with the dropdown menus by adding the active class to the dropdown container.
-        
-
-
-<!-- basic dropdown button -->
-<div class="dropdown">
-  <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
-    dropdown menu <i class="icon icon-caret"></i>
-  </a>
-  <!-- menu component -->
-  <ul class="menu">
+            Also, you can implement your JS to interact with the dropdown menus by adding the active class to the dropdown container.
+            <!-- basic dropdown button -->
+<div class="dropdown">
+  <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
+    dropdown menu <i class="icon icon-caret"></i>
+  </a>
+  <!-- menu component -->
+  <ul class="menu">
     ...
-  </ul>
-</div>
+  </ul>
+</div>
 
-<!-- dropdown button group -->
-<div class="dropdown">
-  <div class="btn-group">
-    <a href="#" class="btn">
+<!-- dropdown button group -->
+<div class="dropdown">
+  <div class="btn-group">
+    <a href="#" class="btn">
       dropdown button
-    </a>
-    <a href="#" class="btn dropdown-toggle" tabindex="0">
-      <i class="icon icon-caret"></i>
-    </a>
+    </a>
+    <a href="#" class="btn dropdown-toggle" tabindex="0">
+      <i class="icon icon-caret"></i>
+    </a>
 
-    <!-- menu component -->
-    <ul class="menu">
+    <!-- menu component -->
+    <ul class="menu">
       ...
-    </ul>
-  </div>
-</div>
-
-
-      

-
-      
-        #Modals
-        
-          Modals are flexible dialog prompts.
-        
-        
-          
-            Open Modal
-            
-              
-              
-                
-                  
-                  Modal title
-                
-                
-                  
-                    This is the content inside the modal.
-                    Lorem ipsum
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
-                    Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
-                    Cupcake ipsum
-                    Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
-                    De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
-                    Candy ipsum
-                    Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
-                    Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
+    </ul>
+  </div>
+</div>
+          
+          
+            #Modals
+            Modals are flexible dialog prompts.
+            
+              Open Modal
+                
+                  
+                    
+                      Modal title
+                    
+                    
+                      
+                        This is the content inside the modal.
+                        Lorem ipsum
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+                        Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+                        Cupcake ipsum
+                        Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
+                        De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
+                        Candy ipsum
+                        Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
+                        Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
+                      
+                    
+                    
+                      Close
+                    
                   
                 
-                
-                  
-                  Close
-                
               
             
-          
-        
-        
-          Add a container element with the modal class. And add a real container modal-container and overlay modal-overlay inside it. You can add child elements with the modal-header, modal-body and modal-footer - any or all of them. 
-          Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the active class to the modal container.
-        
-
-
-<div class="modal active" id="modal-id">
-  <a href="#close" class="modal-overlay" aria-label="Close"></a>
-  <div class="modal-container">
-    <div class="modal-header">
-      <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
-      <div class="modal-title h5">Modal title</div>
-    </div>
-    <div class="modal-body">
-      <div class="content">
-        <!-- content here -->
-      </div>
-    </div>
-    <div class="modal-footer">
+            Add a container element with the modal class.
+              And add a real container modal-container and overlay modal-overlay inside it.
+              You can add child elements with the modal-header, modal-body and modal-footer - any or all of them.
+            
+            
+              Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals.
+              To make a modal appear, add the active class to the modal container.
+            
+            <div class="modal active" id="modal-id">
+  <a href="#close" class="modal-overlay" aria-label="Close"></a>
+  <div class="modal-container">
+    <div class="modal-header">
+      <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
+      <div class="modal-title h5">Modal title</div>
+    </div>
+    <div class="modal-body">
+      <div class="content">
+        <!-- content here -->
+      </div>
+    </div>
+    <div class="modal-footer">
       ...
-    </div>
-  </div>
-</div>
+    </div>
+  </div>
+</div>
 
-
-        Modal sizes
-        
-          
-            Open small size Modal
-            
-              
-              
-                
-                  
-                  Modal title
-                
-                
-                  
-                    
-                      
-                        Name
-                        
+            #Modal sizes
+            
+              Open small size Modal
+                
+                  
+                    
+                      Modal title
+                    
+                    
+                      
+                        
+                          
+                            Name
+                            
+                          
+                          
+                            Gender
+                            
+                               Male
+                            
+                            
+                               Female
+                            
+                          
+                        
                       
-                      
-                        Gender
-                        
-                          
-                           Male
-                        
-                        
-                          
-                           Female
-                        
-                      
-                    
+                    
+                    
+                      Close
+                    
                   
                 
-                
-                  
-                  Close
-                
               
             
-          
-        
-        
-          Use the modal-sm class for a smaller modal dialog. The container max width is 320px.
-        
-        
-          
-            Open large size Modal
-            
-              
-              
-                
-                  
-                  Modal title
-                
-                
-                  
-                    This is the content inside the modal.
-                    Lorem ipsum
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
-                    Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
-                    Cupcake ipsum
-                    Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
-                    De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
-                    Candy ipsum
-                    Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
-                    Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
+            Use the modal-sm class for a smaller modal dialog.
+              The container max width is 320px.
+            
+            
+              Open large size Modal
+                
+                  
+                    
+                      Modal title
+                    
+                    
+                      
+                        This is the content inside the modal.
+                        Lorem ipsum
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+                        Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+                        Cupcake ipsum
+                        Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
+                        De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
+                        Candy ipsum
+                        Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
+                        Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
+                      
+                    
+                    
+                      Close
+                    
                   
                 
-                
-                  
-                  Close
-                
               
             
-          
-        
-        
-          Use the modal-lg class for a full size modal. The container max width is 960px.
-        
-
-
-<div class="modal modal-sm">
-  <a href="#close" class="modal-overlay" aria-label="Close"></a>
-  <div class="modal-container">
-    <!-- modal structure here -->
-  </div>
-</div>
-
-
-        
-          Add the modal-fullheight class to modal-container to have a 100% viewport height modal. The default container max height is 75vh.
-        
-
-
-<div class="modal">
-  <a href="#close" class="modal-overlay" aria-label="Close"></a>
-  <div class="modal-container modal-fullheight">
-    <!-- modal structure here -->
-  </div>
-</div>
-
-
-      
-
-      
-        #Navs
-        
-          
-            
-              
-                Elements
-              
-              
-                Layout
+            Use the modal-lg class for a full size modal.
+              The container max width is 960px.
+            
+            <div class="modal modal-sm">
+  <a href="#close" class="modal-overlay" aria-label="Close"></a>
+  <div class="modal-container">
+    <!-- modal structure here -->
+  </div>
+</div>
+          
+          
+            #Nav
+            
+              
                 
-                  
-                    Flexbox grid
-                  
-                  
-                    Responsive
-                  
-                  
-                    Navbar
-                  
-                  
-                    Empty states
+                  
Elements
+                  Layout
+                    
+                      Flexbox grid
+                      Responsive
+                      Navbar
+                      Empty states
+                    
                   
+                  Components
+                  Utilities
                 
-              
-              
-                Components
-              
-              
-                Utilities
-              
-            
-          
-        
-        
-          Add a container element with the nav class. And add child elements with the nav-item class. The nav-item with the active class will be highlighted.
-        
-
-
-<ul class="nav">
-  <li class="nav-item">
-    <a href="#">Elements</a>
-  </li>
-  <li class="nav-item active">
-    <a href="#">Layout</a>
-    <ul class="nav">
-      <li class="nav-item">
-        <a href="#">Flexbox grid</a>
-      </li>
-      <li class="nav-item">
-        <a href="#">Responsive</a>
-      </li>
-      <li class="nav-item">
-        <a href="#">Navbar</a>
-      </li>
-      <li class="nav-item">
-        <a href="#">Empty states</a>
-      </li>
-    </ul>
-  </li>
-  <li class="nav-item">
-    <a href="#">Components</a>
-  </li>
-  <li class="nav-item">
-    <a href="#">Utilities</a>
-  </li>
-</ul>
-
-
-      
-
-      
-        #Pagination
-        
-          
-            
-              
-                Prev
-              
-              
-                1
-              
-              
-                ...
-              
-              
-                4
-              
-              
-                5
-              
-              
-                6
-              
-              
-                ...
-              
-              
-                9
-              
-              
-                Next
-              
-            
-          
-          
-            
-              
-                Prev
-              
-              
-                1
-              
-              
-                2
-              
-              
-                3
-              
-              
-                ...
-              
-              
-                9
-              
-              
-                Next
-              
-            
-          
-        
-        
-          Add a container element with the pagination class. And add child elements with the page-item class. The page-item with the active class will be highlighted. You can add the disabled to the page-item to have unclickable page links. 
-        
-
-
-<ul class="pagination">
-  <li class="page-item disabled">
-    <a href="#" tabindex="-1">Previous</a>
-  </li>
-  <li class="page-item active">
-    <a href="#">1</a>
-  </li>
-  <li class="page-item">
-    <a href="#">2</a>
-  </li>
-  <li class="page-item">
-    <a href="#">3</a>
-  </li>
-  <li class="page-item">
-    <span>...</span>
-  </li>
-  <li class="page-item">
-    <a href="#">12</a>
-  </li>
-  <li class="page-item">
-    <a href="#">Next</a>
-  </li>
-</ul>
-
-
-        
-          
-            
-              
-                
-                  Previous
-                  Getting started
-                
-              
-              
-                
-                  Next
-                  Layout
-                
-              
-            
-          
-        
-        
-          You could use previous and next pagination to navigate. 
-        
-
-
-<ul class="pagination">
-  <li class="page-item page-prev">
-    <a href="#">
-      <div class="page-item-subtitle">Previous</div>
-      <div class="page-item-title h5">Getting started</div>
-    </a>
-  </li>
-  <li class="page-item page-next">
-    <a href="#">
-      <div class="page-item-subtitle">Next</div>
-      <div class="page-item-title h5">Layout</div>
-    </a>
-  </li>
-</ul>
+              

+            

+            Add a container element with the nav class.
+              And add child elements with the nav-item class.
+              The nav-item with the active class will be highlighted.
+            
+            <ul class="nav">
+  <li class="nav-item">
+    <a href="#">Elements</a>
+  </li>
+  <li class="nav-item active">
+    <a href="#">Layout</a>
+    <ul class="nav">
+      <li class="nav-item">
+        <a href="#">Flexbox grid</a>
+      </li>
+      <li class="nav-item">
+        <a href="#">Responsive</a>
+      </li>
+      <li class="nav-item">
+        <a href="#">Navbar</a>
+      </li>
+      <li class="nav-item">
+        <a href="#">Empty states</a>
+      </li>
+    </ul>
+  </li>
+  <li class="nav-item">
+    <a href="#">Components</a>
+  </li>
+  <li class="nav-item">
+    <a href="#">Utilities</a>
+  </li>
+</ul>
+          

+          
+            #Pagination
+            
+              
+                
+                  Prev
+                  1
+                  ...
+                  4
+                  5
+                  6
+                  ...
+                  9
+                  Next
+                
+              
+              
+                
+                  Prev
+                  1
+                  2
+                  3
+                  ...
+                  9
+                  Next
+                
+              
+            
+            Add a container element with the pagination class.
+              And add child elements with the page-item class.
+              The page-item with the active class will be highlighted.
+              You can add the disabled class to the page-item to have unclickable page links.
+            
+            <ul class="pagination">
+  <li class="page-item disabled">
+    <a href="#" tabindex="-1">Previous</a>
+  </li>
+  <li class="page-item active">
+    <a href="#">1</a>
+  </li>
+  <li class="page-item">
+    <a href="#">2</a>
+  </li>
+  <li class="page-item">
+    <a href="#">3</a>
+  </li>
+  <li class="page-item">
+    <span>...</span>
+  </li>
+  <li class="page-item">
+    <a href="#">12</a>
+  </li>
+  <li class="page-item">
+    <a href="#">Next</a>
+  </li>
+</ul>
 
-
-      
-
-      
-        #Panels
-        
-          Panels are flexible view container with auto-expand content section.
-        
-        
-          
-            
-              
-                
-                  
-                
-                Bruce Banner
-                THE HULK
-              
-              
-                
-                  
-                    
-                      Profile
-                    
-                  
-                  
-                    
-                      Files
-                    
-                  
-                  
-                    
-                      Tasks
-                    
-                  
+            
+              
+                
+                  
+                      Previous
+                      Getting started
+                  
+                      Next
+                      Layout
                 
-              
-              
-                
-                  
-                    E-mail
-                    bruce.banner@hulk.com
-                  
-                  
-                    
+              
+            
+            You could use previous and next pagination to navigate. 
+            <ul class="pagination">
+  <li class="page-item page-prev">
+    <a href="#">
+      <div class="page-item-subtitle">Previous</div>
+      <div class="page-item-title h5">Getting started</div>
+    </a>
+  </li>
+  <li class="page-item page-next">
+    <a href="#">
+      <div class="page-item-subtitle">Next</div>
+      <div class="page-item-title h5">Layout</div>
+    </a>
+  </li>
+</ul>
+          
+          
+            #Panels
+            Panels are flexible view container with auto-expand content section.
+            
+              
+                
+                  
+                    
+                    Bruce Banner
+                    THE HULK
                   
-                
-                
-                  
-                    Skype
-                    bruce.banner
+                  
+                    
+                      Profile
+                      Files
+                      Tasks
+                    
+                  
+                  
+                    
+                      
+                        E-mail
+                        bruce.banner@hulk.com
+                      
+                      
+                        
+                      
+                    
+                    
+                      
+                        Skype
+                        bruce.banner
+                      
+                      
+                        
+                      
+                    
+                    
+                      
+                        Location
+                        Dayton, Ohio
+                      
+                      
+                        
+                      
+                    
                   
-                  
-                    
+                  
+                    
                   
                 
-                
-                  
-                    Location
-                    Dayton, Ohio
+              
+              
+                
+                  
+                    Comments
                   
-                  
-                    
+                  
+                    
+                      
+                        
+                      
+                      
+                        Thor Odinson
+                        Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+                      
+                    
+                    
+                      
+                        
+                      
+                      
+                        Bruce Banner
+                        The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+                      
+                    
+                    
+                      
+                        
+                      
+                      
+                        Tony Stark
+                        Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+                      
+                    
+                    
+                      
+                        
+                      
+                      
+                        Steve Rogers
+                        The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+                      
+                    
+                    
+                      
+                        
+                      
+                      
+                        Natasha Romanoff
+                        Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+                      
+                    
+                  
+                  
+                    
+                      
+                      
+                    
                   
                 
               
-              
-                
-              
             
-          
-          
-            
-              
-                Comments
-              
-              
-                
-                  
-                    
-                      
-                    
-                  
-                  
-                    Thor Odinson
-                    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+            Add a container element with the panel class.
+              And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer classes.
+              The panel-body can be auto expanded and vertically scrollable.
+            
+            <div class="panel">
+  <div class="panel-header">
+    <div class="panel-title">Comments</div>
+  </div>
+  <div class="panel-nav">
+    <!-- navigation components: tabs, breadcrumbs or pagination -->
+  </div>
+  <div class="panel-body">
+    <!-- contents -->
+  </div>
+  <div class="panel-footer">
+    <!-- buttons or inputs -->
+  </div>
+</div>
+          
+          
+            #Popovers
+            Popovers are small overlay content containers. Popovers component is built entirely in CSS.
+            
+              
+                top popover
+                  
+                    
+                      
+                        Apple
+                        Software and hardware
+                      
+                      To make a contribution to the world by making tools for the mind that advance humankind.
+                      
+                        
+                      
+                    
                   
                 
-                
-                  
-                    
-                      
-                    
-                  
-                  
-                    Bruce Banner
-                    The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+              
+              
+                right popover
+                  
+                    
+                      
+                        Apple
+                        Software and hardware
+                      
+                      To make a contribution to the world by making tools for the mind that advance humankind.
+                      
+                        
+                      
+                    
                   
                 
-                
-                  
-                    
+              
+              
+                bottom popover
+                  
+                    
+                      
+                        Apple
+                        Software and hardware
+                      
+                      To make a contribution to the world by making tools for the mind that advance humankind.
+                      
+                        
+                      
+                    
                   
-                  
-                    Tony Stark
-                    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+                
+              
+              
+                left popover
+                  
+                    
+                      
+                        Apple
+                        Software and hardware
+                      
+                      To make a contribution to the world by making tools for the mind that advance humankind.
+                      
+                        
+                      
+                    
                   
                 
+              
+            
+            Wrap an element by a container with the popover class.
+              And add a container with the popover-container next to the element.
+              You can use Cards component inside the popover-container.
+            
+            Also, you can add the popover-right, popover-bottom or popover-left class to define the position.
+              By default, the popovers appear above the element.
+            
+            <div class="popover popover-right">
+  <button class="btn btn-primary">right popover</button>
+  <div class="popover-container">
+    <div class="card">
+      <div class="card-header">
+        ...
+      </div>
+      <div class="card-body">
+        ...
+      </div>
+      <div class="card-footer">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
+          
+          
+            #Steps
+            Steps are progress indicators of a sequence of task steps.
+            
+              
+                
+                  
+                  
+                  
+                  
+                
+              
+              
+                
+                  Step 1
+                  Step 2
+                  Step 3
+                  Step 4
+                
+              
+            
+            Add a container element with the step class.
+              And add child elements with the step-item class.
+              The step-item with the active class will be highlighted and indicate the current state of progress.
+            
+            <ul class="step">
+  <li class="step-item">
+    <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
+  </li>
+  <li class="step-item active">
+    <a href="#" class="tooltip" data-tooltip="Step 2">Step 2</a>
+  </li>
+  <li class="step-item">
+    <a href="#" class="tooltip" data-tooltip="Step 3">Step 3</a>
+  </li>
+  <li class="step-item">
+    <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a>
+  </li>
+</ul>
+  
+          
+          
+            #Tabs
+            Tabs enable quick switch between different views.
+            
+              
+                
+                  Music
+                  Playlists
+                  Radio
+                  Store
+                
+              
+              
+                
+                  Music
+                  Playlists
+                  Radio
+                
+              
+            
+            Add a container element with the tab class. 
+              And add child elements with the tab-item class. 
+              You can add the tab-block class for a full-width tab.
+              The tab-item or its child <a> with the active class will be highlighted.
+            
+            <ul class="tab tab-block">
+  <li class="tab-item active">
+    <a href="#">Music</a>
+  </li>
+  <li class="tab-item">
+    <a href="#" class="active">Playlists</a>
+  </li>
+  <li class="tab-item">
+    <a href="#">Radio</a>
+  </li>
+  <li class="tab-item">
+    <a href="#">Connect</a>
+  </li>
+</ul>
+
+            
+              
+                
+                  Music
+                  Playlists
+                  Radio
+                
+              
+              
+                
+                  Music
+                  Playlists
+                  Radio
+                
+              
+            
+            If you need badges on tabs, you can add badge class to the element within tab-item.
+            <ul class="tab tab-block">
+  <li class="tab-item active">
+    <a href="#" class="badge" data-badge="9">
+      Music
+    </a>
+  </li>
+</ul>
+
+            
+              
+                
+                  Music
+                  Playlists
+                  Radio
+                  Store
+                  
+                    
+                      
+                      
+                    
+                  
+                
+              
+            
+            
+              You could add a search box or buttons inside a tab.
+              Add the tab-action class to the tab-item.
+            
+            <ul class="tab">
+  <li class="tab-item active">
+    <a href="#">
+      Music
+    </a>
+  </li>
+  <li class="tab-item tab-action">
+    <div class="input-group input-inline">
+      <input class="form-input input-sm" type="text" placeholder="search">
+      <button class="btn btn-primary btn-sm input-group-btn">Search</button>
+    </div>
+  </li>
+</ul>
+          
+          
+            #Tiles
+            Tiles are repeatable or embeddable information blocks.
+            
+              
                 
                   
-                    
-                      
-                    
+                    
                   
                   
-                    Steve Rogers
-                    The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+                    The Avengers
+                    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+                  
+                  
+                    
+                    
                   
                 
+              
+              
                 
                   
-                    
-                      
-                    
+                    
                   
                   
-                    Natasha Romanoff
-                    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+                    The S.H.I.E.L.D.
+                    The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+                    
+                      
+                      
+                    
                   
                 
               
-              
-                
-                  
-                  
-                
-              
             
-          
-        
-
-        
-          Add a container element with the panel class. And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer class. The panel-body can be auto expanded and vertically scrollable. 
-        
-  
-
-<div class="panel">
-  <div class="panel-header">
-    <div class="panel-title">Comments</div>
-  </div>
-  <div class="panel-nav">
-    <!-- navigation components: tabs, breadcrumbs or pagination -->
-  </div>
-  <div class="panel-body">
-    <!-- contents -->
-  </div>
-  <div class="panel-footer">
-    <!-- buttons or inputs -->
-  </div>
-</div>
+            Add a container with the tile class.
+              And add child elements with the tile-icon, tile-content or/and tile-action classes.
+              The tile-icon and tile-action are optional.
+            
+            There are tile-title and tile-subtitle classes for title and subtitle text styles.
+            <div class="tile">
+  <div class="tile-icon">
+    <div class="example-tile-icon">
+      <i class="icon icon-file centered"></i>
+    </div>
+  </div>
+  <div class="tile-content">
+    <p class="tile-title">The Avengers</p>
+    <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+  </div>
+  <div class="tile-action">
+    <button class="btn btn-primary">Join</button>
+  </div>
+</div>
 
-  
-      

-
-      
-        #Popovers
-        
-          Popovers are small overlay content containers. Popovers component is built entirely in CSS.
-        
-        
-          
-            
-              
-                top popover
-              
-              
-                
-                  
-                    Apple
-                    Software and hardware
+            #Compact tiles
+            There is compact version of Tiles component, which is often used as contact and file info blocks.
+            Add the tile-centered class to the container tile.
+              The tile-icon, tile-content and tile-action will be vertically centered.
+            
+            
+              
+                
+                  
+                    
                   
-                  
-                    To make a contribution to the world by making tools for the mind that advance humankind.
+                  
+                    spectre-docs.pdf
+                    14MB · Public · 1 Jan, 2017
                   
-                  
-                    
+                  
+                    
                   
                 
               
             
-          
-          
-            
-              
-                right popover
-              
-              
-                
-                  
-                    Apple
-                    Software and hardware
-                  
-                  
-                    To make a contribution to the world by making tools for the mind that advance humankind.
-                  
-                  
-                    
-                  
+            <div class="tile tile-centered">
+  <div class="tile-icon">
+    <div class="example-tile-icon">
+      <i class="icon icon-file centered"></i>
+    </div>
+  </div>
+  <div class="tile-content">
+    <div class="tile-title">spectre-docs.pdf</div>
+    <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div>
+  </div>
+  <div class="tile-action">
+    <button class="btn btn-link">
+      <i class="icon icon-more-vert"></i>
+    </button>
+  </div>
+</div>
+          
+          
+            #Toasts
+            Toasts are used to show alert or information to users.
+            
+              
+                
+                  
+                  Toast TitleLorem ipsum dolor sit amet, consectetur adipiscing elit.
                 
               
-            
-          
-          
-            
-              
-                bottom popover
-              
-              
-                
-                  
-                    Apple
-                    Software and hardware
-                  
-                  
-                    To make a contribution to the world by making tools for the mind that advance humankind.
-                  
-                  
-                    
-                  
+              
+                
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                 
               
             
-          
-          
-            
-              
-                left popover
-              
-              
-                
-                  
-                    Apple
-                    Software and hardware
-                  
-                  
-                    To make a contribution to the world by making tools for the mind that advance humankind.
-                  
-                  
-                    
-                  
+            Add a container element with the toast class.
+              You can add any text within the container, and even icons. 
+              You may also add a close button with the btn-clear class if you need.
+            
+            <div class="toast">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</div>
+
+            
+              
+                
+                  Toast success
                 
               
-            
-          
-        
-        
-          Wrap an element by a container with the popover class. And add a container with the popover-container next to the element. You can use Cards component inside the popover-container. 
-          Also, you can add the popover-right, popover-bottom or popover-left class to define the position. By default, the popovers appear above the element.
-        
-
-
-<div class="popover popover-right">
-  <button class="btn btn-primary">right popover</button>
-  <div class="popover-container">
-    <div class="card">
-      <div class="card-header">
-        ...
-      </div>
-      <div class="card-body">
-        ...
-      </div>
-      <div class="card-footer">
-        ...
-      </div>
-    </div>
-  </div>
-</div>
-
-
-      
-
-      
-        #Steps
-        
-          Steps are progress indicators of a sequence of task steps.
-        
-        
-          
-            
-              
-                
-              
-              
-                
-              
-              
-                
-              
-              
-                
-              
-            
-          
-          
-            
-              
-                Step 1
-              
-              
-                Step 2
-              
-              
-                Step 3
-              
-              
-                Step 4
-              
-            
-          
-        
-        
-          Add a container element with the step class. And add child elements with the step-item class. The step-item with the active class will be highlighted and indicate the current state of progress.
-        
-
-
-<ul class="step">
-  <li class="step-item">
-    <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
-  </li>
-  <li class="step-item active">
-    <a href="#" class="tooltip" data-tooltip="Step 2">Step 2</a>
-  </li>
-  <li class="step-item">
-    <a href="#" class="tooltip" data-tooltip="Step 3">Step 3</a>
-  </li>
-  <li class="step-item">
-    <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a>
-  </li>
-</ul>
-
-
-      
-
-      
-        #Tabs
-        
-          Tabs enable quick switch between different views.
-        
-        
-          
-            
-              
-                
-                  Music
-                
-              
-              
-                
-                  Playlists
-                
-              
-              
-                
-                  Radio
-                
-              
-              
-                
-                  Store
-                
-              
-            
-          
-          
-            
-              
-                
-                  Music
-                
-              
-              
-                
-                  Playlists
-                
-              
-              
-                
-                  Radio
-                
-              
-            
-          
-        
-        
-          Add a container element with the tab class. And add child elements with the tab-item class. You can add the tab-block class for a full-width tab. The tab-item or its child <a> with the active class will be highlighted.
-        
-
-
-<ul class="tab tab-block">
-  <li class="tab-item active">
-    <a href="#">Music</a>
-  </li>
-  <li class="tab-item">
-    <a href="#" class="active">Playlists</a>
-  </li>
-  <li class="tab-item">
-    <a href="#">Radio</a>
-  </li>
-  <li class="tab-item">
-    <a href="#">Connect</a>
-  </li>
-</ul>
-
-
-        
-          
-            
-              
-                
-                  Music
-                
-              
-              
-                
-                  Playlists
-                
-              
-              
-                
-                  Radio
-                
-              
-            
-          
-          
-            
-              
-                
-                  Music
-                
-              
-              
-                
-                  Playlists
-                
-              
-              
-                
-                  Radio
-                
-              
-            
-          
-        
-        
-          If you need badges on tabs, you can add badge class to the element within tab-item. 
-        
-
-
-<ul class="tab tab-block">
-  <li class="tab-item active">
-    <a href="#" class="badge" data-badge="9">
-      Music
-    </a>
-  </li>
-</ul>
-
-
-        
-          
-            
-              
-                
-                  Music
-                  
-                
-              
-              
-                
-                  Playlists
-                
-              
-              
-                
-                  Radio
-                
-              
-              
-                
-                  Store
-                
-              
-              
-                
-                  
-                  
+              
+                
+                  Toast warning
                 
-              
-            
-          
-        
-        
-          You could add a search box or buttons inside a tab. Add the tab-action class to the tab-item. 
-        
-
-
-<ul class="tab">
-  <li class="tab-item active">
-    <a href="#">
-      Music
-    </a>
-  </li>
-  <li class="tab-item tab-action">
-    <div class="input-group input-inline">
-      <input class="form-input input-sm" type="text" placeholder="search">
-      <button class="btn btn-primary btn-sm input-group-btn">Search</button>
-    </div>
-  </li>
-</ul>
-
-
-      
-
-      
-        #Tiles
-        
-          Tiles are repeatable or embeddable information blocks.
-        
-        
-          
-            
-              
-                
-                  
-                
-              
-              
-                The Avengers
-                Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
-              
-              
-                
-                
               
-            
-          
-          
-            
-              
-                
-                  
-                
-              
-              
-                The S.H.I.E.L.D.
-                The Strategic Homeland Intervention, Enforcement, and Logistics Division...
-                
-                  
-                  
-                
+              
+                
+                  Toast error
+                
               
             
-          
-        
-        
-          Add a container with the tile class. And add child elements with the tile-icon, tile-content or/and tile-action classes. The tile-icon and tile-action are optional.
-          There are tile-title and tile-subtitle classes for title and subtitle text styles.
-        
-
-
-<div class="tile">
-  <div class="tile-icon">
-    <div class="example-tile-icon">
-      <i class="icon icon-file centered"></i>
-    </div>
-  </div>
-  <div class="tile-content">
-    <p class="tile-title">The Avengers</p>
-    <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
-  </div>
-  <div class="tile-action">
-    <button class="btn btn-primary">Join</button>
-  </div>
-</div>
-
-
-        Compact tiles
-        
-          There is compact version of Tiles component, which is often used as contact and file info blocks.
-          Add the tile-centered class to the container tile. The tile-icon, tile-content and tile-action will be vertically centered.
-        
-        
-          
-            
-              
-                
-                  
-                
+            And you can add the toast-primary, toast-success, toast-warning or toast-error class for additional toast colors.
+            <div class="toast toast-primary">
+  <button class="btn btn-clear float-right"></button>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</div>
+          
+          
+            #Tooltips
+            Tooltips provide context information labels that appear on hover and focus.
+            
+              
+                
+              
+              
+                
               
-              
-                spectre-docs.pdf
-                14MB · Public · 1 Jan, 2017
+              
+                
               
-              
-                
+              
+                
               
             
+            Tooltips component is built entirely in CSS.
+            Add the tooltip class and the data-tooltip attribute, which contains the tooltip content, to non self closing elements.
+            And add the tooltip-right, tooltip-bottom or tooltip-left class to define the position of a tooltip.
+              By default, the tooltip appears above the element.
+            
+            <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
+<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>  
           
         
-
-
-<div class="tile tile-centered">
-  <div class="tile-icon">
-    <div class="example-tile-icon">
-      <i class="icon icon-file centered"></i>
-    </div>
-  </div>
-  <div class="tile-content">
-    <div class="tile-title">spectre-docs.pdf</div>
-    <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div>
-  </div>
-  <div class="tile-action">
-    <button class="btn btn-link">
-      <i class="icon icon-more-vert"></i>
-    </button>
-  </div>
-</div>
-
-
       
-
-      
-        #Toasts
-        
-          Toasts are used to show alert or information to users.
-        
-        
-          
-            
-              
-              Toast Title
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            
-          
-          
-            
-              
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            
-          
-        
-        
-          Add a container element with the toast class. You can add any text within the container, and even icons. You may also add a close button with the btn-clear class if you need. 
-        
-        
-          
-            
-              
-              Toast success
-            
-          
-          
-            
-              
-              Toast warning
-            
-          
-          
-            
-              
-              Toast error
-            
-          
-        
-        
-          And you can add the toast-primary, toast-success, toast-warning or toast-error class for additional toast colors.
-        
-
-
-<div class="toast">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</div>
-
-<div class="toast toast-primary">
-  <button class="btn btn-clear float-right"></button>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</div>
-
-
-      
-
-      
-        #Tooltips
-        
-          Tooltips provide context information labels that appear on hover and focus.
-        
-        
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-        
-        
-          Tooltips component is built entirely in CSS.
-          Add the tooltip class and the data-tooltip attribute, which contains the tooltip content, to non self closing elements. And add the tooltip-right, tooltip-bottom or tooltip-left class to define the position of a tooltip. By default, the tooltip appears above the element.
-        
-
-
-<button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
-<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
-
-
-      
-
-      
-        GitHub | Twitter | PayPal Donate | Version 
-        Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
-      
-
     
-  
-
-  
-
-
+    
+  
+
\ No newline at end of file
diff --git a/docs/elements.html b/docs/elements.html
index b20594a..7038e74 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -75,9 +75,9 @@
                   Cards
                   Chips
                   Empty states
-                  Menus
+                  Menu
                   Modals
-                  Navs
+                  Nav
                   Pagination
                   Panels
                   Popovers
diff --git a/docs/experimentals.html b/docs/experimentals.html
index 4f0d944..978788d 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -1,1222 +1,956 @@
 
 
-
-  
-  
-  
-  
-  
-  Experimentals - Spectre.css CSS Framework
-  
-  
-  
-  
-  
-  
-
-
-  
-    
-      
-        
-      
-      GitHub
-    
-
-    
-      
-        
-          
-          SPECTRE
-        
-      
-      
-        
-          
-            
-            
-              Getting started
-            
-            
-              
-                
-                  Introduction
-                
-                
-                  Installation
-                
-                
-                  Custom version
-                
-                
-                  Browser support
-                
-                
-                  What's new
-                
-              
+  
+    Experimentals - Spectre.css CSS Framework
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    
+      GitHub
+      
+        
+            SPECTRE
+        
+          
+            
+              
+              Getting started
+              
+                
+                  Introduction
+                  Installation
+                  Custom version
+                  Browser support
+                  What's new
+                
+              
             
-          
-          
-            
-            
-              Elements
-            
-            
-              
-                
-                  Typography
-                
-                
-                  Tables
-                
-                
-                  Buttons
-                
-                
-                  Forms
-                
-                
-                  Icons
-                
-                
-                  Labels
-                
-                
-                  Codes
-                
-                
-                  Media
-                
-              
+            
+              
+              Elements
+              
+                
+                  Typography
+                  Tables
+                  Buttons
+                  Forms
+                  Icons
+                  Labels
+                  Code
+                  Media
+                
+              
             
-          
-          
-            
-            
-              Layout
-            
-            
-              
-                
-                  Flexbox grid
-                
-                
-                  Responsive
-                
-                
-                  Navbar
-                
-              
+            
+              
+              Layout
+              
+                
+                  Flexbox grid
+                  Responsive
+                  Navbar
+                
+              
             
-          
-          
-            
-            
-              Components
-            
-            
-              
-                
-                  Accordions
-                
-                
-                  Avatars
-                
-                
-                  Badges
-                
-                
-                  Bars
-                
-                
-                  Breadcrumbs
-                
-                
-                  Cards
-                
-                
-                  Chips
-                
-                
-                  Empty states
-                
-                
-                  Menus
-                
-                
-                  Modals
-                
-                
-                  Navs
-                
-                
-                  Pagination
-                
-                
-                  Panels
-                
-                
-                  Popovers
-                
-                
-                  Steps
-                
-                
-                  Tabs
-                
-                
-                  Tiles
-                
-                
-                  Toasts
-                
-                
-                  Tooltips
-                
-              
+            
+              
+              Components
+              
+                
+                  Accordions
+                  Avatars
+                  Badges
+                  Bars
+                  Breadcrumbs
+                  Cards
+                  Chips
+                  Empty states
+                  Menu
+                  Modals
+                  Nav
+                  Pagination
+                  Panels
+                  Popovers
+                  Steps
+                  Tabs
+                  Tiles
+                  Toasts
+                  Tooltips
+                
+              
             
-          
-          
-            
-            
-              Utilities
-            
-            
-              
-                
-                  Colors
-                
-                
-                  Cursors
-                
-                
-                  Display
-                
-                
-                  Divider
-                
-                
-                  Loading
-                
-                
-                  Position
-                
-                
-                  Shapes
-                
-                
-                  Text
-                
-              
+            
+              
+              Utilities
+              
+                
+                  Colors
+                  Cursors
+                  Display
+                  Divider
+                  Loading
+                  Position
+                  Shapes
+                  Text
+                
+              
             
-          
-          
-            
-            
-              Experimentals
-            
-            
-              
-                
-                  Autocomplete
-                
-                
-                  Calendars
-                
-                
-                  Carousels
-                
-                
-                  Comparison sliders
-                
-                
-                  Filters
-                
-                
-                  Meters
-                
-                
-                  Off-canvas
-                
-                
-                  Parallax
-                
-                
-                  Progress
-                
-                
-                  Sliders
-                
-                
-                  Timelines
-                
-              
+            
+              
+              Experimentals
+              
+                
+                  Autocomplete
+                  Calendars
+                  Carousels
+                  Comparison sliders
+                  Filters
+                  Meters
+                  Off-canvas
+                  Parallax
+                  Progress
+                  Sliders
+                  Timelines
+                
+              
             
           
         
-      
-    
-      
-    
-
-    
-      
-        #Experimentals
-        
-          The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside spectre-exp.scss before browsers fully support them. Sometimes, there are some specific browsers targeted components.
-        
-      
-
-      
-        
-          
-            
-            
-            
-            
+      

+      
+        
+          
+            #Experimentals
+            
+              The Experimentals include experimental elements and features, mostly are not yet ready for wide use.
+              These elements and components are limited inside spectre-exp.scss before browsers fully support them.
+              Sometimes, there are some specific browsers targeted components.
+            
           
-          
-            
-            
-            
-          
-        
-      
-
-      
-        #Autocomplete
-        
-          Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. 
-        
-        
-          
-            
-              
-                
-                  
-                    Bruce Banner
-                  
-                  
-                    
-                    Thor Odinson
-                  
-                  
-                    
-                    Steve Rogers
-                  
-                  
-                    
-                    Tony Stark
+          
+            #Autocomplete
+            Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.
+            
+              
+                
+                  
+                    Bruce Banner
+                      Thor Odinson
+                      Steve Rogers
+                      
+                        Tony Stark
+                      
Natasha Romanoff
+                      
+                    
                   
-                  
-                    Natasha Romanoff
-                  
-                  
                 
               
-            
-          
-          
-            
-              
-                
-                  
-                    Bruce Banner
-                    
-                  
-                  
-                    
-                    Thor Odinson
-                    
-                  
-                  
-                    
-                    
+              
+                
+                  
+                    Bruce BannerThor Odinson
+                      
+                        
+                      
+                    
+                    
+                      
+                          
+                            
+                            
+                              Steve Roger
+                              s
+                            
+                          
+                      
+                          
+                            
+                              
+                            
+                            Tony 
+                              Stark
+                            
+                          
+                    
                   
                 
-                
-                  
-                    
-                      
-                        
-                          
-                        
-                        
-                          Steve Rogers
-                        
-                      
-                    
-                  
-                  
-                    
-                      
-                        
-                          
-                        
-                        
-                          Tony Stark
-                        
-                      
-                    
-                  
-                
               
             
-          
-        
-        
-          Add a container element with the form-autocomplete class. There are 2 parts of it, one is form-autocomplete-input, another is menu component. You may add the is-focused class to form-autocomplete-input to make it appear as focus state.
-          Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.
-        
-
-        
-          
-            
-              
-                
-                  
-                    Bruce Banner
-                  
-                  
-                    
-                    Thor Odinson
-                  
-                  
-                    
-                    Steve Rogers
-                  
-                  
-                    
-                    Tony Stark
+            Add a container element with the form-autocomplete class.
+              There are 2 parts of it, one is form-autocomplete-input, another is menu component.
+              You may add the is-focused class to form-autocomplete-input to make it appear as focus state.
+            
+            
+              Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete.
+              The autocomplete HTML structure is exampled below.
+            
+            
+              
+                
+                  
+                    Bruce Banner
+                      Thor Odinson
+                      Steve Rogers
+                      
+                        Tony Stark
+                      
Natasha Romanoff
+                      
+                    
                   
-                  
-                    Natasha Romanoff
-                  
-                  
                 
               
             
-          
-        
-
-
-<div class="form-autocomplete">
-  <!-- autocomplete input container -->
-  <div class="form-autocomplete-input form-input">
+            <div class="form-autocomplete">
+  <!-- autocomplete input container -->
+  <div class="form-autocomplete-input form-input">
 
-    <!-- autocomplete chips -->
-    <div class="chip">
-      <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
+    <!-- autocomplete chips -->
+    <div class="chip">
+      <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
       Thor Odinson
-      <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
-    </div>
-
-    <!-- autocomplete real input box -->
-    <input class="form-input" type="text" placeholder="typing here">
-  </div>
-
-  <!-- autocomplete suggestion list -->
-  <ul class="menu">
-    <!-- menu list chips -->
-    <li class="menu-item">
-      <a href="#">
-        <div class="tile tile-centered">
-          <div class="tile-icon">
-            <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers">
-          </div>
-          <div class="tile-content">
+      <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+    </div>
+
+    <!-- autocomplete real input box -->
+    <input class="form-input" type="text" placeholder="typing here">
+  </div>
+
+  <!-- autocomplete suggestion list -->
+  <ul class="menu">
+    <!-- menu list chips -->
+    <li class="menu-item">
+      <a href="#">
+        <div class="tile tile-centered">
+          <div class="tile-icon">
+            <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers">
+          </div>
+          <div class="tile-content">
             Steve Rogers
-          </div>
-        </div>
-      </a>
-    </li>
-  </ul>
-</div>
-
-
-      

-
-      
-        
-          
-        
-      
-
-      
-        #Calendars
-        
-          Calendars are designed for date or date range picker and events display. It is made with flex layout.
-        
-        
-          
-            
-              
-                
-                March 2017
-                
-              
-              
-                
-                  Sun
-                  Mon
-                  Tue
-                  Wed
-                  Thu
-                  Fri
-                  Sat
-                
-                
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                
-              
-            
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+</div>

           

-        

-
-        Calendars sizes
-        
-          
-            
-              
-                
-                March 2017
-                
-              
-              
-                
-                  Sun
-                  Mon
-                  Tue
-                  Wed
-                  Thu
-                  Fri
-                  Sat
-                
-                
-                  
-                  
-                    
-                    
-                      Zhonghe Festival
-                    
+          
+            #Calendars
+            Calendars are designed for date or date range picker and events display. It is made with flex layout.
+            
+              
+                
+                  
+                    
+                    March 2017
+                    
                   
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                    
-                    
-                      Product launch event
-                      International Women's Day
+                  
+                    
+                      Sun
+                      Mon
+                      Tue
+                      Wed
+                      Thu
+                      Fri
+                      Sat
                     
-                  
-                  
-                  
-                  
-                  
-                    
-                    
-                      Arbor Day
+                    
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
                     
                   
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                    
-                    
-                      Spring Equinox
-                    
+                
+              
+            
+            #Calendars sizes
+            
+              
+                
+                  
+                    
+                    March 2017
+                    
                   
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                  
-                    
-                    
-                      April Fools' Day
+                  
+                    
+                      Sun
+                      Mon
+                      Tue
+                      Wed
+                      Thu
+                      Fri
+                      Sat
+                    
+                    
+                      
+                        
+                      
+                      
+                        
+                        Zhonghe Festival
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                        Product launch eventInternational Women's Day
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                        Arbor Day
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                        Spring Equinox
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                      
+                      
+                        
+                        April Fools' Day
+                      
                     
                   
                 
               
             
           
-        
-      
-
-      
-        #Carousels
-        
-          Carousels are slideshows for cycling images. It is built in pure CSS.
-        
-        
-          
-            
-              
-              
-              
-              
-              
-                
-                  
-                    
-                  
-                  
-                    
-                  
-                  
-                
-
-                
-                  
-                    
-                  
-                  
-                    
-                  
-                  
-                
-
-                
-                  
-                    
-                  
-                  
-                    
-                  
-                  
-                
-
-                
-                  
-                    
-                  
-                  
-                    
-                  
-                  
-                
-              
-              
-                1
-                2
-                3
-                4
+          
+            #Carousels
+            Carousels are slideshows for cycling images. It is built in pure CSS.
+            
+              
+                
+                  
+                  
+                  
+                  
+                  
+                    
+                      
+                      
+                    
+                    
+                      
+                      
+                    
+                    
+                      
+                      
+                    
+                    
+                      
+                      
+                    
+                  
+                  
+                    1
+                    2
+                    3
+                    4
+                  
+                
               
             
           
-        
-
-
-<div class="carousel">
-  <input type="radio" id="slide-1" class="carousel-locator" name="carousel-radio" hidden checked>
-  <input type="radio" id="slide-2" class="carousel-locator" name="carousel-radio" hidden>
-  <input type="radio" id="slide-3" class="carousel-locator" name="carousel-radio" hidden>
-  <input type="radio" id="slide-4" class="carousel-locator" name="carousel-radio" hidden>
-  
-  <div class="carousel-container">
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-4">
-        <i class="icon icon-arrow-left"></i>
-      </label>
-      <label class="item-next btn btn-action btn-lg" for="slide-2">
-        <i class="icon icon-arrow-right"></i>
-      </label>
-      <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
-    </figure>
-
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-1">
-        <i class="icon icon-arrow-left"></i>
-      </label>
-      <label class="item-next btn btn-action btn-lg" for="slide-3">
-        <i class="icon icon-arrow-right"></i>
-      </label>
-      <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
-    </figure>
-
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-2">
-        <i class="icon icon-arrow-left"></i>
-      </label>
-      <label class="item-next btn btn-action btn-lg" for="slide-4">
-        <i class="icon icon-arrow-right"></i>
-      </label>
-      <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
-    </figure>
-
-    <figure class="carousel-item">
-      <label class="item-prev btn btn-action btn-lg" for="slide-3">
-        <i class="icon icon-arrow-left"></i>
-      </label>
-      <label class="item-next btn btn-action btn-lg" for="slide-1">
-        <i class="icon icon-arrow-right"></i>
-      </label>
-      <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
-    </figure>
-  </div>
-
-  <div class="carousel-nav">
-    <label class="nav-item text-hide c-hand" for="slide-1">1</label>
-    <label class="nav-item text-hide c-hand" for="slide-2">2</label>
-    <label class="nav-item text-hide c-hand" for="slide-3">3</label>
-    <label class="nav-item text-hide c-hand" for="slide-4">4</label>
-  </div>
-</div>
-
-
-      
-
-      
-        #Comparison Sliders
-        
-          Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
-        
-        
-          
-            
-              
-                
-                Before
-              
-              
-                
-                After
-                
-              
+          
+            #Comparison sliders
+            Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
+            
+              
+                
+                  
+                    Before
+                  
+                  
+                    After
+                    
+                  
+                
+              
             
+            <div class="comparison-slider">
+  <figure class="comparison-before">
+    <!-- image (before) -->
+    <div class="comparison-label">Before</div>
+  </figure>
+
+  <figure class="comparison-after">
+    <!-- image (after) -->
+    <div class="comparison-label">After</div>
+    <textarea class="comparison-resizer" readonly></textarea>
+  </figure>
+</div>
           
-        
-
-
-<div class="comparison-slider">
-  <figure class="comparison-before">
-    <!-- image (before) -->
-    <div class="comparison-label">Before</div>
-  </figure>
-
-  <figure class="comparison-after">
-    <!-- image (after) -->
-    <div class="comparison-label">After</div>
-    <textarea class="comparison-resizer" readonly></textarea>
-  </figure>
-</div>
-
-
-      
-
-      
-        #Filters
-        
-          Filters are CSS only content filters.
-        
-        
-          
-            
-              
-              
-              
-              
-              
-
-              
-                All
-                Action
-                Roleplaying
-                Shooter
-                Sports
-              
-              
-                
-                  
-                    
-                      Fallout 4
-                      Roleplaying
-                    
+          
+            #Filters
+            Filters are CSS only content filters.
+            
+              
+                
+                  
+                  
+                  
+                  
+                  
+                  
+                    All
+                    Action
+                    Roleplaying
+                    Shooter
+                    Sports
                   
-                
-                
-                  
-                    
-                      Halo 5
-                      Shooter
+                  
+                    
+                      
+                        
+                          Fallout 4
+                          Roleplaying
+                        
+                      
                     
-                  
-                
-                
-                  
-                    
-                      Quantum Break
-                      Action
+                    
+                      
+                        
+                          Halo 5
+                          Shooter
+                        
+                      
                     
-                  
-                
-                
-                  
-                    
-                      Forza Horizon 3
-                      Sports
+                    
+                      
+                        
+                          Quantum Break
+                          Action
+                        
+                      
                     
-                  
-                
-                
-                  
-                    
-                      Final Fantasy XV
-                      Roleplaying
+                    
+                      
+                        
+                          Forza Horizon 3
+                          Sports
+                        
+                      
                     
-                  
-                
-                
-                  
-                    
-                      NBA 2K17
-                      Sports
+                    
+                      
+                        
+                          Final Fantasy XV
+                          Roleplaying
+                        
+                      
                     
-                  
-                
-                
-                  
-                    
-                      Battlefield 1
-                      Shooter
+                    
+                      
+                        
+                          NBA 2K17
+                          Sports
+                        
+                      
                     
-                  
-                
-                
-                  
-                    
-                      GTA V
-                      Action
+                    
+                      
+                        
+                          Battlefield 1
+                          Shooter
+                        
+                      
                     
-                  
-                
-                
-                  
-                    
-                      FIFA 17
-                      Sports
+                    
+                      
+                        
+                          GTA V
+                          Action
+                        
+                      
                     
-                  
-                
-                
-                  
-                    
-                      Overwatch
-                      Shooter
+                    
+                      
+                        
+                          FIFA 17
+                          Sports
+                        
+                      
                     
-                  
-                
-                
-                  
-                    
-                      Titanfall 2
-                      Shooter
+                    
+                      
+                        
+                          Overwatch
+                          Shooter
+                        
+                      
                     
-                  
-                
-                
-                  
-                    
-                      Gears of Wars 4
-                      Shooter
+                    
+                      
+                        
+                          Titanfall 2
+                          Shooter
+                        
+                      
+                    
+                    
+                      
+                        
+                          Gears of Wars 4
+                          Shooter
+                        
+                      
                     
                   
                 
               
             
+            Filters use tag-1 to tag-8 to flag different tags.
+              tag-0 is reserved for clearing filter (or showing all). 
+              You can overwrite $filter-number in _filters.scss to have more filters.
+            
+            <div class="filter">
+  <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked>
+  <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden>
+  <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden>
+
+  <div class="filter-nav">
+    <label class="chip" for="tag-0">All</label>
+    <label class="chip" for="tag-1">Action</label>
+    <label class="chip" for="tag-2">Roleplaying</label>
+  </div>
+
+  <div class="filter-body">
+    <div class="filter-item card" data-tag="tag-1">
+      <!-- Filter item content -->
+    </div>
+    <div class="filter-item card" data-tag="tag-2">
+      <!-- Filter item content -->
+    </div>
+    <!-- Filter items -->
+  </div>
+</div>
           
-        
-        
-          Filters use tag-1 to tag-8 to flag different tags. tag-0 is reserved for clearing filter (or showing all). You can overwrite $filter-number in _filters.scss to have more filters.
-        
-
-
-<div class="filter">
-  <input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked>
-  <input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden>
-  <input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden>
-
-  <div class="filter-nav">
-    <label class="chip" for="tag-0">All</label>
-    <label class="chip" for="tag-1">Action</label>
-    <label class="chip" for="tag-2">Roleplaying</label>
-  </div>
-
-  <div class="filter-body">
-    <div class="filter-item card" data-tag="tag-1">
-      <!-- Filter item content -->
-    </div>
-    <div class="filter-item card" data-tag="tag-2">
-      <!-- Filter item content -->
-    </div>
-    <!-- Filter items -->
-  </div>
-</div>
-
-
-      
-
-      
-        #Meters
-        
-          Meters represent the value within the known range.
-        
-        
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-        
-        
-          
-        
-
-
-<!-- Meter is green when low < value < high -->
-<meter class="meter" value="20" min="0" max="100"></meter>
-<meter class="meter" value="60" min="0" max="100" low="30" high="80"></meter>
-<!-- Meter is yellow when value < low  or high < value -->
-<meter class="meter" value="85" min="0" max="100" low="30" high="80"></meter>
-<!-- Meter is red when value < low < high < optimum or optimum < low < high < value -->
-<meter class="meter" value="20" optimum="90" min="0" max="100" low="30" high="80"></meter>
-
-
-      
-
-      
-        #Off-canvas
-        
-          The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS. 
-          By default, the off-canvas menu is collapsed whenever the window width is. But you can add the off-canvas-sidebar-show class to the off-canvas to make the sidebar expanded when the window width is larger than or equal to 960px.
-        
-        
-          
-            
-              
-                
-              
-              
-                Sidebar
+          
+            #Meters
+            Meters represent the value within the known range.
+            
+              
+                
               
-              
-              
-                
-                  Lorem ipsum
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
-                  Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
-                
+              
+                
+              
+              
+                
+              
+              
+                
               
             
+            <!-- Meter is green when low < value < high -->
+<meter class="meter" value="20" min="0" max="100"></meter>
+<meter class="meter" value="60" min="0" max="100" low="30" high="80"></meter>
+<!-- Meter is yellow when value < low  or high < value -->
+<meter class="meter" value="85" min="0" max="100" low="30" high="80"></meter>
+<!-- Meter is red when value < low < high < optimum or optimum < low < high < value -->
+<meter class="meter" value="20" optimum="90" min="0" max="100" low="30" high="80"></meter>
           
-        
-        
-          You can open the sidebar by adding the class active to off-canvas-sidebar. And remove the active to close it.
-        
-
-
-<div class="off-canvas">
-  <!-- off-screen toggle button -->
-  <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
-    <i class="icon icon-menu"></i>
-  </a>
-
-  <div id="sidebar-id" class="off-canvas-sidebar">
-    <!-- off-screen sidebar -->
-  </div>
-
-  <a class="off-canvas-overlay" href="#close"></a>
-
-  <div class="off-canvas-content">
-    <!-- off-screen content -->
-  </div>
-</div>
-
-
-      
-
-      
-        #Parallax
-        
-          The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.
-        
-        
-          
-            
-              
-              
-              
-              
-              
-                
-                  tvOS parallax demo
-                
-                
-                  
+          
+            #Off-canvas
+            The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.
+            
+              By default, the off-canvas menu is collapsed whenever the window width is.
+              But you can add the off-canvas-sidebar-show class to the off-canvas to make the sidebar expanded when the window width is larger than or equal to 960px.
+            
+            
+              
+                
+                  Sidebar

+                  
+                    
+                      Lorem ipsum
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+                      Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+                    
+                  
                 
               
             
+            You can open the sidebar by adding the class active to off-canvas-sidebar.
+              And remove the active to close it.
+            
+            <div class="off-canvas">
+  <!-- off-screen toggle button -->
+  <a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
+    <i class="icon icon-menu"></i>
+  </a>
+
+  <div id="sidebar-id" class="off-canvas-sidebar">
+    <!-- off-screen sidebar -->
+  </div>
+
+  <a class="off-canvas-overlay" href="#close"></a>
+
+  <div class="off-canvas-content">
+    <!-- off-screen content -->
+  </div>
+</div>
           
-        
-
-
-<div class="parallax">
-  <div class="parallax-top-left" tabindex="1"></div>
-  <div class="parallax-top-right" tabindex="2"></div>
-  <div class="parallax-bottom-left" tabindex="3"></div>
-  <div class="parallax-bottom-right" tabindex="4"></div>
-  <div class="parallax-content">
-    <div class="parallax-front">
-      <h2>tvOS parallax demo</h2>
-    </div>
-    <div class="parallax-back">
-      <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
-    </div>
-  </div>
-</div>
-
-
-      
-
-      
-        #Progress
-        
-          The Progress indicates the progress completion of a task.
-        
-        
-          
-            
-          
-          
-            
-          
-          
-            
-          
-          
-            
-          
-        
-
-
-<progress class="progress" value="25" max="100"></progress>
-<progress class="progress" max="100"></progress>
-
-
-      
-
-      
-        #Sliders
-        
-          Sliders are for selecting values from ranges.
-          You can add the class tooltip to have tooltip labels. If no data-tooltip is set, the value will be used instead.
-        
-        
-          
-            
-          
-          
-            
-          
-        
-
-
-<!-- Sliders -->
-<input class="slider" type="range" min="0" max="100" value="50">
-<!-- Sliders with tooltips -->
-<input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
-
-
-      
-
-      
-        #Timelines
-        
-          Timelines are ordered sequences of activities.
-        
-        
-          
-            
-              
-                
-                  
-                
-                
-                  
-                    
-                      March 2016
-                      Initial commit
+          
+            #Parallax
+            The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.
+            
+              
+                
+                  
+                  
+                  
+                  
+                  
+                    
+                      tvOS parallax demo
                     
+                    
                   
                 
               
-              
-                
-                  
-                    
-                  
-                
-                
-                  
-                    
-                      February 2017
-                      New Documents experience
-                      Bars: represent the progress of a task
-                      Steps: progress indicators of a sequence of task steps
-                      Tiles: repeatable or embeddable information blocks
-                    
-                    
-                      
+            
+            <div class="parallax">
+  <div class="parallax-top-left" tabindex="1"></div>
+  <div class="parallax-top-right" tabindex="2"></div>
+  <div class="parallax-bottom-left" tabindex="3"></div>
+  <div class="parallax-bottom-right" tabindex="4"></div>
+  <div class="parallax-content">
+    <div class="parallax-front">
+      <h2>tvOS parallax demo</h2>
+    </div>
+    <div class="parallax-back">
+      <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" ...>
+    </div>
+  </div>
+</div>
+  
+          
+          
+            #Progress
+            The Progress indicates the progress completion of a task.
+            
+              
+                
+              
+              
+                
+              
+              
+                
+              
+              
+                
+              
+            
+            <progress class="progress" value="25" max="100"></progress>
+<progress class="progress" max="100"></progress>
+          
+          
+            #Sliders
+            Sliders are for selecting values from ranges.
+            You can add the class tooltip to have tooltip labels.
+              If no data-tooltip is set, the value will be used instead.
+            
+            
+              
+                
+              
+              
+                
+              
+            
+            <!-- Sliders -->
+<input class="slider" type="range" min="0" max="100" value="50">
+<!-- Sliders with tooltips -->
+<input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
+          
+          
+            #Timelines
+            Timelines are ordered sequences of activities.
+            
+              
+                
+                  
+                    
+                    
+                      
+                        
+                          March 2016
+                          Initial commit
+                        
+                      
                     
                   
-                
-              
-              
-                
-                  
-                    
-                  
-                
-                
-                  
-                    
-                      March 2017
-                      Icons: single-element, responsive and pure CSS icons
-                      Popovers: small overlay content containers
-                      Calendars: date or date range picker and events display
-                      Carousels: slideshows for cycling images
+                  
+                    
+                    
+                      
+                        
+                          February 2017
+                          New Documents experience
+                          Bars: represent the progress of a task
+                          Steps: progress indicators of a sequence of task steps
+                          Tiles: repeatable or embeddable information blocks
+                        
+                        
+                          
+                        
+                      
                     
-                    
-                      
+                  
+                  
+                    
+                    
+                      
+                        
+                          March 2017
+                          Icons: single-element, responsive and pure CSS icons
+                          Popovers: small overlay content containers
+                          Calendars: date or date range picker and events display
+                          Carousels: slideshows for cycling images
+                        
+                        
+                          
+                        
+                      
                     
                   
                 
               
             
+            <div class="timeline">
+  <div class="timeline-item" id="timeline-example-1">
+    <div class="timeline-left">
+      <a class="timeline-icon" href="#timeline-example-1"></a>
+    </div>
+    <div class="timeline-content">
+      <!-- tiles structure -->
+    </div>
+  </div>
+
+  <div class="timeline-item" id="timeline-example-2">
+    <div class="timeline-left">
+      <a class="timeline-icon icon-lg" href="#timeline-example-2">
+        <i class="icon icon-check"></i>
+      </a>
+    </div>
+    <div class="timeline-content">
+      <!-- tiles structure -->
+    </div>
+  </div>
+  ...
+</div>
           
         
-
-
-<div class="timeline">
-  <div class="timeline-item" id="timeline-example-1">
-    <div class="timeline-left">
-      <a class="timeline-icon" href="#timeline-example-1"></a>
-    </div>
-    <div class="timeline-content">
-      <!-- tiles structure -->
-    </div>
-  </div>
-
-  <div class="timeline-item" id="timeline-example-2">
-    <div class="timeline-left">
-      <a class="timeline-icon icon-lg" href="#timeline-example-2">
-        <i class="icon icon-check"></i>
-      </a>
-    </div>
-    <div class="timeline-content">
-      <!-- tiles structure -->
-    </div>
-  </div>
-  ...
-</div>
-
-
       
-
-      
-        GitHub | Twitter | PayPal Donate | Version 
-        Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
-      
-
     
-  
-
-  
-
-
+    
+  
+
\ No newline at end of file
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 2665d0c..216684e 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -75,9 +75,9 @@
                   Cards
                   Chips
                   Empty states
-                  Menus
+                  Menu
                   Modals
-                  Navs
+                  Nav
                   Pagination
                   Panels
                   Popovers
diff --git a/docs/layout.html b/docs/layout.html
index 95f95f2..65d8008 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -75,9 +75,9 @@
                   Cards
                   Chips
                   Empty states
-                  Menus
+                  Menu
                   Modals
-                  Navs
+                  Nav
                   Pagination
                   Panels
                   Popovers
diff --git a/docs/src/_docs-layout.pug b/docs/src/_docs-layout.pug
index ae2da02..864e458 100644
--- a/docs/src/_docs-layout.pug
+++ b/docs/src/_docs-layout.pug
@@ -53,9 +53,9 @@ block content
             {url: '#cards', name: 'Cards'},
             {url: '#chips', name: 'Chips'},
             {url: '#empty', name: 'Empty states'},
-            {url: '#menus', name: 'Menus'},
+            {url: '#menu', name: 'Menu'},
             {url: '#modals', name: 'Modals'},
-            {url: '#navs', name: 'Navs'},
+            {url: '#nav', name: 'Nav'},
             {url: '#pagination', name: 'Pagination'},
             {url: '#panels', name: 'Panels'},
             {url: '#popovers', name: 'Popovers'},
diff --git a/docs/src/components.pug b/docs/src/components.pug
new file mode 100644
index 0000000..87e39ca
--- /dev/null
+++ b/docs/src/components.pug
@@ -0,0 +1,83 @@
+extends _docs-layout.pug
+
+block variables
+  - var title = 'Components - Spectre.css CSS Framework'
+  - var description = ''
+  - var current = 'components'
+
+block docs-content
+  //- Accordions
+  +docs-heading('accordions', 'Accordions')
+    include contents/accordions.pug
+    
+  //- Avatars
+  +docs-heading('avatars', 'Avatars')
+    include contents/avatars.pug
+
+  //- Badges
+  +docs-heading('badges', 'Badges')
+    include contents/badges.pug
+
+  //- Bars
+  +docs-heading('bars', 'Bars')
+    include contents/bars.pug
+  
+  //- Breadcrumbs
+  +docs-heading('breadcrumbs', 'Breadcrumbs')
+    include contents/breadcrumbs.pug
+
+  //- Cards
+  +docs-heading('cards', 'Cards')
+    include contents/cards.pug
+
+  //- Chips
+  +docs-heading('chips', 'Chips')
+    include contents/chips.pug
+  
+  //- Empty states
+  +docs-heading('empty', 'Empty states')
+    include contents/empty.pug
+
+  //- Menu
+  +docs-heading('menu', 'Menu')
+    include contents/menu.pug
+    
+  //- Modals
+  +docs-heading('modals', 'Modals')
+    include contents/modals.pug
+
+  //- Nav
+  +docs-heading('nav', 'Nav')
+    include contents/nav.pug
+
+  //- Pagination
+  +docs-heading('pagination', 'Pagination')
+    include contents/pagination.pug
+  
+  //- Panels
+  +docs-heading('panels', 'Panels')
+    include contents/panels.pug
+
+  //- Popovers
+  +docs-heading('popovers', 'Popovers')
+    include contents/popovers.pug
+
+  //- Steps
+  +docs-heading('steps', 'Steps')
+    include contents/steps.pug
+  
+  //- Tabs
+  +docs-heading('tabs', 'Tabs')
+    include contents/tabs.pug
+
+  //- Tiles
+  +docs-heading('tiles', 'Tiles')
+    include contents/tiles.pug
+    
+  //- Toasts
+  +docs-heading('toasts', 'Toasts')
+    include contents/toasts.pug
+
+  //- Tooltips
+  +docs-heading('tooltips', 'Tooltips')
+    include contents/tooltips.pug
\ No newline at end of file
diff --git a/docs/src/contents/accordions.pug b/docs/src/contents/accordions.pug
new file mode 100644
index 0000000..8914516
--- /dev/null
+++ b/docs/src/contents/accordions.pug
@@ -0,0 +1,113 @@
+p Accordions are used to toggle sections of content.
+
+.columns
+  .column.col-6.col-md-12
+    .accordion
+      input#accordion-1(type="radio" name="accordion-radio" hidden="" checked="")
+      label.accordion-header.c-hand(for="accordion-1")
+        i.icon.icon-arrow-right.mr-1
+        | Elements
+      .accordion-body
+        ul.menu.menu-nav
+          li.menu-item
+            a(href="#accordions") Element 1
+          li.menu-item
+            a(href="#accordions") Element 2
+    .accordion
+      input#accordion-2(type="radio" name="accordion-radio" hidden="")
+      label.accordion-header.c-hand(for="accordion-2")
+        i.icon.icon-arrow-right.mr-1
+        | Layout
+      .accordion-body
+        ul.menu.menu-nav
+          li.menu-item
+            a(href="#accordions") Layout 1
+          li.menu-item
+            a(href="#accordions") Layout 2
+    .accordion
+      input#accordion-3(type="radio" name="accordion-radio" hidden="")
+      label.accordion-header.c-hand(for="accordion-3")
+        i.icon.icon-arrow-right.mr-1
+        | Components
+      .accordion-body
+        ul.menu.menu-nav
+          li.menu-item
+            a(href="#accordions") Component 1
+          li.menu-item
+            a(href="#accordions") Component 2
+  .column.col-6.col-md-12
+    .accordion
+      input#accordion-4(type="checkbox" name="accordion-checkbox" hidden="" checked="")
+      label.accordion-header.c-hand(for="accordion-4")
+        | Elements
+      .accordion-body
+        ul.menu.menu-nav
+          li.menu-item
+            a(href="#accordions") Element 1
+          li.menu-item
+            a(href="#accordions") Element 2
+    .accordion
+      input#accordion-5(type="checkbox" name="accordion-checkbox" hidden="")
+      label.accordion-header.c-hand(for="accordion-5")
+        | Layout
+      .accordion-body
+        ul.menu.menu-nav
+          li.menu-item
+            a(href="#accordions") Layout 1
+          li.menu-item
+            a(href="#accordions") Layout 2
+    .accordion
+      input#accordion-6(type="checkbox" name="accordion-checkbox" hidden="")
+      label.accordion-header.c-hand(for="accordion-6")
+        | Components
+      .accordion-body
+        ul.menu.menu-nav
+          li.menu-item
+            a(href="#accordions") Component 1
+          li.menu-item
+            a(href="#accordions") Component 2
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        
+        
+          
+          Title
+        
+        
+          
+        
+      
+
+      
+      
+        
+        
+          Title
+        
+        
+          
+        
+      
+
+p
+  | Alternatively, you can use #[code details] and #[code summary] instead of #[code input] radio or checkbox trick.
+  | Add the #[code open] attribute to #[code details] to expand it.
+  | Microsoft Edge support is #[a(href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank") under consideration].
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        
+          
+          Title
+        
+        
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/autocomplete.pug b/docs/src/contents/autocomplete.pug
new file mode 100644
index 0000000..ca93c8a
--- /dev/null
+++ b/docs/src/contents/autocomplete.pug
@@ -0,0 +1,119 @@
+p
+  | Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.
+
+.columns
+  .column.col-9.col-xs-12
+    .form-group
+      .form-autocomplete
+        .form-autocomplete-input.form-input
+          span.chip
+            | Bruce Banner
+          .chip
+            img.avatar.avatar-sm(src="img/avatar-1.png" alt="Avatar")
+            | Thor Odinson
+          .chip
+            img.avatar.avatar-sm(src="img/avatar-4.png" alt="Avatar")
+            | Steve Rogers
+          .chip
+            figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+            | Tony Stark
+          span.chip.active
+            | Natasha Romanoff
+          input.form-input(type="text" placeholder="")
+  .column.col-9.col-xs-12
+    .form-group
+      .form-autocomplete
+        .form-autocomplete-input.form-input.is-focused
+          span.chip
+            | Bruce Banner
+            a.btn.btn-clear(href="#" aria-label="Close" role="button")
+          span.chip
+            img.avatar.avatar-sm(src="img/avatar-1.png" alt="Thor Odinson")
+            | Thor Odinson
+            a.btn.btn-clear(href="#" aria-label="Close" role="button")
+          .has-icon-left
+            input.form-input(type="text" placeholder="" value="S")
+            i.form-icon.loading
+        ul.menu
+          li.menu-item
+            a(href="#autocomplete")
+              .tile.tile-centered
+                .tile-icon
+                  img.avatar.avatar-sm(src="img/avatar-4.png" alt="Steve Rogers")
+                .tile-content
+                  mark S
+                  | teve Roger
+                  mark s
+          li.menu-item
+            a(href="#autocomplete")
+              .tile.tile-centered
+                .tile-icon
+                  figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+                .tile-content
+                  | Tony 
+                  mark S
+                  | tark
+
+p
+  | Add a container element with the #[code form-autocomplete] class.
+  | There are 2 parts of it, one is #[code form-autocomplete-input], another is #[code menu] component.
+  | You may add the #[code is-focused] class to #[code form-autocomplete-input] to make it appear as focus state.
+p
+  | Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete.
+  | The autocomplete HTML structure is exampled below.
+
+.columns
+  .column.col-9.col-xs-12
+    .form-group
+      .form-autocomplete.autocomplete-oneline
+        .form-autocomplete-input.form-input
+          span.chip
+            | Bruce Banner
+          .chip
+            img.avatar.avatar-sm(src="img/avatar-1.png" alt="Avatar")
+            | Thor Odinson
+          .chip
+            img.avatar.avatar-sm(src="img/avatar-4.png" alt="Avatar")
+            | Steve Rogers
+          .chip
+            figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+            | Tony Stark
+          span.chip.active
+            | Natasha Romanoff
+          input.form-input(type="text" placeholder="")
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+        
+
+          
+          
+            
+            Thor Odinson
+            
+          
+
+          
+          
+        
+
+        
+        
+          
+          
+            
+              
+                
+                  
+                
+                
+                  Steve Rogers
+                
+              
+            
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/avatars.pug b/docs/src/contents/avatars.pug
new file mode 100644
index 0000000..ff8f6c6
--- /dev/null
+++ b/docs/src/contents/avatars.pug
@@ -0,0 +1,93 @@
+p Avatars are user profile pictures. 
+
+.columns
+  .column.col-6.col-xs-12
+    figure.avatar.avatar-xl
+      img(src="img/avatar-1.png" alt="Avatar XL")
+    figure.avatar.avatar-lg
+      img(src="img/avatar-2.png" alt="Avatar LG")
+    figure.avatar
+      img(src="img/avatar-3.png" alt="Avatar")
+    figure.avatar.avatar-sm
+      img(src="img/avatar-4.png" alt="Avatar SM")
+    figure.avatar.avatar-xs
+      img(src="img/avatar-5.png" alt="Avatar XS")
+  .column.col-6.col-xs-12
+    figure.avatar.avatar-xl(data-initial="YZ")
+    figure.avatar.avatar-lg(data-initial="YZ")
+    figure.avatar(data-initial="YZ")
+    figure.avatar.avatar-sm(data-initial="YZ")
+    figure.avatar.avatar-xs(data-initial="YZ")
+
+p
+  | Add the #[code avatar] class to #{''} element.
+  | There are 4 additional sizes available, including #[code avatar-xl](64px), #[code avatar-lg](48px), #[code avatar-sm](24px), and #[code avatar-xs](16px).
+  | By default, the avatar size is 32px.
+p
+  | For users who don't have profile pictures, you may use their initials for avatars.
+  | Add the #[code avatar] class and avatar size class to #{''}  element.
+  | The #[code data-initial] attribute is the name appear inside the avatar.
+
+.columns
+  .column.col-6.col-xs-12
+    figure.avatar.avatar-xl
+      img(src="img/avatar-1.png" alt="Avatar")
+      img.avatar-icon(src="img/avatar-2.png" alt="Avatar")
+    figure.avatar.avatar-lg
+      img(src="img/avatar-2.png" alt="Avatar")
+      img.avatar-icon(src="img/avatar-3.png" alt="Avatar")
+    figure.avatar
+      img(src="img/avatar-3.png" alt="Avatar")
+      img.avatar-icon(src="img/avatar-4.png" alt="Avatar")
+    figure.avatar.avatar-sm
+      img(src="img/avatar-4.png" alt="Avatar")
+      img.avatar-icon(src="img/avatar-5.png" alt="Avatar")
+    figure.avatar.avatar-xs
+      img(src="img/avatar-5.png" alt="Avatar")
+      img.avatar-icon(src="img/avatar-1.png" alt="Avatar")
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        
+      
+
+      
+        
+        
+      
+
+      
+
+      
+      
+        
+      
+        
+.columns
+  .column.col-6.col-xs-12
+    figure.avatar.avatar-xl(data-initial="YZ")
+      i.avatar-presence.online
+    figure.avatar.avatar-lg(data-initial="YZ")
+      i.avatar-presence.busy
+    figure.avatar(data-initial="YZ")
+      i.avatar-presence.away
+    figure.avatar.avatar-sm(data-initial="YZ")
+      i.avatar-presence.offline
+    figure.avatar.avatar-xs(data-initial="YZ")
+      i.avatar-presence.online
+
+p
+  | Avatars support presence indicators.
+  | You can add an #{''} element with the #[code avatar-presence] class, and add #[code online], #[code busy] or #[code away] class for different status colors.
+  | The default is gray which means offline.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/badges.pug b/docs/src/contents/badges.pug
new file mode 100644
index 0000000..250fb39
--- /dev/null
+++ b/docs/src/contents/badges.pug
@@ -0,0 +1,59 @@
+p Badges are often used as unread number indicators.
+
+.columns
+  .column.col-3.col-xs-6
+    span.badge(data-badge="")
+      | Notifications
+  .column.col-3.col-xs-6
+    span.badge(data-badge="8")
+      | Notifications
+  .column.col-3.col-xs-6
+    span.badge(data-badge="88")
+      | Notifications
+  .column.col-3.col-xs-6
+    span.badge(data-badge="888")
+      | Notifications
+
+p
+  | Add the #[code badge] class to non self closing elements.
+  | And add the #[code data-badge] attribute to define the content of a badge.
+  | The badge will appear in the top-right direction of the element.
+p
+  | If there is no #[code data-badge] or the attribute is not specified, the badge will appear as a dot.
+
+.columns
+  .column.col-sm-12
+    button.btn.badge(data-badge="") Button
+    button.btn.badge(data-badge="8") Button
+  .column.col-sm-12
+    button.btn.btn-primary.badge(data-badge="") Button
+    button.btn.btn-primary.badge(data-badge="8") Button
+  .column.col-sm-12
+    figure.avatar.avatar-xl.badge(data-badge="8" data-initial="YZ")
+      img(src="img/avatar-1.png" alt="YZ")
+    figure.avatar.avatar-lg.badge(data-badge="8" data-initial="YZ")
+      img(src="img/avatar-2.png" alt="YZ")
+    figure.avatar.badge(data-badge="8" data-initial="YZ")
+      img(src="img/avatar-3.png" alt="YZ")
+
+p
+  | Badges support #[code button] and #[code avatars] elements as well.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        Notifications
+      
+
+      
+        Notifications
+      
+
+      
+
+      
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/bars.pug b/docs/src/contents/bars.pug
new file mode 100644
index 0000000..58d7f3c
--- /dev/null
+++ b/docs/src/contents/bars.pug
@@ -0,0 +1,84 @@
+p
+  | Bars represent the progress of a task or the value within the known range.
+  | Bars are custom components for displaying HTML5 #{''}, #{''} and input range elements.
+
+.columns
+  .column.col-8.col-xs-12
+    .bar.bar-sm
+      .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100")
+.columns
+  .column.col-8.col-xs-12
+    .bar
+      .bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;")
+.columns
+  .column.col-8.col-xs-12
+    .bar
+      .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;") 25%
+      .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;") 15%
+      .bar-item.tooltip(data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;") 10%
+      .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;") 15%
+
+p
+  | Add a container element with the #[code bar] class.
+  | And add child elements with the #[code bar-item] class.
+  | The width percentage value is needed for every #[code bar-item].
+
+p
+  | There is the #[code bar-sm] class for thinner Bars.
+  | Also, you could use #[a(href="#tooltips") Tooltips] for any #[code bar-item].
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+      
+
+      
+      
+        25%
+        15%
+      
+
++docs-subheading('bars-slider', 'Slider bars')
+
+.columns
+  .column.col-8.col-xs-12
+    .bar.bar-slider
+      .bar-item(role="progressbar" style="width:50%;")
+        button.bar-slider-btn.btn.tooltip(data-tooltip="50%" role="slider")
+.columns
+  .column.col-8.col-xs-12
+    .bar.bar-slider
+      .bar-item(role="progressbar" style="width:15%;")
+        button.bar-slider-btn.btn.tooltip(data-tooltip="25%" role="slider")
+      .bar-item(role="progressbar" style="width:65%;")
+        button.bar-slider-btn.btn.tooltip(data-tooltip="65%" role="slider")
+
+p
+  | You can add the #[code bar-slider] class to the Bars container.
+  | And add child elements with the #[code bar-item] class and #[code bar-slider-btn] inside bar-item.
+  | You need to set the #[code bar-item] width manually to have the slider point.
+
+p
+  | If there are two #[code bar-item] divs in one bar-slider, you will have a range slider.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        
+          
+        
+      
+
+      
+      
+        
+          
+        
+        
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/breadcrumbs.pug b/docs/src/contents/breadcrumbs.pug
new file mode 100644
index 0000000..b1b66c5
--- /dev/null
+++ b/docs/src/contents/breadcrumbs.pug
@@ -0,0 +1,45 @@
+p Breadcrumbs are used as navigational hierarchies to indicate current location.
+
+.columns
+  .column.col-12
+    ul.breadcrumb
+      li.breadcrumb-item
+        a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home
+      li.breadcrumb-item
+        a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
+  .column.col-12
+    ul.breadcrumb
+      li.breadcrumb-item
+        a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home
+      li.breadcrumb-item
+        a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
+      li.breadcrumb-item
+        a.tooltip(href="#breadcrumbs" data-tooltip="Change avatar") Change avatar
+  .column.col-12
+    ul.breadcrumb
+      li.breadcrumb-item
+        a.tooltip(href="#breadcrumbs" data-tooltip="Home") Home
+      li.breadcrumb-item
+        a.tooltip(href="#breadcrumbs" data-tooltip="Settings") Settings
+      li.breadcrumb-item
+        | Search result:
+        a.tooltip(href="#breadcrumbs" data-tooltip="Search result: Spectre") Spectre
+
+p
+  | Add a container element with the #[code breadcrumb] class.
+  | And add child elements with the #[code breadcrumb-item] class.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          Home
+        
+        
+          Settings
+        
+        
+          Change avatar
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/calendars.pug b/docs/src/contents/calendars.pug
new file mode 100644
index 0000000..0806844
--- /dev/null
+++ b/docs/src/contents/calendars.pug
@@ -0,0 +1,195 @@
+p
+  | Calendars are designed for date or date range picker and events display. It is made with flex layout.
+
+.columns
+  .column.col-4.col-md-12
+    .calendar
+      .calendar-nav.navbar
+        button.btn.btn-action.btn-link.btn-lg
+          i.icon.icon-arrow-left
+        .navbar-primary March 2017
+        button.btn.btn-action.btn-link.btn-lg
+          i.icon.icon-arrow-right
+      .calendar-container
+        .calendar-header
+          .calendar-date Sun
+          .calendar-date Mon
+          .calendar-date Tue
+          .calendar-date Wed
+          .calendar-date Thu
+          .calendar-date Fri
+          .calendar-date Sat
+        .calendar-body
+          .calendar-date.prev-month.disabled
+            button.date-item 26
+          .calendar-date.prev-month.disabled
+            button.date-item 27
+          .calendar-date.prev-month.disabled
+            button.date-item 28
+          .calendar-date.current-month
+            button.date-item 1
+          .calendar-date.current-month
+            button.date-item 2
+          .calendar-date.current-month
+            button.date-item 3
+          .calendar-date.current-month.tooltip(data-tooltip="Today")
+            button.date-item.date-today 4
+          .calendar-date.current-month.tooltip(data-tooltip="Not available")
+            button.date-item(disabled="") 5
+          .calendar-date.current-month
+            button.date-item 6
+          .calendar-date.current-month
+            button.date-item 7
+          .calendar-date.current-month.tooltip(data-tooltip="You have appointments")
+            button.date-item.badge 8
+          .calendar-date.current-month
+            button.date-item 9
+          .calendar-date.current-month
+            button.date-item 10
+          .calendar-date.current-month
+            button.date-item 11
+          .calendar-date.current-month
+            button.date-item 12
+          .calendar-date.current-month
+            button.date-item 13
+          .calendar-date.current-month
+            button.date-item 14
+          .calendar-date.current-month
+            button.date-item 15
+          .calendar-date.current-month.calendar-range.range-start
+            button.date-item.active 16
+          .calendar-date.current-month.calendar-range
+            button.date-item 17
+          .calendar-date.current-month.calendar-range
+            button.date-item 18
+          .calendar-date.current-month.calendar-range
+            button.date-item 19
+          .calendar-date.current-month.calendar-range.range-end
+            button.date-item.active 20
+          .calendar-date.current-month
+            button.date-item 21
+          .calendar-date.current-month
+            button.date-item 22
+          .calendar-date.current-month
+            button.date-item 23
+          .calendar-date.current-month
+            button.date-item 24
+          .calendar-date.current-month
+            button.date-item 25
+          .calendar-date.current-month
+            button.date-item 26
+          .calendar-date.current-month
+            button.date-item 27
+          .calendar-date.current-month
+            button.date-item 28
+          .calendar-date.current-month
+            button.date-item 29
+          .calendar-date.current-month
+            button.date-item 30
+          .calendar-date.current-month
+            button.date-item 31
+          .calendar-date.next-month.disabled
+            button.date-item 1
+
++docs-subheading('calendars-sizes', 'Calendars sizes')
+
+.columns
+  .column.col-12
+    .calendar.calendar-lg
+      .calendar-nav.navbar
+        button.btn.btn-action.btn-link.btn-lg
+          i.icon.icon-arrow-left
+        .navbar-primary March 2017
+        button.btn.btn-action.btn-link.btn-lg
+          i.icon.icon-arrow-right
+      .calendar-container
+        .calendar-header
+          .calendar-date Sun
+          .calendar-date Mon
+          .calendar-date Tue
+          .calendar-date Wed
+          .calendar-date Thu
+          .calendar-date Fri
+          .calendar-date Sat
+        .calendar-body
+          .calendar-date.prev-month.disabled
+            button.date-item 26
+          .calendar-date.prev-month.disabled
+            button.date-item 27
+            .calendar-events
+              a.calendar-event.bg-error.text-light(href="#calendars") Zhonghe Festival
+          .calendar-date.prev-month.disabled
+            button.date-item 28
+          .calendar-date.current-month
+            button.date-item 1
+          .calendar-date.current-month
+            button.date-item 2
+          .calendar-date.current-month
+            button.date-item 3
+          .calendar-date.current-month.tooltip(data-tooltip="Today")
+            button.date-item.date-today 4
+          .calendar-date.current-month
+            button.date-item(disabled="") 5
+          .calendar-date.current-month
+            button.date-item 6
+          .calendar-date.current-month
+            button.date-item 7
+          .calendar-date.current-month.tooltip(data-tooltip="You have appointments")
+            button.date-item.badge 8
+            .calendar-events
+              a.calendar-event.bg-primary.text-light(href="#calendars") Product launch event
+              a.calendar-event.bg-error.text-light(href="#calendars") International Women's Day
+          .calendar-date.current-month
+            button.date-item 9
+          .calendar-date.current-month
+            button.date-item 10
+          .calendar-date.current-month
+            button.date-item 11
+          .calendar-date.current-month
+            button.date-item 12
+            .calendar-events
+              a.calendar-event.bg-error.text-light(href="#calendars") Arbor Day
+          .calendar-date.current-month
+            button.date-item 13
+          .calendar-date.current-month
+            button.date-item 14
+          .calendar-date.current-month
+            button.date-item 15
+          .calendar-date.current-month.calendar-range.range-start
+            button.date-item.active 16
+          .calendar-date.current-month.calendar-range
+            button.date-item 17
+          .calendar-date.current-month.calendar-range
+            button.date-item 18
+          .calendar-date.current-month.calendar-range
+            button.date-item 19
+          .calendar-date.current-month.calendar-range.range-end
+            button.date-item.active 20
+            .calendar-events
+              a.calendar-event.bg-success.text-light(href="#calendars") Spring Equinox
+          .calendar-date.current-month
+            button.date-item 21
+          .calendar-date.current-month
+            button.date-item 22
+          .calendar-date.current-month
+            button.date-item 23
+          .calendar-date.current-month
+            button.date-item 24
+          .calendar-date.current-month
+            button.date-item 25
+          .calendar-date.current-month
+            button.date-item 26
+          .calendar-date.current-month
+            button.date-item 27
+          .calendar-date.current-month
+            button.date-item 28
+          .calendar-date.current-month
+            button.date-item 29
+          .calendar-date.current-month
+            button.date-item 30
+          .calendar-date.current-month
+            button.date-item 31
+          .calendar-date.next-month.disabled
+            button.date-item 1
+            .calendar-events
+              a.calendar-event.bg-error.text-light(href="#calendars") April Fools' Day
\ No newline at end of file
diff --git a/docs/src/contents/cards.pug b/docs/src/contents/cards.pug
new file mode 100644
index 0000000..4fb3671
--- /dev/null
+++ b/docs/src/contents/cards.pug
@@ -0,0 +1,94 @@
+p Cards are flexible content containers.
+
+.columns
+  .column.col-6.col-xs-12
+    .card
+      .card-image
+        img.img-responsive(src="img/osx-el-capitan.jpg" alt="OS X El Capitan")
+      .card-header
+        .card-title.h5 Microsoft
+        .card-subtitle.text-gray Software and hardware
+      .card-body
+        | Empower every person and every organization on the planet to achieve more.
+      .card-footer
+        a.btn.btn-primary(href="#cards") Do
+  .column.col-6.col-xs-12
+    .card
+      .card-header
+        .card-title.h5 Apple
+        .card-subtitle.text-gray Hardware and software
+      .card-image
+        img.img-responsive(src="img/osx-yosemite.jpg" alt="OS X Yosemite")
+      .card-body
+        | To make a contribution to the world by making tools for the mind that advance humankind.
+      .card-footer
+        .btn-group.btn-group-block
+          button.btn.btn-primary Buy
+          button.btn Buy
+          button.btn Buy
+  .column.col-6.col-xs-12
+    .card
+      .card-image
+        img.img-responsive(src="img/macos-sierra-2.jpg" alt="macOS Sierra")
+      .card-header
+        button.btn.btn-primary.float-right
+          i.icon.icon-plus
+        .card-title.h5 Google I/O
+        .card-subtitle.text-gray Software and hardware
+      .card-body
+        | An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
+  .column.col-6.col-xs-12
+    .card
+      .card-image
+        img.img-responsive(src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan")
+      .card-footer
+        a.btn.btn-primary(href="#cards") Buy
+        a.btn.btn-link(href="#cards") Share
+      .card-body
+        strong Surface Studio
+        | . Turn your desk into a Studio. Surface Studio is designed for the creative process.
+  .column.col-6.col-xs-12
+    .card
+      .card-header
+        .card-title.h5 Apple
+        .card-subtitle.text-gray Hardware and software
+      .card-body
+        | To make a contribution to the world by making tools for the mind that advance humankind.
+      .card-image
+        img.img-responsive(src="img/macos-sierra.jpg" alt="macOS Sierra")
+  .column.col-6.col-xs-12
+    .card
+      .card-header
+        .card-title.h5 Google
+        .card-subtitle.text-gray Software and hardware
+      .card-body
+        | Organize the world’s information and make it universally accessible and useful.
+      .card-image
+        img.img-responsive(src="img/osx-yosemite-2.jpg" alt="OS X Yosemite")
+      .card-footer
+        a.btn.btn-primary(href="#cards") Search
+        a.btn.btn-link(href="#cards") Share
+
+p
+  | Add a container element with the #[code card] class.
+  | And add child elements with the #[code card-image], #[code card-header], #[code card-body] and/or #[code card-footer] classes.
+  | The #[code card-image] can be placed in any position.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          
+        
+        
+          Microsoft
+          Software and hardware
+        
+        
+          Empower every person and every organization on the planet to achieve more.
+        
+        
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/carousels.pug b/docs/src/contents/carousels.pug
new file mode 100644
index 0000000..5ce41fa
--- /dev/null
+++ b/docs/src/contents/carousels.pug
@@ -0,0 +1,39 @@
+p Carousels are slideshows for cycling images. It is built in pure CSS.
+
+.columns
+  .column.col-12
+    .carousel
+      input#slide-1.carousel-locator(type="radio" name="carousel-radio" hidden="" checked="")
+      input#slide-2.carousel-locator(type="radio" name="carousel-radio" hidden="")
+      input#slide-3.carousel-locator(type="radio" name="carousel-radio" hidden="")
+      input#slide-4.carousel-locator(type="radio" name="carousel-radio" hidden="")
+      .carousel-container
+        figure.carousel-item
+          label.item-prev.btn.btn-action.btn-lg(for="slide-4")
+            i.icon.icon-arrow-left
+          label.item-next.btn.btn-action.btn-lg(for="slide-2")
+            i.icon.icon-arrow-right
+          img.img-responsive.rounded(src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper")
+        figure.carousel-item
+          label.item-prev.btn.btn-action.btn-lg(for="slide-1")
+            i.icon.icon-arrow-left
+          label.item-next.btn.btn-action.btn-lg(for="slide-3")
+            i.icon.icon-arrow-right
+          img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
+        figure.carousel-item
+          label.item-prev.btn.btn-action.btn-lg(for="slide-2")
+            i.icon.icon-arrow-left
+          label.item-next.btn.btn-action.btn-lg(for="slide-4")
+            i.icon.icon-arrow-right
+          img.img-responsive.rounded(src="img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper")
+        figure.carousel-item
+          label.item-prev.btn.btn-action.btn-lg(for="slide-3")
+            i.icon.icon-arrow-left
+          label.item-next.btn.btn-action.btn-lg(for="slide-1")
+            i.icon.icon-arrow-right
+          img.img-responsive.rounded(src="img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper")
+      .carousel-nav
+        label.nav-item.text-hide.c-hand(for="slide-1") 1
+        label.nav-item.text-hide.c-hand(for="slide-2") 2
+        label.nav-item.text-hide.c-hand(for="slide-3") 3
+        label.nav-item.text-hide.c-hand(for="slide-4") 4
\ No newline at end of file
diff --git a/docs/src/contents/chips.pug b/docs/src/contents/chips.pug
new file mode 100644
index 0000000..ff02780
--- /dev/null
+++ b/docs/src/contents/chips.pug
@@ -0,0 +1,44 @@
+p Chips are complex entities in small blocks. 
+
+.columns
+  .column.col-12
+    span.chip
+      | Crime
+    span.chip
+      | Drama
+    span.chip
+      | Biography
+      a.btn.btn-clear(href="#" aria-label="Close" role="button")
+    span.chip
+      | Mystery
+      a.btn.btn-clear(href="#" aria-label="Close" role="button")
+  .column.col-12
+    .chip
+      figure.avatar.avatar-sm(data-initial="TS" style="background-color: #5755d9;")
+      | Tony Stark
+    .chip
+      img.avatar.avatar-sm(src="img/avatar-1.png" alt="Thor Odinson")
+      | Thor Odinson
+    .chip
+      img.avatar.avatar-sm(src="img/avatar-4.png" alt="Steve Rogers")
+      | Steve Rogers
+
+p
+  | Add a container element with the #[code chip] class.
+  | And add child text element, buttons or avatars with the #[code avatar] class.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      Crime
+  
+      
+        Biography
+        
+      
+
+      
+        
+        Yan Zhu
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/colors.pug b/docs/src/contents/colors.pug
new file mode 100644
index 0000000..84a86be
--- /dev/null
+++ b/docs/src/contents/colors.pug
@@ -0,0 +1,89 @@
+p Color utilities are used for changing colors for text, link and background.
+
++docs-subheading('colors-text', 'Text colors')
+
+.columns
+  .column.col-12
+    p
+      span.text-primary primary color
+    p
+      span.text-secondary secondary color
+    p
+      span.text-gray gray color
+    p
+      span.text-light.bg-dark.p-1.rounded light color
+    p
+      span.text-success success color
+    p
+      span.text-warning warning color
+    p
+      span.text-error error color
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      primary color
+      secondary color
+      gray color
+      light color
+      success color
+      warning color
+      error color
+
+.columns
+  .column.col-12
+    p
+      a.text-primary.p-1(href="#colors") primary link
+    p
+      a.text-secondary.p-1(href="#colors") secondary link
+    p
+      a.text-gray.p-1(href="#colors") gray link
+    p
+      a.text-light.bg-dark.p-1.rounded(href="#colors") light link
+    p
+      a.text-success.p-1(href="#colors") success link
+    p
+      a.text-warning.p-1(href="#colors") warning link
+    p
+      a.text-error.p-1(href="#colors") error link
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      primary color
+      secondary color
+      gray color
+      light color
+      success color
+      warning color
+      error color
+
++docs-subheading('colors-background', 'Background colors')
+
+.columns
+  .column.col-12
+    p
+      span.bg-primary.p-1.rounded primary bg
+    p
+      span.bg-secondary.text-primary.p-1.rounded secondary bg
+    p
+      span.bg-dark.p-1.rounded dark bg
+    p
+      span.bg-gray.p-1.rounded gray bg
+    p
+      span.bg-success.p-1.rounded success bg
+    p
+      span.bg-warning.p-1.rounded warning bg
+    p
+      span.bg-error.p-1.rounded error bg
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      primary bg
+      secondary bg
+      dark bg
+      gray bg
+      success bg
+      warning bg
+      error bg
\ No newline at end of file
diff --git a/docs/src/contents/comparison.pug b/docs/src/contents/comparison.pug
new file mode 100644
index 0000000..5f6ce38
--- /dev/null
+++ b/docs/src/contents/comparison.pug
@@ -0,0 +1,29 @@
+p
+  | Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
+
+.columns
+  .column.col-12
+    .comparison-slider
+      figure.comparison-before
+        img.rounded(src="img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
+        .comparison-label Before
+      figure.comparison-after
+        img.filter-grayscale.rounded(src="img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
+        .comparison-label After
+        textarea.comparison-resizer(readonly="")
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          
+          Before
+        
+
+        
+          
+          After
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/cursor.pug b/docs/src/contents/cursor.pug
new file mode 100644
index 0000000..df92600
--- /dev/null
+++ b/docs/src/contents/cursor.pug
@@ -0,0 +1,31 @@
+p Cursor utilities specify which mouse cursor to display when mouseover.
+
+.columns
+  .column.col-4
+    .bg-gray.docs-block.c-hand c-hand
+  .column.col-4
+    .bg-gray.docs-block.c-move c-move
+  .column.col-4
+    .bg-gray.docs-block.c-zoom-in c-zoom-in
+  .column.col-4
+    .bg-gray.docs-block.c-zoom-out c-zoom-out
+  .column.col-4
+    .bg-gray.docs-block.c-not-allowed c-not-allowed
+  .column.col-4
+    .bg-gray.docs-block.c-auto c-auto
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
\ No newline at end of file
diff --git a/docs/src/contents/display.pug b/docs/src/contents/display.pug
new file mode 100644
index 0000000..bb3a0a3
--- /dev/null
+++ b/docs/src/contents/display.pug
@@ -0,0 +1,26 @@
+p Display utilities are used for display and hidden things.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
\ No newline at end of file
diff --git a/docs/src/contents/divider.pug b/docs/src/contents/divider.pug
new file mode 100644
index 0000000..e84ff11
--- /dev/null
+++ b/docs/src/contents/divider.pug
@@ -0,0 +1,54 @@
+p A Divider is used for separating elements.
+
+.columns
+  .column
+    .divider
+.columns
+  .column
+    | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+    .divider.text-center(data-content="OR")
+    | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+.columns
+  .column
+    form
+      .form-group
+        label.form-label(for="input-example-1") Email
+        input#input-example-1.form-input(type="text" placeholder="Email")
+      .form-group
+        label.form-label(for="input-example-2") Password
+        input#input-example-2.form-input(type="password" placeholder="Password")
+      .form-group
+        label.form-checkbox
+          input(type="checkbox")
+          i.form-icon
+          |  Remember me
+      .form-group
+        button.btn.btn-primary Sign in
+  .divider-vert(data-content="OR")
+  .column
+    form
+      .form-group
+        label.form-label(for="input-example-3") Email
+        input#input-example-3.form-input(type="text" placeholder="Email")
+      .form-group
+        button.btn.btn-primary.btn-block Sign up
+        button.btn.btn-link.btn-block Learn more
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+      
+      
+
+      
+      
+        
+          
+        
+        
+        
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/empty.pug b/docs/src/contents/empty.pug
new file mode 100644
index 0000000..0ac70dc
--- /dev/null
+++ b/docs/src/contents/empty.pug
@@ -0,0 +1,50 @@
+p
+  | Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
+
+.columns
+  .column.col-12
+    .empty
+      .empty-icon
+        i.icon.icon-3x.icon-mail
+      p.empty-title.h5 You have no new messages
+      p.empty-subtitle Click the button to start a conversation
+      .empty-action
+        button.btn.btn-primary Send a message
+  .column.col-12
+    .empty
+      .empty-icon
+        i.icon.icon-3x.icon-mail
+      p.empty-title.h5 You've successfully signed up
+      p.empty-subtitle Click the button to invite your friends
+      .empty-action
+        button.btn.btn-primary Invite your friends
+      .empty-action
+        button.btn.btn-link Skip
+  .column.col-12
+    .empty
+      .empty-icon
+        i.icon.icon-3x.icon-people
+      p.empty-title.h5 You are not following anyone
+      p.empty-subtitle Start to meet new friends
+      .empty-action.input-group.input-inline
+        input.form-input(type="text" placeholder="")
+        button.btn.btn-primary.input-group-btn Search
+
+p
+  | An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements.
+  | Add #[code empty-icon], #[code empty-title], #[code empty-subtitle] or #[code empty-action] to the elements.
+  | HTML structure is exampled below.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          
+        
+        You have no new messages
+        Click the button to start a conversation.
+        
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/experimentals.pug b/docs/src/contents/experimentals.pug
new file mode 100644
index 0000000..cec5b41
--- /dev/null
+++ b/docs/src/contents/experimentals.pug
@@ -0,0 +1,4 @@
+p
+  | The Experimentals include experimental elements and features, mostly are not yet ready for wide use.
+  | These elements and components are limited inside #[code spectre-exp.scss] before browsers fully support them.
+  | Sometimes, there are some specific browsers targeted components.
\ No newline at end of file
diff --git a/docs/src/contents/filters.pug b/docs/src/contents/filters.pug
new file mode 100644
index 0000000..0c61640
--- /dev/null
+++ b/docs/src/contents/filters.pug
@@ -0,0 +1,107 @@
+p Filters are CSS only content filters.
+
+.columns
+  .column.col-12
+    .filter
+      input#tag-0.filter-tag(type="radio" name="filter-radio" hidden="" checked="")
+      input#tag-1.filter-tag(type="radio" name="filter-radio" hidden="")
+      input#tag-2.filter-tag(type="radio" name="filter-radio" hidden="")
+      input#tag-3.filter-tag(type="radio" name="filter-radio" hidden="")
+      input#tag-4.filter-tag(type="radio" name="filter-radio" hidden="")
+      .filter-nav
+        label.chip(for="tag-0") All
+        label.chip(for="tag-1") Action
+        label.chip(for="tag-2") Roleplaying
+        label.chip(for="tag-3") Shooter
+        label.chip(for="tag-4") Sports
+      .filter-body.columns
+        .column.col-4.filter-item(data-tag="tag-2")
+          .card
+            .card-header
+              .card-title Fallout 4
+              .card-subtitle Roleplaying
+        .column.col-4.filter-item(data-tag="tag-3")
+          .card
+            .card-header
+              .card-title Halo 5
+              .card-subtitle Shooter
+        .column.col-4.filter-item(data-tag="tag-1")
+          .card
+            .card-header
+              .card-title Quantum Break
+              .card-subtitle Action
+        .column.col-4.filter-item(data-tag="tag-4")
+          .card
+            .card-header
+              .card-title Forza Horizon 3
+              .card-subtitle Sports
+        .column.col-4.filter-item(data-tag="tag-2")
+          .card
+            .card-header
+              .card-title Final Fantasy XV
+              .card-subtitle Roleplaying
+        .column.col-4.filter-item(data-tag="tag-4")
+          .card
+            .card-header
+              .card-title NBA 2K17
+              .card-subtitle Sports
+        .column.col-4.filter-item(data-tag="tag-3")
+          .card
+            .card-header
+              .card-title Battlefield 1
+              .card-subtitle Shooter
+        .column.col-4.filter-item(data-tag="tag-1")
+          .card
+            .card-header
+              .card-title GTA V
+              .card-subtitle Action
+        .column.col-4.filter-item(data-tag="tag-4")
+          .card
+            .card-header
+              .card-title FIFA 17
+              .card-subtitle Sports
+        .column.col-4.filter-item(data-tag="tag-3")
+          .card
+            .card-header
+              .card-title Overwatch
+              .card-subtitle Shooter
+        .column.col-4.filter-item(data-tag="tag-3")
+          .card
+            .card-header
+              .card-title Titanfall 2
+              .card-subtitle Shooter
+        .column.col-4.filter-item(data-tag="tag-3")
+          .card
+            .card-header
+              .card-title Gears of Wars 4
+              .card-subtitle Shooter
+
+p
+  | Filters use #[code tag-1] to #[code tag-8] to flag different tags.
+  | #[code tag-0] is reserved for clearing filter (or showing all). 
+  | You can overwrite #[code $filter-number] in #[code _filters.scss] to have more filters.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+        
+        
+
+        
+          All
+          Action
+          Roleplaying
+        
+
+        
+          
+            
+          
+          
+            
+          
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/loading.pug b/docs/src/contents/loading.pug
new file mode 100644
index 0000000..c7643b2
--- /dev/null
+++ b/docs/src/contents/loading.pug
@@ -0,0 +1,21 @@
+p
+  | Loading indicator is used for loading or updating.
+  | You can add the #[code loading] class to a container for loading status.
+
+.columns
+  .column.col-12.text-center
+    .loading
+
+p
+  | Add the #[code loading-lg] class for large size.
+
+.columns
+  .column.col-12.text-center
+    .loading.loading-lg
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+      
\ No newline at end of file
diff --git a/docs/src/contents/menu.pug b/docs/src/contents/menu.pug
new file mode 100644
index 0000000..fe7825b
--- /dev/null
+++ b/docs/src/contents/menu.pug
@@ -0,0 +1,184 @@
+p Menus are vertical list of links or buttons for actions and navigation.
+
+.columns
+  .column.col-4.col-xs-12
+    ul.menu
+      li.menu-item
+        .tile.tile-centered
+          .tile-icon
+            img.avatar(src="img/avatar-4.png" alt="Avatar")
+          .tile-content
+            | Steve Rogers
+      li.divider
+      li.menu-item
+        .menu-badge
+          label.label.label-primary 2
+        a.active(href="#menus")
+          | My profile
+      li.menu-item
+        a(href="#menus")
+          | Settings
+      li.menu-item
+        a(href="#menus")
+          | Logout
+  .column.col-4.col-xs-12
+    ul.menu
+      li.divider(data-content="LINKS")
+      li.menu-item
+        a(href="#menus") Slack
+      li.menu-item
+        a(href="#menus") Hipchat
+      li.menu-item
+        a(href="#menus") Skype
+  .column.col-4.col-xs-12
+    ul.menu
+      li.menu-item
+        label.form-checkbox
+          input(type="checkbox" checked="")
+          i.form-icon
+          |  form-checkbox
+      li.menu-item
+        label.form-radio
+          input(type="radio" checked="")
+          i.form-icon
+          |  form-radio
+      li.menu-item
+        label.form-switch
+          input(type="checkbox" checked="")
+          i.form-icon
+          |  form-switch
+
+p
+  | Add a container element with the #[code menu] class.
+  | And add child elements with the #[code menu-item] class.
+  | You can separate menu items with a #[code divider].
+  | Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
+p
+  | Menus also have #[a(href="elements.html#forms" target="_blank") Form controls] (checkbox, radio and checkbox) support.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+        
+        
+        
+        
+          
+             Slack
+          
+        
+        
+        
+          
+            
+             form-checkbox
+          
+        
+        
+        
+        
+        
+          
+            2
+          
+          
+             Settings
+          
+        
+      
+        
++docs-subheading('menu-dropdown', 'Dropdown menu')
+
+p The dropdown is a combination of buttons and menus.
+
+.columns
+  .column.col-xs-12
+    .dropdown
+      .btn-group
+        a.btn.btn-primary dropdown button
+        a.btn.btn-primary.dropdown-toggle(tabindex="0")
+          i.icon.icon-caret
+        ul.menu
+          li.menu-item
+            a(href="#dropdowns")
+              | Slack
+          li.menu-item
+            a(href="#dropdowns")
+              | Hipchat
+          li.menu-item
+            a(href="#dropdowns")
+              | Skype
+  .column.col-xs-12
+    .dropdown
+      a.btn.btn-link.dropdown-toggle(tabindex="0")
+        | dropdown button 
+        i.icon.icon-caret
+      ul.menu
+        li.menu-item
+          a(href="#dropdowns")
+            | Slack
+        li.menu-item
+          a(href="#dropdowns")
+            | Hipchat
+        li.menu-item
+          a(href="#dropdowns")
+            | Skype
+
+p
+  | Dropdown menus component is built entirely in CSS. It is triggered by #[code :focus] event.
+p
+  | Add a container element with the #[code dropdown] class.
+  | And add a focusable element with the #[code dropdown-toggle] class for the button and a #[code menu] component right next to it.
+  | You also need to add #[code tabindex] to make the buttons focusable.
+p
+  | If the dropdown is close to the right edge of the browser, you can add the #[code dropdown-right] class to the container to prevent it appearing off screen.
+
+.columns
+  .column.col-xs-12.text-right
+    .dropdown.dropdown-right
+      a.btn.btn-primary.dropdown-toggle(tabindex="0")
+        | dropdown button 
+        i.icon.icon-caret
+      ul.menu.text-left
+        li.menu-item
+          a(href="#dropdowns") Slack
+        li.menu-item
+          a(href="#dropdowns") Hipchat
+        li.menu-item
+          a(href="#dropdowns") Skype
+
+p
+  | Also, you can implement your JS to interact with the dropdown menus by adding the #[code active] class to the #[code dropdown] container.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        
+          dropdown menu 
+        
+        
+        
+          ...
+        
+      
+
+      
+      
+        
+          
+            dropdown button
+          
+          
+            
+          
+
+          
+          
+            ...
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/meters.pug b/docs/src/contents/meters.pug
new file mode 100644
index 0000000..dd6899c
--- /dev/null
+++ b/docs/src/contents/meters.pug
@@ -0,0 +1,22 @@
+p Meters represent the value within the known range.
+
+.columns
+  .column.col-3.col-xs-12
+    meter.meter(value="20" min="0" max="100")
+  .column.col-3.col-xs-12
+    meter.meter(value="60" min="0" low="30" optimum="60" high="80" max="100")
+  .column.col-3.col-xs-12
+    meter.meter(value="85" min="0" low="30" high="80" max="100")
+  .column.col-3.col-xs-12
+    meter.meter(value="20" min="0" low="30" optimum="90" high="80" max="100")
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+      
+      
+      
+      
+      
\ No newline at end of file
diff --git a/docs/src/contents/modals.pug b/docs/src/contents/modals.pug
new file mode 100644
index 0000000..29580c9
--- /dev/null
+++ b/docs/src/contents/modals.pug
@@ -0,0 +1,141 @@
+p Modals are flexible dialog prompts.
+
+.columns
+  .column
+    a.btn.btn-primary(href="#example-modal-1") Open Modal
+    #example-modal-1.modal
+      a.modal-overlay(href="#modals" aria-label="Close")
+      .modal-container(role="document")
+        .modal-header
+          a.btn.btn-clear.float-right(href="#modals" aria-label="Close")
+          .modal-title.h5 Modal title
+        .modal-body
+          .content
+            p This is the content inside the modal.
+            h4 Lorem ipsum
+            p
+              | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+            p
+              | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+            h4 Cupcake ipsum
+            p
+              | Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
+            p
+              | De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
+            h4 Candy ipsum
+            p
+              | Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
+            p
+              | Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
+        .modal-footer
+          button.btn.btn-primary Share
+          a.btn.btn-link(href="#modals") Close
+
+p
+  | Add a container element with the #[code modal] class.
+  | And add a real container #[code modal-container] and overlay #[code modal-overlay] inside it.
+  | You can add child elements with the #[code modal-header], #[code modal-body] and #[code modal-footer] - any or all of them.
+p
+  | Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals.
+  | To make a modal appear, add the #[code active] class to the #[code modal] container.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+        
+          
+            
+            Modal title
+          
+          
+            
+              
+            
+          
+          
+            ...
+          
+        
+      
+      
++docs-subheading('modals-sizes', 'Modal sizes')
+
+.columns
+  .column.col-6.col-xs-12
+    a.btn.btn-primary(href="#example-modal-2") Open small size Modal
+    #example-modal-2.modal.modal-sm
+      a.modal-overlay(href="#modals-sizes" aria-label="Close")
+      .modal-container(role="document")
+        .modal-header
+          a.btn.btn-clear.float-right(href="#modals-sizes" aria-label="Close")
+          .modal-title.h5 Modal title
+        .modal-body
+          .content
+            form
+              .form-group
+                label.form-label(for="input-example-7") Name
+                input#input-example-7.form-input(type="text" placeholder="Name")
+              .form-group
+                label.form-label Gender
+                label.form-radio
+                  input(type="radio" name="gender")
+                  i.form-icon
+                  |  Male
+                label.form-radio
+                  input(type="radio" name="gender" checked="")
+                  i.form-icon
+                  |  Female
+        .modal-footer
+          button.btn.btn-primary Submit
+          a.btn.btn-link(href="#modals-sizes" aria-label="Close") Close
+
+p
+  | Use the #[code modal-sm] class for a smaller modal dialog.
+  | The container max width is #[code 320px].
+
+.columns
+  .column
+    a.btn.btn-primary(href="#example-modal-3") Open large size Modal
+    #example-modal-3.modal.modal-lg
+      a.modal-overlay(href="#modals-sizes" aria-label="Close")
+      .modal-container(role="document")
+        .modal-header
+          a.btn.btn-clear.float-right(href="#modals-sizes" aria-label="Close")
+          .modal-title.h5 Modal title
+        .modal-body
+          .content
+            p This is the content inside the modal.
+            h4 Lorem ipsum
+            p
+              | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+            p
+              | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+            h4 Cupcake ipsum
+            p
+              | Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
+            p
+              | De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
+            h4 Candy ipsum
+            p
+              | Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
+            p
+              | Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
+        .modal-footer
+          button.btn.btn-primary Share
+          a.btn.btn-link(href="#modals-sizes") Close
+
+p
+  | Use the #[code modal-lg] class for a full size modal.
+  | The container max width is #[code 960px].
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+        
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/nav.pug b/docs/src/contents/nav.pug
new file mode 100644
index 0000000..537b6d2
--- /dev/null
+++ b/docs/src/contents/nav.pug
@@ -0,0 +1,57 @@
+.columns
+  .column.col-6.col-xs-12
+    ul.nav
+      li.nav-item
+        a(href="#nav") Elements
+      li.nav-item.active
+        a(href="#nav") Layout
+        ul.nav
+          li.nav-item
+            a(href="#nav") Flexbox grid
+          li.nav-item
+            a(href="#nav") Responsive
+          li.nav-item
+            a(href="#nav") Navbar
+          li.nav-item
+            a(href="#nav") Empty states
+      li.nav-item
+        a(href="#nav") Components
+      li.nav-item
+        a(href="#nav") Utilities
+
+p
+  | Add a container element with the #[code nav] class.
+  | And add child elements with the #[code nav-item] class.
+  | The #[code nav-item] with the #[code active] class will be highlighted.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          Elements
+        
+        
+          Layout
+          
+            
+              Flexbox grid
+            
+            
+              Responsive
+            
+            
+              Navbar
+            
+            
+              Empty states
+            
+          
+        
+        
+          Components
+        
+        
+          Utilities
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/off-canvas.pug b/docs/src/contents/off-canvas.pug
new file mode 100644
index 0000000..7e45132
--- /dev/null
+++ b/docs/src/contents/off-canvas.pug
@@ -0,0 +1,45 @@
+p
+  | The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.
+p
+  | By default, the off-canvas menu is collapsed whenever the window width is.
+  | But you can add the #[code off-canvas-sidebar-show] class to the #[code off-canvas] to make the sidebar expanded when the window width is larger than or equal to #[strong 960px].
+
+.columns
+  .column
+    .off-canvas.off-canvas-sidebar-show
+      a.off-canvas-toggle.btn.btn-primary.btn-action(href="#sidebar-demo")
+        i.icon.icon-menu
+      #sidebar-demo.off-canvas-sidebar.flex-centered
+        span Sidebar
+      a.off-canvas-overlay(href="#close")
+      .off-canvas-content
+        .content
+          h4 Lorem ipsum
+          p
+            | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
+          p
+            | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
+
+p
+  | You can open the sidebar by adding the class #[code active] to #[code off-canvas-sidebar].
+  | And remove the #[code active] to close it.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+        
+          
+        
+
+        
+          
+        
+
+        
+
+        
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/pagination.pug b/docs/src/contents/pagination.pug
new file mode 100644
index 0000000..83a3f92
--- /dev/null
+++ b/docs/src/contents/pagination.pug
@@ -0,0 +1,102 @@
+.columns
+  .column.col-xs-12
+    ul.pagination
+      li.page-item
+        a(href="#pagination") Prev
+      li.page-item
+        a(href="#pagination") 1
+      li.page-item
+        span ...
+      li.page-item
+        a(href="#pagination") 4
+      li.page-item.active
+        a(href="#pagination") 5
+      li.page-item
+        a(href="#pagination") 6
+      li.page-item
+        span ...
+      li.page-item
+        a(href="#pagination") 9
+      li.page-item
+        a(href="#pagination") Next
+  .column.col-xs-12
+    ul.pagination
+      li.page-item.disabled
+        a(href="#pagination" tabindex="-1") Prev
+      li.page-item.active
+        a(href="#pagination") 1
+      li.page-item
+        a(href="#pagination") 2
+      li.page-item
+        a(href="#pagination") 3
+      li.page-item
+        span ...
+      li.page-item
+        a(href="#pagination") 9
+      li.page-item
+        a(href="#pagination") Next
+
+p
+  | Add a container element with the #[code pagination] class.
+  | And add child elements with the #[code page-item] class.
+  | The #[code page-item] with the #[code active] class will be highlighted.
+  | You can add the #[code disabled] class to the #[code page-item] to have unclickable page links.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          Previous
+        
+        
+          1
+        
+        
+          2
+        
+        
+          3
+        
+        
+          ...
+        
+        
+          12
+        
+        
+          Next
+        
+      
+
+.columns
+  .column.col-12
+    ul.pagination
+      li.page-item.page-prev
+        a(href="#pagination")
+          .page-item-subtitle Previous
+          .page-item-title.h5 Getting started
+      li.page-item.page-next
+        a(href="#pagination")
+          .page-item-subtitle Next
+          .page-item-title.h5 Layout
+
+p You could use previous and next pagination to navigate. 
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          
+            Previous
+            Getting started
+          
+        
+        
+          
+            Next
+            Layout
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/panels.pug b/docs/src/contents/panels.pug
new file mode 100644
index 0000000..3651c81
--- /dev/null
+++ b/docs/src/contents/panels.pug
@@ -0,0 +1,114 @@
+p Panels are flexible view container with auto-expand content section.
+
+.columns
+  .column.col-6.col-xs-12
+    .panel
+      .panel-header.text-center
+        figure.avatar.avatar-lg
+          img(src="img/avatar-2.png" alt="Avatar")
+        .panel-title.h5.mt-10 Bruce Banner
+        .panel-subtitle THE HULK
+      nav.panel-nav
+        ul.tab.tab-block
+          li.tab-item.active
+            a(href="#panels")
+              | Profile
+          li.tab-item
+            a(href="#panels")
+              | Files
+          li.tab-item
+            a(href="#panels")
+              | Tasks
+      .panel-body
+        .tile.tile-centered
+          .tile-content
+            .tile-title E-mail
+            .tile-subtitle bruce.banner@hulk.com
+          .tile-action
+            button.btn.btn-link.btn-action.btn-lg
+              i.icon.icon-edit
+        .tile.tile-centered
+          .tile-content
+            .tile-title Skype
+            .tile-subtitle bruce.banner
+          .tile-action
+            button.btn.btn-link.btn-action.btn-lg
+              i.icon.icon-edit
+        .tile.tile-centered
+          .tile-content
+            .tile-title Location
+            .tile-subtitle Dayton, Ohio
+          .tile-action
+            button.btn.btn-link.btn-action.btn-lg
+              i.icon.icon-edit
+      .panel-footer
+        button.btn.btn-primary.btn-block Save
+  .column.col-6.col-xs-12
+    .panel
+      .panel-header
+        .panel-title.h6 Comments
+      .panel-body
+        .tile
+          .tile-icon
+            figure.avatar
+              img(src="img/avatar-1.png" alt="Avatar")
+          .tile-content
+            p.tile-title Thor Odinson
+            p.tile-subtitle
+              | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+        .tile
+          .tile-icon
+            figure.avatar
+              img(src="img/avatar-2.png" alt="Avatar")
+          .tile-content
+            p.tile-title Bruce Banner
+            p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+        .tile
+          .tile-icon
+            figure.avatar(data-initial="TS")
+          .tile-content
+            p.tile-title Tony Stark
+            p.tile-subtitle
+              | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+        .tile
+          .tile-icon
+            figure.avatar
+              img(src="img/avatar-4.png" alt="Avatar")
+          .tile-content
+            p.tile-title Steve Rogers
+            p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+        .tile
+          .tile-icon
+            figure.avatar
+              img(src="img/avatar-3.png" alt="Avatar")
+          .tile-content
+            p.tile-title Natasha Romanoff
+            p.tile-subtitle
+              | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+      .panel-footer
+        .input-group
+          input.form-input(type="text" placeholder="Hello")
+          button.btn.btn-primary.input-group-btn Send
+
+p
+  | Add a container element with the #[code panel] class.
+  | And add child elements with the #[code panel-header], #[code panel-nav], #[code panel-body] and/or #[code panel-footer] classes.
+  | The #[code panel-body] can be auto expanded and vertically scrollable.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          Comments
+        
+        
+          
+        
+        
+          
+        
+        
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/parallax.pug b/docs/src/contents/parallax.pug
new file mode 100644
index 0000000..88d2c17
--- /dev/null
+++ b/docs/src/contents/parallax.pug
@@ -0,0 +1,34 @@
+p
+  | The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.
+
+.columns
+  .column.col-sm-12.col-8.col-mx-auto
+    .parallax
+      .parallax-top-left(tabindex="1")
+      .parallax-top-right(tabindex="2")
+      .parallax-bottom-left(tabindex="3")
+      .parallax-bottom-right(tabindex="4")
+      .parallax-content
+        .parallax-front
+          h2 tvOS parallax demo
+        .parallax-back
+          img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+        
+        
+        
+        
+          
+            tvOS parallax demo
+          
+          
+            
+          
+        
+      
+        
\ No newline at end of file
diff --git a/docs/src/contents/popovers.pug b/docs/src/contents/popovers.pug
new file mode 100644
index 0000000..ca81e54
--- /dev/null
+++ b/docs/src/contents/popovers.pug
@@ -0,0 +1,82 @@
+p Popovers are small overlay content containers. Popovers component is built entirely in CSS.
+.columns
+  .column.col-3.col-sm-6
+    .popover
+      a.btn.btn-primary(href="#popovers")
+        | top popover
+      .popover-container
+        .card
+          .card-header
+            .card-title.h5 Apple
+            .card-subtitle.text-gray Software and hardware
+          .card-body
+            | To make a contribution to the world by making tools for the mind that advance humankind.
+          .card-footer
+            button.btn.btn-primary Buy
+  .column.col-3.col-sm-6
+    .popover.popover-right
+      a.btn.btn-primary(href="#popovers")
+        | right popover
+      .popover-container
+        .card
+          .card-header
+            .card-title.h5 Apple
+            .card-subtitle.text-gray Software and hardware
+          .card-body
+            | To make a contribution to the world by making tools for the mind that advance humankind.
+          .card-footer
+            button.btn.btn-primary Buy
+  .column.col-3.col-sm-6
+    .popover.popover-bottom
+      a.btn.btn-primary(href="#popovers")
+        | bottom popover
+      .popover-container
+        .card
+          .card-header
+            .card-title.h5 Apple
+            .card-subtitle.text-gray Software and hardware
+          .card-body
+            | To make a contribution to the world by making tools for the mind that advance humankind.
+          .card-footer
+            button.btn.btn-primary Buy
+  .column.col-3.col-sm-6
+    .popover.popover-left
+      a.btn.btn-primary(href="#popovers")
+        | left popover
+      .popover-container
+        .card
+          .card-header
+            .card-title.h5 Apple
+            .card-subtitle.text-gray Software and hardware
+          .card-body
+            | To make a contribution to the world by making tools for the mind that advance humankind.
+          .card-footer
+            button.btn.btn-primary Buy
+
+p
+  | Wrap an element by a container with the #[code popover] class.
+  | And add a container with the #[code popover-container] next to the element.
+  | You can use #[a(href="#cards") Cards] component inside the #[code popover-container].
+p
+  | Also, you can add the #[code popover-right], #[code popover-bottom] or #[code popover-left] class to define the position.
+  | By default, the popovers appear above the element.
+  
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+        
+          
+            
+              ...
+            
+            
+              ...
+            
+            
+              ...
+            
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/position.pug b/docs/src/contents/position.pug
new file mode 100644
index 0000000..4e73fed
--- /dev/null
+++ b/docs/src/contents/position.pug
@@ -0,0 +1,40 @@
+p
+  | Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
\ No newline at end of file
diff --git a/docs/src/contents/progress.pug b/docs/src/contents/progress.pug
new file mode 100644
index 0000000..22a09c1
--- /dev/null
+++ b/docs/src/contents/progress.pug
@@ -0,0 +1,17 @@
+p The Progress indicates the progress completion of a task.
+
+.columns
+  .column.col-3.col-xs-12
+    progress.progress(value="75" max="100")
+  .column.col-3.col-xs-12
+    progress.progress(value="50" max="100")
+  .column.col-3.col-xs-12
+    progress.progress(value="25" max="100")
+  .column.col-3.col-xs-12
+    progress.progress(max="100")
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
\ No newline at end of file
diff --git a/docs/src/contents/shapes.pug b/docs/src/contents/shapes.pug
new file mode 100644
index 0000000..fc07d4d
--- /dev/null
+++ b/docs/src/contents/shapes.pug
@@ -0,0 +1,17 @@
+p Shape utilities are used for change element shapes.
+
+.columns
+  .column.col-6.text-center
+    .bg-primary.text-light.docs-shape.rounded.centered
+      | rounded
+  .column.col-6.text-center
+    .bg-primary.text-light.docs-shape.circle.centered
+      | circle
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+      
+      
\ No newline at end of file
diff --git a/docs/src/contents/sliders.pug b/docs/src/contents/sliders.pug
new file mode 100644
index 0000000..de3597b
--- /dev/null
+++ b/docs/src/contents/sliders.pug
@@ -0,0 +1,18 @@
+p Sliders are for selecting values from ranges.
+p
+  | You can add the class #[code tooltip] to have tooltip labels.
+  | If no #[code data-tooltip] is set, the #[code value] will be used instead.
+
+.columns
+  .column.col-6.col-xs-12
+    input.slider.tooltip(type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);")
+  .column.col-6.col-xs-12
+    input.slider(type="range" min="0" max="100" value="50" disabled="")
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+      
+      
\ No newline at end of file
diff --git a/docs/src/contents/steps.pug b/docs/src/contents/steps.pug
new file mode 100644
index 0000000..5cf8b84
--- /dev/null
+++ b/docs/src/contents/steps.pug
@@ -0,0 +1,47 @@
+p Steps are progress indicators of a sequence of task steps.
+
+.columns
+  .column.col-12
+    ul.step
+      li.step-item
+        a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip")
+      li.step-item.active
+        a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip")
+      li.step-item
+        a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip")
+      li.step-item
+        a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip")
+  .column.col-12
+    ul.step
+      li.step-item
+        a.tooltip(href="#steps" data-tooltip="Step 1 Tooltip") Step 1
+      li.step-item
+        a.tooltip(href="#steps" data-tooltip="Step 2 Tooltip") Step 2
+      li.step-item.active
+        a.tooltip(href="#steps" data-tooltip="Step 3 Tooltip") Step 3
+      li.step-item
+        a.tooltip(href="#steps" data-tooltip="Step 4 Tooltip") Step 4
+
+p
+  | Add a container element with the #[code step] class.
+  | And add child elements with the #[code step-item] class.
+  | The #[code step-item] with the #[code active] class will be highlighted and indicate the current state of progress.
+  
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          Step 1
+        
+        
+          Step 2
+        
+        
+          Step 3
+        
+        
+          Step 4
+        
+      
+        
diff --git a/docs/src/contents/tabs.pug b/docs/src/contents/tabs.pug
new file mode 100644
index 0000000..f89005d
--- /dev/null
+++ b/docs/src/contents/tabs.pug
@@ -0,0 +1,132 @@
+p Tabs enable quick switch between different views.
+      
+.columns
+  .column.col-6.col-sm-12
+    ul.tab
+      li.tab-item.active
+        a(href="#tabs")
+          | Music
+      li.tab-item
+        a(href="#tabs")
+          | Playlists
+      li.tab-item
+        a(href="#tabs")
+          | Radio
+      li.tab-item
+        a(href="#tabs")
+          | Store
+  .column.col-6.col-sm-12
+    ul.tab.tab-block
+      li.tab-item.active
+        a(href="#tabs")
+          | Music
+      li.tab-item
+        a(href="#tabs")
+          | Playlists
+      li.tab-item
+        a(href="#tabs")
+          | Radio
+
+p
+  | Add a container element with the #[code tab] class. 
+  | And add child elements with the #[code tab-item] class. 
+  | You can add the #[code tab-block] class for a full-width tab.
+  | The #[code tab-item] or its child #{''} with the #[code active] class will be highlighted.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          Music
+        
+        
+          Playlists
+        
+        
+          Radio
+        
+        
+          Connect
+        
+      
+
+.columns
+  .column.col-sm-12
+    ul.tab
+      li.tab-item.active
+        a.badge(href="#tabs" data-badge="999")
+          | Music
+      li.tab-item
+        a(href="#tabs")
+          | Playlists
+      li.tab-item
+        a(href="#tabs")
+          | Radio
+  .column.col-sm-12
+    ul.tab.tab-block
+      li.tab-item.active
+        a.badge(href="#tabs" data-badge="9")
+          | Music
+      li.tab-item
+        a.badge(href="#tabs" data-badge="99")
+          | Playlists
+      li.tab-item
+        a(href="#tabs")
+          | Radio
+
+p
+  | If you need #[code badges] on tabs, you can add badge class to the element within #[code tab-item].
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          
+            Music
+          
+        
+      
+
+.columns
+  .column.col-12
+    ul.tab
+      li.tab-item.active
+        a(href="#tabs")
+          | Music
+          span.btn.btn-clear
+      li.tab-item
+        a(href="#tabs")
+          | Playlists
+      li.tab-item
+        a(href="#tabs")
+          | Radio
+      li.tab-item
+        a(href="#tabs")
+          | Store
+      li.tab-item.tab-action
+        .input-group.input-inline
+          input.form-input.input-sm(type="text" placeholder="search")
+          button.btn.btn-primary.btn-sm.input-group-btn Search
+
+p
+  | You could add a search box or buttons inside a tab.
+  | Add the #[code tab-action] class to the #[code tab-item].
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          
+            Music
+          
+        
+        
+          
+            
+            
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/text.pug b/docs/src/contents/text.pug
new file mode 100644
index 0000000..a6a733b
--- /dev/null
+++ b/docs/src/contents/text.pug
@@ -0,0 +1,36 @@
+p Text utilities are used for text alignment, styles and overflow things.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+      
+      
+      
+      
+      
+      
+
+      
+      
+      
+      
+      
+      
+
+      
+      
+      
+      
+      
+      
+      
+      
+
+      
+      
+      
+      
+      
+      
\ No newline at end of file
diff --git a/docs/src/contents/tiles.pug b/docs/src/contents/tiles.pug
new file mode 100644
index 0000000..e1e7379
--- /dev/null
+++ b/docs/src/contents/tiles.pug
@@ -0,0 +1,92 @@
+p Tiles are repeatable or embeddable information blocks.
+
+.columns
+  .column.col-9.col-sm-12
+    .tile
+      .tile-icon
+        figure.avatar.avatar-lg
+          img(src="img/avatar-3.png" alt="Avatar")
+      .tile-content
+        p.tile-title The Avengers
+        p.tile-subtitle.text-gray
+          | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+      .tile-action
+        button.btn.btn-primary Join
+        button.btn Contact
+  .column.col-9.col-sm-12
+    .tile
+      .tile-icon
+        figure.avatar.avatar-lg
+          img(src="img/avatar-2.png" alt="Avatar")
+      .tile-content
+        p.tile-title The S.H.I.E.L.D.
+        p.tile-subtitle.text-gray The Strategic Homeland Intervention, Enforcement, and Logistics Division...
+        p
+          button.btn.btn-primary.btn-sm Join
+          button.btn.btn-sm Contact
+
+p
+  | Add a container with the #[code tile] class.
+  | And add child elements with the #[code tile-icon], #[code tile-content] or/and #[code tile-action] classes.
+  | The #[code tile-icon] and #[code tile-action] are optional.
+p
+  | There are #[code tile-title] and #[code tile-subtitle] classes for title and subtitle text styles.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          
+            
+          
+        
+        
+          The Avengers
+          Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
+        
+        
+          
+        
+      
+
++docs-subheading('tiles-compact', 'Compact tiles')
+
+p
+  | There is compact version of Tiles component, which is often used as contact and file info blocks.
+p
+  | Add the #[code tile-centered] class to the container #[code tile].
+  | The #[code tile-icon], #[code tile-content] and #[code tile-action] will be vertically centered.
+
+.columns
+  .column.col-6.col-md-9.col-xs-12
+    .tile.tile-centered
+      .tile-icon
+        .example-tile-icon
+          i.icon.icon-mail.centered
+      .tile-content
+        .tile-title spectre-docs.pdf
+        .tile-subtitle.text-gray 14MB · Public · 1 Jan, 2017
+      .tile-action
+        button.btn.btn-link.btn-action
+          i.icon.icon-more-vert
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          
+            
+          
+        
+        
+          spectre-docs.pdf
+          14MB · Public · 1 Jan, 2017
+        
+        
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/timelines.pug b/docs/src/contents/timelines.pug
new file mode 100644
index 0000000..1badfdf
--- /dev/null
+++ b/docs/src/contents/timelines.pug
@@ -0,0 +1,81 @@
+p Timelines are ordered sequences of activities.
+
+.columns
+  .column.col-9.col-sm-12
+    .timeline
+      #timeline-example-1.timeline-item
+        .timeline-left
+          a.timeline-icon.tooltip(href="#timeline-example-1" data-tooltip="March 2016")
+        .timeline-content
+          .tile
+            .tile-content
+              p.tile-subtitle March 2016
+              p.tile-title Initial commit
+      #timeline-example-2.timeline-item
+        .timeline-left
+          a.timeline-icon.icon-lg.tooltip(href="#timeline-example-2" data-tooltip="February 2017")
+            i.icon.icon-check
+        .timeline-content
+          .tile
+            .tile-content
+              p.tile-subtitle February 2017
+              p.tile-title New Documents experience
+              p.tile-title
+                a(href="components.html#bars") Bars
+                | : represent the progress of a task
+              p.tile-title
+                a(href="components.html#steps") Steps
+                | : progress indicators of a sequence of task steps
+              p.tile-title
+                a(href="components.html#tiles") Tiles
+                | : repeatable or embeddable information blocks
+            .tile-action
+              button.btn View
+      #timeline-example-3.timeline-item
+        .timeline-left
+          a.timeline-icon.icon-lg.tooltip(href="#timeline-example-3" data-tooltip="March 2017")
+            i.icon.icon-check
+        .timeline-content
+          .tile
+            .tile-content
+              p.tile-subtitle March 2017
+              p.tile-title
+                a(href="elements.html#icons") Icons
+                | : single-element, responsive and pure CSS icons
+              p.tile-title
+                a(href="components.html#popovers") Popovers
+                | : small overlay content containers
+              p.tile-title
+                a(href="experimentals.html#calendars") Calendars
+                | : date or date range picker and events display
+              p.tile-title
+                a(href="experimentals.html#carousels") Carousels
+                | : slideshows for cycling images
+            .tile-action
+              button.btn View
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+          
+            
+          
+          
+            
+          
+        
+
+        
+          
+            
+              
+            
+          
+          
+            
+          
+        
+        ...
+      
\ No newline at end of file
diff --git a/docs/src/contents/toasts.pug b/docs/src/contents/toasts.pug
new file mode 100644
index 0000000..cf4c31a
--- /dev/null
+++ b/docs/src/contents/toasts.pug
@@ -0,0 +1,49 @@
+p Toasts are used to show alert or information to users.
+
+.columns
+  .column.col-9.col-sm-12
+    .toast
+      button.btn.btn-clear.float-right
+      h6 Toast Title
+      | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  .column.col-9.col-sm-12
+    .toast.toast-primary
+      button.btn.btn-clear.float-right
+      | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+p
+  | Add a container element with the #[code toast] class.
+  | You can add any text within the container, and even icons. 
+  | You may also add a close button with the #[code btn-clear] class if you need.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      
+
+.columns
+  .column.col-sm-12
+    .toast.toast-success
+      button.btn.btn-clear.float-right
+      | Toast success
+  .column.col-sm-12
+    .toast.toast-warning
+      button.btn.btn-clear.float-right
+      | Toast warning
+  .column.col-sm-12
+    .toast.toast-error
+      button.btn.btn-clear.float-right
+      | Toast error
+
+p
+  | And you can add the #[code toast-primary], #[code toast-success], #[code toast-warning] or #[code toast-error] class for additional toast colors.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      
\ No newline at end of file
diff --git a/docs/src/contents/tooltips.pug b/docs/src/contents/tooltips.pug
new file mode 100644
index 0000000..bda259a
--- /dev/null
+++ b/docs/src/contents/tooltips.pug
@@ -0,0 +1,24 @@
+p Tooltips provide context information labels that appear on hover and focus.
+
+.columns.text-center
+  .column.col-xs-12
+    button.btn.btn-primary.tooltip(data-tooltip="Top Tooltip Text") top tooltip
+  .column.col-xs-12
+    button.btn.btn-primary.tooltip.tooltip-right(data-tooltip="Right Tooltip Text") right tooltip
+  .column.col-xs-12
+    button.btn.btn-primary.tooltip.tooltip-bottom(data-tooltip="Bottom Tooltip Text") bottom tooltip
+  .column.col-xs-12
+    button.btn.btn-primary.tooltip.tooltip-left(data-tooltip="Left Tooltip Text") left tooltip
+
+p Tooltips component is built entirely in CSS.
+p
+  | Add the #[code tooltip] class and the #[code data-tooltip] attribute, which contains the tooltip content, to non self closing elements.
+p
+  | And add the #[code tooltip-right], #[code tooltip-bottom] or #[code tooltip-left] class to define the position of a tooltip.
+  | By default, the tooltip appears above the element.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
\ No newline at end of file
diff --git a/docs/src/experimentals.pug b/docs/src/experimentals.pug
new file mode 100644
index 0000000..770f19b
--- /dev/null
+++ b/docs/src/experimentals.pug
@@ -0,0 +1,55 @@
+extends _docs-layout.pug
+
+block variables
+  - var title = 'Experimentals - Spectre.css CSS Framework'
+  - var description = ''
+  - var current = 'experimentals'
+
+block docs-content
+  //- Experimentals
+  +docs-heading('experimentals', 'Experimentals')
+    include contents/experimentals.pug
+  
+  //- Autocomplete
+  +docs-heading('autocomplete', 'Autocomplete')
+    include contents/autocomplete.pug
+    
+  //- Calendars
+  +docs-heading('calendars', 'Calendars')
+    include contents/calendars.pug
+
+  //- Carousels
+  +docs-heading('carousels', 'Carousels')
+    include contents/carousels.pug
+
+  //- Comparison sliders
+  +docs-heading('comparison', 'Comparison sliders')
+    include contents/comparison.pug
+  
+  //- Filters
+  +docs-heading('filters', 'Filters')
+    include contents/filters.pug
+
+  //- Meters
+  +docs-heading('meters', 'Meters')
+    include contents/meters.pug
+
+  //- Off-canvas
+  +docs-heading('off-canvas', 'Off-canvas')
+    include contents/off-canvas.pug
+  
+  //- Parallax
+  +docs-heading('parallax', 'Parallax')
+    include contents/parallax.pug
+
+  //- Progress
+  +docs-heading('progress', 'Progress')
+    include contents/progress.pug
+
+  //- Sliders
+  +docs-heading('sliders', 'Sliders')
+    include contents/sliders.pug
+  
+  //- Timelines
+  +docs-heading('timelines', 'Timelines')
+    include contents/timelines.pug
\ No newline at end of file
diff --git a/docs/src/utilities.pug b/docs/src/utilities.pug
new file mode 100644
index 0000000..e516576
--- /dev/null
+++ b/docs/src/utilities.pug
@@ -0,0 +1,39 @@
+extends _docs-layout.pug
+
+block variables
+  - var title = 'Utilities - Spectre.css CSS Framework'
+  - var description = ''
+  - var current = 'utilities'
+
+block docs-content
+  //- Colors
+  +docs-heading('colors', 'Color utilities')
+    include contents/colors.pug
+    
+  //- Cursor
+  +docs-heading('cursor', 'Cursor utilities')
+    include contents/cursor.pug
+
+  //- Display
+  +docs-heading('display', 'Display utilities')
+    include contents/display.pug
+
+  //- Divider
+  +docs-heading('divider', 'Divider')
+    include contents/divider.pug
+  
+  //- Loading
+  +docs-heading('loading', 'Loading')
+    include contents/loading.pug
+
+  //- Position
+  +docs-heading('position', 'Position utilities')
+    include contents/position.pug
+
+  //- Shapes
+  +docs-heading('shapes', 'Shape utilities')
+    include contents/shapes.pug
+  
+  //- Text
+  +docs-heading('text', 'Text utilities')
+    include contents/text.pug
\ No newline at end of file
diff --git a/docs/utilities.html b/docs/utilities.html
index 5a2256a..5032ec7 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -1,678 +1,442 @@
 
 
-
-  
-  
-  
-  
-  
-  Utilities - Spectre.css CSS Framework
-  
-  
-  
-  
-  
-  
-
-
-  
-    
-      
-        
-      
-      GitHub
-    
-  
-    
-      
-        
-          
-          SPECTRE
-        
-      
-      
-        
-          
-            
-            
-              Getting started
-            
-            
-              
-                
-                  Introduction
-                
-                
-                  Installation
-                
-                
-                  Custom version
-                
-                
-                  Browser support
-                
-                
-                  What's new
-                
-              
+  
+    Utilities - Spectre.css CSS Framework
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+    
+      GitHub
+      
+        
+            SPECTRE
+        
+          
+            
+              
+              Getting started
+              
+                
+                  Introduction
+                  Installation
+                  Custom version
+                  Browser support
+                  What's new
+                
+              
             
-          
-          
-            
-            
-              Elements
-            
-            
-              
-                
-                  Typography
-                
-                
-                  Tables
-                
-                
-                  Buttons
-                
-                
-                  Forms
-                
-                
-                  Icons
-                
-                
-                  Labels
-                
-                
-                  Codes
-                
-                
-                  Media
-                
-              
+            
+              
+              Elements
+              
+                
+                  Typography
+                  Tables
+                  Buttons
+                  Forms
+                  Icons
+                  Labels
+                  Code
+                  Media
+                
+              
             
-          
-          
-            
-            
-              Layout
-            
-            
-              
-                
-                  Flexbox grid
-                
-                
-                  Responsive
-                
-                
-                  Navbar
-                
-              
+            
+              
+              Layout
+              
+                
+                  Flexbox grid
+                  Responsive
+                  Navbar
+                
+              
             
-          
-          
-            
-            
-              Components
-            
-            
-              
-                
-                  Accordions
-                
-                
-                  Avatars
-                
-                
-                  Badges
-                
-                
-                  Bars
-                
-                
-                  Breadcrumbs
-                
-                
-                  Cards
-                
-                
-                  Chips
-                
-                
-                  Empty states
-                
-                
-                  Menus
-                
-                
-                  Modals
-                
-                
-                  Navs
-                
-                
-                  Pagination
-                
-                
-                  Panels
-                
-                
-                  Popovers
-                
-                
-                  Steps
-                
-                
-                  Tabs
-                
-                
-                  Tiles
-                
-                
-                  Toasts
-                
-                
-                  Tooltips
-                
-              
+            
+              
+              Components
+              
+                
+                  Accordions
+                  Avatars
+                  Badges
+                  Bars
+                  Breadcrumbs
+                  Cards
+                  Chips
+                  Empty states
+                  Menu
+                  Modals
+                  Nav
+                  Pagination
+                  Panels
+                  Popovers
+                  Steps
+                  Tabs
+                  Tiles
+                  Toasts
+                  Tooltips
+                
+              
             
-          
-          
-            
-            
-              Utilities
-            
-            
-              
-                
-                  Colors
-                
-                
-                  Cursors
-                
-                
-                  Display
-                
-                
-                  Divider
-                
-                
-                  Loading
-                
-                
-                  Position
-                
-                
-                  Shapes
-                
-                
-                  Text
-                
-              
+            
+              
+              Utilities
+              
+                
+                  Colors
+                  Cursors
+                  Display
+                  Divider
+                  Loading
+                  Position
+                  Shapes
+                  Text
+                
+              
             
-          
-          
-            
-            
-              Experimentals
-            
-            
-              
-                
-                  Autocomplete
-                
-                
-                  Calendars
-                
-                
-                  Carousels
-                
-                
-                  Comparison sliders
-                
-                
-                  Filters
-                
-                
-                  Meters
-                
-                
-                  Off-canvas
-                
-                
-                  Parallax
-                
-                
-                  Progress
-                
-                
-                  Sliders
-                
-                
-                  Timelines
-                
-              
+            
+              
+              Experimentals
+              
+                
+                  Autocomplete
+                  Calendars
+                  Carousels
+                  Comparison sliders
+                  Filters
+                  Meters
+                  Off-canvas
+                  Parallax
+                  Progress
+                  Sliders
+                  Timelines
+                
+              
             
           
         
-      
-    
-      
-    
-
-    
-      
-        #Utilities
-      
-
-      
-        
-          
-            
-            
-            
-            
-          
-          
-            
-            
-            
-          
-        
-      
-
-      
-        #Color utilities
-        
-          Color utilities are used for changing colors for text, link and background.
-        
-        Text colors
-        
-          primary color
-          secondary color
-          gray color
-          light color
-          success color
-          warning color
-          error color
-        
-
-
-<span class="text-primary">primary color</span>
-<span class="text-secondary">secondary color</span>
-<span class="text-gray">gray color</span>
-<span class="text-light">light color</span>
-<span class="text-success">success color</span>
-<span class="text-warning">warning color</span>
-<span class="text-error">error color</span>
-
-
-        
-          primary link
-          secondary link
-          gray link
-          light link
-          success link
-          warning link
-          error link
-        
-
-
-<a class="text-primary" href="#">primary color</a>
-<a class="text-secondary" href="#">secondary color</a>
-<a class="text-gray" href="#">gray color</a>
-<a class="text-light" href="#">light color</a>
-<a class="text-success" href="#">success color</a>
-<a class="text-warning" href="#">warning color</a>
-<a class="text-error" href="#">error color</a>
+      

+      
+        
+          
+            #Color utilities
+            Color utilities are used for changing colors for text, link and background.
+            #Text colors
+            
+              
+                primary color
+                secondary color
+                gray color
+                light color
+                success color
+                warning color
+                error color
+              
+            
+            <span class="text-primary">primary color</span>
+<span class="text-secondary">secondary color</span>
+<span class="text-gray">gray color</span>
+<span class="text-light">light color</span>
+<span class="text-success">success color</span>
+<span class="text-warning">warning color</span>
+<span class="text-error">error color</span>
 
-
-        Background colors
-        
-          primary bg
-          secondary bg
-          dark bg
-          gray bg
-          success bg
-          warning bg
-          error bg
-        
-
-
-<div class="bg-primary">primary bg</div>
-<div class="bg-secondary">secondary bg</div>
-<div class="bg-dark">dark bg</div>
-<div class="bg-gray">gray bg</div>
-<div class="bg-success">success bg</div>
-<div class="bg-warning">warning bg</div>
-<div class="bg-error">error bg</div>
+            
+              
+                primary link
+                secondary link
+                gray link
+                light link
+                success link
+                warning link
+                error link
+              
+            
+            <a class="text-primary" href="#">primary color</a>
+<a class="text-secondary" href="#">secondary color</a>
+<a class="text-gray" href="#">gray color</a>
+<a class="text-light" href="#">light color</a>
+<a class="text-success" href="#">success color</a>
+<a class="text-warning" href="#">warning color</a>
+<a class="text-error" href="#">error color</a>
 
-
-      

-
-      
-        
-          
-        
-      
-
-      
-        #Cursor utilities
-        
-          Cursor utilities specify which mouse cursor to display when mouseover.
-        
-        
-          
-            c-hand
-          
-          
-            c-move
-          
-          
-            c-zoom-in
-          
-          
-            c-zoom-out
-          
-          
-            c-not-allowed
-          
-          
-            c-auto
+            #Background colors
+            
+              
+                primary bg
+                secondary bg
+                dark bg
+                gray bg
+                success bg
+                warning bg
+                error bg
+              
+            
+            <div class="bg-primary">primary bg</div>
+<div class="bg-secondary">secondary bg</div>
+<div class="bg-dark">dark bg</div>
+<div class="bg-gray">gray bg</div>
+<div class="bg-success">success bg</div>
+<div class="bg-warning">warning bg</div>
+<div class="bg-error">error bg</div>
           
-        
-
-
-<!-- cursor: hand; -->
-<div class="c-hand"></div>
-<!-- cursor: move; -->
-<div class="c-move"></div>
-<!-- cursor: zoom-in; -->
-<div class="c-zoom-in"></div>
-<!-- cursor: zoom-out; -->
-<div class="c-zoom-out"></div>
-<!-- cursor: not-allowed; -->
-<div class="c-not-allowed"></div>
-<!-- cursor: auto; -->
-<div class="c-auto"></div>
-
-
-      
-
-      
-        #Display utilities
-        
-          Display utilities are used for display and hidden things.
-        
-
-
-<!-- display: block; -->
-<div class="d-block"></div>
-<!-- display: inline; -->
-<div class="d-inline"></div>
-<!-- display: inline-block; -->
-<div class="d-inline-block"></div>
-<!-- display: flex; -->
-<div class="d-flex"></div>
-<!-- display: inline-flex; -->
-<div class="d-inline-flex"></div>
-<!-- display: none; -->
-<div class="d-none"></div>
-<div class="d-hide"></div>
-<!-- visibility: visible; -->
-<div class="d-visible"></div>
-<!-- visibility: hidden; -->
-<div class="d-invisible"></div>
-<!-- hide text contents -->
-<div class="text-hide"></div>
-<!-- assistive text for screen reader -->
-<div class="text-assistive"></div>
-
-
-      
-
-      
-        #Divider
-        
-          A Divider is used for separating elements.
-        
-        
-          
-            
+          
+            #Cursor utilities
+            Cursor utilities specify which mouse cursor to display when mouseover.
+            
+              
+                c-hand
+              
+              
+                c-move
+              
+              
+                c-zoom-in
+              
+              
+                c-zoom-out
+              
+              
+                c-not-allowed
+              
+              
+                c-auto
+              
+            
+            <!-- cursor: hand; -->
+<div class="c-hand"></div>
+<!-- cursor: move; -->
+<div class="c-move"></div>
+<!-- cursor: zoom-in; -->
+<div class="c-zoom-in"></div>
+<!-- cursor: zoom-out; -->
+<div class="c-zoom-out"></div>
+<!-- cursor: not-allowed; -->
+<div class="c-not-allowed"></div>
+<!-- cursor: auto; -->
+<div class="c-auto"></div>
           
-        
-        
-          
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
-            
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+          
+            #Display utilities
+            Display utilities are used for display and hidden things.
+            <!-- display: block; -->
+<div class="d-block"></div>
+<!-- display: inline; -->
+<div class="d-inline"></div>
+<!-- display: inline-block; -->
+<div class="d-inline-block"></div>
+<!-- display: flex; -->
+<div class="d-flex"></div>
+<!-- display: inline-flex; -->
+<div class="d-inline-flex"></div>
+<!-- display: none; -->
+<div class="d-none"></div>
+<div class="d-hide"></div>
+<!-- visibility: visible; -->
+<div class="d-visible"></div>
+<!-- visibility: hidden; -->
+<div class="d-invisible"></div>
+<!-- hide text contents -->
+<div class="text-hide"></div>
+<!-- assistive text for screen reader -->
+<div class="text-assistive"></div>
           
-        
-
-        
-          
-            
-              
-                Email
-                
+          
+            #Divider
+            A Divider is used for separating elements.
+            
+              
+                
               
-              
-                Password
-                
+            
+            
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
               
-              
-                
-                  
-                   Remember me
-                
+            
+            
+              
+                
+                  
+                    Email
+                    
+                  
+                  
+                    Password
+                    
+                  
+                  
+                    
+                       Remember me
+                    
+                  
+                  
+                    
+                  
+                
               
-              
-                
+              
+              
+                
+                  
+                    Email
+                    
+                  
+                  
+                    
+                    
+                  
+                
               
-            
+            
+            <!-- divider element -->
+<div class="divider"></div>
+<!-- divider element with text -->
+<div class="divider text-center" data-content="OR"></div>
+
+<!-- vertical divider element with text -->
+<div class="columns">
+  <div class="column">
+    <!-- column content -->
+  </div>
+  <div class="divider-vert" data-content="OR"></div>
+  <div class="column">
+    <!-- column content -->
+  </div>
+</div>
           
-          
-          
-            
-              
-                Email
-                
+          
+            #Loading
+            
+              Loading indicator is used for loading or updating.
+              You can add the loading class to a container for loading status.
+            
+            
+              
+                
               
-              
-                
-                
+            
+            Add the loading-lg class for large size.
+            
+              
+                
               
-            
-          
-        
-
-
-<!-- divider element -->
-<div class="divider"></div>
-<!-- divider element with text -->
-<div class="divider text-center" data-content="OR"></div>
-
-<!-- vertical divider element with text -->
-<div class="columns">
-  <div class="column">
-    <!-- column content -->
-  </div>
-  <div class="divider-vert" data-content="OR"></div>
-  <div class="column">
-    <!-- column content -->
-  </div>
-</div>
-
-
-      
-
-      
-        #Loading
-        
-          Loading indicator is used for loading or updating. Also, you can add the loading class to buttons for loading status.
-        
-        
-          
-            
+            
+            <!-- loading element -->
+<div class="loading"></div>
+<div class="loading loading-lg"></div>
           
-        
-        
-          Add the loading-lg class for large size. 
-        
-        
-          
-            
+          
+            #Position utilities
+            Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.
+            <!-- clear float -->
+<div class="clearfix"></div>
+<!-- float: left and right -->
+<div class="float-left"></div>
+<div class="float-right"></div>
+<!-- position: relative, absolute and fixed -->
+<div class="relative"></div>
+<div class="absolute"></div>
+<div class="fixed"></div>
+<!-- centered block -->
+<div class="centered"></div>
+
+<!-- m-1 {margin: 4px;} m-2 {margin: 8px;} -->
+<div class="m-1"></div>
+<div class="m-2"></div>
+<!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} -->
+<div class="mt-1"></div>
+<div class="mt-2"></div>
+<!-- mx-1 {margin-left: 4px; margin-right: 4px;} -->
+<div class="mx-1"></div>
+<div class="mx-2"></div>
+<div class="my-1"></div>
+<div class="my-2"></div>
+<!-- p-1 {padding: 4px;} p-2 {padding: 8px;} -->
+<div class="p-1"></div>
+<div class="p-2"></div>
+<!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} -->
+<div class="pt-1"></div>
+<div class="pt-2"></div>
+<!-- px-1 {padding-left: 4px; padding-right: 4px;} -->
+<div class="px-1"></div>
+<div class="px-2"></div>
+<div class="py-1"></div>
+<div class="py-2"></div>
           
-        
-
-
-<!-- loading element -->
-<div class="loading"></div>
-<div class="loading loading-lg"></div>
-
-
-      
-
-      
-        #Position utilities
-        
-          Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.
-        
-
-
-<!-- clear float -->
-<div class="clearfix"></div>
-<!-- float: left and right -->
-<div class="float-left"></div>
-<div class="float-right"></div>
-<!-- position: relative, absolute and fixed -->
-<div class="relative"></div>
-<div class="absolute"></div>
-<div class="fixed"></div>
-<!-- centered block -->
-<div class="centered"></div>
-
-<!-- m-1 {margin: 4px;} m-2 {margin: 8px;} -->
-<div class="m-1"></div>
-<div class="m-2"></div>
-<!-- margin in 4 directions. mt-1 {margin-top: 4px;} mt-2 {margin-top: 8px;} -->
-<div class="mt-1"></div>
-<div class="mt-2"></div>
-<!-- mx-1 {margin-left: 4px; margin-right: 4px;} -->
-<div class="mx-1"></div>
-<div class="mx-2"></div>
-<div class="my-1"></div>
-<div class="my-2"></div>
-<!-- p-1 {padding: 4px;} p-2 {padding: 8px;} -->
-<div class="p-1"></div>
-<div class="p-2"></div>
-<!-- padding in 4 directions. pt-1 {padding-top: 4px;} pt-2 {padding-top: 8px;} -->
-<div class="pt-1"></div>
-<div class="pt-2"></div>
-<!-- px-1 {padding-left: 4px; padding-right: 4px;} -->
-<div class="px-1"></div>
-<div class="px-2"></div>
-<div class="py-1"></div>
-<div class="py-2"></div>
-
-
-      
-
-      
-        #Shape utilities
-        
-          Shape utilities are used for change element shapes.
-        
-        
-          
-            
-              rounded
+          
+            #Shape utilities
+            Shape utilities are used for change element shapes.
+            
+              
+                rounded
+              
+              
+                circle
+              
             
+            <!-- rounded element -->
+<div class="rounded"></div>
+<!-- circle element -->
+<div class="circle"></div>
           
-          
-            
-              circle
-            
+          
+            #Text utilities
+            Text utilities are used for text alignment, styles and overflow things.
+            <!-- left-aligned text -->
+<div class="text-left"></div>
+<!-- center-aligned text -->
+<div class="text-center"></div>
+<!-- right-aligned text -->
+<div class="text-right"></div>
+<!-- justified text -->
+<div class="text-justify"></div>
+
+<!-- Lowercased text -->
+<div class="text-lowercase"></div>
+<!-- Uppercased text -->
+<div class="text-uppercase"></div>
+<!-- Capitalized text -->
+<div class="text-capitalize"></div>
+
+<!-- Normal weight text -->
+<div class="text-normal"></div>
+<!-- Bold text -->
+<div class="text-bold"></div>
+<!-- Italicized text -->
+<div class="text-italic"></div>
+<!-- Larger text (120%) -->
+<div class="text-large"></div>
+
+<!-- Overflow behavior: display an ellipsis to represent clipped text -->
+<div class="text-ellipsis"></div>
+<!-- Overflow behavior: truncate the text -->
+<div class="text-clip"></div>
+<!-- Text may be broken at arbitrary points -->
+<div class="text-break"></div>
           
         
-
-
-<!-- rounded element -->
-<div class="rounded"></div>
-<!-- circle element -->
-<div class="circle"></div>
-
-
       
-
-      
-        #Text utilities
-        
-          Text utilities are used for text alignment, styles and overflow things.
-        
-
-
-<!-- left-aligned text -->
-<div class="text-left"></div>
-<!-- center-aligned text -->
-<div class="text-center"></div>
-<!-- right-aligned text -->
-<div class="text-right"></div>
-<!-- justified text -->
-<div class="text-justify"></div>
-
-<!-- Lowercased text -->
-<div class="text-lowercase"></div>
-<!-- Uppercased text -->
-<div class="text-uppercase"></div>
-<!-- Capitalized text -->
-<div class="text-capitalize"></div>
-
-<!-- Normal weight text -->
-<div class="text-normal"></div>
-<!-- Bold text -->
-<div class="text-bold"></div>
-<!-- Italicized text -->
-<div class="text-italic"></div>
-<!-- Larger text (120%) -->
-<div class="text-large"></div>
-
-<!-- Overflow behavior: display an ellipsis to represent clipped text -->
-<div class="text-ellipsis"></div>
-<!-- Overflow behavior: truncate the text -->
-<div class="text-clip"></div>
-<!-- Text may be broken at arbitrary points -->
-<div class="text-break"></div>
-
-
-      
-
-      
-        GitHub | Twitter | PayPal Donate | Version 
-        Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
-      
-
     
-  
-
-  
-
-
+    
+  
+
\ No newline at end of file
-- 
cgit v1.3.1-23-gd82d


From c67deb4708c44178c3a0ea46d8279da1672c32b7 Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Tue, 5 Jun 2018 21:31:02 +0800
Subject: Update docs demo margin

---
 docs/components.html               | 70 +++++++++++++--------------
 docs/dist/docs.css                 |  9 ++--
 docs/dist/docs.min.css             |  2 +-
 docs/elements.html                 | 96 +++++++++++++++++---------------------
 docs/experimentals.html            | 26 +++++------
 docs/layout.html                   | 18 +++----
 docs/src/contents/accordions.pug   |  2 +-
 docs/src/contents/autocomplete.pug |  4 +-
 docs/src/contents/avatars.pug      |  6 +--
 docs/src/contents/badges.pug       |  4 +-
 docs/src/contents/bars.pug         |  7 +--
 docs/src/contents/breadcrumbs.pug  |  2 +-
 docs/src/contents/buttons.pug      | 25 +++++-----
 docs/src/contents/calendars.pug    |  4 +-
 docs/src/contents/cards.pug        |  2 +-
 docs/src/contents/carousels.pug    |  2 +-
 docs/src/contents/chips.pug        |  2 +-
 docs/src/contents/colors.pug       |  6 +--
 docs/src/contents/comparison.pug   |  2 +-
 docs/src/contents/cursor.pug       |  2 +-
 docs/src/contents/divider.pug      |  8 ++--
 docs/src/contents/empty.pug        |  2 +-
 docs/src/contents/filters.pug      |  2 +-
 docs/src/contents/forms.pug        | 49 +++++++++----------
 docs/src/contents/grid.pug         |  8 ++--
 docs/src/contents/labels.pug       |  2 +-
 docs/src/contents/loading.pug      |  4 +-
 docs/src/contents/media.pug        |  6 +--
 docs/src/contents/menu.pug         |  6 +--
 docs/src/contents/meters.pug       |  2 +-
 docs/src/contents/modals.pug       |  6 +--
 docs/src/contents/nav.pug          |  2 +-
 docs/src/contents/navbar.pug       |  4 +-
 docs/src/contents/off-canvas.pug   |  2 +-
 docs/src/contents/pagination.pug   |  4 +-
 docs/src/contents/panels.pug       |  2 +-
 docs/src/contents/parallax.pug     |  2 +-
 docs/src/contents/popovers.pug     |  3 +-
 docs/src/contents/progress.pug     |  2 +-
 docs/src/contents/responsive.pug   |  6 +--
 docs/src/contents/shapes.pug       |  2 +-
 docs/src/contents/sliders.pug      |  2 +-
 docs/src/contents/steps.pug        |  2 +-
 docs/src/contents/tables.pug       |  2 +-
 docs/src/contents/tabs.pug         |  6 +--
 docs/src/contents/tiles.pug        |  4 +-
 docs/src/contents/timelines.pug    |  2 +-
 docs/src/contents/toasts.pug       |  4 +-
 docs/src/contents/tooltips.pug     |  2 +-
 docs/src/contents/typography.pug   |  6 +--
 docs/src/scss/docs.scss            |  9 ++--
 docs/utilities.html                | 20 ++++----
 52 files changed, 222 insertions(+), 252 deletions(-)

(limited to 'docs/elements.html')

diff --git a/docs/components.html b/docs/components.html
index 4185433..f30a70e 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -132,7 +132,7 @@
           
             #Accordions
             Accordions are used to toggle sections of content.
-            
+            
               
                 
                   
@@ -239,7 +239,7 @@
           
             #Avatars
             Avatars are user profile pictures. 
-            
+            
               
                 
                 
@@ -264,7 +264,7 @@
               Add the avatar class and avatar size class to <div>  element.
               The data-initial attribute is the name appear inside the avatar.
             
-            
+            
               
                 
                 
@@ -290,7 +290,7 @@
   <img src="img/avatar-1.png" alt="...">
 </figure>
   
-            
+            
               
                 
                 
@@ -312,7 +312,7 @@
           
             #Badges
             Badges are often used as unread number indicators.
-            
+            
               Notifications
               Notifications
               Notifications
@@ -323,7 +323,7 @@
               The badge will appear in the top-right direction of the element.
             
             If there is no data-badge or the attribute is not specified, the badge will appear as a dot.
-            
+            
               
                 
                 
@@ -361,21 +361,17 @@
               Bars represent the progress of a task or the value within the known range.
               Bars are custom components for displaying HTML5 <progress>, <meter> and input range elements.
             
-            
+            
               
                 
                   
                 
               
-            
-            
               
                 
                   
                 
               
-            
-            
               
                 
                   25%
@@ -403,7 +399,7 @@
 </div>
 
             #Slider bars
-            
+            
               
                 
                   
@@ -411,8 +407,6 @@
                   
                 
               
-            
-            
               
                 
                   
@@ -449,7 +443,7 @@
           
             #Breadcrumbs
             Breadcrumbs are used as navigational hierarchies to indicate current location.
-            
+            
               
                 
                   Home
@@ -489,7 +483,7 @@
           
             #Cards
             Cards are flexible content containers.
-            
+            
               
                 
                   
@@ -581,7 +575,7 @@
           
             #Chips
             Chips are complex entities in small blocks. 
-            
+            
               CrimeDramaBiographyMystery
               
                 
@@ -610,7 +604,7 @@
           
             #Empty states
             Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
-            
+            
               
                 
                   
@@ -665,7 +659,7 @@
           
             #Menu
             Menus are vertical list of links or buttons for actions and navigation.
-            
+            
               
                 
                   
@@ -750,7 +744,7 @@
   
             #Dropdown menu
             The dropdown is a combination of buttons and menus.
-            
+            
               
                 
                   dropdown button
@@ -778,7 +772,7 @@
               You also need to add tabindex to make the buttons focusable.
             
             If the dropdown is close to the right edge of the browser, you can add the dropdown-right class to the container to prevent it appearing off screen.
-            
+            
               
                 dropdown button 
                   
@@ -821,7 +815,7 @@
           
             #Modals
             Modals are flexible dialog prompts.
-            
+            
               Open Modal
                 
                   
@@ -876,7 +870,7 @@
 </div>
 
             #Modal sizes
-            
+            
               Open small size Modal
                 
                   
@@ -912,7 +906,7 @@
             Use the modal-sm class for a smaller modal dialog.
               The container max width is 320px.
             
-            
+            
               Open large size Modal
                 
                   
@@ -952,7 +946,7 @@
           
           
             #Nav
-            
+            
               
                 
                   Elements
@@ -1004,7 +998,7 @@
           
           
             #Pagination
-            
+            
               
                 
                   Prev
@@ -1059,7 +1053,7 @@
   </li>
 </ul>
 
-            
+            
               
                 
                   
@@ -1090,7 +1084,7 @@
           
             #Panels
             Panels are flexible view container with auto-expand content section.
-            
+            
               
                 
                   
@@ -1222,7 +1216,7 @@
           
             #Popovers
             Popovers are small overlay content containers. Popovers component is built entirely in CSS.
-            
+            
               
                 top popover
                   
@@ -1315,7 +1309,7 @@
           
             #Steps
             Steps are progress indicators of a sequence of task steps.
-            
+            
               
                 
                   
@@ -1356,7 +1350,7 @@
           
             #Tabs
             Tabs enable quick switch between different views.
-            
+            
               
                 
                   Music
@@ -1393,7 +1387,7 @@
   </li>
 </ul>
 
-            
+            
               
                 
                   Music
@@ -1418,7 +1412,7 @@
   </li>
 </ul>
 
-            
+            
               
                 
                   Music
@@ -1455,7 +1449,7 @@
           
             #Tiles
             Tiles are repeatable or embeddable information blocks.
-            
+            
               
                 
                   
@@ -1512,7 +1506,7 @@
             Add the tile-centered class to the container tile.
               The tile-icon, tile-content and tile-action will be vertically centered.
             
-            
+            
               
                 
                   
@@ -1548,7 +1542,7 @@
           
             #Toasts
             Toasts are used to show alert or information to users.
-            
+            
               
                 
                   
@@ -1569,7 +1563,7 @@
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 </div>
 
-            
+            
               
                 
                   Toast success
@@ -1595,7 +1589,7 @@
           
             #Tooltips
             Tooltips provide context information labels that appear on hover and focus.
-            
+            
               
                 
               
diff --git a/docs/dist/docs.css b/docs/dist/docs.css
index 56db536..68d17bc 100644
--- a/docs/dist/docs.css
+++ b/docs/dist/docs.css
@@ -144,8 +144,9 @@
   margin-top: .4rem;
 }
 
-.docs-content .docs-note {
-  margin: 1.5rem 0;
+.docs-content .docs-demo {
+  padding-bottom: 1rem;
+  padding-top: 1rem;
 }
 
 .docs-content .docs-ad {
@@ -184,10 +185,6 @@
   font-size: .7rem;
 }
 
-.docs-content .columns {
-  margin-bottom: 1rem;
-}
-
 .docs-content .column {
   padding: .4rem;
 }
diff --git a/docs/dist/docs.min.css b/docs/dist/docs.min.css
index 1578bf3..47fe08d 100644
--- a/docs/dist/docs.min.css
+++ b/docs/dist/docs.min.css
@@ -1 +1 @@
-/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.docs-content .anchor:focus,.docs-content .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{height:auto;width:1em}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-note{margin:1.5rem 0}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:inline-block;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .columns{margin-bottom:1rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;color:#727e96;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:1rem}.grid-hero .docs-brand{left:1rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}.docs-content .anchor{display:none}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;position:fixed;right:1rem;width:7.3rem}}
\ No newline at end of file
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.docs-content .anchor:focus,.docs-content .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{height:auto;width:1em}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-demo{padding-bottom:1rem;padding-top:1rem}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:inline-block;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;color:#727e96;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:1rem}.grid-hero .docs-brand{left:1rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}.docs-content .anchor{display:none}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;position:fixed;right:1rem;width:7.3rem}}
\ No newline at end of file
diff --git a/docs/elements.html b/docs/elements.html
index 7038e74..0a96949 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -133,7 +133,7 @@
             #Typography
             Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
             #Headings
-            
+            
               
                 H1 Heading 40px
               
@@ -166,7 +166,7 @@
 <p>...</p>
 
             #Semantic text elements
-            
+            
               I18Nabbr
               Boldstrongb
               
@@ -260,7 +260,7 @@
 </blockquote>
 
             #Lists
-            
+            
               
                 
                   list item 1
@@ -320,7 +320,7 @@
           
             #Tables
             Tables include default styles for tables and data sets.
-            
+            
               
                 
@@ -381,7 +381,7 @@
           
             #Buttons
             Buttons include simple button styles for actions in different types and sizes.
-            
+            
               
                 
                 
@@ -396,7 +396,7 @@
 <button class="btn btn-link">link button</button>
 
             #Button colors
-            
+            
               
                 
                 
@@ -409,7 +409,7 @@
 <button class="btn btn-error">error button</button>
 
             #Button sizes
-            
+            
               
                 
                 
@@ -436,7 +436,7 @@
 <button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
 
             Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).
-            
+            
               
                 
                 
@@ -453,7 +453,7 @@
 
             #Button states
             Add the active class for active button state style.
-            
+            
               
                 
                 
@@ -461,7 +461,7 @@
               
             
             Add the disabled class or the disabled attribute for disabled button state style.
-            
+            
               
                 
                 
@@ -473,7 +473,7 @@
 <button class="btn" disabled tabindex="-1">disabled button</button>
 
             A button with the loading class can show loading indicator.
-            
+            
               
                 
                 
@@ -485,31 +485,29 @@
 <button class="btn btn-primary loading">primary button</button>
 
             #Button groups
-            
-              
+            
+              
                 
                   
                   
                   
                 
               
-              
+              
                 
                   
                   
                   
                 
               
-            
-            
-              
+              
                 
                   
                   
                   
                 
               
-              
+              
                 
                   
                   
@@ -529,7 +527,7 @@
           
             #Forms
             Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
-            
+            
               
                 
                   Name
@@ -547,7 +545,7 @@
   <input class="form-input" type="text" id="input-example-1" placeholder="Name">
 </div>
 
-            
+            
               
                 
                   Message
@@ -561,7 +559,7 @@
   <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
 </div>
 
-            
+            
               
                 
                   
               
-            
-            
               
                 Label
               
@@ -789,7 +785,7 @@
             Add a wrapper with the has-icon-left/has-icon-right class to <input> element.
               And add the icon with form-icon class next to the <input>.
             
-            
+            
               
                 
                   
@@ -805,8 +801,6 @@
                   
                 
               
-            
-            
               
                 
                   
@@ -830,7 +824,7 @@
 </div>
 
             You can use the loading class for loading or posting state.
-            
+            
               
                 
                   
@@ -854,7 +848,7 @@
 </div>
 
             #Input types
-            
+            
               
                 
                   
@@ -933,8 +927,8 @@
               
             
             #Input groups
-            
-              
+            
+              
                 
                   
                   
                 
               
-              
+              
                 slack.com/
                   
                   
                 
               
-            
-            
-              
+              
                 
                   
                   
                 
               
-              
+              
                 slack.com/
                   
                   
                 
               
-            
-            
-              
+              
                 
                   
                     
@@ -978,7 +968,7 @@
                   
                 
               
-              
+              
                 
                   
                     
@@ -986,9 +976,7 @@
                   
                 
               
-            
-            
-              
+              
                 
                   
                   
                 
               
-              
+              
                 slack.com/
                   
                   
@@ -1031,7 +1019,7 @@
             To use form validation styles, you can either add is-success or is-error class to the controls or add has-success or has-error class to parent elements.
               Use the form-input-hint class to provide form validation success and error messages.
             
-            
+            
               
                 
                   Input
@@ -1122,7 +1110,7 @@
             #Form disabled styles
             
                Add the disabled attribute to the element or <fieldset> for a disabled form components style.
-            
+            
               
                 
                   
@@ -1220,7 +1208,7 @@
             Add the label class to <span> or <small> elements.
               You can add another class label-primary, label-secondary, label-success, label-warning and label-error for colored labels.
             
-            
+            
               default labelprimary label
             
             Add the label-rounded class to have rounded labels.
@@ -1260,7 +1248,7 @@
             Add the img-fit-contain or img-fit-cover class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container).
               This feature can replace the classic background image trick. Microsoft Edge support is shipped  with Build Number 16299+.
             
-            
+            
               
                 
                   img-fit-contain
@@ -1283,7 +1271,7 @@
               And the included class figure-caption will provide basic style for caption.
               Also, you can use text-left, text-center and text-right for caption alignment.
             
-            
+            
               
                 
                   macOS Yosemite wallpaper
@@ -1296,7 +1284,7 @@
               The ratio is 16:9 by default.
               You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.
             
-            
+            
               
                 
                   
diff --git a/docs/experimentals.html b/docs/experimentals.html
index 978788d..0225fbd 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -140,7 +140,7 @@
           
             #Autocomplete
             Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.
-            
+            
               
                 
                   
@@ -194,7 +194,7 @@
               Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete.
               The autocomplete HTML structure is exampled below.
             
-            
+            
               
                 
                   
@@ -246,7 +246,7 @@
           
             #Calendars
             Calendars are designed for date or date range picker and events display. It is made with flex layout.
-            
+            
               
                 
                   
@@ -376,7 +376,7 @@
               
             
             #Calendars sizes
-            
+            
               
                 
                   
@@ -514,7 +514,7 @@
           
             #Carousels
             Carousels are slideshows for cycling images. It is built in pure CSS.
-            
+            
               
                 
                   
@@ -552,7 +552,7 @@
           
             #Comparison sliders
             Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
-            
+            
               
                 
                   
@@ -581,7 +581,7 @@
           
             #Filters
             Filters are CSS only content filters.
-            
+            
               
                 
                   
@@ -726,7 +726,7 @@
           
             #Meters
             Meters represent the value within the known range.
-            
+            
               
                 
               
@@ -755,7 +755,7 @@
               By default, the off-canvas menu is collapsed whenever the window width is.
               But you can add the off-canvas-sidebar-show class to the off-canvas to make the sidebar expanded when the window width is larger than or equal to 960px.
             
-            
+            
               
                 
                   Sidebar

@@ -792,7 +792,7 @@
           
             #Parallax
             The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.
-            
+            
               
                 
                   
@@ -827,7 +827,7 @@
           
             #Progress
             The Progress indicates the progress completion of a task.
-            
+            
               
                 
               
@@ -850,7 +850,7 @@
             You can add the class tooltip to have tooltip labels.
               If no data-tooltip is set, the value will be used instead.
             
-            
+            
               
                 
               
@@ -866,7 +866,7 @@
           
             #Timelines
             Timelines are ordered sequences of activities.
-            
+            
               
                 
                   
diff --git a/docs/layout.html b/docs/layout.html
index 65d8008..3c27fec 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -132,7 +132,7 @@
           
             #Flexbox grid
             Layout includes flexbox based responsive grid system with 12 columns.
-            
+            
               
                 
               
@@ -205,7 +205,7 @@
               You can specific the width of each column by adding class col-<1-12>.
             
             And you can add the col-gapless class to the columns to have gapless columns.
-            
+            
               
                 col-6 (gapless)
               
@@ -220,7 +220,7 @@
 </div>
 
             By default, Spectre grid has multi-line flexbox enabled. You can add the col-oneline class to columns to make all its child columns positioned in the same single row.
-            
+            
               
                 col-8
               
@@ -294,7 +294,7 @@
 
             #Grid nesting
             To nest grids, add the new columns and column structure within an existing column.
-            
+            
               
                 
                   col-6
@@ -328,7 +328,7 @@
           
             #Responsive
             Spectre provides a neat responsive layout grid system and responsive visibility utilities.
-            
+            
               
                 col-10 
 col-lg-8 
 col-md-6 
 col-sm-4
               
@@ -367,7 +367,7 @@
 
             #Responsive visibility
             The responsive visibility utilities help show and hide elements on specific viewport sizes.
-            
+            
               
                 

                   
@@ -483,7 +483,7 @@
               hide-lg hides elements when the window width is smaller than or equal to 960px.
hide-xl hides elements when the window width is smaller than or equal to 1280px.
-            
+            
               
                 

                   
               
             
@@ -608,7 +608,7 @@
           
             #Navbar
             Navbar is a layout container that appears in the header of apps and websites.
-            
+            
               
                 
                   Spectre.cssDocsGitHub
@@ -640,7 +640,7 @@
 </header>
 
             You can use navbar-center class to have a centered section.
-            
+            
               
                 
                   DocsExamples
diff --git a/docs/src/contents/accordions.pug b/docs/src/contents/accordions.pug
index 8914516..4e6838b 100644
--- a/docs/src/contents/accordions.pug
+++ b/docs/src/contents/accordions.pug
@@ -1,6 +1,6 @@
 p Accordions are used to toggle sections of content.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-md-12
     .accordion
       input#accordion-1(type="radio" name="accordion-radio" hidden="" checked="")
diff --git a/docs/src/contents/autocomplete.pug b/docs/src/contents/autocomplete.pug
index ca93c8a..5224c45 100644
--- a/docs/src/contents/autocomplete.pug
+++ b/docs/src/contents/autocomplete.pug
@@ -1,7 +1,7 @@
 p
   | Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.
 
-.columns
+.docs-demo.columns
   .column.col-9.col-xs-12
     .form-group
       .form-autocomplete
@@ -62,7 +62,7 @@ p
   | Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete.
   | The autocomplete HTML structure is exampled below.
 
-.columns
+.docs-demo.columns
   .column.col-9.col-xs-12
     .form-group
       .form-autocomplete.autocomplete-oneline
diff --git a/docs/src/contents/avatars.pug b/docs/src/contents/avatars.pug
index ff8f6c6..2e9886c 100644
--- a/docs/src/contents/avatars.pug
+++ b/docs/src/contents/avatars.pug
@@ -1,6 +1,6 @@
 p Avatars are user profile pictures. 
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     figure.avatar.avatar-xl
       img(src="img/avatar-1.png" alt="Avatar XL")
@@ -28,7 +28,7 @@ p
   | Add the #[code avatar] class and avatar size class to #{''}  element.
   | The #[code data-initial] attribute is the name appear inside the avatar.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     figure.avatar.avatar-xl
       img(src="img/avatar-1.png" alt="Avatar")
@@ -66,7 +66,7 @@ pre.code(data-lang='HTML')
         
       
         
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     figure.avatar.avatar-xl(data-initial="YZ")
       i.avatar-presence.online
diff --git a/docs/src/contents/badges.pug b/docs/src/contents/badges.pug
index 250fb39..40b42ea 100644
--- a/docs/src/contents/badges.pug
+++ b/docs/src/contents/badges.pug
@@ -1,6 +1,6 @@
 p Badges are often used as unread number indicators.
 
-.columns
+.docs-demo.columns
   .column.col-3.col-xs-6
     span.badge(data-badge="")
       | Notifications
@@ -21,7 +21,7 @@ p
 p
   | If there is no #[code data-badge] or the attribute is not specified, the badge will appear as a dot.
 
-.columns
+.docs-demo.columns
   .column.col-sm-12
     button.btn.badge(data-badge="") Button
     button.btn.badge(data-badge="8") Button
diff --git a/docs/src/contents/bars.pug b/docs/src/contents/bars.pug
index 58d7f3c..df0d17b 100644
--- a/docs/src/contents/bars.pug
+++ b/docs/src/contents/bars.pug
@@ -2,15 +2,13 @@ p
   | Bars represent the progress of a task or the value within the known range.
   | Bars are custom components for displaying HTML5 #{''}, #{''} and input range elements.
 
-.columns
+.docs-demo.columns
   .column.col-8.col-xs-12
     .bar.bar-sm
       .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100")
-.columns
   .column.col-8.col-xs-12
     .bar
       .bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;")
-.columns
   .column.col-8.col-xs-12
     .bar
       .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;") 25%
@@ -42,12 +40,11 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('bars-slider', 'Slider bars')
 
-.columns
+.docs-demo.columns
   .column.col-8.col-xs-12
     .bar.bar-slider
       .bar-item(role="progressbar" style="width:50%;")
         button.bar-slider-btn.btn.tooltip(data-tooltip="50%" role="slider")
-.columns
   .column.col-8.col-xs-12
     .bar.bar-slider
       .bar-item(role="progressbar" style="width:15%;")
diff --git a/docs/src/contents/breadcrumbs.pug b/docs/src/contents/breadcrumbs.pug
index b1b66c5..ccde5e1 100644
--- a/docs/src/contents/breadcrumbs.pug
+++ b/docs/src/contents/breadcrumbs.pug
@@ -1,6 +1,6 @@
 p Breadcrumbs are used as navigational hierarchies to indicate current location.
 
-.columns
+.docs-demo.columns
   .column.col-12
     ul.breadcrumb
       li.breadcrumb-item
diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug
index 8f8dbb1..3fbf5da 100644
--- a/docs/src/contents/buttons.pug
+++ b/docs/src/contents/buttons.pug
@@ -1,6 +1,6 @@
 p Buttons include simple button styles for actions in different types and sizes.
 
-.columns
+.docs-demo.columns
   .column.col-12
     button.btn default button
     button.btn.btn-primary primary button
@@ -19,7 +19,7 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('buttons-colors', 'Button colors')
 
-.columns
+.docs-demo.columns
   .column.col-12
     button.btn.btn-success success button
     button.btn.btn-error error button
@@ -38,7 +38,7 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('buttons-sizes', 'Button sizes')
 
-.columns
+.docs-demo.columns
   .column.col-12
     button.btn.btn-primary.btn-lg
       | large 
@@ -75,7 +75,7 @@ pre.code(data-lang='HTML')
 p
   | Please note that you could use the #[code btn-action] class for a square button, or add another #[code circle] class for a round button, which is often used as a Float Action Button (FAB).
 
-.columns
+.docs-demo.columns
   .column.col-xs-12
     button.btn.btn-action.btn-primary.btn-lg
       i.icon.icon-menu
@@ -102,7 +102,7 @@ pre.code(data-lang='HTML')
 p
   | Add the #[code active] class for active button state style.
 
-.columns
+.docs-demo.columns
   .column.col-12
     button.btn.active default active
     button.btn.btn-primary.active primary active
@@ -111,7 +111,7 @@ p
 p
   | Add the #[code disabled] class or the #[code disabled] attribute for disabled button state style.
 
-.columns
+.docs-demo.columns
   .column.col-12
     button.btn.disabled(tabindex="-1") default disabled
     button.btn.btn-primary(disabled="" tabindex="-1") primary disabled
@@ -127,7 +127,7 @@ pre.code(data-lang='HTML')
 p
   | A button with the #[code loading] class can show loading indicator.
 
-.columns
+.docs-demo.columns
   .column.col-12
     button.btn.loading default button
     button.btn.btn-primary.loading primary button
@@ -142,24 +142,23 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('buttons-groups', 'Button groups')
 
-.columns
-  .column.col-md-12
+.docs-demo.columns
+  .column.col-6.col-md-12
     .btn-group
       button.btn first button
       button.btn second button
       button.btn third button
-  .column.col-md-12
+  .column.col-6.col-md-12
     .btn-group.btn-group-block
       button.btn.btn-primary first button
       button.btn.btn-primary second button
       button.btn.btn-primary third button
-.columns
-  .column.col-md-12
+  .column.col-6.col-md-12
     .btn-group
       button.btn.btn-sm.active first button
       button.btn.btn-sm second button
       button.btn.btn-sm third button
-  .column.col-md-12
+  .column.col-6.col-md-12
     .btn-group.btn-group-block
       button.btn.btn-primary.btn-sm.active first button
       button.btn.btn-primary.btn-sm second button
diff --git a/docs/src/contents/calendars.pug b/docs/src/contents/calendars.pug
index 0806844..60866dd 100644
--- a/docs/src/contents/calendars.pug
+++ b/docs/src/contents/calendars.pug
@@ -1,7 +1,7 @@
 p
   | Calendars are designed for date or date range picker and events display. It is made with flex layout.
 
-.columns
+.docs-demo.columns
   .column.col-4.col-md-12
     .calendar
       .calendar-nav.navbar
@@ -93,7 +93,7 @@ p
 
 +docs-subheading('calendars-sizes', 'Calendars sizes')
 
-.columns
+.docs-demo.columns
   .column.col-12
     .calendar.calendar-lg
       .calendar-nav.navbar
diff --git a/docs/src/contents/cards.pug b/docs/src/contents/cards.pug
index 4fb3671..be8d17e 100644
--- a/docs/src/contents/cards.pug
+++ b/docs/src/contents/cards.pug
@@ -1,6 +1,6 @@
 p Cards are flexible content containers.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     .card
       .card-image
diff --git a/docs/src/contents/carousels.pug b/docs/src/contents/carousels.pug
index 5ce41fa..c9c0045 100644
--- a/docs/src/contents/carousels.pug
+++ b/docs/src/contents/carousels.pug
@@ -1,6 +1,6 @@
 p Carousels are slideshows for cycling images. It is built in pure CSS.
 
-.columns
+.docs-demo.columns
   .column.col-12
     .carousel
       input#slide-1.carousel-locator(type="radio" name="carousel-radio" hidden="" checked="")
diff --git a/docs/src/contents/chips.pug b/docs/src/contents/chips.pug
index ff02780..7ac2a25 100644
--- a/docs/src/contents/chips.pug
+++ b/docs/src/contents/chips.pug
@@ -1,6 +1,6 @@
 p Chips are complex entities in small blocks. 
 
-.columns
+.docs-demo.columns
   .column.col-12
     span.chip
       | Crime
diff --git a/docs/src/contents/colors.pug b/docs/src/contents/colors.pug
index 84a86be..fad27c9 100644
--- a/docs/src/contents/colors.pug
+++ b/docs/src/contents/colors.pug
@@ -2,7 +2,7 @@ p Color utilities are used for changing colors for text, link and background.
 
 +docs-subheading('colors-text', 'Text colors')
 
-.columns
+.docs-demo.columns
   .column.col-12
     p
       span.text-primary primary color
@@ -30,7 +30,7 @@ pre.code(data-lang='HTML')
       warning color
       error color
 
-.columns
+.docs-demo.columns
   .column.col-12
     p
       a.text-primary.p-1(href="#colors") primary link
@@ -60,7 +60,7 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('colors-background', 'Background colors')
 
-.columns
+.docs-demo.columns
   .column.col-12
     p
       span.bg-primary.p-1.rounded primary bg
diff --git a/docs/src/contents/comparison.pug b/docs/src/contents/comparison.pug
index 5f6ce38..954981d 100644
--- a/docs/src/contents/comparison.pug
+++ b/docs/src/contents/comparison.pug
@@ -1,7 +1,7 @@
 p
   | Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
 
-.columns
+.docs-demo.columns
   .column.col-12
     .comparison-slider
       figure.comparison-before
diff --git a/docs/src/contents/cursor.pug b/docs/src/contents/cursor.pug
index df92600..ed290b8 100644
--- a/docs/src/contents/cursor.pug
+++ b/docs/src/contents/cursor.pug
@@ -1,6 +1,6 @@
 p Cursor utilities specify which mouse cursor to display when mouseover.
 
-.columns
+.docs-demo.columns
   .column.col-4
     .bg-gray.docs-block.c-hand c-hand
   .column.col-4
diff --git a/docs/src/contents/divider.pug b/docs/src/contents/divider.pug
index e84ff11..92faa70 100644
--- a/docs/src/contents/divider.pug
+++ b/docs/src/contents/divider.pug
@@ -1,14 +1,16 @@
 p A Divider is used for separating elements.
 
-.columns
+.docs-demo.columns
   .column
     .divider
-.columns
+
+.docs-demo.columns
   .column
     | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
     .divider.text-center(data-content="OR")
     | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
-.columns
+
+.docs-demo.columns
   .column
     form
       .form-group
diff --git a/docs/src/contents/empty.pug b/docs/src/contents/empty.pug
index 0ac70dc..880090d 100644
--- a/docs/src/contents/empty.pug
+++ b/docs/src/contents/empty.pug
@@ -1,7 +1,7 @@
 p
   | Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
 
-.columns
+.docs-demo.columns
   .column.col-12
     .empty
       .empty-icon
diff --git a/docs/src/contents/filters.pug b/docs/src/contents/filters.pug
index 0c61640..e2e70b3 100644
--- a/docs/src/contents/filters.pug
+++ b/docs/src/contents/filters.pug
@@ -1,6 +1,6 @@
 p Filters are CSS only content filters.
 
-.columns
+.docs-demo.columns
   .column.col-12
     .filter
       input#tag-0.filter-tag(type="radio" name="filter-radio" hidden="" checked="")
diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
index bcfde1a..75c096e 100644
--- a/docs/src/contents/forms.pug
+++ b/docs/src/contents/forms.pug
@@ -1,7 +1,7 @@
 p
   | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     .form-group
       label.form-label(for="input-example-1") Name
@@ -19,7 +19,7 @@ pre.code(data-lang='HTML')
         
       
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     .form-group
       label.form-label(for="input-example-3") Message
@@ -34,7 +34,7 @@ pre.code(data-lang='HTML')
         
       
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     .form-group
       select.form-select
@@ -62,7 +62,7 @@ pre.code(data-lang='HTML')
         
       
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     form
       .form-group
@@ -92,7 +92,7 @@ pre.code(data-lang='HTML')
         
       
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     .form-group
       label.form-switch
@@ -116,7 +116,7 @@ pre.code(data-lang='HTML')
         
       
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     .form-group
       label.form-checkbox
@@ -149,7 +149,7 @@ p
   | If you want to have a horizontal form, add the #[code form-horizontal] class to the #{''} container.
   | And add the #[code col-<1-12>] and #[code col-xs/sm/lg/xl-<1-12>] class to the child elements for responsive form row layout.
 
-.columns
+.docs-demo.columns
   .column.col-9.col-sm-12
     form.form-horizontal(action="#forms")
       .form-group
@@ -220,7 +220,7 @@ pre.code(data-lang='HTML')
 p
   | For smaller or larger input and select controls, you could add the #[code input-sm]/#[code input-lg], #[code select-sm]/#[code select-lg] and #[code label-sm]/#[code label-lg] classes to the elements.
 
-.columns
+.docs-demo.columns
   .column.col-4.col-xs-12
     label.form-label.label-sm Label
   .column.col-4.col-xs-12
@@ -231,7 +231,6 @@ p
       option Slack
       option Skype
       option Hipchat
-.columns
   .column.col-4.col-xs-12
     label.form-label.label-lg Label
   .column.col-4.col-xs-12
@@ -256,7 +255,7 @@ p
   | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{''} element.
   | And add the icon with #[code form-icon] class next to the #{''}.
 
-.columns
+.docs-demo.columns
   .column.col-4.col-xs-12
     .has-icon-left
       input.form-input.input-sm(type="text" placeholder="Name")
@@ -269,7 +268,6 @@ p
     .has-icon-left
       input.form-input.input-lg(type="text" placeholder="Name")
       i.form-icon.icon.icon-arrow-right
-.columns
   .column.col-4.col-xs-12
     .has-icon-right
       input.form-input.input-sm(type="text" placeholder="Name")
@@ -295,7 +293,7 @@ pre.code(data-lang='HTML')
 p
   | You can use the #[code loading] class for loading or posting state.
 
-.columns
+.docs-demo.columns
   .column.col-4.col-xs-12
     .has-icon-right
       input.form-input.input-sm(type="text" placeholder="Name")
@@ -320,7 +318,7 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('forms-input', 'Input types')
 
-.columns
+.docs-demo.columns
   .column.col-9.col-sm-12
     form.form-horizontal(action="#forms")
       .form-group
@@ -371,54 +369,51 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('forms-input-groups', 'Input groups')
 
-.columns
-  .column.col-xs-12
+.docs-demo.columns
+  .column.col-6.col-xs-12
     .input-group
       input.form-input.input-sm(type="text" placeholder="username")
       select.form-select.select-sm
         option Slack
         option Skype
         option Hipchat
-  .column.col-xs-12
+  .column.col-6.col-xs-12
     .input-group
       span.input-group-addon.addon-sm slack.com/
       input.form-input.input-sm(type="text" placeholder="site name")
       button.btn.btn-primary.input-group-btn.btn-sm Submit
-.columns
-  .column.col-xs-12
+  .column.col-6.col-xs-12
     .input-group
       input.form-input(type="text" placeholder="username")
       select.form-select
         option Slack
         option Skype
         option Hipchat
-  .column.col-xs-12
+  .column.col-6.col-xs-12
     .input-group
       span.input-group-addon slack.com/
       input.form-input(type="text" placeholder="site name")
       button.btn.btn-primary.input-group-btn Submit
-.columns
-  .column.col-xs-12
+  .column.col-6.col-xs-12
     .input-group
       label.form-switch
         input(type="checkbox")
         i.form-icon
       input.form-input(type="text" placeholder="name")
-  .column.col-xs-12
+  .column.col-6.col-xs-12
     .input-group
       label.form-checkbox
         input(type="checkbox")
         i.form-icon
       input.form-input(type="text" placeholder="name")
-.columns
-  .column.col-xs-12
+  .column.col-6.col-xs-12
     .input-group
       input.form-input.input-lg(type="text" placeholder="username")
       select.form-select.select-lg
         option Slack
         option Skype
         option Hipchat
-  .column.col-xs-12
+  .column.col-6.col-xs-12
     .input-group
       span.input-group-addon.addon-lg slack.com/
       input.form-input.input-lg(type="text" placeholder="site name")
@@ -456,7 +451,7 @@ p
   | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements.
   | Use the #[code form-input-hint] class to provide form validation success and error messages.
 
-.columns
+.docs-demo.columns
   .column.col-9.col-sm-12
     fieldset
       legend Input
@@ -542,7 +537,7 @@ pre.code(data-lang='HTML')
 p 
   | Add the #[code disabled] attribute to the element or #{''} for a disabled form components style.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     form(action="#forms")
       fieldset(disabled="")
diff --git a/docs/src/contents/grid.pug b/docs/src/contents/grid.pug
index d0172fb..0665262 100644
--- a/docs/src/contents/grid.pug
+++ b/docs/src/contents/grid.pug
@@ -1,7 +1,7 @@
 p
   | Layout includes flexbox based responsive grid system with 12 columns.
 
-.columns
+.docs-demo.columns
   .column
     .bg-primary.text-secondary.docs-block
   .column
@@ -59,7 +59,7 @@ p
 p
   | And you can add the #[code col-gapless] class to the #[code columns] to have gapless columns.
 
-.columns.col-gapless
+.docs-demo.columns.col-gapless
   .column.col-6
     .bg-gray.docs-block col-6 (gapless)
   .column.col-6
@@ -77,7 +77,7 @@ pre.code(data-lang='HTML')
 p
   | By default, Spectre grid has multi-line flexbox enabled. You can add the #[code col-oneline] class to #[code columns] to make all its child columns positioned in the same single row.
 
-.columns.col-oneline
+.docs-demo.columns.col-oneline
   .column.col-8
     .bg-gray.docs-block col-8
   .column.col-8
@@ -143,7 +143,7 @@ pre.code(data-lang='HTML')
 p
   | To nest grids, add the new #[code columns] and #[code column] structure within an existing column.
 
-.columns
+.docs-demo.columns
   .column.col-6
     .bg-gray
       .docs-block col-6
diff --git a/docs/src/contents/labels.pug b/docs/src/contents/labels.pug
index 2d55412..cef66d2 100644
--- a/docs/src/contents/labels.pug
+++ b/docs/src/contents/labels.pug
@@ -13,7 +13,7 @@ p
   | Add the #[code label] class to #{''} or #{''} elements.
   | You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels.
 
-.columns
+.docs-demo.columns
   .column
     span.label.label-rounded.mr-1 default label
     span.label.label-rounded.label-primary primary label
diff --git a/docs/src/contents/loading.pug b/docs/src/contents/loading.pug
index c7643b2..38a1dad 100644
--- a/docs/src/contents/loading.pug
+++ b/docs/src/contents/loading.pug
@@ -2,14 +2,14 @@ p
   | Loading indicator is used for loading or updating.
   | You can add the #[code loading] class to a container for loading status.
 
-.columns
+.docs-demo.columns
   .column.col-12.text-center
     .loading
 
 p
   | Add the #[code loading-lg] class for large size.
 
-.columns
+.docs-demo.columns
   .column.col-12.text-center
     .loading.loading-lg
 
diff --git a/docs/src/contents/media.pug b/docs/src/contents/media.pug
index fcb8d36..ee78fcc 100644
--- a/docs/src/contents/media.pug
+++ b/docs/src/contents/media.pug
@@ -15,7 +15,7 @@ p
   a(href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank") is shipped
   |   with Build Number 16299+.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     figure.figure
       img.img-fit-contain.rounded(src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;")
@@ -41,7 +41,7 @@ p
   | And the included class #[code figure-caption] will provide basic style for caption.
   | Also, you can use #[code text-left], #[code text-center] and #[code text-right] for caption alignment.
 
-.columns
+.docs-demo.columns
   .column.col-12
     figure.figure
       img.img-responsive.rounded(src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper")
@@ -55,7 +55,7 @@ p
   | The ratio is 16:9 by default.
   | You may add #[code video-responsive-4-3] for 4:3 ratio video container or #[code video-responsive-1-1] for 1:1 ratio.
 
-.columns
+.docs-demo.columns
   .column.col-12
     .video-responsive
       iframe(width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen="")
diff --git a/docs/src/contents/menu.pug b/docs/src/contents/menu.pug
index fe7825b..45ba53b 100644
--- a/docs/src/contents/menu.pug
+++ b/docs/src/contents/menu.pug
@@ -1,6 +1,6 @@
 p Menus are vertical list of links or buttons for actions and navigation.
 
-.columns
+.docs-demo.columns
   .column.col-4.col-xs-12
     ul.menu
       li.menu-item
@@ -93,7 +93,7 @@ pre.code(data-lang='HTML')
 
 p The dropdown is a combination of buttons and menus.
 
-.columns
+.docs-demo.columns
   .column.col-xs-12
     .dropdown
       .btn-group
@@ -135,7 +135,7 @@ p
 p
   | If the dropdown is close to the right edge of the browser, you can add the #[code dropdown-right] class to the container to prevent it appearing off screen.
 
-.columns
+.docs-demo.columns
   .column.col-xs-12.text-right
     .dropdown.dropdown-right
       a.btn.btn-primary.dropdown-toggle(tabindex="0")
diff --git a/docs/src/contents/meters.pug b/docs/src/contents/meters.pug
index dd6899c..8f96070 100644
--- a/docs/src/contents/meters.pug
+++ b/docs/src/contents/meters.pug
@@ -1,6 +1,6 @@
 p Meters represent the value within the known range.
 
-.columns
+.docs-demo.columns
   .column.col-3.col-xs-12
     meter.meter(value="20" min="0" max="100")
   .column.col-3.col-xs-12
diff --git a/docs/src/contents/modals.pug b/docs/src/contents/modals.pug
index 29580c9..54a6fcd 100644
--- a/docs/src/contents/modals.pug
+++ b/docs/src/contents/modals.pug
@@ -1,6 +1,6 @@
 p Modals are flexible dialog prompts.
 
-.columns
+.docs-demo.columns
   .column
     a.btn.btn-primary(href="#example-modal-1") Open Modal
     #example-modal-1.modal
@@ -62,7 +62,7 @@ pre.code(data-lang='HTML')
       
 +docs-subheading('modals-sizes', 'Modal sizes')
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     a.btn.btn-primary(href="#example-modal-2") Open small size Modal
     #example-modal-2.modal.modal-sm
@@ -95,7 +95,7 @@ p
   | Use the #[code modal-sm] class for a smaller modal dialog.
   | The container max width is #[code 320px].
 
-.columns
+.docs-demo.columns
   .column
     a.btn.btn-primary(href="#example-modal-3") Open large size Modal
     #example-modal-3.modal.modal-lg
diff --git a/docs/src/contents/nav.pug b/docs/src/contents/nav.pug
index 537b6d2..f40964a 100644
--- a/docs/src/contents/nav.pug
+++ b/docs/src/contents/nav.pug
@@ -1,4 +1,4 @@
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     ul.nav
       li.nav-item
diff --git a/docs/src/contents/navbar.pug b/docs/src/contents/navbar.pug
index 21d13e4..fd4ac29 100644
--- a/docs/src/contents/navbar.pug
+++ b/docs/src/contents/navbar.pug
@@ -1,6 +1,6 @@
 p Navbar is a layout container that appears in the header of apps and websites.
 
-.columns
+.docs-demo.columns
   .column
     .navbar
       .navbar-section
@@ -36,7 +36,7 @@ pre.code(data-lang='HTML')
 p
   | You can use #[code navbar-center] class to have a centered section.
 
-.columns
+.docs-demo.columns
   .column.col-12
     .navbar
       .navbar-section
diff --git a/docs/src/contents/off-canvas.pug b/docs/src/contents/off-canvas.pug
index 7e45132..3e24f4c 100644
--- a/docs/src/contents/off-canvas.pug
+++ b/docs/src/contents/off-canvas.pug
@@ -4,7 +4,7 @@ p
   | By default, the off-canvas menu is collapsed whenever the window width is.
   | But you can add the #[code off-canvas-sidebar-show] class to the #[code off-canvas] to make the sidebar expanded when the window width is larger than or equal to #[strong 960px].
 
-.columns
+.docs-demo.columns
   .column
     .off-canvas.off-canvas-sidebar-show
       a.off-canvas-toggle.btn.btn-primary.btn-action(href="#sidebar-demo")
diff --git a/docs/src/contents/pagination.pug b/docs/src/contents/pagination.pug
index 83a3f92..c90f6de 100644
--- a/docs/src/contents/pagination.pug
+++ b/docs/src/contents/pagination.pug
@@ -1,4 +1,4 @@
-.columns
+.docs-demo.columns
   .column.col-xs-12
     ul.pagination
       li.page-item
@@ -69,7 +69,7 @@ pre.code(data-lang='HTML')
         
       
 
-.columns
+.docs-demo.columns
   .column.col-12
     ul.pagination
       li.page-item.page-prev
diff --git a/docs/src/contents/panels.pug b/docs/src/contents/panels.pug
index 3651c81..fdf057e 100644
--- a/docs/src/contents/panels.pug
+++ b/docs/src/contents/panels.pug
@@ -1,6 +1,6 @@
 p Panels are flexible view container with auto-expand content section.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     .panel
       .panel-header.text-center
diff --git a/docs/src/contents/parallax.pug b/docs/src/contents/parallax.pug
index 88d2c17..b448b43 100644
--- a/docs/src/contents/parallax.pug
+++ b/docs/src/contents/parallax.pug
@@ -1,7 +1,7 @@
 p
   | The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.
 
-.columns
+.docs-demo.columns
   .column.col-sm-12.col-8.col-mx-auto
     .parallax
       .parallax-top-left(tabindex="1")
diff --git a/docs/src/contents/popovers.pug b/docs/src/contents/popovers.pug
index ca81e54..b2c1b33 100644
--- a/docs/src/contents/popovers.pug
+++ b/docs/src/contents/popovers.pug
@@ -1,5 +1,6 @@
 p Popovers are small overlay content containers. Popovers component is built entirely in CSS.
-.columns
+
+.docs-demo.columns
   .column.col-3.col-sm-6
     .popover
       a.btn.btn-primary(href="#popovers")
diff --git a/docs/src/contents/progress.pug b/docs/src/contents/progress.pug
index 22a09c1..23af0af 100644
--- a/docs/src/contents/progress.pug
+++ b/docs/src/contents/progress.pug
@@ -1,6 +1,6 @@
 p The Progress indicates the progress completion of a task.
 
-.columns
+.docs-demo.columns
   .column.col-3.col-xs-12
     progress.progress(value="75" max="100")
   .column.col-3.col-xs-12
diff --git a/docs/src/contents/responsive.pug b/docs/src/contents/responsive.pug
index 8898958..9737755 100644
--- a/docs/src/contents/responsive.pug
+++ b/docs/src/contents/responsive.pug
@@ -1,6 +1,6 @@
 p Spectre provides a neat responsive layout grid system and responsive visibility utilities.
 
-.columns
+.docs-demo.columns
   .column.col-10.col-lg-8.col-md-6.col-sm-4
     .bg-gray.docs-block
       | col-10 
@@ -68,7 +68,7 @@ pre.code(data-lang='HTML')
 
 p The responsive visibility utilities help show and hide elements on specific viewport sizes.
 
-.columns
+.docs-demo.columns
   .column.col-12
     table.docs-table.table.table-striped.text-center
       thead
@@ -156,7 +156,7 @@ ul
   li
     | #[code hide-xl] hides elements when the window width is smaller than or equal to #[strong 1280px].
 
-.columns
+.docs-demo.columns
   .column.col-12
     table.docs-table.table.table-striped.text-center
       thead
diff --git a/docs/src/contents/shapes.pug b/docs/src/contents/shapes.pug
index fc07d4d..7abf513 100644
--- a/docs/src/contents/shapes.pug
+++ b/docs/src/contents/shapes.pug
@@ -1,6 +1,6 @@
 p Shape utilities are used for change element shapes.
 
-.columns
+.docs-demo.columns
   .column.col-6.text-center
     .bg-primary.text-light.docs-shape.rounded.centered
       | rounded
diff --git a/docs/src/contents/sliders.pug b/docs/src/contents/sliders.pug
index de3597b..754833c 100644
--- a/docs/src/contents/sliders.pug
+++ b/docs/src/contents/sliders.pug
@@ -3,7 +3,7 @@ p
   | You can add the class #[code tooltip] to have tooltip labels.
   | If no #[code data-tooltip] is set, the #[code value] will be used instead.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     input.slider.tooltip(type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);")
   .column.col-6.col-xs-12
diff --git a/docs/src/contents/steps.pug b/docs/src/contents/steps.pug
index 5cf8b84..0109e02 100644
--- a/docs/src/contents/steps.pug
+++ b/docs/src/contents/steps.pug
@@ -1,6 +1,6 @@
 p Steps are progress indicators of a sequence of task steps.
 
-.columns
+.docs-demo.columns
   .column.col-12
     ul.step
       li.step-item
diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug
index 64e4ffd..4cb996c 100644
--- a/docs/src/contents/tables.pug
+++ b/docs/src/contents/tables.pug
@@ -1,6 +1,6 @@
 p Tables include default styles for tables and data sets.
 
-.columns
+.docs-demo.columns
   .column.col-12
     table.table.table-striped
       thead
diff --git a/docs/src/contents/tabs.pug b/docs/src/contents/tabs.pug
index f89005d..fea99ad 100644
--- a/docs/src/contents/tabs.pug
+++ b/docs/src/contents/tabs.pug
@@ -1,6 +1,6 @@
 p Tabs enable quick switch between different views.
       
-.columns
+.docs-demo.columns
   .column.col-6.col-sm-12
     ul.tab
       li.tab-item.active
@@ -51,7 +51,7 @@ pre.code(data-lang='HTML')
         
       
 
-.columns
+.docs-demo.columns
   .column.col-sm-12
     ul.tab
       li.tab-item.active
@@ -89,7 +89,7 @@ pre.code(data-lang='HTML')
         
       
 
-.columns
+.docs-demo.columns
   .column.col-12
     ul.tab
       li.tab-item.active
diff --git a/docs/src/contents/tiles.pug b/docs/src/contents/tiles.pug
index e1e7379..cd8b994 100644
--- a/docs/src/contents/tiles.pug
+++ b/docs/src/contents/tiles.pug
@@ -1,6 +1,6 @@
 p Tiles are repeatable or embeddable information blocks.
 
-.columns
+.docs-demo.columns
   .column.col-9.col-sm-12
     .tile
       .tile-icon
@@ -58,7 +58,7 @@ p
   | Add the #[code tile-centered] class to the container #[code tile].
   | The #[code tile-icon], #[code tile-content] and #[code tile-action] will be vertically centered.
 
-.columns
+.docs-demo.columns
   .column.col-6.col-md-9.col-xs-12
     .tile.tile-centered
       .tile-icon
diff --git a/docs/src/contents/timelines.pug b/docs/src/contents/timelines.pug
index 1badfdf..c654c9e 100644
--- a/docs/src/contents/timelines.pug
+++ b/docs/src/contents/timelines.pug
@@ -1,6 +1,6 @@
 p Timelines are ordered sequences of activities.
 
-.columns
+.docs-demo.columns
   .column.col-9.col-sm-12
     .timeline
       #timeline-example-1.timeline-item
diff --git a/docs/src/contents/toasts.pug b/docs/src/contents/toasts.pug
index cf4c31a..e35e4dd 100644
--- a/docs/src/contents/toasts.pug
+++ b/docs/src/contents/toasts.pug
@@ -1,6 +1,6 @@
 p Toasts are used to show alert or information to users.
 
-.columns
+.docs-demo.columns
   .column.col-9.col-sm-12
     .toast
       button.btn.btn-clear.float-right
@@ -23,7 +23,7 @@ pre.code(data-lang='HTML')
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       

 
-.columns
+.docs-demo.columns
   .column.col-sm-12
     .toast.toast-success
       button.btn.btn-clear.float-right
diff --git a/docs/src/contents/tooltips.pug b/docs/src/contents/tooltips.pug
index bda259a..08906e6 100644
--- a/docs/src/contents/tooltips.pug
+++ b/docs/src/contents/tooltips.pug
@@ -1,6 +1,6 @@
 p Tooltips provide context information labels that appear on hover and focus.
 
-.columns.text-center
+.docs-demo.columns.text-center
   .column.col-xs-12
     button.btn.btn-primary.tooltip(data-tooltip="Top Tooltip Text") top tooltip
   .column.col-xs-12
diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug
index 28ffc17..876a956 100644
--- a/docs/src/contents/typography.pug
+++ b/docs/src/contents/typography.pug
@@ -3,7 +3,7 @@ p
 
 +docs-subheading('typography-headings', 'Headings')
 
-.columns
+.docs-demo.columns
   .column.col-12
     h1
       | H1 Heading 
@@ -54,7 +54,7 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('typography-semantic-text', 'Semantic text elements')
 
-.columns
+.docs-demo.columns
   .column.col-6.col-xs-12
     abbr(title='Internationalization') I18N
     code.ml-2 abbr
@@ -206,7 +206,7 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('typography-lists', 'Lists')
 
-.columns
+.docs-demo.columns
   .column.col-4.col-xs-12
     ul.list
       li list item 1
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index e17f832..8887d4d 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -151,8 +151,9 @@
     }
   }
 
-  .docs-note {
-    margin: 1.5rem 0;
+  .docs-demo {
+    padding-bottom: 1rem;
+    padding-top: 1rem;
   }
 
   .docs-ad {
@@ -195,10 +196,6 @@
     font-size: $font-size-sm;
   }
 
-  .columns {
-    margin-bottom: 1rem;
-  }
-
   .column {
     padding: $layout-spacing;
   }
diff --git a/docs/utilities.html b/docs/utilities.html
index 5032ec7..b17bec3 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -133,7 +133,7 @@
             #Color utilities
             Color utilities are used for changing colors for text, link and background.
             #Text colors
-            
+            
               
                 primary color
                 secondary color
@@ -152,7 +152,7 @@
 <span class="text-warning">warning color</span>
 <span class="text-error">error color</span>
 
-            
+            
               
                 primary link
                 secondary link
@@ -172,7 +172,7 @@
 <a class="text-error" href="#">error color</a>
 
             #Background colors
-            
+            
               
                 primary bg
                 secondary bg
@@ -194,7 +194,7 @@
           
             #Cursor utilities
             Cursor utilities specify which mouse cursor to display when mouseover.
-            
+            
               
                 c-hand
               
@@ -255,17 +255,17 @@
           
             #Divider
             A Divider is used for separating elements.
-            
+            
               
                 
               
             
-            
+            
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
               
             
-            
+            
               
                 
                   
@@ -322,13 +322,13 @@
               Loading indicator is used for loading or updating.
               You can add the loading class to a container for loading status.
             
-            
+            
               
                 
               
             
             Add the loading-lg class for large size.
-            
+            
               
                 
               
@@ -378,7 +378,7 @@
           
             #Shape utilities
             Shape utilities are used for change element shapes.
-            
+            
               
                 rounded
               
-- 
cgit v1.3.1-23-gd82d


From 5f0bf49ebc55af9eed48f4970499ccf91b9daa62 Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Tue, 5 Jun 2018 22:42:29 +0800
Subject: Update footer template

---
 docs/components.html         |  4 ++++
 docs/elements.html           |  4 ++++
 docs/experimentals.html      |  4 ++++
 docs/getting-started.html    |  4 ++++
 docs/index.html              |  4 ++--
 docs/layout.html             |  4 ++++
 docs/src/_footer.pug         | 39 +++++++++++++++++++--------------------
 docs/src/components.pug      |  4 +++-
 docs/src/elements.pug        |  4 +++-
 docs/src/experimentals.pug   |  4 +++-
 docs/src/getting-started.pug |  2 ++
 docs/src/index.pug           | 20 +-------------------
 docs/src/layout.pug          |  4 +++-
 docs/src/utilities.pug       |  4 +++-
 docs/utilities.html          |  4 ++++
 15 files changed, 63 insertions(+), 46 deletions(-)

(limited to 'docs/elements.html')

diff --git a/docs/components.html b/docs/components.html
index f30a70e..6405fb4 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1611,6 +1611,10 @@
             <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
 <button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>  
           
+          
+            Documents · GitHub · Twitter · PayPal Donate · Version 
+            Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
+          
         
       
     
diff --git a/docs/elements.html b/docs/elements.html
index 0a96949..cbb78f5 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1298,6 +1298,10 @@
 
 <video class="video-responsive" src="...">...</video>
           
+          
+            Documents · GitHub · Twitter · PayPal Donate · Version 
+            Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
+          
         
       
     
diff --git a/docs/experimentals.html b/docs/experimentals.html
index 0225fbd..22c20f2 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -940,6 +940,10 @@
   ...
 </div>
           
+          
+            Documents · GitHub · Twitter · PayPal Donate · Version 
+            Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
+          
         
       
     
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 216684e..f3c7f96 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -421,6 +421,10 @@ gulp.task('prefix', 
             Releases
           
+          
+            Documents · GitHub · Twitter · PayPal Donate · Version 
+            Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
+          
         
       
     
diff --git a/docs/index.html b/docs/index.html
index 7f2c097..fc52de8 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -94,9 +94,9 @@
       
     
     
-      
+      
         Documents · GitHub · Twitter · PayPal Donate · Version 
-        Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.  
+        Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
       
     
     
+                
+                
+              
+              
+                
+                
+              
+            
             Accordions are used to toggle sections of content.
             
               
@@ -482,6 +493,9 @@
           
           
             #Cards
+            
+              
+            
             Cards are flexible content containers.
             
               
diff --git a/docs/dist/docs.css b/docs/dist/docs.css
index 68d17bc..0bbfd6a 100644
--- a/docs/dist/docs.css
+++ b/docs/dist/docs.css
@@ -152,7 +152,8 @@
 .docs-content .docs-ad {
   background: #f8f9fa;
   border-radius: .1rem;
-  display: inline-block;
+  display: block;
+  margin: 2rem 0;
   padding: .4rem;
   position: relative;
 }
@@ -387,7 +388,6 @@
 
 .section-updates .card {
   border: 0;
-  color: #727e96;
   margin-bottom: 1rem;
 }
 
@@ -541,6 +541,7 @@
 @media (min-width: 1366px) {
   .docs-ad.docs-ad-sidebar {
     bottom: 1rem;
+    margin: 0;
     position: fixed;
     right: 1rem;
     width: 7.3rem;
diff --git a/docs/dist/docs.min.css b/docs/dist/docs.min.css
index 47fe08d..27422c7 100644
--- a/docs/dist/docs.min.css
+++ b/docs/dist/docs.min.css
@@ -1 +1 @@
-/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.docs-content .anchor:focus,.docs-content .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{height:auto;width:1em}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-demo{padding-bottom:1rem;padding-top:1rem}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:inline-block;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;color:#727e96;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:1rem}.grid-hero .docs-brand{left:1rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}.docs-content .anchor{display:none}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;position:fixed;right:1rem;width:7.3rem}}
\ No newline at end of file
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.docs-content .anchor:focus,.docs-content .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{height:auto;width:1em}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-demo{padding-bottom:1rem;padding-top:1rem}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:block;margin:2rem 0;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:1rem}.grid-hero .docs-brand{left:1rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}.docs-content .anchor{display:none}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;margin:0;position:fixed;right:1rem;width:7.3rem}}
\ No newline at end of file
diff --git a/docs/elements.html b/docs/elements.html
index cbb78f5..e7856f8 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -131,6 +131,17 @@
         
           
             #Typography
+            
+              
+                
+                
+                
+              
+              
+                
+                
+              
+            
             Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
             #Headings
             
@@ -380,6 +391,9 @@
           
           
             #Buttons
+            
+              
+            
             Buttons include simple button styles for actions in different types and sizes.
             
               
diff --git a/docs/experimentals.html b/docs/experimentals.html
index 22c20f2..f369752 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -139,6 +139,17 @@
           
           
             #Autocomplete
+            
+              
+                
+                
+                
+              
+              
+                
+                
+              
+            
             Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.
             
               
@@ -245,6 +256,9 @@
           
           
             #Calendars
+            
+              
+            
             Calendars are designed for date or date range picker and events display. It is made with flex layout.
             
               
diff --git a/docs/getting-started.html b/docs/getting-started.html
index f3c7f96..e7a99a7 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -137,6 +137,17 @@
           
           
             #Installation
+            
+              
+                
+                
+                
+              
+              
+                
+                
+              
+            
             There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.
             #Install manually
             Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):
@@ -163,6 +174,9 @@
           
           
             #Custom version
+            
+              
+            
             You can customize your version of Spectre.css by editing Sass files in /src directory or removing unneeded components from .scss source files.
             Sass Source Code
             If you are looking for Less version of Spectre.css, please switch to Less branch.
diff --git a/docs/index.html b/docs/index.html
index fc52de8..8615293 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -47,6 +47,21 @@
             
           
         
+        
+          
+            
+              
+                
+                
+                
+              
+              
+                
+                
+              
+            
+          
+        
       
     
     
@@ -94,6 +109,9 @@
       
     
     
+      
+        
+      
       
         Documents · GitHub · Twitter · PayPal Donate · Version 
         Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
diff --git a/docs/layout.html b/docs/layout.html
index e1edf36..7f60315 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -131,6 +131,17 @@
         
           
             #Flexbox grid
+            
+              
+                
+                
+                
+              
+              
+                
+                
+              
+            
             Layout includes flexbox based responsive grid system with 12 columns.
             
               
@@ -327,6 +338,9 @@
           
           
             #Responsive
+            
+              
+            
             Spectre provides a neat responsive layout grid system and responsive visibility utilities.
             
               
diff --git a/docs/src/_ads.pug b/docs/src/_ads.pug
deleted file mode 100644
index c7e1c91..0000000
--- a/docs/src/_ads.pug
+++ /dev/null
@@ -1,17 +0,0 @@
-block ad-adsense
-  .docs-ad
-    .hide-md
-      script(async='', src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')
-      // GitHub-lg
-      ins.adsbygoogle(style='display:inline-block;width:728px;height:90px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9894180784')
-      script.
-        (adsbygoogle = window.adsbygoogle || []).push({});
-    .show-md
-      // GitHub-sm
-      ins.adsbygoogle(style='display:inline-block;width:300px;height:250px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9278881734')
-      script.
-        (adsbygoogle = window.adsbygoogle || []).push({});
-
-block ad-carbons
-  .docs-ad.docs-ad-sidebar
-    script#_carbonads_js(async='', type='text/javascript', src='//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=picturepan2githubio')
\ No newline at end of file
diff --git a/docs/src/components.pug b/docs/src/components.pug
index 377ae12..9f0ee6a 100644
--- a/docs/src/components.pug
+++ b/docs/src/components.pug
@@ -8,6 +8,7 @@ block variables
 block docs-content
   //- Accordions
   +docs-heading('accordions', 'Accordions')
+    include contents/_ad-g.pug
     include contents/accordions.pug
     
   //- Avatars
@@ -28,6 +29,7 @@ block docs-content
 
   //- Cards
   +docs-heading('cards', 'Cards')
+    include contents/_ad-c.pug
     include contents/cards.pug
 
   //- Chips
diff --git a/docs/src/contents/_ad-c.pug b/docs/src/contents/_ad-c.pug
new file mode 100644
index 0000000..f331444
--- /dev/null
+++ b/docs/src/contents/_ad-c.pug
@@ -0,0 +1,3 @@
+block ad-carbons
+  .docs-ad.docs-ad-sidebar.text-center
+    script#_carbonads_js(async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio")
\ No newline at end of file
diff --git a/docs/src/contents/_ad-g.pug b/docs/src/contents/_ad-g.pug
new file mode 100644
index 0000000..675430b
--- /dev/null
+++ b/docs/src/contents/_ad-g.pug
@@ -0,0 +1,13 @@
+block ad-adsense
+  .docs-ad
+    .hide-md.text-center
+      script(async='', src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')
+      // GitHub-lg
+      ins.adsbygoogle.mx-auto(style='display:inline-block;width:728px;height:90px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9894180784')
+      script.
+        (adsbygoogle = window.adsbygoogle || []).push({});
+    .show-md.text-center
+      // GitHub-sm
+      ins.adsbygoogle(style='display:inline-block;width:300px;height:250px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9278881734')
+      script.
+        (adsbygoogle = window.adsbygoogle || []).push({});
\ No newline at end of file
diff --git a/docs/src/elements.pug b/docs/src/elements.pug
index 15b78e4..c80dba2 100644
--- a/docs/src/elements.pug
+++ b/docs/src/elements.pug
@@ -8,6 +8,7 @@ block variables
 block docs-content
   //- Typography
   +docs-heading('typography', 'Typography')
+    include contents/_ad-g.pug
     include contents/typography.pug
     
   //- Tables
@@ -16,6 +17,7 @@ block docs-content
 
   //- Buttons
   +docs-heading('buttons', 'Buttons')
+    include contents/_ad-c.pug
     include contents/buttons.pug
 
   //- Forms
diff --git a/docs/src/experimentals.pug b/docs/src/experimentals.pug
index ed253fc..c21a2a4 100644
--- a/docs/src/experimentals.pug
+++ b/docs/src/experimentals.pug
@@ -12,10 +12,12 @@ block docs-content
   
   //- Autocomplete
   +docs-heading('autocomplete', 'Autocomplete')
+    include contents/_ad-g.pug
     include contents/autocomplete.pug
     
   //- Calendars
   +docs-heading('calendars', 'Calendars')
+    include contents/_ad-c.pug
     include contents/calendars.pug
 
   //- Carousels
diff --git a/docs/src/getting-started.pug b/docs/src/getting-started.pug
index 7a7155b..3b91823 100644
--- a/docs/src/getting-started.pug
+++ b/docs/src/getting-started.pug
@@ -12,10 +12,12 @@ block docs-content
     
   //- Installation
   +docs-heading('installation', 'Installation')
+    include contents/_ad-g.pug
     include contents/installation.pug
 
   //- Custom
   +docs-heading('custom', 'Custom version')
+    include contents/_ad-c.pug
     include contents/custom.pug
 
   //- Accessibility
diff --git a/docs/src/index.pug b/docs/src/index.pug
index 847c4fb..75b28ba 100644
--- a/docs/src/index.pug
+++ b/docs/src/index.pug
@@ -41,6 +41,10 @@ block content
               span.card-title Modern
             .card-body
               | Elegantly designed and developed elements and components
+      .columns
+        .column.col-12
+          include contents/_ad-g.pug
+
   .section.section-features.bg-primary.text-light.text-center
     .container.grid-lg
       h2 Introduction
@@ -81,4 +85,5 @@ block content
             .card-footer
               a.btn.btn-primary(href='getting-started.html') Explore
   footer.section.section-footer
+    include contents/_ad-c.pug
     include _footer.pug
\ No newline at end of file
diff --git a/docs/src/layout.pug b/docs/src/layout.pug
index b2bc502..5aa8bc5 100644
--- a/docs/src/layout.pug
+++ b/docs/src/layout.pug
@@ -8,10 +8,12 @@ block variables
 block docs-content
   //- Flexbox grid
   +docs-heading('grid', 'Flexbox grid')
+    include contents/_ad-g.pug
     include contents/grid.pug
     
   //- Responsive
   +docs-heading('responsive', 'Responsive')
+    include contents/_ad-c.pug
     include contents/responsive.pug
 
   //- Navbar
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index 8887d4d..ae9c28b 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -159,7 +159,8 @@
   .docs-ad {
     background: $bg-color;
     border-radius: $border-radius;
-    display: inline-block;
+    display: block;
+    margin: 2rem 0;
     padding: $layout-spacing;
     position: relative;
 
@@ -397,7 +398,6 @@
 
   .card {
     border: 0;
-    color: lighten($body-font-color, 15%);
     margin-bottom: 1rem;
   }
 }
@@ -587,6 +587,7 @@
   .docs-ad {
     &.docs-ad-sidebar {
       bottom: 1rem;
+      margin: 0;
       position: fixed;
       right: 1rem;
       width: 7.3rem;
diff --git a/docs/src/utilities.pug b/docs/src/utilities.pug
index 0443ece..4263420 100644
--- a/docs/src/utilities.pug
+++ b/docs/src/utilities.pug
@@ -8,6 +8,7 @@ block variables
 block docs-content
   //- Colors
   +docs-heading('colors', 'Color utilities')
+    include contents/_ad-g.pug
     include contents/colors.pug
     
   //- Cursor
@@ -16,6 +17,7 @@ block docs-content
 
   //- Display
   +docs-heading('display', 'Display utilities')
+    include contents/_ad-c.pug
     include contents/display.pug
 
   //- Divider
diff --git a/docs/utilities.html b/docs/utilities.html
index 1f4d775..08eb91a 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -131,6 +131,17 @@
         
           
             #Color utilities
+            
+              
+                
+                
+                
+              
+              
+                
+                
+              
+            
             Color utilities are used for changing colors for text, link and background.
             #Text colors
             
@@ -229,6 +240,9 @@
           
           
             #Display utilities
+            
+              
+            
             Display utilities are used for display and hidden things.
             <!-- display: block; -->
 <div class="d-block"></div>
-- 
cgit v1.3.1-23-gd82d


From e7d4b2bb3ada5030f0271c315870749dd889347d Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Sat, 9 Jun 2018 14:31:45 +0800
Subject: Add Icons Pug template

---
 docs/elements.html          | 186 +++++++++++++++++++++++++++++++++++++++++
 docs/src/contents/icons.pug | 197 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 383 insertions(+)

(limited to 'docs/elements.html')

diff --git a/docs/elements.html b/docs/elements.html
index e7856f8..a9e4f8f 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1212,6 +1212,192 @@
           

           
             #Icons
+            
+              Icons are single-element, responsive and pure CSS icons.
+              You can include spectre-icons.css located in the dist folder to your web <head> to have these CSS icons.
+            
+            #Navigation icons
+            
+              
+                
+                icon-arrow-up
+              
+              
+                
+                icon-arrow-right
+              
+              
+                
+                icon-arrow-down
+              
+              
+                
+                icon-arrow-left
+              
+              
+                
+                icon-upward
+              
+              
+                
+                icon-forward
+              
+              
+                
+                icon-downward
+              
+              
+                
+                icon-back
+              
+              
+                
+                icon-caret
+              
+              
+                
+                icon-menu
+              
+              
+                
+                icon-apps
+              
+              
+                
+                icon-more-horiz
+              
+              
+                
+                icon-more-vert
+              
+            
+            #Action icons
+            
+              
+                
+                icon-resize-horiz
+              
+              
+                
+                icon-resize-vert
+              
+              
+                
+                icon-plus
+              
+              
+                
+                icon-minus
+              
+              
+                
+                icon-cross
+              
+              
+                
+                icon-check
+              
+              
+                
+                icon-stop
+              
+              
+                
+                icon-shutdown
+              
+              
+                
+                icon-refresh
+              
+              
+                
+                icon-search
+              
+              
+                
+                icon-flag
+              
+              
+                
+                icon-bookmark
+              
+              
+                
+                icon-edit
+              
+              
+                
+                icon-delete
+              
+              
+                
+                icon-share
+              
+              
+                
+                icon-download
+              
+              
+                
+                icon-upload
+              
+            
+            #Object icons
+            
+              
+                
+                icon-mail
+              
+              
+                
+                icon-people
+              
+              
+                
+                icon-message
+              
+              
+                
+                icon-photo
+              
+              
+                
+                icon-time
+              
+              
+                
+                icon-location
+              
+              
+                
+                icon-link
+              
+              
+                
+                icon-emoji
+              
+            
+            <i class="icon icon-menu"></i>
+
+            #Icon sizes
+            Use icon-2x, icon-3x and icon-4x classes to increase icon sizes.
+              You can set font-size to have different icon sizes.
+            
+            
+              
+                
+                icon-2x (32px)
+              
+              
+                
+                icon-3x (48px)
+              
+              
+                
+                icon-4x (64px)
+              
+            
+            <i class="icon icon-2x icon-mail"></i>
           
           
             #Labels
diff --git a/docs/src/contents/icons.pug b/docs/src/contents/icons.pug
index e69de29..b67f1a5 100644
--- a/docs/src/contents/icons.pug
+++ b/docs/src/contents/icons.pug
@@ -0,0 +1,197 @@
+p
+  | Icons are single-element, responsive and pure CSS icons.
+  | You can include #[code spectre-icons.css] located in the #[code dist] folder to your web #{''} to have these CSS icons.
+
++docs-subheading('icons-navigation', 'Navigation icons')
+
+.columns
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-arrow-up
+    p icon-arrow-up
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-arrow-right
+    p icon-arrow-right
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-arrow-down
+    p icon-arrow-down
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-arrow-left
+    p icon-arrow-left
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-upward
+    p icon-upward
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-forward
+    p icon-forward
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-downward
+    p icon-downward
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-back
+    p icon-back
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-caret
+    p icon-caret
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-menu
+    p icon-menu
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-apps
+    p icon-apps
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-more-horiz
+    p icon-more-horiz
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-more-vert
+    p icon-more-vert
+
++docs-subheading('icons-action', 'Action icons')
+
+.columns
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-resize-horiz
+    p icon-resize-horiz
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-resize-vert
+    p icon-resize-vert
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-plus
+    p icon-plus
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-minus
+    p icon-minus
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-cross
+    p icon-cross
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-check
+    p icon-check
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-stop
+    p icon-stop
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-shutdown
+    p icon-shutdown
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-refresh
+    p icon-refresh
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-search
+    p icon-search
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-flag
+    p icon-flag
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-bookmark
+    p icon-bookmark
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-edit
+    p icon-edit
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-delete
+    p icon-delete
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-share
+    p icon-share
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-download
+    p icon-download
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-upload
+    p icon-upload
+
++docs-subheading('icons-object', 'Object icons')
+
+.columns
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-mail
+    p icon-mail
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-people
+    p icon-people
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-message
+    p icon-message
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-photo
+    p icon-photo
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-time
+    p icon-time
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-location
+    p icon-location
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-link
+    p icon-link
+  .column.col-3.col-md-6
+    button.btn.btn-primary.btn-action.btn-lg
+      i.icon.icon-emoji
+    p icon-emoji
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+
++docs-subheading('icons-sizes', 'Icon sizes')
+
+p
+  | Use #[code icon-2x], #[code icon-3x] and #[code icon-4x] classes to increase icon sizes.
+  | You can set #[code font-size] to have different icon sizes.
+
+.columns
+  .column.col-3.col-md-6
+    p
+      i.icon.icon-2x.icon-mail
+    p icon-2x (32px)
+  .column.col-3.col-md-6
+    p
+      i.icon.icon-3x.icon-mail
+    p icon-3x (48px)
+  .column.col-3.col-md-6
+    p
+      i.icon.icon-4x.icon-mail
+    p icon-4x (64px)
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
\ No newline at end of file
-- 
cgit v1.3.1-23-gd82d


From 0c2eedf551cb7d3c2ad6c3a5e7f35ef6a1ac655c Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Sun, 10 Jun 2018 08:13:26 +0800
Subject: Update Docs and add Calendar code

---
 dist/spectre-exp.css               |  20 ++-
 dist/spectre-exp.min.css           |   2 +-
 docs/components.html               |  39 +++---
 docs/dist/spectre-exp.css          |  20 ++-
 docs/dist/spectre-exp.min.css      |   2 +-
 docs/dist/spectre-rtl.css          |  20 ++-
 docs/dist/spectre-rtl.min.css      |   2 +-
 docs/elements.html                 |  12 +-
 docs/experimentals.html            | 248 +++++++++++++++++++++++++-----------
 docs/layout.html                   |  16 ++-
 docs/src/contents/autocomplete.pug |   6 +-
 docs/src/contents/avatars.pug      |  27 ++--
 docs/src/contents/bars.pug         |   3 +-
 docs/src/contents/calendars.pug    | 251 ++++++++++++++++++++++++++-----------
 docs/src/contents/cards.pug        |   8 +-
 docs/src/contents/grid.pug         |  13 +-
 docs/src/contents/labels.pug       |  13 +-
 src/_calendars.scss                |  33 +++--
 18 files changed, 500 insertions(+), 235 deletions(-)

(limited to 'docs/elements.html')

diff --git a/dist/spectre-exp.css b/dist/spectre-exp.css
index 4c7ebf6..3e58aa6 100644
--- a/dist/spectre-exp.css
+++ b/dist/spectre-exp.css
@@ -158,15 +158,22 @@
   transform: translate(50%, -50%);
 }
 
-.calendar .calendar-date.disabled .date-item,
-.calendar .calendar-date.disabled .calendar-event,
 .calendar .calendar-date .date-item:disabled,
-.calendar .calendar-date .calendar-event:disabled {
+.calendar .calendar-date .date-item.disabled,
+.calendar .calendar-date .calendar-event:disabled,
+.calendar .calendar-date .calendar-event.disabled {
   cursor: default;
   opacity: .25;
   pointer-events: none;
 }
 
+.calendar .calendar-date.prev-month .date-item,
+.calendar .calendar-date.prev-month .calendar-event,
+.calendar .calendar-date.next-month .date-item,
+.calendar .calendar-date.next-month .calendar-event {
+  opacity: .25;
+}
+
 .calendar .calendar-range {
   position: relative;
 }
@@ -190,6 +197,13 @@
   right: 50%;
 }
 
+.calendar .calendar-range.range-start .date-item,
+.calendar .calendar-range.range-end .date-item {
+  background: #4b48d6;
+  border-color: #3634d2;
+  color: #fff;
+}
+
 .calendar .calendar-range .date-item {
   color: #5755d9;
 }
diff --git a/dist/spectre-exp.min.css b/dist/spectre-exp.min.css
index 526f3a2..36c44cc 100644
--- a/dist/spectre-exp.min.css
+++ b/dist/spectre-exp.min.css
@@ -1 +1 @@
-/*! Spectre.css Experimentals v0.5.2 | MIT License | github.com/picturepan2/spectre */.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.form-autocomplete.autocomplete-oneline .form-autocomplete-input{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.form-autocomplete.autocomplete-oneline .chip{-ms-flex:1 0 auto;flex:1 0 auto}.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.7rem;text-align:center}.calendar .calendar-body{color:#667189}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#667189;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{border-radius:.1rem;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%;z-index:1}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:100}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:100}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:cover;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;position:relative;width:100%}.off-canvas .off-canvas-toggle{display:block;left:.4rem;position:absolute;top:.4rem;transition:none;z-index:1}.off-canvas .off-canvas-sidebar{background:#f8f9fa;bottom:0;left:0;min-width:10rem;overflow-y:auto;position:fixed;top:0;transform:translateX(-100%);transition:transform .25s ease;z-index:200}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.4rem .4rem .4rem 4rem}.off-canvas .off-canvas-overlay{background:rgba(69,77,93,.1);border-color:transparent;border-radius:0;bottom:0;display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%}.off-canvas .off-canvas-sidebar.active,.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar.active~.off-canvas-overlay,.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{display:block;z-index:100}@media (min-width:960px){.off-canvas.off-canvas-sidebar-show .off-canvas-toggle{display:none}.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas.off-canvas-sidebar-show .off-canvas-overlay{display:none!important}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.75);top:0;transform:translateZ(50px) scale(.95);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;outline:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:focus~.parallax-content,.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:focus~.parallax-content::before,.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:focus~.parallax-content .parallax-front,.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;outline:0;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:focus~.parallax-content,.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:focus~.parallax-content::before,.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:focus~.parallax-content .parallax-front,.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;outline:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:focus~.parallax-content,.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:focus~.parallax-content::before,.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;outline:0;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:focus~.parallax-content,.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:focus~.parallax-content::before,.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5755d9 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider.tooltip:not([data-tooltip])::after{content:attr(value)}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file
+/*! Spectre.css Experimentals v0.5.2 | MIT License | github.com/picturepan2/spectre */.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.form-autocomplete.autocomplete-oneline .form-autocomplete-input{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.form-autocomplete.autocomplete-oneline .chip{-ms-flex:1 0 auto;flex:1 0 auto}.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.7rem;text-align:center}.calendar .calendar-body{color:#667189}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#667189;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event.disabled,.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item.disabled,.calendar .calendar-date .date-item:disabled{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-date.next-month .calendar-event,.calendar .calendar-date.next-month .date-item,.calendar .calendar-date.prev-month .calendar-event,.calendar .calendar-date.prev-month .date-item{opacity:.25}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range.range-end .date-item,.calendar .calendar-range.range-start .date-item{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{border-radius:.1rem;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%;z-index:1}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:100}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:100}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:cover;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;position:relative;width:100%}.off-canvas .off-canvas-toggle{display:block;left:.4rem;position:absolute;top:.4rem;transition:none;z-index:1}.off-canvas .off-canvas-sidebar{background:#f8f9fa;bottom:0;left:0;min-width:10rem;overflow-y:auto;position:fixed;top:0;transform:translateX(-100%);transition:transform .25s ease;z-index:200}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.4rem .4rem .4rem 4rem}.off-canvas .off-canvas-overlay{background:rgba(69,77,93,.1);border-color:transparent;border-radius:0;bottom:0;display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%}.off-canvas .off-canvas-sidebar.active,.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar.active~.off-canvas-overlay,.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{display:block;z-index:100}@media (min-width:960px){.off-canvas.off-canvas-sidebar-show .off-canvas-toggle{display:none}.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas.off-canvas-sidebar-show .off-canvas-overlay{display:none!important}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.75);top:0;transform:translateZ(50px) scale(.95);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;outline:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:focus~.parallax-content,.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:focus~.parallax-content::before,.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:focus~.parallax-content .parallax-front,.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;outline:0;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:focus~.parallax-content,.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:focus~.parallax-content::before,.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:focus~.parallax-content .parallax-front,.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;outline:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:focus~.parallax-content,.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:focus~.parallax-content::before,.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;outline:0;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:focus~.parallax-content,.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:focus~.parallax-content::before,.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5755d9 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider.tooltip:not([data-tooltip])::after{content:attr(value)}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file
diff --git a/docs/components.html b/docs/components.html
index b15b040..04b1e04 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -275,6 +275,18 @@
               Add the avatar class and avatar size class to <div>  element.
               The data-initial attribute is the name appear inside the avatar.
             
+            <!-- Basic avatar examples -->
+<figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" alt="...">
+</figure>
+
+<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
+
+<!-- Show initals when avatar image is unavailable or not fully loaded -->
+<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
+  <img src="img/avatar-1.png" alt="...">
+</figure>
+
             
               
                 
@@ -284,22 +296,10 @@
                 
               
             
-            <!-- Basic avatar examples -->
-<figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" alt="...">
-</figure>
-
-<figure class="avatar avatar-xl">
+            <figure class="avatar avatar-xl">
   <img src="img/avatar-1.png" alt="...">
   <img src="img/avatar-5.png" class="avatar-icon" alt="...">
 </figure>
-
-<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
-
-<!-- Show initals when avatar image is unavailable or not fully loaded -->
-<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
-  <img src="img/avatar-1.png" alt="...">
-</figure>
   
             
               
@@ -399,7 +399,8 @@
             There is the bar-sm class for thinner Bars.
               Also, you could use Tooltips for any bar-item.
             
-            <div class="bar bar-sm">
+            <!-- normal bars -->
+<div class="bar bar-sm">
   <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
 
@@ -434,7 +435,7 @@
               You need to set the bar-item width manually to have the slider point.
             
             If there are two bar-item divs in one bar-slider, you will have a range slider.
-            <!-- slider -->
+            <!-- normal slider -->
 <div class="bar bar-slider">
   <div class="bar-item" role="progressbar" style="width:25%;">
     <button class="bar-slider-btn btn" role="slider"></button>
@@ -575,14 +576,14 @@
     <img src="img/osx-el-capitan.jpg" class="img-responsive">
   </div>
   <div class="card-header">
-    <div class="card-title h5">Microsoft</div>
-    <div class="card-subtitle text-gray">Software and hardware</div>
+    <div class="card-title h5">...</div>
+    <div class="card-subtitle text-gray">...</div>
   </div>
   <div class="card-body">
-    Empower every person and every organization on the planet to achieve more.
+    ...
   </div>
   <div class="card-footer">
-    <button class="btn btn-primary">Do</button>
+    <button class="btn btn-primary">...</button>
   </div>
 </div>
           

diff --git a/docs/dist/spectre-exp.css b/docs/dist/spectre-exp.css
index 4c7ebf6..3e58aa6 100644
--- a/docs/dist/spectre-exp.css
+++ b/docs/dist/spectre-exp.css
@@ -158,15 +158,22 @@
   transform: translate(50%, -50%);
 }
 
-.calendar .calendar-date.disabled .date-item,
-.calendar .calendar-date.disabled .calendar-event,
 .calendar .calendar-date .date-item:disabled,
-.calendar .calendar-date .calendar-event:disabled {
+.calendar .calendar-date .date-item.disabled,
+.calendar .calendar-date .calendar-event:disabled,
+.calendar .calendar-date .calendar-event.disabled {
   cursor: default;
   opacity: .25;
   pointer-events: none;
 }
 
+.calendar .calendar-date.prev-month .date-item,
+.calendar .calendar-date.prev-month .calendar-event,
+.calendar .calendar-date.next-month .date-item,
+.calendar .calendar-date.next-month .calendar-event {
+  opacity: .25;
+}
+
 .calendar .calendar-range {
   position: relative;
 }
@@ -190,6 +197,13 @@
   right: 50%;
 }
 
+.calendar .calendar-range.range-start .date-item,
+.calendar .calendar-range.range-end .date-item {
+  background: #4b48d6;
+  border-color: #3634d2;
+  color: #fff;
+}
+
 .calendar .calendar-range .date-item {
   color: #5755d9;
 }
diff --git a/docs/dist/spectre-exp.min.css b/docs/dist/spectre-exp.min.css
index 526f3a2..36c44cc 100644
--- a/docs/dist/spectre-exp.min.css
+++ b/docs/dist/spectre-exp.min.css
@@ -1 +1 @@
-/*! Spectre.css Experimentals v0.5.2 | MIT License | github.com/picturepan2/spectre */.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.form-autocomplete.autocomplete-oneline .form-autocomplete-input{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.form-autocomplete.autocomplete-oneline .chip{-ms-flex:1 0 auto;flex:1 0 auto}.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.7rem;text-align:center}.calendar .calendar-body{color:#667189}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#667189;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{border-radius:.1rem;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%;z-index:1}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:100}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:100}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:cover;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;position:relative;width:100%}.off-canvas .off-canvas-toggle{display:block;left:.4rem;position:absolute;top:.4rem;transition:none;z-index:1}.off-canvas .off-canvas-sidebar{background:#f8f9fa;bottom:0;left:0;min-width:10rem;overflow-y:auto;position:fixed;top:0;transform:translateX(-100%);transition:transform .25s ease;z-index:200}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.4rem .4rem .4rem 4rem}.off-canvas .off-canvas-overlay{background:rgba(69,77,93,.1);border-color:transparent;border-radius:0;bottom:0;display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%}.off-canvas .off-canvas-sidebar.active,.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar.active~.off-canvas-overlay,.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{display:block;z-index:100}@media (min-width:960px){.off-canvas.off-canvas-sidebar-show .off-canvas-toggle{display:none}.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas.off-canvas-sidebar-show .off-canvas-overlay{display:none!important}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.75);top:0;transform:translateZ(50px) scale(.95);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;outline:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:focus~.parallax-content,.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:focus~.parallax-content::before,.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:focus~.parallax-content .parallax-front,.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;outline:0;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:focus~.parallax-content,.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:focus~.parallax-content::before,.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:focus~.parallax-content .parallax-front,.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;outline:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:focus~.parallax-content,.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:focus~.parallax-content::before,.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;outline:0;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:focus~.parallax-content,.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:focus~.parallax-content::before,.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5755d9 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider.tooltip:not([data-tooltip])::after{content:attr(value)}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file
+/*! Spectre.css Experimentals v0.5.2 | MIT License | github.com/picturepan2/spectre */.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.form-autocomplete.autocomplete-oneline .form-autocomplete-input{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.form-autocomplete.autocomplete-oneline .chip{-ms-flex:1 0 auto;flex:1 0 auto}.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.7rem;text-align:center}.calendar .calendar-body{color:#667189}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#667189;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event.disabled,.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item.disabled,.calendar .calendar-date .date-item:disabled{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-date.next-month .calendar-event,.calendar .calendar-date.next-month .date-item,.calendar .calendar-date.prev-month .calendar-event,.calendar .calendar-date.prev-month .date-item{opacity:.25}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range.range-end .date-item,.calendar .calendar-range.range-start .date-item{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{border-radius:.1rem;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%;z-index:1}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:100}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:100}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:cover;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;position:relative;width:100%}.off-canvas .off-canvas-toggle{display:block;left:.4rem;position:absolute;top:.4rem;transition:none;z-index:1}.off-canvas .off-canvas-sidebar{background:#f8f9fa;bottom:0;left:0;min-width:10rem;overflow-y:auto;position:fixed;top:0;transform:translateX(-100%);transition:transform .25s ease;z-index:200}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.4rem .4rem .4rem 4rem}.off-canvas .off-canvas-overlay{background:rgba(69,77,93,.1);border-color:transparent;border-radius:0;bottom:0;display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%}.off-canvas .off-canvas-sidebar.active,.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar.active~.off-canvas-overlay,.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{display:block;z-index:100}@media (min-width:960px){.off-canvas.off-canvas-sidebar-show .off-canvas-toggle{display:none}.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas.off-canvas-sidebar-show .off-canvas-overlay{display:none!important}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.75);top:0;transform:translateZ(50px) scale(.95);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;outline:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:focus~.parallax-content,.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:focus~.parallax-content::before,.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:focus~.parallax-content .parallax-front,.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;outline:0;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:focus~.parallax-content,.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:focus~.parallax-content::before,.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:focus~.parallax-content .parallax-front,.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;outline:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:focus~.parallax-content,.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:focus~.parallax-content::before,.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;outline:0;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:focus~.parallax-content,.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:focus~.parallax-content::before,.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5755d9 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider.tooltip:not([data-tooltip])::after{content:attr(value)}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file
diff --git a/docs/dist/spectre-rtl.css b/docs/dist/spectre-rtl.css
index 17ac9bb..1fdbd07 100644
--- a/docs/dist/spectre-rtl.css
+++ b/docs/dist/spectre-rtl.css
@@ -4395,15 +4395,22 @@ a.text-error:visited {
   transform: translate(50%, -50%);
 }
 
-.calendar .calendar-date.disabled .date-item,
-.calendar .calendar-date.disabled .calendar-event,
 .calendar .calendar-date .date-item:disabled,
-.calendar .calendar-date .calendar-event:disabled {
+.calendar .calendar-date .date-item.disabled,
+.calendar .calendar-date .calendar-event:disabled,
+.calendar .calendar-date .calendar-event.disabled {
   cursor: default;
   opacity: .25;
   pointer-events: none;
 }
 
+.calendar .calendar-date.prev-month .date-item,
+.calendar .calendar-date.prev-month .calendar-event,
+.calendar .calendar-date.next-month .date-item,
+.calendar .calendar-date.next-month .calendar-event {
+  opacity: .25;
+}
+
 .calendar .calendar-range {
   position: relative;
 }
@@ -4427,6 +4434,13 @@ a.text-error:visited {
   right: 50%;
 }
 
+.calendar .calendar-range.range-start .date-item,
+.calendar .calendar-range.range-end .date-item {
+  background: #4b48d6;
+  border-color: #3634d2;
+  color: #fff;
+}
+
 .calendar .calendar-range .date-item {
   color: #5755d9;
 }
diff --git a/docs/dist/spectre-rtl.min.css b/docs/dist/spectre-rtl.min.css
index 5a36451..5d325b0 100644
--- a/docs/dist/spectre-rtl.min.css
+++ b/docs/dist/spectre-rtl.min.css
@@ -1 +1 @@
-/*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre *//*! Spectre.css v0.5.2 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.2;padding:.1rem .15rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;padding:.05rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:right;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table.table-hover tbody tr:hover{background:#f0f1f4}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:0;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1rem;padding:.4rem 0}.form-label.label-sm{font-size:.7rem;padding:.2rem 0}.form-label.label-lg{font-size:.9rem;padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.8rem;height:1.8rem;line-height:1rem;max-width:100%;outline:0;padding:.35rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#acb3c2;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.15rem 1.1rem .15rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.45rem 1.4rem .45rem .6rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .35rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.5rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.5rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;margin:.2rem 0;min-height:1.2rem;padding:.2rem .4rem .2rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:12px;left:50%;margin-left:-4px;margin-top:-8px;position:absolute;top:50%;transform:rotate(45deg);width:8px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.35rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.15rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.45rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.label{background:#f0f1f4;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1.2;padding:.1rem .15rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.2;padding:.1rem .15rem}.code{border-radius:.1rem;color:#50596c;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#667189;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;font-weight:500;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#667189;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#667189}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.4rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#667189;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:100%;padding:.2rem .4rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#667189;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#454d5d;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#667189;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#50596c;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#667189;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:300}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.9);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:4px -2px 4px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}a.text-gray:visited{color:#bbc1cd}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9;color:#fff}.bg-secondary{background:#f1f1fc}.bg-dark{background:#454d5d;color:#fff}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643;color:#fff}.bg-warning{background:#ffb700;color:#fff}.bg-error{background:#e85600;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}/*! Spectre.css Icons v0.5.2 | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;content:"";height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;content:"";height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;content:"";height:.1rem;transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;content:"";height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;content:"";height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;content:"";height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;content:"";height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;content:"";height:.5em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;content:"";height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;content:"";height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;content:"";height:.5em;transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;content:"";height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;content:"";height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;content:"";height:.3em;left:10%;top:100%;transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;content:"";height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;content:"";height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;content:"";height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;content:"";height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.15em,.17em -.15em;content:"";height:.1em;width:.1em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;content:"";height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em}/*! Spectre.css Experimentals v0.5.2 | MIT License | github.com/picturepan2/spectre */.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.form-autocomplete.autocomplete-oneline .form-autocomplete-input{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.form-autocomplete.autocomplete-oneline .chip{-ms-flex:1 0 auto;flex:1 0 auto}.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.7rem;text-align:center}.calendar .calendar-body{color:#667189}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#667189;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{border-radius:.1rem;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%;z-index:1}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:100}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:100}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:cover;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;position:relative;width:100%}.off-canvas .off-canvas-toggle{display:block;position:absolute;right:.4rem;top:.4rem;transition:none;z-index:1}.off-canvas .off-canvas-sidebar{background:#f8f9fa;bottom:0;min-width:10rem;overflow-y:auto;position:fixed;right:0;top:0;transform:translateX(100%);transition:transform .25s ease;z-index:200}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.4rem .4rem .4rem 4rem}.off-canvas .off-canvas-overlay{background:rgba(69,77,93,.1);border-color:transparent;border-radius:0;bottom:0;display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%}.off-canvas .off-canvas-sidebar.active,.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar.active~.off-canvas-overlay,.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{display:block;z-index:100}@media (min-width:960px){.off-canvas.off-canvas-sidebar-show .off-canvas-toggle{display:none}.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas.off-canvas-sidebar-show .off-canvas-overlay{display:none!important}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.75);top:0;transform:translateZ(50px) scale(.95);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;outline:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:focus~.parallax-content,.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:focus~.parallax-content::before,.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:focus~.parallax-content .parallax-front,.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;outline:0;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:focus~.parallax-content,.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:focus~.parallax-content::before,.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:focus~.parallax-content .parallax-front,.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;outline:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:focus~.parallax-content,.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:focus~.parallax-content::before,.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;outline:0;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:focus~.parallax-content,.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:focus~.parallax-content::before,.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5755d9 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider.tooltip:not([data-tooltip])::after{content:attr(value)}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file
+/*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre *//*! Spectre.css v0.5.2 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.2;padding:.1rem .15rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;padding:.05rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:right;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table.table-hover tbody tr:hover{background:#f0f1f4}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:0;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1rem;padding:.4rem 0}.form-label.label-sm{font-size:.7rem;padding:.2rem 0}.form-label.label-lg{font-size:.9rem;padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.8rem;height:1.8rem;line-height:1rem;max-width:100%;outline:0;padding:.35rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#acb3c2;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.15rem 1.1rem .15rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.45rem 1.4rem .45rem .6rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .35rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.5rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.5rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;margin:.2rem 0;min-height:1.2rem;padding:.2rem .4rem .2rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:12px;left:50%;margin-left:-4px;margin-top:-8px;position:absolute;top:50%;transform:rotate(45deg);width:8px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.35rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.15rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.45rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.label{background:#f0f1f4;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1.2;padding:.1rem .15rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.2;padding:.1rem .15rem}.code{border-radius:.1rem;color:#50596c;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#667189;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;font-weight:500;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#667189;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#667189}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.4rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#667189;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:100%;padding:.2rem .4rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#667189;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#454d5d;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#667189;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#50596c;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#667189;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:300}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.9);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:4px -2px 4px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}a.text-gray:visited{color:#bbc1cd}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9;color:#fff}.bg-secondary{background:#f1f1fc}.bg-dark{background:#454d5d;color:#fff}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643;color:#fff}.bg-warning{background:#ffb700;color:#fff}.bg-error{background:#e85600;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}/*! Spectre.css Icons v0.5.2 | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;content:"";height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;content:"";height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;content:"";height:.1rem;transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;content:"";height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;content:"";height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;content:"";height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;content:"";height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;content:"";height:.5em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;content:"";height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;content:"";height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;content:"";height:.5em;transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;content:"";height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;content:"";height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;content:"";height:.3em;left:10%;top:100%;transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;content:"";height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;content:"";height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;content:"";height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;content:"";height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.15em,.17em -.15em;content:"";height:.1em;width:.1em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;content:"";height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em}/*! Spectre.css Experimentals v0.5.2 | MIT License | github.com/picturepan2/spectre */.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.form-autocomplete.autocomplete-oneline .form-autocomplete-input{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.form-autocomplete.autocomplete-oneline .chip{-ms-flex:1 0 auto;flex:1 0 auto}.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.7rem;text-align:center}.calendar .calendar-body{color:#667189}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#667189;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event.disabled,.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item.disabled,.calendar .calendar-date .date-item:disabled{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-date.next-month .calendar-event,.calendar .calendar-date.next-month .date-item,.calendar .calendar-date.prev-month .calendar-event,.calendar .calendar-date.prev-month .date-item{opacity:.25}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range.range-end .date-item,.calendar .calendar-range.range-start .date-item{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{border-radius:.1rem;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%;z-index:1}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:100}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:100}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:cover;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;position:relative;width:100%}.off-canvas .off-canvas-toggle{display:block;position:absolute;right:.4rem;top:.4rem;transition:none;z-index:1}.off-canvas .off-canvas-sidebar{background:#f8f9fa;bottom:0;min-width:10rem;overflow-y:auto;position:fixed;right:0;top:0;transform:translateX(100%);transition:transform .25s ease;z-index:200}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.4rem .4rem .4rem 4rem}.off-canvas .off-canvas-overlay{background:rgba(69,77,93,.1);border-color:transparent;border-radius:0;bottom:0;display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%}.off-canvas .off-canvas-sidebar.active,.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar.active~.off-canvas-overlay,.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{display:block;z-index:100}@media (min-width:960px){.off-canvas.off-canvas-sidebar-show .off-canvas-toggle{display:none}.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas.off-canvas-sidebar-show .off-canvas-overlay{display:none!important}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.75);top:0;transform:translateZ(50px) scale(.95);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;outline:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:focus~.parallax-content,.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:focus~.parallax-content::before,.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:focus~.parallax-content .parallax-front,.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;outline:0;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:focus~.parallax-content,.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:focus~.parallax-content::before,.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:focus~.parallax-content .parallax-front,.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;outline:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:focus~.parallax-content,.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:focus~.parallax-content::before,.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;outline:0;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:focus~.parallax-content,.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:focus~.parallax-content::before,.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5755d9 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider.tooltip:not([data-tooltip])::after{content:attr(value)}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file
diff --git a/docs/elements.html b/docs/elements.html
index a9e4f8f..1823ff9 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1402,21 +1402,21 @@
           
             #Labels
             Labels are formatted text tags for highlighted, informative information.
-            
+            
               default labelprimary labelsecondary labelsuccess labelwarning labelerror label
             
             Add the label class to <span> or <small> elements.
               You can add another class label-primary, label-secondary, label-success, label-warning and label-error for colored labels.
             
+            <!-- normal labels -->
+<span class="label">default label</span>
+<span class="label label-primary">primary label</span>
+
             
               default labelprimary label
             
             Add the label-rounded class to have rounded labels.
-            <!-- normal labels -->
-<span class="label">default label</span>
-<span class="label label-primary">primary label</span>
-
-<!-- rounded labels -->
+            <!-- rounded labels -->
 <span class="label label-rounded label-primary">primary label</span>
           

           
diff --git a/docs/experimentals.html b/docs/experimentals.html
index f369752..25c398a 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -238,15 +238,15 @@
 
   <!-- autocomplete suggestion list -->
   <ul class="menu">
-    <!-- menu list chips -->
+    <!-- menu list items -->
     <li class="menu-item">
       <a href="#">
         <div class="tile tile-centered">
           <div class="tile-icon">
-            <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers">
+            ...
           </div>
           <div class="tile-content">
-            Steve Rogers
+            ...
           </div>
         </div>
       </a>
@@ -279,109 +279,109 @@
                       Sat
                     
                     
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
-                        
+                      
+                        
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
-                        
+                      
+                        
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
                     
@@ -389,6 +389,85 @@
                 
               
             
+            <div class="calendar">
+  <!-- calendar navbar -->
+  <div class="calendar-nav navbar">
+    <button class="btn btn-action btn-link btn-lg">
+      <i class="icon icon-arrow-left"></i>
+    </button>
+    <div class="navbar-primary">March 2017</div>
+    <button class="btn btn-action btn-link btn-lg">
+      <i class="icon icon-arrow-right"></i>
+    </button>
+  </div>
+
+  <div class="calendar-container">
+    <div class="calendar-header">
+      <div class="calendar-date">Sun</div>
+      <div class="calendar-date">Mon</div>
+      <div class="calendar-date">Tue</div>
+      <div class="calendar-date">Wed</div>
+      <div class="calendar-date">Thu</div>
+      <div class="calendar-date">Fri</div>
+      <div class="calendar-date">Sat</div>
+    </div>
+
+    <div class="calendar-body">
+      <!-- calendar previous month -->
+      <div class="calendar-date prev-month">
+        <button class="date-item">26</button>
+      </div>
+      ...
+      <div class="calendar-date prev-month">
+        <button class="date-item">28</button>
+      </div>
+
+      <!-- calendar current month -->
+      <div class="calendar-date">
+        <button class="date-item">1</button>
+      </div>
+      <div class="calendar-date">
+        <button class="date-item">2</button>
+      </div>
+      <div class="calendar-date">
+        <button class="date-item">3</button>
+      </div>
+      <!-- calendar date: today -->
+      <div class="calendar-date">
+        <button class="date-item date-today">4</button>
+      </div>
+      <!-- calendar date: tooltip -->
+      <div class="calendar-date tooltip" data-tooltip="You have appointments">
+        <button class="date-item">5</button>
+      </div>
+      <!-- calendar date: not available -->
+      <div class="calendar-date tooltip" data-tooltip="Not available">
+        <button class="date-item" disabled="">6</button>
+      </div>
+
+      <!-- calendar range -->
+      <div class="calendar-date calendar-range range-start">
+        <button class="date-item">7</button>
+      </div>
+      <div class="calendar-date calendar-range">
+        <button class="date-item">8</button>
+      </div>
+      <div class="calendar-date calendar-range range-end">
+        <button class="date-item">9</button>
+      </div>
+      ...
+      <div class="calendar-date">
+        <button class="date-item">31</button>
+      </div>
+
+      <!-- calendar next month -->
+      <div class="calendar-date next-month">
+        <button class="date-item">1</button>
+      </div>
+    </div>
+  </div>
+</div>
+
             #Calendars sizes
             
               
@@ -409,110 +488,110 @@
                       Sat
                     
                     
-                      
+                      
                         
                       
-                      
+                      
                         
                         Zhonghe Festival
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                         Product launch eventInternational Women's Day
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                         Arbor Day
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
-                        
+                      
+                        
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
-                        
+                      
+                        
                         Spring Equinox
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
-                      
+                      
                         
                       
                       
@@ -524,6 +603,23 @@
                 
               
             
+            <div class="calendar calendar-lg">
+  <!-- calendar navbar structure -->
+
+  <div class="calendar-container">
+    <!-- calendar header structure -->
+
+    <div class="calendar-body">
+      <!-- calendar date with events -->
+      <div class="calendar-date">
+        <button class="date-item active">20</button>
+        <div class="calendar-events">
+          <a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
           
           
             #Carousels
diff --git a/docs/layout.html b/docs/layout.html
index 7f60315..6d661c6 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -307,15 +307,13 @@
             To nest grids, add the new columns and column structure within an existing column.
             
               
-                
-                  col-6
-                  
-                    
-                      col-6
-                    
-                    
-                      col-6
-                    
+                col-6
+                
+                  
+                    col-6
+                  
+                  
+                    col-6
                   
                 
               
diff --git a/docs/src/contents/autocomplete.pug b/docs/src/contents/autocomplete.pug
index 5224c45..ca5eb17 100644
--- a/docs/src/contents/autocomplete.pug
+++ b/docs/src/contents/autocomplete.pug
@@ -102,15 +102,15 @@ pre.code(data-lang='HTML')
 
         
         
-          
+          
           
             
               
                 
-                  
+                  ...
                 
                 
-                  Steve Rogers
+                  ...
                 
               
             
diff --git a/docs/src/contents/avatars.pug b/docs/src/contents/avatars.pug
index 2e9886c..4e345c6 100644
--- a/docs/src/contents/avatars.pug
+++ b/docs/src/contents/avatars.pug
@@ -28,6 +28,21 @@ p
   | Add the #[code avatar] class and avatar size class to #{''}  element.
   | The #[code data-initial] attribute is the name appear inside the avatar.
 
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      
+        
+      
+
+      
+
+      
+      
+        
+      
+
 .docs-demo.columns
   .column.col-6.col-xs-12
     figure.avatar.avatar-xl
@@ -49,22 +64,10 @@ p
 pre.code(data-lang='HTML')
   code
     :highlight(lang="html")
-      
-      
-        
-      
-
       
         
         
       
-
-      
-
-      
-      
-        
-      
         
 .docs-demo.columns
   .column.col-6.col-xs-12
diff --git a/docs/src/contents/bars.pug b/docs/src/contents/bars.pug
index df0d17b..4eee25e 100644
--- a/docs/src/contents/bars.pug
+++ b/docs/src/contents/bars.pug
@@ -28,6 +28,7 @@ p
 pre.code(data-lang='HTML')
   code
     :highlight(lang="html")
+      
       
         
       
@@ -63,7 +64,7 @@ p
 pre.code(data-lang='HTML')
   code
     :highlight(lang="html")
-      
+      
       
         
           
diff --git a/docs/src/contents/calendars.pug b/docs/src/contents/calendars.pug
index 60866dd..d7bf30c 100644
--- a/docs/src/contents/calendars.pug
+++ b/docs/src/contents/calendars.pug
@@ -20,77 +20,159 @@ p
           .calendar-date Fri
           .calendar-date Sat
         .calendar-body
-          .calendar-date.prev-month.disabled
+          .calendar-date.prev-month
             button.date-item 26
-          .calendar-date.prev-month.disabled
+          .calendar-date.prev-month
             button.date-item 27
-          .calendar-date.prev-month.disabled
+          .calendar-date.prev-month
             button.date-item 28
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 1
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 2
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 3
-          .calendar-date.current-month.tooltip(data-tooltip="Today")
+          .calendar-date.tooltip(data-tooltip="Today")
             button.date-item.date-today 4
-          .calendar-date.current-month.tooltip(data-tooltip="Not available")
+          .calendar-date.tooltip(data-tooltip="Not available")
             button.date-item(disabled="") 5
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 6
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 7
-          .calendar-date.current-month.tooltip(data-tooltip="You have appointments")
+          .calendar-date.tooltip(data-tooltip="You have appointments")
             button.date-item.badge 8
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 9
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 10
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 11
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 12
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 13
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 14
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 15
-          .calendar-date.current-month.calendar-range.range-start
-            button.date-item.active 16
-          .calendar-date.current-month.calendar-range
+          .calendar-date.calendar-range.range-start
+            button.date-item 16
+          .calendar-date.calendar-range
             button.date-item 17
-          .calendar-date.current-month.calendar-range
+          .calendar-date.calendar-range
             button.date-item 18
-          .calendar-date.current-month.calendar-range
+          .calendar-date.calendar-range
             button.date-item 19
-          .calendar-date.current-month.calendar-range.range-end
-            button.date-item.active 20
-          .calendar-date.current-month
+          .calendar-date.calendar-range.range-end
+            button.date-item 20
+          .calendar-date
             button.date-item 21
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 22
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 23
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 24
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 25
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 26
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 27
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 28
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 29
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 30
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 31
-          .calendar-date.next-month.disabled
+          .calendar-date.next-month
             button.date-item 1
 
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+        
+          
+          March 2017
+          
+        
+
+        
+          
+            Sun
+            Mon
+            Tue
+            Wed
+            Thu
+            Fri
+            Sat
+          
+
+          
+            
+            
+              
+            
+            ...
+            
+              
+            
+
+            
+            
+              
+            
+            
+              
+            
+            
+              
+            
+            
+            
+              
+            
+            
+            
+              
+            
+            
+            
+              
+            
+
+            
+            
+              
+            
+            
+              
+            
+            
+              
+            
+            ...
+            
+              
+            
+
+            
+            
+              
+            
+          
+        
+      
+
 +docs-subheading('calendars-sizes', 'Calendars sizes')
 
 .docs-demo.columns
@@ -112,84 +194,105 @@ p
           .calendar-date Fri
           .calendar-date Sat
         .calendar-body
-          .calendar-date.prev-month.disabled
+          .calendar-date.prev-month
             button.date-item 26
-          .calendar-date.prev-month.disabled
+          .calendar-date.prev-month
             button.date-item 27
             .calendar-events
               a.calendar-event.bg-error.text-light(href="#calendars") Zhonghe Festival
-          .calendar-date.prev-month.disabled
+          .calendar-date.prev-month
             button.date-item 28
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 1
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 2
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 3
-          .calendar-date.current-month.tooltip(data-tooltip="Today")
+          .calendar-date.tooltip(data-tooltip="Today")
             button.date-item.date-today 4
-          .calendar-date.current-month
+          .calendar-date
             button.date-item(disabled="") 5
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 6
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 7
-          .calendar-date.current-month.tooltip(data-tooltip="You have appointments")
+          .calendar-date.tooltip(data-tooltip="You have appointments")
             button.date-item.badge 8
             .calendar-events
               a.calendar-event.bg-primary.text-light(href="#calendars") Product launch event
               a.calendar-event.bg-error.text-light(href="#calendars") International Women's Day
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 9
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 10
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 11
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 12
             .calendar-events
               a.calendar-event.bg-error.text-light(href="#calendars") Arbor Day
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 13
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 14
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 15
-          .calendar-date.current-month.calendar-range.range-start
-            button.date-item.active 16
-          .calendar-date.current-month.calendar-range
+          .calendar-date.calendar-range.range-start
+            button.date-item 16
+          .calendar-date.calendar-range
             button.date-item 17
-          .calendar-date.current-month.calendar-range
+          .calendar-date.calendar-range
             button.date-item 18
-          .calendar-date.current-month.calendar-range
+          .calendar-date.calendar-range
             button.date-item 19
-          .calendar-date.current-month.calendar-range.range-end
-            button.date-item.active 20
+          .calendar-date.calendar-range.range-end
+            button.date-item 20
             .calendar-events
               a.calendar-event.bg-success.text-light(href="#calendars") Spring Equinox
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 21
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 22
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 23
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 24
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 25
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 26
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 27
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 28
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 29
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 30
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 31
           .calendar-date.next-month.disabled
             button.date-item 1
             .calendar-events
-              a.calendar-event.bg-error.text-light(href="#calendars") April Fools' Day
\ No newline at end of file
+              a.calendar-event.bg-error.text-light(href="#calendars") April Fools' Day
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+        
+
+        
+          
+
+          
+            
+            
+              
+              
+                Spring Equinox
+              
+            
+          
+        
+      
\ No newline at end of file
diff --git a/docs/src/contents/cards.pug b/docs/src/contents/cards.pug
index be8d17e..979b3bc 100644
--- a/docs/src/contents/cards.pug
+++ b/docs/src/contents/cards.pug
@@ -82,13 +82,13 @@ pre.code(data-lang='HTML')
           
         
         
-          Microsoft
-          Software and hardware
+          ...
+          ...
         
         
-          Empower every person and every organization on the planet to achieve more.
+          ...
         
         
-          
+          
         
       
\ No newline at end of file
diff --git a/docs/src/contents/grid.pug b/docs/src/contents/grid.pug
index 0665262..dff69f6 100644
--- a/docs/src/contents/grid.pug
+++ b/docs/src/contents/grid.pug
@@ -145,13 +145,12 @@ p
 
 .docs-demo.columns
   .column.col-6
-    .bg-gray
-      .docs-block col-6
-      .columns
-        .column.col-6
-          .bg-primary.docs-block col-6
-        .column.col-6
-          .bg-primary.docs-block col-6
+    .bg-gray.docs-block col-6
+    .columns
+      .column.col-6
+        .bg-primary.docs-block col-6
+      .column.col-6
+        .bg-primary.docs-block col-6
   .column.col-6
     .bg-gray.docs-block col-6
 
diff --git a/docs/src/contents/labels.pug b/docs/src/contents/labels.pug
index cef66d2..f0ad51f 100644
--- a/docs/src/contents/labels.pug
+++ b/docs/src/contents/labels.pug
@@ -1,6 +1,6 @@
 p Labels are formatted text tags for highlighted, informative information.
 
-.columns
+.docs-demo.columns
   .column
     span.label.mr-1 default label
     span.label.label-primary.mr-1 primary label
@@ -13,6 +13,13 @@ p
   | Add the #[code label] class to #{''} or #{''} elements.
   | You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels.
 
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      
+      default label
+      primary label
+
 .docs-demo.columns
   .column
     span.label.label-rounded.mr-1 default label
@@ -24,9 +31,5 @@ p
 pre.code(data-lang='HTML')
   code
     :highlight(lang="html")
-      
-      default label
-      primary label
-
       
       primary label
\ No newline at end of file
diff --git a/src/_calendars.scss b/src/_calendars.scss
index a05621f..ff00145 100644
--- a/src/_calendars.scss
+++ b/src/_calendars.scss
@@ -98,13 +98,22 @@
       }
     }
 
-    &.disabled .date-item,
-    &.disabled .calendar-event,
-    .date-item:disabled,
-    .calendar-event:disabled {
-      cursor: default;
-      opacity: .25;
-      pointer-events: none;
+    .date-item,
+    .calendar-event {
+      &:disabled,
+      &.disabled {
+        cursor: default;
+        opacity: .25;
+        pointer-events: none;
+      }
+    }
+
+    &.prev-month,
+    &.next-month {
+      .date-item,
+      .calendar-event {
+        opacity: .25;
+      }
     }
   }
 
@@ -132,11 +141,21 @@
       }
     }
 
+    &.range-start,
+    &.range-end {
+      .date-item {
+        background: $primary-color-dark;
+        border-color: darken($primary-color-dark, 5%);
+        color: $light-color;
+      }
+    }
+
     .date-item {
       color: $primary-color;
     }
   }
 
+  // Calendars size
   &.calendar-lg {
     .calendar-body {
       padding: 0;
-- 
cgit v1.3.1-23-gd82d


From 4f276ef0d7575416a881174dd9a1c841fc0832e5 Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Sun, 10 Jun 2018 10:02:41 +0800
Subject: Update zh-Hans and zh-Hant font code

---
 dist/spectre.css                 |  7 +++++-
 dist/spectre.min.css             |  2 +-
 docs/dist/spectre-rtl.css        |  7 +++++-
 docs/dist/spectre-rtl.min.css    |  2 +-
 docs/dist/spectre.css            |  7 +++++-
 docs/dist/spectre.min.css        |  2 +-
 docs/elements.html               | 45 +++++++++++++++++++---------------
 docs/src/contents/typography.pug | 52 +++++++++++++++++++---------------------
 src/_asian.scss                  |  2 --
 9 files changed, 72 insertions(+), 54 deletions(-)

(limited to 'docs/elements.html')

diff --git a/dist/spectre.css b/dist/spectre.css
index 111243c..b840816 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -453,10 +453,15 @@ dl dd {
   margin: .4rem 0 .8rem 0;
 }
 
-:lang(zh) {
+:lang(zh),
+:lang(zh-Hans) {
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
 }
 
+:lang(zh-Hant) {
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
+}
+
 :lang(ja) {
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
 }
diff --git a/dist/spectre.min.css b/dist/spectre.min.css
index 24307a5..f934684 100644
--- a/dist/spectre.min.css
+++ b/dist/spectre.min.css
@@ -1 +1 @@
-/*! Spectre.css v0.5.2 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.2;padding:.1rem .15rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;padding:.05rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table.table-hover tbody tr:hover{background:#f0f1f4}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:0;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1rem;padding:.4rem 0}.form-label.label-sm{font-size:.7rem;padding:.2rem 0}.form-label.label-lg{font-size:.9rem;padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.8rem;height:1.8rem;line-height:1rem;max-width:100%;outline:0;padding:.35rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#acb3c2;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.15rem 1.1rem .15rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.45rem 1.4rem .45rem .6rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .35rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.5rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.5rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;margin:.2rem 0;min-height:1.2rem;padding:.2rem .4rem .2rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:12px;left:50%;margin-left:-4px;margin-top:-8px;position:absolute;top:50%;transform:rotate(45deg);width:8px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.35rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.15rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.45rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.label{background:#f0f1f4;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1.2;padding:.1rem .15rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.2;padding:.1rem .15rem}.code{border-radius:.1rem;color:#50596c;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#667189;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;font-weight:500;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#667189;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#667189}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.4rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#667189;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:100%;padding:.2rem .4rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#667189;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#454d5d;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#667189;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#50596c;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#667189;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:300}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.9);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:4px -2px 4px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}a.text-gray:visited{color:#bbc1cd}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9;color:#fff}.bg-secondary{background:#f1f1fc}.bg-dark{background:#454d5d;color:#fff}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643;color:#fff}.bg-warning{background:#ffb700;color:#fff}.bg-error{background:#e85600;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}
\ No newline at end of file
+/*! Spectre.css v0.5.2 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.2;padding:.1rem .15rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;padding:.05rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh),:lang(zh-Hans){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(zh-Hant){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table.table-hover tbody tr:hover{background:#f0f1f4}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:0;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1rem;padding:.4rem 0}.form-label.label-sm{font-size:.7rem;padding:.2rem 0}.form-label.label-lg{font-size:.9rem;padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.8rem;height:1.8rem;line-height:1rem;max-width:100%;outline:0;padding:.35rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#acb3c2;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.15rem 1.1rem .15rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.45rem 1.4rem .45rem .6rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .35rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.5rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.5rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;margin:.2rem 0;min-height:1.2rem;padding:.2rem .4rem .2rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:12px;left:50%;margin-left:-4px;margin-top:-8px;position:absolute;top:50%;transform:rotate(45deg);width:8px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.35rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.15rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.45rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.label{background:#f0f1f4;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1.2;padding:.1rem .15rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.2;padding:.1rem .15rem}.code{border-radius:.1rem;color:#50596c;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#667189;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;font-weight:500;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#667189;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#667189}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.4rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#667189;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:100%;padding:.2rem .4rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#667189;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#454d5d;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#667189;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#50596c;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#667189;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:300}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.9);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:4px -2px 4px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}a.text-gray:visited{color:#bbc1cd}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9;color:#fff}.bg-secondary{background:#f1f1fc}.bg-dark{background:#454d5d;color:#fff}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643;color:#fff}.bg-warning{background:#ffb700;color:#fff}.bg-error{background:#e85600;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}
\ No newline at end of file
diff --git a/docs/dist/spectre-rtl.css b/docs/dist/spectre-rtl.css
index 1fdbd07..3768b8b 100644
--- a/docs/dist/spectre-rtl.css
+++ b/docs/dist/spectre-rtl.css
@@ -454,10 +454,15 @@ dl dd {
   margin: .4rem 0 .8rem 0;
 }
 
-:lang(zh) {
+:lang(zh),
+:lang(zh-Hans) {
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
 }
 
+:lang(zh-Hant) {
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
+}
+
 :lang(ja) {
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
 }
diff --git a/docs/dist/spectre-rtl.min.css b/docs/dist/spectre-rtl.min.css
index 5d325b0..6be9bdc 100644
--- a/docs/dist/spectre-rtl.min.css
+++ b/docs/dist/spectre-rtl.min.css
@@ -1 +1 @@
-/*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre *//*! Spectre.css v0.5.2 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.2;padding:.1rem .15rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;padding:.05rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:right;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table.table-hover tbody tr:hover{background:#f0f1f4}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:0;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1rem;padding:.4rem 0}.form-label.label-sm{font-size:.7rem;padding:.2rem 0}.form-label.label-lg{font-size:.9rem;padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.8rem;height:1.8rem;line-height:1rem;max-width:100%;outline:0;padding:.35rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#acb3c2;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.15rem 1.1rem .15rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.45rem 1.4rem .45rem .6rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .35rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.5rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.5rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;margin:.2rem 0;min-height:1.2rem;padding:.2rem .4rem .2rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:12px;left:50%;margin-left:-4px;margin-top:-8px;position:absolute;top:50%;transform:rotate(45deg);width:8px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.35rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.15rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.45rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.label{background:#f0f1f4;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1.2;padding:.1rem .15rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.2;padding:.1rem .15rem}.code{border-radius:.1rem;color:#50596c;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#667189;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;font-weight:500;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#667189;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#667189}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.4rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#667189;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:100%;padding:.2rem .4rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#667189;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#454d5d;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#667189;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#50596c;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#667189;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:300}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.9);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:4px -2px 4px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}a.text-gray:visited{color:#bbc1cd}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9;color:#fff}.bg-secondary{background:#f1f1fc}.bg-dark{background:#454d5d;color:#fff}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643;color:#fff}.bg-warning{background:#ffb700;color:#fff}.bg-error{background:#e85600;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}/*! Spectre.css Icons v0.5.2 | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;content:"";height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;content:"";height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;content:"";height:.1rem;transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;content:"";height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;content:"";height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;content:"";height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;content:"";height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;content:"";height:.5em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;content:"";height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;content:"";height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;content:"";height:.5em;transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;content:"";height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;content:"";height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;content:"";height:.3em;left:10%;top:100%;transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;content:"";height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;content:"";height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;content:"";height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;content:"";height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.15em,.17em -.15em;content:"";height:.1em;width:.1em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;content:"";height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em}/*! Spectre.css Experimentals v0.5.2 | MIT License | github.com/picturepan2/spectre */.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.form-autocomplete.autocomplete-oneline .form-autocomplete-input{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.form-autocomplete.autocomplete-oneline .chip{-ms-flex:1 0 auto;flex:1 0 auto}.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.7rem;text-align:center}.calendar .calendar-body{color:#667189}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#667189;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event.disabled,.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item.disabled,.calendar .calendar-date .date-item:disabled{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-date.next-month .calendar-event,.calendar .calendar-date.next-month .date-item,.calendar .calendar-date.prev-month .calendar-event,.calendar .calendar-date.prev-month .date-item{opacity:.25}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range.range-end .date-item,.calendar .calendar-range.range-start .date-item{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{border-radius:.1rem;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%;z-index:1}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:100}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:100}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:cover;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;position:relative;width:100%}.off-canvas .off-canvas-toggle{display:block;position:absolute;right:.4rem;top:.4rem;transition:none;z-index:1}.off-canvas .off-canvas-sidebar{background:#f8f9fa;bottom:0;min-width:10rem;overflow-y:auto;position:fixed;right:0;top:0;transform:translateX(100%);transition:transform .25s ease;z-index:200}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.4rem .4rem .4rem 4rem}.off-canvas .off-canvas-overlay{background:rgba(69,77,93,.1);border-color:transparent;border-radius:0;bottom:0;display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%}.off-canvas .off-canvas-sidebar.active,.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar.active~.off-canvas-overlay,.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{display:block;z-index:100}@media (min-width:960px){.off-canvas.off-canvas-sidebar-show .off-canvas-toggle{display:none}.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas.off-canvas-sidebar-show .off-canvas-overlay{display:none!important}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.75);top:0;transform:translateZ(50px) scale(.95);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;outline:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:focus~.parallax-content,.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:focus~.parallax-content::before,.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:focus~.parallax-content .parallax-front,.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;outline:0;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:focus~.parallax-content,.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:focus~.parallax-content::before,.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:focus~.parallax-content .parallax-front,.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;outline:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:focus~.parallax-content,.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:focus~.parallax-content::before,.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;outline:0;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:focus~.parallax-content,.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:focus~.parallax-content::before,.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5755d9 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider.tooltip:not([data-tooltip])::after{content:attr(value)}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file
+/*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre *//*! Spectre.css v0.5.2 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.2;padding:.1rem .15rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;padding:.05rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh),:lang(zh-Hans){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(zh-Hant){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:right;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table.table-hover tbody tr:hover{background:#f0f1f4}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:0;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1rem;padding:.4rem 0}.form-label.label-sm{font-size:.7rem;padding:.2rem 0}.form-label.label-lg{font-size:.9rem;padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.8rem;height:1.8rem;line-height:1rem;max-width:100%;outline:0;padding:.35rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#acb3c2;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.15rem 1.1rem .15rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.45rem 1.4rem .45rem .6rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .35rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.5rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.5rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;margin:.2rem 0;min-height:1.2rem;padding:.2rem .4rem .2rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:12px;left:50%;margin-left:-4px;margin-top:-8px;position:absolute;top:50%;transform:rotate(45deg);width:8px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.35rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.15rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.45rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.label{background:#f0f1f4;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1.2;padding:.1rem .15rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.2;padding:.1rem .15rem}.code{border-radius:.1rem;color:#50596c;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#667189;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;font-weight:500;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#667189;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#667189}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.4rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#667189;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:100%;padding:.2rem .4rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#667189;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#454d5d;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#667189;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#50596c;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#667189;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:300}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.9);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:4px -2px 4px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}a.text-gray:visited{color:#bbc1cd}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9;color:#fff}.bg-secondary{background:#f1f1fc}.bg-dark{background:#454d5d;color:#fff}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643;color:#fff}.bg-warning{background:#ffb700;color:#fff}.bg-error{background:#e85600;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}/*! Spectre.css Icons v0.5.2 | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;content:"";height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;content:"";height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;content:"";height:.1rem;transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;content:"";height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;content:"";height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;content:"";height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;content:"";height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;content:"";height:.5em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;content:"";height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;content:"";height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;content:"";height:.5em;transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;content:"";height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;content:"";height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;content:"";height:.3em;left:10%;top:100%;transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;content:"";height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;content:"";height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;content:"";height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;content:"";height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.15em,.17em -.15em;content:"";height:.1em;width:.1em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;content:"";height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em}/*! Spectre.css Experimentals v0.5.2 | MIT License | github.com/picturepan2/spectre */.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.form-autocomplete.autocomplete-oneline .form-autocomplete-input{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.form-autocomplete.autocomplete-oneline .chip{-ms-flex:1 0 auto;flex:1 0 auto}.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.7rem;text-align:center}.calendar .calendar-body{color:#667189}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#667189;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event.disabled,.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item.disabled,.calendar .calendar-date .date-item:disabled{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-date.next-month .calendar-event,.calendar .calendar-date.next-month .date-item,.calendar .calendar-date.prev-month .calendar-event,.calendar .calendar-date.prev-month .date-item{opacity:.25}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range.range-end .date-item,.calendar .calendar-range.range-start .date-item{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{border-radius:.1rem;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%;z-index:1}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:100}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:100}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:cover;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;position:relative;width:100%}.off-canvas .off-canvas-toggle{display:block;position:absolute;right:.4rem;top:.4rem;transition:none;z-index:1}.off-canvas .off-canvas-sidebar{background:#f8f9fa;bottom:0;min-width:10rem;overflow-y:auto;position:fixed;right:0;top:0;transform:translateX(100%);transition:transform .25s ease;z-index:200}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.4rem .4rem .4rem 4rem}.off-canvas .off-canvas-overlay{background:rgba(69,77,93,.1);border-color:transparent;border-radius:0;bottom:0;display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%}.off-canvas .off-canvas-sidebar.active,.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar.active~.off-canvas-overlay,.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{display:block;z-index:100}@media (min-width:960px){.off-canvas.off-canvas-sidebar-show .off-canvas-toggle{display:none}.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas.off-canvas-sidebar-show .off-canvas-overlay{display:none!important}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.75);top:0;transform:translateZ(50px) scale(.95);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;outline:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:focus~.parallax-content,.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:focus~.parallax-content::before,.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:focus~.parallax-content .parallax-front,.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;outline:0;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:focus~.parallax-content,.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:focus~.parallax-content::before,.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:focus~.parallax-content .parallax-front,.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;outline:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:focus~.parallax-content,.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:focus~.parallax-content::before,.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;outline:0;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:focus~.parallax-content,.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:focus~.parallax-content::before,.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5755d9 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider.tooltip:not([data-tooltip])::after{content:attr(value)}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file
diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
index 111243c..b840816 100644
--- a/docs/dist/spectre.css
+++ b/docs/dist/spectre.css
@@ -453,10 +453,15 @@ dl dd {
   margin: .4rem 0 .8rem 0;
 }
 
-:lang(zh) {
+:lang(zh),
+:lang(zh-Hans) {
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
 }
 
+:lang(zh-Hant) {
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
+}
+
 :lang(ja) {
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
 }
diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
index 24307a5..f934684 100644
--- a/docs/dist/spectre.min.css
+++ b/docs/dist/spectre.min.css
@@ -1 +1 @@
-/*! Spectre.css v0.5.2 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.2;padding:.1rem .15rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;padding:.05rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table.table-hover tbody tr:hover{background:#f0f1f4}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:0;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1rem;padding:.4rem 0}.form-label.label-sm{font-size:.7rem;padding:.2rem 0}.form-label.label-lg{font-size:.9rem;padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.8rem;height:1.8rem;line-height:1rem;max-width:100%;outline:0;padding:.35rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#acb3c2;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.15rem 1.1rem .15rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.45rem 1.4rem .45rem .6rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .35rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.5rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.5rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;margin:.2rem 0;min-height:1.2rem;padding:.2rem .4rem .2rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:12px;left:50%;margin-left:-4px;margin-top:-8px;position:absolute;top:50%;transform:rotate(45deg);width:8px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.35rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.15rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.45rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.label{background:#f0f1f4;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1.2;padding:.1rem .15rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.2;padding:.1rem .15rem}.code{border-radius:.1rem;color:#50596c;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#667189;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;font-weight:500;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#667189;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#667189}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.4rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#667189;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:100%;padding:.2rem .4rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#667189;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#454d5d;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#667189;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#50596c;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#667189;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:300}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.9);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:4px -2px 4px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}a.text-gray:visited{color:#bbc1cd}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9;color:#fff}.bg-secondary{background:#f1f1fc}.bg-dark{background:#454d5d;color:#fff}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643;color:#fff}.bg-warning{background:#ffb700;color:#fff}.bg-error{background:#e85600;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}
\ No newline at end of file
+/*! Spectre.css v0.5.2 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.2;padding:.1rem .15rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;padding:.05rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh),:lang(zh-Hans){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(zh-Hant){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table.table-hover tbody tr:hover{background:#f0f1f4}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:0;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1rem;padding:.4rem 0}.form-label.label-sm{font-size:.7rem;padding:.2rem 0}.form-label.label-lg{font-size:.9rem;padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.8rem;height:1.8rem;line-height:1rem;max-width:100%;outline:0;padding:.35rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#acb3c2;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.15rem 1.1rem .15rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.45rem 1.4rem .45rem .6rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .35rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.5rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.5rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;margin:.2rem 0;min-height:1.2rem;padding:.2rem .4rem .2rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:12px;left:50%;margin-left:-4px;margin-top:-8px;position:absolute;top:50%;transform:rotate(45deg);width:8px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.35rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.15rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.45rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.label{background:#f0f1f4;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1.2;padding:.1rem .15rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.2;padding:.1rem .15rem}.code{border-radius:.1rem;color:#50596c;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#667189;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;font-weight:500;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#667189;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#667189}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.4rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#667189;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:100%;padding:.2rem .4rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#667189;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#454d5d;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#667189;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#50596c;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#667189;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:300}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.9);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:4px -2px 4px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}a.text-gray:visited{color:#bbc1cd}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9;color:#fff}.bg-secondary{background:#f1f1fc}.bg-dark{background:#454d5d;color:#fff}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643;color:#fff}.bg-warning{background:#ffb700;color:#fff}.bg-error{background:#e85600;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}
\ No newline at end of file
diff --git a/docs/elements.html b/docs/elements.html
index 1823ff9..922d391 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -218,31 +218,36 @@
               

             

             #Optimized for East Asian fonts
-            你好, こんにちは,안녕하세요
-            Chinese (Simplified)
-            革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
-            Chinese (Tranditional)
-            山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
-            Japanese
-            祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌に風の前の塵に同じ。
-            Korean
-            나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
+            
+              
+                你好, こんにちは, 안녕하세요
+                Chinese (Simplified)
+                革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
+                Chinese (Tranditional)
+                山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
+                Japanese
+                祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌に風の前の塵に同じ。
+                Korean
+                나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
+              
+            
             Use the lang attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.
             <p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
 <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
 <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
 
             And you can use the cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
-            
-              祇園
-              精舎の鐘の声、諸行無常の響きあり。
-            
-            
-              祇園
-              精舎の鐘の声、諸行無常の響きあり。
-            
+            
+              
+                祇園精舎の鐘の声、諸行無常の響きあり。
+                
+                  祇園精舎の鐘の声、諸行無常の響きあり。
+                  
+                
+              
+            
             <p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
-<p class="cjk"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
+<p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
 
             #Fonts
             Spectre sets the most common and best font-family for each OS with fallback support in old systems.
@@ -253,8 +258,10 @@
 /* Monospace typography targeted */
 font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
 
-/* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */
+/* Chinese (lang="zh" and lang="zh-Hans") targeted */
 font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+/* Chinese (lang="zh-Hant") targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
 /* Japanese (lang="ja") targeted */
 font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
 /* Korean (lang="ko") targeted */
diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug
index 876a956..0656f91 100644
--- a/docs/src/contents/typography.pug
+++ b/docs/src/contents/typography.pug
@@ -122,24 +122,22 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('typography-east-asian', 'Optimized for East Asian fonts')
 
-p.h5
-  small(lang='zh-Hans') 你好
-  | , 
-  small(lang='ja') こんにちは
-  | ,
-  small(lang='ko') 안녕하세요
+.docs-demo.columns
+  .column
+    p.h5
+      | #[small(lang='zh-Hans') 你好], #[small(lang='ja') こんにちは], #[small(lang='ko') 안녕하세요]
+    p.h6 Chinese (Simplified)
+    p(lang='zh-Hans') 革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
+    p.h6 Chinese (Tranditional)
+    p(lang='zh-Hant')
+      | 山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
+    p.h6 Japanese
+    p(lang='ja')
+      | 祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌に風の前の塵に同じ。
+    p.h6 Korean
+    p(lang='ko')
+      | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
 
-p.h6 Chinese (Simplified)
-p(lang='zh-Hans') 革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
-p.h6 Chinese (Tranditional)
-p(lang='zh-Hant')
-  | 山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
-p.h6 Japanese
-p(lang='ja')
-  | 祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌に風の前の塵に同じ。
-p.h6 Korean
-p(lang='ko')
-  | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
 p
   | Use the #[code lang] attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.
 
@@ -153,20 +151,18 @@ pre.code(data-lang='HTML')
 p
   | And you can use the #[code cjk] class or the #[code lang] attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
 
-p(lang='ja')
-  u 祇園
-  u 精舎
-  | の鐘の声、諸行無常の響きあり。
-p(lang='ja')
-  del 祇園
-  del 精舎
-  | の鐘の声、諸行無常の響きあり。
+.docs-demo.columns
+  .column
+    p(lang='ja').
+      祇園精舎の鐘の声、諸行無常の響きあり。
+    p(lang='ja').
+      祇園精舎の鐘の声、諸行無常の響きあり。
 
 pre.code(data-lang='HTML')
   code
     :highlight(lang="html")
       
祇園精舎の鐘の声、諸行無常の響きあり。……
-      祇園精舎の鐘の声、諸行無常の響きあり。……
+      祇園精舎の鐘の声、諸行無常の響きあり。……
 
 +docs-subheading('typography-fonts', 'Fonts')
 
@@ -182,8 +178,10 @@ pre.code
       /* Monospace typography targeted */
       font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
 
-      /* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */
+      /* Chinese (lang="zh" and lang="zh-Hans") targeted */
       font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+      /* Chinese (lang="zh-Hant") targeted */
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
       /* Japanese (lang="ja") targeted */
       font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
       /* Korean (lang="ko") targeted */
diff --git a/src/_asian.scss b/src/_asian.scss
index b27d969..38dc77e 100644
--- a/src/_asian.scss
+++ b/src/_asian.scss
@@ -17,8 +17,6 @@
 }
 
 :lang(zh),
-:lang(zh-Hans),
-:lang(zh-Hant),
 :lang(ja),
 .cjk {
   ins,
-- 
cgit v1.3.1-23-gd82d


From 1c439a3201df5b559b124940c8fcc2702c345631 Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Sun, 10 Jun 2018 10:38:45 +0800
Subject: Update Docs anchor

---
 docs/components.html          | 46 +++++++++++++++---------------
 docs/dist/docs.css            | 25 +++++-----------
 docs/dist/docs.min.css        |  2 +-
 docs/dist/spectre-rtl.css     |  1 +
 docs/dist/spectre-rtl.min.css |  2 +-
 docs/elements.html            | 66 +++++++++++++++++++++----------------------
 docs/experimentals.html       | 26 ++++++++---------
 docs/getting-started.html     | 38 ++++++++++++-------------
 docs/layout.html              | 14 ++++-----
 docs/src/_mixins.pug          |  6 ++--
 docs/src/scss/docs.scss       | 26 +++++------------
 docs/utilities.html           | 20 ++++++-------
 12 files changed, 125 insertions(+), 147 deletions(-)

(limited to 'docs/elements.html')

diff --git a/docs/components.html b/docs/components.html
index 12d07bd..654c097 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -130,7 +130,7 @@
       
         
           
-            #Accordions
+            Accordions#
             
               
                 
@@ -248,7 +248,7 @@
 </details>

           

           
-            #Avatars
+            Avatars#
             Avatars are user profile pictures. 
             
               
@@ -321,7 +321,7 @@
 </figure>
           
           
-            #Badges
+            Badges#
             Badges are often used as unread number indicators.
             
               Notifications
@@ -367,7 +367,7 @@
 </figure>
           
           
-            #Bars
+            Bars#
             
               Bars represent the progress of a task or the value within the known range.
               Bars are custom components for displaying HTML5 <progress>, <meter> and input range elements.
@@ -410,7 +410,7 @@
   <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
 </div>
 
-            
#Slider bars
+            Slider bars#
             
               
                 
@@ -453,7 +453,7 @@
 </div>
           
           
-            #Breadcrumbs
+            Breadcrumbs#
             Breadcrumbs are used as navigational hierarchies to indicate current location.
             
               
@@ -493,7 +493,7 @@
 </ul>
           
           
-            #Cards
+            Cards#
             
               
             
@@ -588,7 +588,7 @@
 </div>
           
           
-            #Chips
+            Chips#
             Chips are complex entities in small blocks. 
             
               CrimeDramaBiographyMystery
@@ -617,7 +617,7 @@
 </div>
           
           
-            #Empty states
+            Empty states#
             Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
             
               
@@ -672,7 +672,7 @@
 </div>
           
           
-            #Menu
+            Menu#
             Menus are vertical list of links or buttons for actions and navigation.
             
               
@@ -757,7 +757,7 @@
   </li>
 </ul>
   
-            #Dropdown menu
+            Dropdown menu#
             The dropdown is a combination of buttons and menus.
             
               
@@ -828,7 +828,7 @@
 </div>
           
           
-            #Modals
+            Modals#
             Modals are flexible dialog prompts.
             
               Open Modal
@@ -884,7 +884,7 @@
   </div>
 </div>
 
-            #Modal sizes
+            Modal sizes#
             
               Open small size Modal
                 
@@ -960,7 +960,7 @@
 </div>
           
           
-            #Nav
+            Nav#
             
               
                 
@@ -1012,7 +1012,7 @@
 </ul>
           
           
-            #Pagination
+            Pagination#
             
               
                 
@@ -1097,7 +1097,7 @@
 </ul>
           
           
-            #Panels
+            Panels#
             Panels are flexible view container with auto-expand content section.
             
               
@@ -1229,7 +1229,7 @@
 </div>
           
           
-            #Popovers
+            Popovers#
             Popovers are small overlay content containers. Popovers component is built entirely in CSS.
             
               
@@ -1322,7 +1322,7 @@
 </div>
           
           
-            #Steps
+            Steps#
             Steps are progress indicators of a sequence of task steps.
             
               
@@ -1363,7 +1363,7 @@
   
           
           
-            #Tabs
+            Tabs#
             Tabs enable quick switch between different views.
             
               
@@ -1462,7 +1462,7 @@
 </ul>
           
           
-            #Tiles
+            Tiles#
             Tiles are repeatable or embeddable information blocks.
             
               
@@ -1516,7 +1516,7 @@
   </div>
 </div>
 
-            #Compact tiles
+            Compact tiles#
             There is compact version of Tiles component, which is often used as contact and file info blocks.
             Add the tile-centered class to the container tile.
               The tile-icon, tile-content and tile-action will be vertically centered.
@@ -1555,7 +1555,7 @@
 </div>
           
           
-            #Toasts
+            Toasts#
             Toasts are used to show alert or information to users.
             
               
@@ -1602,7 +1602,7 @@
 </div>
           
           
-            #Tooltips
+            Tooltips#
             Tooltips provide context information labels that appear on hover and focus.
             
               
diff --git a/docs/dist/docs.css b/docs/dist/docs.css
index 0bbfd6a..625d3c7 100644
--- a/docs/dist/docs.css
+++ b/docs/dist/docs.css
@@ -83,22 +83,15 @@
 
 .docs-content .anchor {
   color: #6362dc;
-  height: 0;
-  margin-left: -2em;
-  overflow: hidden;
-  padding: 0 1em;
-  position: absolute;
-  text-align: center;
-  width: 0;
-  z-index: 100;
+  display: none;
+  margin-left: .2rem;
+  padding: 0 .2rem;
 }
 
 .docs-content .anchor:focus,
 .docs-content .anchor:hover {
-  box-shadow: none;
-  height: auto;
+  display: inline;
   text-decoration: none;
-  width: 2em;
 }
 
 .docs-content .s-title,
@@ -135,8 +128,7 @@
 
 .docs-content .s-title:hover .anchor,
 .docs-content .s-subtitle:hover .anchor {
-  height: auto;
-  width: 1em;
+  display: inline;
 }
 
 .docs-content .s-title + .docs-note,
@@ -516,10 +508,10 @@
     left: .5rem;
   }
   .docs-navbar .btn {
-    right: 1rem;
+    right: .9rem;
   }
   .grid-hero .docs-brand {
-    left: 1rem;
+    left: .9rem;
   }
   .docs-sidebar .docs-brand {
     margin: .85rem 1rem;
@@ -533,9 +525,6 @@
   .docs-content .docs-block {
     padding: .4rem .1rem;
   }
-  .docs-content .anchor {
-    display: none;
-  }
 }
 
 @media (min-width: 1366px) {
diff --git a/docs/dist/docs.min.css b/docs/dist/docs.min.css
index 27422c7..2aec85c 100644
--- a/docs/dist/docs.min.css
+++ b/docs/dist/docs.min.css
@@ -1 +1 @@
-/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;height:0;margin-left:-2em;overflow:hidden;padding:0 1em;position:absolute;text-align:center;width:0;z-index:100}.docs-content .anchor:focus,.docs-content .anchor:hover{box-shadow:none;height:auto;text-decoration:none;width:2em}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{height:auto;width:1em}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-demo{padding-bottom:1rem;padding-top:1rem}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:block;margin:2rem 0;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:1rem}.grid-hero .docs-brand{left:1rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}.docs-content .anchor{display:none}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;margin:0;position:fixed;right:1rem;width:7.3rem}}
\ No newline at end of file
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.5.2"}.off-canvas .off-canvas-toggle{font-size:1rem;left:1.5rem;position:fixed;top:1rem}.off-canvas .off-canvas-sidebar{width:12rem}.off-canvas .off-canvas-content{padding:0}.docs-navbar{height:3.8rem;position:fixed;right:0;top:0;z-index:100}.docs-navbar .btn{position:absolute;right:1.5rem;top:1rem}.docs-sidebar .docs-nav{bottom:1.5rem;-webkit-overflow-scrolling:touch;overflow-y:auto;padding:.5rem 1.5rem;position:fixed;top:3.5rem;width:12rem}.docs-sidebar .accordion{margin-bottom:.75rem}.docs-sidebar .accordion input~.accordion-header{color:#5b657a;font-size:.65rem;font-weight:600;text-transform:uppercase}.docs-sidebar .accordion input:checked~.accordion-header{color:#667189}.docs-sidebar .accordion .menu .menu-item{font-size:.7rem;padding-left:1rem}.docs-sidebar .accordion .menu .menu-item>a{background:0 0;color:#667189;display:inline-block}.docs-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:0 4rem;width:calc(100vw - 12rem)}.docs-content>.container{margin-left:0;max-width:800px;padding-bottom:1.5rem}.docs-content .anchor{color:#6362dc;display:none;margin-left:.2rem;padding:0 .2rem}.docs-content .anchor:focus,.docs-content .anchor:hover{display:inline;text-decoration:none}.docs-content .s-subtitle,.docs-content .s-title{color:#414857;line-height:1.8rem;margin-bottom:0;padding-bottom:1rem;padding-top:1rem;position:static}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-content .s-subtitle,.docs-content .s-title{position:sticky;position:-webkit-sticky;top:0;z-index:100}.docs-content .s-subtitle::before,.docs-content .s-title::before{background:#fff;bottom:0;content:"";display:block;left:-10px;position:absolute;right:-10px;top:-5px;z-index:-1}}.docs-content .s-subtitle:hover .anchor,.docs-content .s-title:hover .anchor{display:inline}.docs-content .s-subtitle+.docs-note,.docs-content .s-title+.docs-note{margin-top:.4rem}.docs-content .docs-demo{padding-bottom:1rem;padding-top:1rem}.docs-content .docs-ad{background:#f8f9fa;border-radius:.1rem;display:block;margin:2rem 0;padding:.4rem;position:relative}.docs-content .docs-ad::before{color:#acb3c2;content:"AD";font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.docs-content .docs-ad.docs-ad-sidebar::before{content:none}.docs-content .carbon-wrap .carbon-img{display:block}.docs-content .carbon-wrap .carbon-text{color:#667189;display:block;font-size:.7rem}.docs-content .carbon-poweredby{color:#acb3c2;font-size:.7rem}.docs-content .column{padding:.4rem}.docs-content .docs-block{border-radius:.1rem;padding:.4rem}.docs-content .docs-block.bg-gray{background:#f0f1f4}.docs-content .docs-shape{height:4.8rem;line-height:1.2rem;padding:1.8rem 0;width:4.8rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:.5rem;padding:0;width:.5rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:.75rem .25rem}.docs-content .docs-color{border-radius:.1rem;margin:.25rem 0;padding:.5rem}.docs-content .docs-color .color-subtitle{font-size:.7rem;opacity:.75}.docs-content .code .hljs-tag{color:#667189}.docs-content .code .hljs-comment{color:#acb3c2}.docs-content .code .hljs-class,.docs-content .code .hljs-string,.docs-content .code .hljs-title{color:#5755d9}.docs-content .code .hljs-attribute,.docs-content .code .hljs-built_in,.docs-content .code .hljs-keyword,.docs-content .code .hljs-variable{color:#d73e48}.docs-content .code .hljs-hexcolor,.docs-content .code .hljs-value{color:#667189}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:.75rem 0}.docs-content .parallax{margin:2rem auto}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{align-content:space-around;align-items:center;background:#5755d9;border-radius:.1rem;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:1.2rem;height:2rem;width:2rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider{height:auto;padding-bottom:56.2222%}.docs-content .comparison-slider .filter-grayscale{filter:grayscale(75%)}.docs-content .off-canvas{position:relative}.docs-content .off-canvas .off-canvas-toggle{left:.4rem;position:absolute;top:.4rem;z-index:1}.docs-brand{color:#5755d9;left:1.5rem;position:fixed;top:.85rem}.docs-brand .docs-logo{align-items:center;border-radius:.1rem;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;height:2rem;padding:.2rem;width:auto}.docs-brand .docs-logo:focus,.docs-brand .docs-logo:hover{text-decoration:none}.docs-brand .docs-logo img{display:inline;height:auto;width:1.6rem}.docs-brand .docs-logo h2{display:inline;font-size:.8rem;font-weight:700;line-height:1.5rem;margin-bottom:0;margin-left:.5rem;margin-right:.5rem}.docs-footer{color:#acb3c2;padding:.5rem .5rem 1.5rem .5rem}.docs-footer a{color:#667189}.btn .feather{height:1rem;vertical-align:middle}.section-hero{padding:1rem .5rem}.section-hero .docs-brand{position:absolute;top:.85rem}.section-hero .docs-brand h2{color:#5755d9}.section-hero .column{padding:.4rem}.section-updates{padding:4.5rem .5rem 3.5rem .5rem}.section-updates .card{border:0;margin-bottom:1rem}.section-features{padding:4.5rem .5rem}.section-features .column{padding:.4rem}.section-footer{color:#acb3c2;padding:1.8rem .75rem 1rem .75rem;position:relative;z-index:200}.section-footer a{color:#667189}.grid-hero{padding-bottom:2rem;padding-top:6rem}.grid-hero h1{color:#50596c;font-size:1.6rem;margin-bottom:1.5rem}.grid-hero h2{color:#5b657a;font-size:.9rem;font-weight:400;line-height:1.5rem;margin-bottom:1.5rem}.grid-hero h2 u{border-bottom:.1rem solid currentColor;padding-bottom:.05rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#727e96;padding:.5rem}.grid-hero .card .card-title{color:#5755d9;font-size:.9rem;margin-bottom:0}@media (max-width:960px){.off-canvas .off-canvas-toggle{z-index:300}.off-canvas .off-canvas-content{width:100%}.docs-sidebar .docs-brand{margin:.85rem 1.5rem;padding:0;position:static}.docs-sidebar .docs-nav{margin-top:1rem;position:static}.docs-sidebar .menu .menu-item>a{padding:.3rem .4rem}.docs-navbar{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(248,249,250,.65);left:0}.docs-content{min-width:auto;padding:0 1.5rem;width:100%}.docs-content .s-subtitle,.docs-content .s-title{padding-top:5rem;position:static}.docs-content .s-subtitle::before,.docs-content .s-title::before{content:none}.section-hero .s-brand{height:5rem;padding:1.5rem .5rem;text-align:center;width:100%}.section-hero .s-brand .s-logo{height:auto}.section-hero .s-brand img{height:3.2rem;width:3.2rem}.section-hero .s-brand h2{display:none}}@media (max-width:600px){.grid-hero h2{font-size:.9rem}.grid-hero .card{padding:0}.off-canvas .off-canvas-toggle{left:.5rem}.docs-navbar .btn{right:.9rem}.grid-hero .docs-brand{left:.9rem}.docs-sidebar .docs-brand{margin:.85rem 1rem}.docs-sidebar .docs-nav{padding:.5rem 1rem}.docs-content{padding:0 .5rem}.docs-content .docs-block{padding:.4rem .1rem}}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;margin:0;position:fixed;right:1rem;width:7.3rem}}
\ No newline at end of file
diff --git a/docs/dist/spectre-rtl.css b/docs/dist/spectre-rtl.css
index 3768b8b..1c21d5d 100644
--- a/docs/dist/spectre-rtl.css
+++ b/docs/dist/spectre-rtl.css
@@ -1186,6 +1186,7 @@ textarea.form-input {
 .input-group .form-select {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
+  width: 1%;
 }
 
 .input-group .input-group-btn {
diff --git a/docs/dist/spectre-rtl.min.css b/docs/dist/spectre-rtl.min.css
index 6be9bdc..f782eb6 100644
--- a/docs/dist/spectre-rtl.min.css
+++ b/docs/dist/spectre-rtl.min.css
@@ -1 +1 @@
-/*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre *//*! Spectre.css v0.5.2 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.2;padding:.1rem .15rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;padding:.05rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh),:lang(zh-Hans){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(zh-Hant){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:right;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table.table-hover tbody tr:hover{background:#f0f1f4}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:0;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1rem;padding:.4rem 0}.form-label.label-sm{font-size:.7rem;padding:.2rem 0}.form-label.label-lg{font-size:.9rem;padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.8rem;height:1.8rem;line-height:1rem;max-width:100%;outline:0;padding:.35rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#acb3c2;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.15rem 1.1rem .15rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.45rem 1.4rem .45rem .6rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .35rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.5rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.5rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;margin:.2rem 0;min-height:1.2rem;padding:.2rem .4rem .2rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:12px;left:50%;margin-left:-4px;margin-top:-8px;position:absolute;top:50%;transform:rotate(45deg);width:8px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.35rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.15rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.45rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.label{background:#f0f1f4;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1.2;padding:.1rem .15rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.2;padding:.1rem .15rem}.code{border-radius:.1rem;color:#50596c;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#667189;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;font-weight:500;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#667189;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#667189}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.4rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#667189;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:100%;padding:.2rem .4rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#667189;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#454d5d;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#667189;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#50596c;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#667189;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:300}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.9);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:4px -2px 4px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}a.text-gray:visited{color:#bbc1cd}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9;color:#fff}.bg-secondary{background:#f1f1fc}.bg-dark{background:#454d5d;color:#fff}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643;color:#fff}.bg-warning{background:#ffb700;color:#fff}.bg-error{background:#e85600;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}/*! Spectre.css Icons v0.5.2 | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;content:"";height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;content:"";height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;content:"";height:.1rem;transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;content:"";height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;content:"";height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;content:"";height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;content:"";height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;content:"";height:.5em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;content:"";height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;content:"";height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;content:"";height:.5em;transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;content:"";height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;content:"";height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;content:"";height:.3em;left:10%;top:100%;transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;content:"";height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;content:"";height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;content:"";height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;content:"";height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.15em,.17em -.15em;content:"";height:.1em;width:.1em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;content:"";height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em}/*! Spectre.css Experimentals v0.5.2 | MIT License | github.com/picturepan2/spectre */.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.form-autocomplete.autocomplete-oneline .form-autocomplete-input{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.form-autocomplete.autocomplete-oneline .chip{-ms-flex:1 0 auto;flex:1 0 auto}.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.7rem;text-align:center}.calendar .calendar-body{color:#667189}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#667189;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event.disabled,.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item.disabled,.calendar .calendar-date .date-item:disabled{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-date.next-month .calendar-event,.calendar .calendar-date.next-month .date-item,.calendar .calendar-date.prev-month .calendar-event,.calendar .calendar-date.prev-month .date-item{opacity:.25}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range.range-end .date-item,.calendar .calendar-range.range-start .date-item{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{border-radius:.1rem;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%;z-index:1}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:100}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:100}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:cover;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;position:relative;width:100%}.off-canvas .off-canvas-toggle{display:block;position:absolute;right:.4rem;top:.4rem;transition:none;z-index:1}.off-canvas .off-canvas-sidebar{background:#f8f9fa;bottom:0;min-width:10rem;overflow-y:auto;position:fixed;right:0;top:0;transform:translateX(100%);transition:transform .25s ease;z-index:200}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.4rem .4rem .4rem 4rem}.off-canvas .off-canvas-overlay{background:rgba(69,77,93,.1);border-color:transparent;border-radius:0;bottom:0;display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%}.off-canvas .off-canvas-sidebar.active,.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar.active~.off-canvas-overlay,.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{display:block;z-index:100}@media (min-width:960px){.off-canvas.off-canvas-sidebar-show .off-canvas-toggle{display:none}.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas.off-canvas-sidebar-show .off-canvas-overlay{display:none!important}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.75);top:0;transform:translateZ(50px) scale(.95);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;outline:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:focus~.parallax-content,.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:focus~.parallax-content::before,.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:focus~.parallax-content .parallax-front,.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;outline:0;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:focus~.parallax-content,.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:focus~.parallax-content::before,.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:focus~.parallax-content .parallax-front,.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;outline:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:focus~.parallax-content,.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:focus~.parallax-content::before,.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;outline:0;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:focus~.parallax-content,.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:focus~.parallax-content::before,.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5755d9 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider.tooltip:not([data-tooltip])::after{content:attr(value)}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file
+/*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre *//*! Spectre.css v0.5.2 | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}address{font-style:normal}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item;outline:0}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.5;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.8rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5755d9;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}a.active,a:active,a:focus,a:hover{color:#302ecd;text-decoration:underline}a:visited{color:#807fe2}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.5em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;font-size:.7rem;line-height:1.2;padding:.1rem .15rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;padding:.05rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh),:lang(zh-Hans){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(zh-Hant){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:right;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table.table-hover tbody tr:hover{background:#f0f1f4}.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5755d9;border-radius:.1rem;color:#5755d9;cursor:pointer;display:inline-block;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.btn:focus,.btn:hover{background:#f1f1fc;border-color:#4b48d6;text-decoration:none}.btn.active,.btn:active{background:#4b48d6;border-color:#3634d2;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5755d9;border-color:#4b48d6;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4240d4;border-color:#3634d2;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3a38d2;border-color:#302ecd;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-success{background:#32b643;border-color:#2faa3f;color:#fff}.btn.btn-success:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.btn.btn-success:focus,.btn.btn-success:hover{background:#30ae40;border-color:#2da23c;color:#fff}.btn.btn-success.active,.btn.btn-success:active{background:#2a9a39;border-color:#278e34;color:#fff}.btn.btn-success.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-error{background:#e85600;border-color:#d95000;color:#fff}.btn.btn-error:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.btn.btn-error:focus,.btn.btn-error:hover{background:#de5200;border-color:#cf4d00;color:#fff}.btn.btn-error.active,.btn.btn-error:active{background:#c44900;border-color:#b54300;color:#fff}.btn.btn-error.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5755d9}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#302ecd}.btn.btn-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.btn.btn-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.8rem}.btn.btn-action.btn-sm{width:1.4rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:1;padding:0;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.95}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.9rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;line-height:1rem;padding:.4rem 0}.form-label.label-sm{font-size:.7rem;padding:.2rem 0}.form-label.label-lg{font-size:.9rem;padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.8rem;height:1.8rem;line-height:1rem;max-width:100%;outline:0;padding:.35rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.7rem;height:1.4rem;padding:.15rem .3rem}.form-input.input-lg{font-size:.9rem;height:2rem;padding:.45rem .6rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#acb3c2;font-size:.7rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1rem;outline:0;padding:.35rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.15rem 1.1rem .15rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.45rem 1.4rem .45rem .6rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.8rem;margin:0 .35rem;position:absolute;top:50%;transform:translateY(-50%);width:.8rem;z-index:2}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.5rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.5rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;margin:.2rem 0;min-height:1.2rem;padding:.2rem .4rem .2rem 1.2rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox.input-sm,.form-radio.input-sm,.form-switch.input-sm{font-size:.7rem;margin:0}.form-checkbox.input-lg,.form-radio.input-lg,.form-switch.input-lg{font-size:.9rem;margin:.3rem 0}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.8rem;left:0;top:.3rem;width:.8rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:12px;left:50%;margin-left:-4px;margin-top:-8px;position:absolute;top:50%;transform:rotate(45deg);width:8px}.form-checkbox input:indeterminate+.form-icon{background:#5755d9;border-color:#5755d9}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:50%}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:50%;content:"";height:4px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.25rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:50%;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.35rem .4rem;white-space:nowrap}.input-group .input-group-addon.addon-sm{font-size:.7rem;padding:.15rem .3rem}.input-group .input-group-addon.addon-lg{font-size:.9rem;padding:.45rem .6rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto;width:1%}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem 0}.form-horizontal .form-group{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.label{background:#f0f1f4;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1.2;padding:.1rem .15rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5755d9;color:#fff}.label.label-secondary{background:#f1f1fc;color:#5755d9}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fcf2f2;border-radius:.1rem;color:#d73e48;font-size:85%;line-height:1.2;padding:.1rem .15rem}.code{border-radius:.1rem;color:#50596c;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.7rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:1.5;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}video.video-responsive{height:auto;max-width:100%}video.video-responsive::before{content:none}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#667189;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:not(:first-child):last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.9rem;font-weight:500;text-decoration:none}.accordion input:checked~.accordion-header .icon,.accordion[open] .accordion-header .icon{transform:rotate(90deg)}.accordion input:checked~.accordion-body,.accordion[open] .accordion-body{max-height:50rem}.accordion .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-header .icon{transition:all .2s ease}.accordion .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}summary.accordion-header::-webkit-details-marker{display:none}.avatar{background:#5755d9;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1.25;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5755d9;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.7rem;height:.9rem;line-height:1;min-width:.9rem;padding:.1rem .2rem;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#667189;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#667189}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.4rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5755d9;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.7rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5755d9;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5755d9}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#667189;display:inline-flex;display:-ms-inline-flexbox;-ms-flex-align:center;font-size:90%;height:1.2rem;line-height:.8rem;margin:.1rem;max-width:100%;padding:.2rem .4rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5755d9;color:#fff}.chip .avatar{margin-left:-.4rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#667189;padding:3.2rem 1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:300}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#f1f1fc;color:#5755d9}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#f1f1fc;color:#5755d9}.menu .menu-item .form-checkbox,.menu .menu-item .form-radio,.menu .menu-item .form-switch{margin:.1rem 0}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#454d5d;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#667189;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5755d9}.nav .nav-item.active>a{color:#50596c;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5755d9}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#667189;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5755d9}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5755d9;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:300}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5755d9;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5755d9;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5755d9}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5755d9}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5755d9;color:#5755d9}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item .btn-clear{margin-top:-.2rem}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:0}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,85,217,.9);border-color:#5755d9}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:4px -2px 4px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.7rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:pre;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5755d9}a.text-primary:focus,a.text-primary:hover{color:#4240d4}a.text-primary:visited{color:#6c6ade}.text-secondary{color:#e5e5f9}a.text-secondary:focus,a.text-secondary:hover{color:#d1d0f4}a.text-secondary:visited{color:#fafafe}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}a.text-gray:visited{color:#bbc1cd}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}a.text-light:visited{color:#fff}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}a.text-success:visited{color:#39c94b}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}a.text-warning:visited{color:#ffbe1a}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}a.text-error:visited{color:#ff6003}.bg-primary{background:#5755d9;color:#fff}.bg-secondary{background:#f1f1fc}.bg-dark{background:#454d5d;color:#fff}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643;color:#fff}.bg-warning{background:#ffb700;color:#fff}.bg-error{background:#e85600;color:#fff}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.7rem;padding:0 .4rem;transform:translateY(-.65rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5755d9;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.flex-centered{align-items:center;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center}.m-0{margin:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mr-0{margin-right:0!important}.mt-0{margin-top:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-bottom:0!important;margin-top:0!important}.m-1{margin:.2rem!important}.mb-1{margin-bottom:.2rem!important}.ml-1{margin-left:.2rem!important}.mr-1{margin-right:.2rem!important}.mt-1{margin-top:.2rem!important}.mx-1{margin-left:.2rem!important;margin-right:.2rem!important}.my-1{margin-bottom:.2rem!important;margin-top:.2rem!important}.m-2{margin:.4rem!important}.mb-2{margin-bottom:.4rem!important}.ml-2{margin-left:.4rem!important}.mr-2{margin-right:.4rem!important}.mt-2{margin-top:.4rem!important}.mx-2{margin-left:.4rem!important;margin-right:.4rem!important}.my-2{margin-bottom:.4rem!important;margin-top:.4rem!important}.p-0{padding:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.pt-0{padding-top:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-bottom:0!important;padding-top:0!important}.p-1{padding:.2rem!important}.pb-1{padding-bottom:.2rem!important}.pl-1{padding-left:.2rem!important}.pr-1{padding-right:.2rem!important}.pt-1{padding-top:.2rem!important}.px-1{padding-left:.2rem!important;padding-right:.2rem!important}.py-1{padding-bottom:.2rem!important;padding-top:.2rem!important}.p-2{padding:.4rem!important}.pb-2{padding-bottom:.4rem!important}.pl-2{padding-left:.4rem!important}.pr-2{padding-right:.4rem!important}.pt-2{padding-top:.4rem!important}.px-2{padding-left:.4rem!important;padding-right:.4rem!important}.py-2{padding-bottom:.4rem!important;padding-top:.4rem!important}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}/*! Spectre.css Icons v0.5.2 | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon.icon-2x{font-size:1.6rem}.icon.icon-3x{font-size:2.4rem}.icon.icon-4x{font-size:3.2rem}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}.btn-lg .icon{vertical-align:-15%}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;content:"";height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;content:"";height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;content:"";height:.1rem;transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;content:"";height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;content:"";height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;content:"";height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;content:"";height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;content:"";height:.5em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;content:"";height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;content:"";height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;content:"";height:.5em;transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;content:"";height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;content:"";height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;content:"";height:.3em;left:10%;top:100%;transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;content:"";height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;content:"";height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;content:"";height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;content:"";height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.15em,.17em -.15em;content:"";height:.1em;width:.1em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;content:"";height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em}/*! Spectre.css Experimentals v0.5.2 | MIT License | github.com/picturepan2/spectre */.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.form-autocomplete.autocomplete-oneline .form-autocomplete-input{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.form-autocomplete.autocomplete-oneline .chip{-ms-flex:1 0 auto;flex:1 0 auto}.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.9rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.7rem;text-align:center}.calendar .calendar-body{color:#667189}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#667189;cursor:pointer;font-size:.7rem;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e5e5f9;color:#5755d9}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fefeff;border-color:#e5e5f9;color:#5755d9;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event.disabled,.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item.disabled,.calendar .calendar-date .date-item:disabled{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-date.next-month .calendar-event,.calendar .calendar-date.next-month .date-item,.calendar .calendar-date.prev-month .calendar-event,.calendar .calendar-date.prev-month .date-item{opacity:.25}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#f1f1fc;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range.range-end .date-item,.calendar .calendar-range.range-start .date-item{background:#4b48d6;border-color:#3634d2;color:#fff}.calendar .calendar-range .date-item{color:#5755d9}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{border-radius:.1rem;display:block;font-size:.7rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%;z-index:1}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:100}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:100}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;-webkit-overflow-scrolling:touch;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:cover;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-tag#tag-0:checked~.filter-nav .chip[for=tag-0],.filter .filter-tag#tag-1:checked~.filter-nav .chip[for=tag-1],.filter .filter-tag#tag-2:checked~.filter-nav .chip[for=tag-2],.filter .filter-tag#tag-3:checked~.filter-nav .chip[for=tag-3],.filter .filter-tag#tag-4:checked~.filter-nav .chip[for=tag-4],.filter .filter-tag#tag-5:checked~.filter-nav .chip[for=tag-5],.filter .filter-tag#tag-6:checked~.filter-nav .chip[for=tag-6],.filter .filter-tag#tag-7:checked~.filter-nav .chip[for=tag-7],.filter .filter-tag#tag-8:checked~.filter-nav .chip[for=tag-8]{background:#5755d9;color:#fff}.filter .filter-tag#tag-1:checked~.filter-body .filter-item:not([data-tag~=tag-1]),.filter .filter-tag#tag-2:checked~.filter-body .filter-item:not([data-tag~=tag-2]),.filter .filter-tag#tag-3:checked~.filter-body .filter-item:not([data-tag~=tag-3]),.filter .filter-tag#tag-4:checked~.filter-body .filter-item:not([data-tag~=tag-4]),.filter .filter-tag#tag-5:checked~.filter-body .filter-item:not([data-tag~=tag-5]),.filter .filter-tag#tag-6:checked~.filter-body .filter-item:not([data-tag~=tag-6]),.filter .filter-tag#tag-7:checked~.filter-body .filter-item:not([data-tag~=tag-7]),.filter .filter-tag#tag-8:checked~.filter-body .filter-item:not([data-tag~=tag-8]){display:none}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.off-canvas{display:flex;display:-ms-flexbox;-ms-flex-flow:nowrap;flex-flow:nowrap;height:100%;position:relative;width:100%}.off-canvas .off-canvas-toggle{display:block;position:absolute;right:.4rem;top:.4rem;transition:none;z-index:1}.off-canvas .off-canvas-sidebar{background:#f8f9fa;bottom:0;min-width:10rem;overflow-y:auto;position:fixed;right:0;top:0;transform:translateX(100%);transition:transform .25s ease;z-index:200}.off-canvas .off-canvas-content{-ms-flex:1 1 auto;flex:1 1 auto;height:100%;padding:.4rem .4rem .4rem 4rem}.off-canvas .off-canvas-overlay{background:rgba(69,77,93,.1);border-color:transparent;border-radius:0;bottom:0;display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%}.off-canvas .off-canvas-sidebar.active,.off-canvas .off-canvas-sidebar:target{transform:translateX(0)}.off-canvas .off-canvas-sidebar.active~.off-canvas-overlay,.off-canvas .off-canvas-sidebar:target~.off-canvas-overlay{display:block;z-index:100}@media (min-width:960px){.off-canvas.off-canvas-sidebar-show .off-canvas-toggle{display:none}.off-canvas.off-canvas-sidebar-show .off-canvas-sidebar{-ms-flex:0 0 auto;flex:0 0 auto;position:relative;transform:none}.off-canvas.off-canvas-sidebar-show .off-canvas-overlay{display:none!important}}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.75);top:0;transform:translateZ(50px) scale(.95);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;outline:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:focus~.parallax-content,.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:focus~.parallax-content::before,.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:focus~.parallax-content .parallax-front,.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;outline:0;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:focus~.parallax-content,.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:focus~.parallax-content::before,.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:focus~.parallax-content .parallax-front,.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;outline:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:focus~.parallax-content,.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:focus~.parallax-content::before,.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;outline:0;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:focus~.parallax-content,.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:focus~.parallax-content::before,.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:focus~.parallax-content .parallax-front,.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5755d9;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5755d9;border-radius:.1rem}.progress::-moz-progress-bar{background:#5755d9;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5755d9 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,85,217,.2);outline:0}.slider.tooltip:not([data-tooltip])::after{content:attr(value)}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5755d9;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5755d9;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5755d9}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5755d9;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5755d9;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file
diff --git a/docs/elements.html b/docs/elements.html
index 922d391..6a7f1b1 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -130,7 +130,7 @@
       
         
           
-            #Typography
+            Typography#
             
               
                 
@@ -143,7 +143,7 @@
               
             
             Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
-            #Headings
+            Headings#
             
               
                 H1 Heading 40px
@@ -168,7 +168,7 @@
 <h1>H1 Heading <small class="label">40px</small></h1>
 <span class="h1">H1 Heading</span>
 
-            #Paragraphs
+            Paragraphs#
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
             
@@ -176,7 +176,7 @@
             <p>Lorem ipsum dolor sit amet, ...</p>
 <p>...</p>
 
-            #Semantic text elements
+            Semantic text elements#
             
               I18Nabbr
               Boldstrongb
@@ -217,7 +217,7 @@
                 y + 2var
               
             
-            #Optimized for East Asian fonts
+            Optimized for East Asian fonts#
             
               
                 你好, こんにちは, 안녕하세요
@@ -249,7 +249,7 @@
             <p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
 <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
 
-            #Fonts
+            Fonts#
             Spectre sets the most common and best font-family for each OS with fallback support in old systems.
               There are also fonts targeted East Asian typography.
             
@@ -267,7 +267,7 @@
 /* Korean (lang="ko") targeted */
 font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
 
-            #Blockquote
+            Blockquote#
             
               The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
               - Bill Gates
@@ -277,7 +277,7 @@
   <cite>- Bill Gates</cite>
 </blockquote>
 
-            #Lists
+            Lists#
             
               
                 
@@ -336,7 +336,7 @@
 </dl>
           
           
-            #Tables
+            Tables#
             Tables include default styles for tables and data sets.
             
               
@@ -397,7 +397,7 @@
 </table>
           
           
-            #Buttons
+            Buttons#
             
               
             
@@ -416,7 +416,7 @@
 <button class="btn btn-primary">primary button</button>
 <button class="btn btn-link">link button</button>
 
-            #Button colors
+            Button colors#
             
               
                 
@@ -429,7 +429,7 @@
             <button class="btn btn-success">success button</button>
 <button class="btn btn-error">error button</button>
 
-            #Button sizes
+            Button sizes#
             
               
                 
@@ -472,7 +472,7 @@
             <button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
 <button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
 
-            #Button states
+            Button states#
             Add the active class for active button state style.
             
               
@@ -505,7 +505,7 @@
 <button class="btn loading">button</button>
 <button class="btn btn-primary loading">primary button</button>
 
-            #Button groups
+            Button groups#
             
               
                 
@@ -546,7 +546,7 @@
 </div> 
           
           
-            #Forms
+            Forms#
             Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
             
               
@@ -683,7 +683,7 @@
 </div>
 
             You can use :indeterminate pseudo class for indeterminate state of checkboxes.
-            #Horizontal forms
+            Horizontal forms#
             If you want to have a horizontal form, add the form-horizontal class to the <form> container.
               And add the col-<1-12> and col-xs/sm/lg/xl-<1-12> class to the child elements for responsive form row layout.
             
@@ -768,7 +768,7 @@
   <!-- form structure -->
 </form>
 
-            #Form sizes
+            Form sizes#
             For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.
             
               
@@ -801,7 +801,7 @@
               
             
             You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.
-            #Form icons
+            Form icons#
             Spectre Form components has Spectre Icons support.
             Add a wrapper with the has-icon-left/has-icon-right class to <input> element.
               And add the icon with form-icon class next to the <input>.
@@ -868,7 +868,7 @@
   <i class="form-icon loading"></i>
 </div>
 
-            
#Input types
+            Input types#
             
               
                 
@@ -947,7 +947,7 @@
                 
               
             
-            #Input groups
+            Input groups#
             
               
                 
@@ -1036,7 +1036,7 @@
   <button class="btn btn-primary input-group-btn">Submit</button>
 </div>
 
-            #Form validation styles
+            Form validation styles#
             To use form validation styles, you can either add is-success or is-error class to the controls or add has-success or has-error class to parent elements.
               Use the form-input-hint class to provide form validation success and error messages.
             
@@ -1128,7 +1128,7 @@
   </div>
 </form>
 
-            #Form disabled styles
+            Form disabled styles#
             
                Add the disabled attribute to the element or <fieldset> for a disabled form components style.
             
@@ -1218,12 +1218,12 @@
   </fieldset>
           
           
-            #Icons
+            Icons#
             
               Icons are single-element, responsive and pure CSS icons.
               You can include spectre-icons.css located in the dist folder to your web <head> to have these CSS icons.
             
-            #Navigation icons
+            Navigation icons#
             
               
                 
@@ -1278,7 +1278,7 @@
                 icon-more-vert
               
             
-            #Action icons
+            Action icons#
             
               
                 
@@ -1349,7 +1349,7 @@
                 icon-upload
               
             
-            #Object icons
+            Object icons#
             
               
                 
@@ -1386,7 +1386,7 @@
             
             <i class="icon icon-menu"></i>
 
-            #Icon sizes
+            Icon sizes#
             Use icon-2x, icon-3x and icon-4x classes to increase icon sizes.
               You can set font-size to have different icon sizes.
             
@@ -1407,7 +1407,7 @@
             <i class="icon icon-2x icon-mail"></i>
           
           
-            #Labels
+            Labels#
             Labels are formatted text tags for highlighted, informative information.
             
               default labelprimary labelsecondary labelsuccess labelwarning labelerror label
@@ -1427,7 +1427,7 @@
 <span class="label label-rounded label-primary">primary label</span>
           
           
-            #Code
+            Code#
             Code is used for styling inline and multiline code snippets.
             For inline code, you can use the <code> element. 
               For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it.
@@ -1445,9 +1445,9 @@
 </code></pre>
           
           
-            #Media
+            Media#
             Media includes responsive images, figures and video classes.
-            #Images
+            Images#
             Add the img-responsive class to <img> elements. The images will scale with the parent sizes.
             
               
@@ -1471,7 +1471,7 @@
 <img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
 <img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
 
-            #Figure
+            Figure#
             You can use the element <figure> for an image with a caption.
               Add the figure class to <figure> element.
               The images with the img-responsive class will be responsive.
@@ -1485,7 +1485,7 @@
                 
               
             
-            #Video
+            Video#
             For responsive video, add a container with the video-responsive class. 
               Insert any YouTube, Youku or other iframe/embed video inside the container. 
               The ratio is 16:9 by default.
diff --git a/docs/experimentals.html b/docs/experimentals.html
index 25c398a..d9c67e9 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -130,7 +130,7 @@
       

         
           
-            #Experimentals
+            Experimentals#
             
               The Experimentals include experimental elements and features, mostly are not yet ready for wide use.
               These elements and components are limited inside spectre-exp.scss before browsers fully support them.
@@ -138,7 +138,7 @@
             
           
           
-            #Autocomplete
+            Autocomplete#
             
               
                 
@@ -255,7 +255,7 @@
 </div>
           
           
-            #Calendars
+            Calendars#
             
               
             
@@ -468,7 +468,7 @@
   </div>
 </div>
 
-            #Calendars sizes
+            Calendars sizes#
             
               
                 
@@ -622,7 +622,7 @@
 </div>
           
           
-            #Carousels
+            Carousels#
             Carousels are slideshows for cycling images. It is built in pure CSS.
             
               
@@ -660,7 +660,7 @@
             
           
           
-            #Comparison sliders
+            Comparison sliders#
             Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
             
               
@@ -689,7 +689,7 @@
 </div>
           
           
-            #Filters
+            Filters#
             Filters are CSS only content filters.
             
               
@@ -834,7 +834,7 @@
 </div>
           
           
-            #Meters
+            Meters#
             Meters represent the value within the known range.
             
               
@@ -859,7 +859,7 @@
 <meter class="meter" value="20" optimum="90" min="0" max="100" low="30" high="80"></meter>
           
           
-            #Off-canvas
+            Off-canvas#
             The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.
             
               By default, the off-canvas menu is collapsed whenever the window width is.
@@ -900,7 +900,7 @@
 </div>
           
           
-            #Parallax
+            Parallax#
             The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.
             
               
@@ -935,7 +935,7 @@
   
           
           
-            #Progress
+            Progress#
             The Progress indicates the progress completion of a task.
             
               
@@ -955,7 +955,7 @@
 <progress class="progress" max="100"></progress>
           
           
-            #Sliders
+            Sliders#
             Sliders are for selecting values from ranges.
             You can add the class tooltip to have tooltip labels.
               If no data-tooltip is set, the value will be used instead.
@@ -974,7 +974,7 @@
 <input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);">
           
           
-            #Timelines
+            Timelines#
             Timelines are ordered sequences of activities.
             
               
diff --git a/docs/getting-started.html b/docs/getting-started.html
index e7a99a7..45c464e 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -130,13 +130,13 @@
       
         
           
-            #Introduction
+            Introduction#
              Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.
             
                Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
           
           
-            #Installation
+            Installation#
             
               
                 
@@ -149,7 +149,7 @@
               
             
             There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.
-            #Install manually
+            Install manually#
             Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):
             Download Spectre.css
             Include spectre.css located in /dist in your website or Web app . Also, you can add spectre-icons.css and spectre-exp.css accordingly.
@@ -157,23 +157,23 @@
 <link rel="stylesheet" href="spectre-exp.min.css">
 <link rel="stylesheet" href="spectre-icons.min.css">
 
-            #Install from CDN
+            Install from CDN#
             Alternatively, you can use the unpkg or cdnjs CDN to load compiled Spectre.css.
             <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
 <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
 <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
 
-            #Install with NPM
+            Install with NPM#
             npm install spectre.css --save
 
-            #Install with Yarn
+            Install with Yarn#
             yarn add spectre.css
 
-            #Install from Bower
+            Install from Bower#
             bower install spectre.css --save
           
           
-            #Custom version
+            Custom version#
             
               
             
@@ -181,7 +181,7 @@
             Sass Source Code
             If you are looking for Less version of Spectre.css, please switch to Less branch.
             Less Branch
-            #Compiling CSS
+            Compiling CSS#
             Spectre uses Gulp for compiling CSS. Firstly you need to install NPM, which is used to manage Gulp and other dependencies.
             Then, you can build the CSS file from the command line:
             
@@ -196,7 +196,7 @@
               gulp docs - compile Docs related files
               gulp watch - watch file changes and re-compile CSS files
             
-            #Importing Sass
+            Importing Sass#
             It is recommended to customize Spectre by importing Sass source files to your projects. In this way, you can keep Spectre up to date without conflicts, since Spectre code and your custom code are separate.
             
               First, create your own project and install Spectre via NPM or other package managers.
@@ -219,7 +219,7 @@
 @import "node_modules/spectre.css/src/buttons";
 @import "node_modules/spectre.css/src/forms";
 
-            #Folder structure
+            Folder structure#
             spectre/
 ├── dist/                           // Build folder
 │   ├── spectre-exp.css
@@ -262,9 +262,9 @@
 ├── package.json
 └── ...
 
-            #Variables
+            Variables#
             Spectre.css is designed with consistent design language. You can use your own variables to create your new or match existing design. All variables in _variables.scss include !default flag. You can redefine the variables to override the values.
-            #Variables - Colors
+            Variables - Colors#
             
               
                 
@@ -343,7 +343,7 @@
                 
               
             
-            #Variables - Button mixins
+            Variables - Button mixins#
             There are 2 button variant mixins in _mixins.scss to generate different color variants.
             
               @mixin button-variant($color: $primary-color);
@@ -359,11 +359,11 @@
   @include button-outline-variant($success-color);
 }
 
-            #Variables - Sizes
+            Variables - Sizes#
             The default REM (root em) size in Spectre.css is 20px.
             Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to 20px, which is relatively easy to calculate.
             Spectre uses 4px as the unit size. Sizes of components are based on the unit size.
-            #Variables - Custom prefix
+            Variables - Custom prefix#
             There is also a way to add custom prefix to all CSS classes. You can use gulp-css-prefix plugin and add a new Gulp task to enable it.
             npm install gulp-css-prefix
 
@@ -379,10 +379,10 @@ gulp.task('prefix', After you compile your version of Spectre in the /dist, run gulp prefix in the directory of Spectre.
           
           
-            #Accessibility
+            Accessibility#
           
           
-            #Browser support
+            Browser support#
             Spectre uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:
             
               Chrome LAST 4
@@ -395,7 +395,7 @@ gulp.task('prefix', Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.
           
           
-            #What's new
+            What's new#
             September 2017
             
               Off-canvas: navigation layout that the sidebar can slide in and out of the viewport NEW
diff --git a/docs/layout.html b/docs/layout.html
index 6d661c6..0c003ad 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -130,7 +130,7 @@
       
         
           
-            #Flexbox grid
+            Flexbox grid#
             
               
                 
@@ -245,7 +245,7 @@
   <div class="column col-8">col-8</div>
 </div>
 
-            #Grid offset
+            Grid offset#
             
               The Flexbox grid provides margin auto utilities to set offset. 
               There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.
@@ -303,7 +303,7 @@
   </div>
 </div>
 
-            
#Grid nesting
+            Grid nesting#
             To nest grids, add the new columns and column structure within an existing column.
             
               
@@ -335,7 +335,7 @@
 </div>
           
           
-            #Responsive
+            Responsive#
             
               
             
@@ -365,7 +365,7 @@
   </div>
 </div>
 
-            #Responsive container
+            Responsive container#
             
               The responsive layout also provides fixed-width containers.
               Use grid-xs(480px), grid-sm(600px), grid-md(840px), grid-lg(960px) or grid-xl(1280px) to the container for a fixed-width container with the specific max-width.
@@ -377,7 +377,7 @@
   </div>
 </div>
 
-            
#Responsive visibility
+            Responsive visibility#
             The responsive visibility utilities help show and hide elements on specific viewport sizes.
             
               
@@ -618,7 +618,7 @@
             Responsive Resizer
           
           
-            #Navbar
+            Navbar#
             Navbar is a layout container that appears in the header of apps and websites.
             
               
diff --git a/docs/src/_mixins.pug b/docs/src/_mixins.pug
index ccbe89e..fa08cf6 100644
--- a/docs/src/_mixins.pug
+++ b/docs/src/_mixins.pug
@@ -11,12 +11,12 @@ mixin docs-accordion(id, name, ...pages)
 mixin docs-heading(id, name)
   .container(id=id)
     h3.s-title
-      a.anchor(href='#'+id aria-hidden='true') #
       | #{name}
+      a.anchor(href='#'+id aria-hidden='true') #
     if block
       block
 
 mixin docs-subheading(id, name)
   h4.s-subtitle(id=id)
-    a.anchor(href='#'+id aria-hidden='true') #
-    | #{name}
\ No newline at end of file
+    | #{name}
+    a.anchor(href='#'+id aria-hidden='true') #
\ No newline at end of file
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index ae9c28b..fae8152 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -95,20 +95,13 @@
 
   .anchor {
     color: $primary-color-light;
-    height: 0;
-    margin-left: -2em;
-    overflow: hidden;
-    padding: 0 1em;
-    position: absolute;
-    text-align: center;
-    width: 0;
-    z-index: $zindex-1;
+    display: none;
+    margin-left: .2rem;
+    padding: 0 .2rem;
     &:focus,
     &:hover {
-      box-shadow: none;
-      height: auto;
+      display: inline;
       text-decoration: none;
-      width: 2em;
     }
   }
   
@@ -141,8 +134,7 @@
 
     &:hover {
       .anchor {
-        height: auto;
-        width: 1em;
+        display: inline;
       }
     }
 
@@ -550,13 +542,13 @@
 
   .docs-navbar {
     .btn {
-      right: 1rem;
+      right: .9rem;
     }
   }
 
   .grid-hero {
     .docs-brand {
-      left: 1rem;
+      left: .9rem;
     }
   }
 
@@ -576,10 +568,6 @@
     .docs-block {
       padding: $unit-2 $unit-h;
     }
-
-    .anchor {
-      display: none;
-    }
   }
 }
 
diff --git a/docs/utilities.html b/docs/utilities.html
index 08eb91a..cebd4c2 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -130,7 +130,7 @@
       
         
           
-            #Color utilities
+            Color utilities#
             
               
                 
@@ -143,7 +143,7 @@
               
             
             Color utilities are used for changing colors for text, link and background.
-            #Text colors
+            Text colors#
             
               
                 primary color
@@ -182,7 +182,7 @@
 <a class="text-warning" href="#">warning color</a>
 <a class="text-error" href="#">error color</a>
 
-            #Background colors
+            Background colors#
             
               
                 primary bg
@@ -203,7 +203,7 @@
 <div class="bg-error">error bg</div>
           
           
-            #Cursor utilities
+            Cursor utilities#
             Cursor utilities specify which mouse cursor to display when mouseover.
             
               
@@ -239,7 +239,7 @@
 <div class="c-auto"></div>
           
           
-            #Display utilities
+            Display utilities#
             
               
             
@@ -267,7 +267,7 @@
 <div class="text-assistive"></div>
           
           
-            #Divider
+            Divider#
             A Divider is used for separating elements.
             
               
@@ -331,7 +331,7 @@
 </div>
           
           
-            #Loading
+            Loading#
             
               Loading indicator is used for loading or updating.
               You can add the loading class to a container for loading status.
@@ -352,7 +352,7 @@
 <div class="loading loading-lg"></div>
           
           
-            #Position utilities
+            Position utilities#
             Position utilities are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.
             <!-- clear float -->
 <div class="clearfix"></div>
@@ -390,7 +390,7 @@
 <div class="py-2"></div>
           
           
-            #Shape utilities
+            Shape utilities#
             Shape utilities are used for change element shapes.
             
               
@@ -406,7 +406,7 @@
 <div class="circle"></div>
           
           
-            #Text utilities
+            Text utilities#
             Text utilities are used for text alignment, styles and overflow things.
             <!-- left-aligned text -->
 <div class="text-left"></div>
-- 
cgit v1.3.1-23-gd82d

SPECTRE

#Elements

#Typography

Headings

H1 Heading 40px

H2 Heading 32px

H3 Heading 28px

H4 Heading 24px

H5 Heading 20px

H6 Heading 16px

Paragraphs

Semantic text elements

Optimized for east asian fonts

你好, こんにちは, 안녕하세요

Fonts

Blockquote

Lists

SPECTRE

#Tables

#Buttons

Button colors

Button sizes

Button states

Button groups

#Forms

Horizontal forms

#Typography

#Headings

H1 Heading 40px

H2 Heading 32px

H3 Heading 28px

H4 Heading 24px

H5 Heading 20px

H6 Heading 16px

Form sizes

Form icons

Input types

#Paragraphs

#Semantic text elements

Input groups

Form validation styles

#Optimized for East Asian fonts

#Fonts

#Blockquote

#Lists

#Tables

Form disabled styles

#Icons experimental

Navigation icons

Action icons

Object icons

Icon sizes

#Labels

#Codes

#Media

Images

Video

#Buttons

#Forms

#Icons

#Labels

#Codes

#Media

#Folder structure

#Variables - Custom prefix

H1 Heading

H1 Heading 40px

H6 Heading 16px

#Paragraphs

#Semantic text elements

#Optimized for East Asian fonts

#Fonts

#Blockquote

#Lists

#Tables

#Buttons

#Button colors

#Button sizes

#Button states

#Button groups

Elements

Typography

Tables

Buttons

Forms

Typography

Headings

Paragraphs

Semantic text elements

Optimized for East Asian fonts

Fonts

Blockquote

Lists

Tables

Icons experimental

Labels

Codes

Media

Buttons

Forms

Icons

Labels

Codes

Media

Folder structure

Variables - Custom prefix

Paragraphs

Semantic text elements

Optimized for East Asian fonts

Fonts

Blockquote

Lists

Tables

Buttons

Button colors

Button sizes

Button states

Button groups

Forms

Horizontal forms

Form sizes

Form icons

Input types

Input groups

Form validation styles

Form disabled styles

Icons

Install from CDN

Install with NPM

Folder structure

Variables - Sizes

Labels

Codes

Codes

Code

Media

Images

Figure

Video

Typography

Typography

Headings

Tables

Tables

Buttons

Buttons

Forms

Forms

Icons

Icons

Labels

Labels

Code

Code

Media

Media

Images

Introduction

Introduction

Installation