Move Docs to Pug templates

24 files changed, 2029 insertions, 827 deletions

diff --git a/docs/dist/docs.css b/docs/dist/docs.css
index 0cff8f0..e3c1473 100644
--- a/docs/dist/docs.css
+++ b/docs/dist/docs.css
@@ -14,6 +14,10 @@
   width: 12rem;
 }
 
+.off-canvas .off-canvas-content {
+  padding: 0;
+}
+
 .docs-navbar {
   height: 3.8rem;
   position: fixed;
@@ -67,11 +71,8 @@
 .docs-content {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
-  width: calc(100vw - 12rem);
-}
-
-.docs-content.off-canvas-content {
   padding: 0 4rem;
+  width: calc(100vw - 12rem);
 }
 
 .docs-content > .container {
@@ -227,32 +228,30 @@
   opacity: .75;
 }
 
-.docs-content .code {
+.docs-content .code .hljs-tag {
   color: #667189;
 }
 
-.docs-content .code .com {
+.docs-content .code .hljs-comment {
   color: #acb3c2;
 }
 
-.docs-content .code .tag {
+.docs-content .code .hljs-title,
+.docs-content .code .hljs-class,
+.docs-content .code .hljs-string {
   color: #5755d9;
 }
 
-.docs-content .code .atn {
-  color: #667189;
+.docs-content .code .hljs-attribute,
+.docs-content .code .hljs-variable,
+.docs-content .code .hljs-keyword,
+.docs-content .code .hljs-built_in {
+  color: #d73e48;
 }
 
-.docs-content .code .atv {
-  color: #e06870;
-}
-
-.docs-content .code[data-lang="Bash"] .tag {
-  margin-right: 1em;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+.docs-content .code .hljs-value,
+.docs-content .code .hljs-hexcolor {
+  color: #667189;
 }
 
 .docs-content .panel {
diff --git a/docs/dist/docs.min.css b/docs/dist/docs.min.css
index d14fb1e..782728c 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}.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;width:calc(100vw - 12rem)}.docs-content.off-canvas-content{padding:0 4rem}.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 .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{color:#667189}.docs-content .code .com{color:#acb3c2}.docs-content .code .tag{color:#5755d9}.docs-content .code .atn{color:#667189}.docs-content .code .atv{color:#e06870}.docs-content .code[data-lang=Bash] .tag{margin-right:1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.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}.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.off-canvas-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.off-canvas-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-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 .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}.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.off-canvas-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.off-canvas-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/dist/spectre-rtl.css b/docs/dist/spectre-rtl.css
index 8bb859c..17ac9bb 100644
--- a/docs/dist/spectre-rtl.css
+++ b/docs/dist/spectre-rtl.css
@@ -1374,9 +1374,9 @@ input.disabled + .form-icon {
 }
 
 code {
-  background: #fdf4f4;
+  background: #fcf2f2;
   border-radius: .1rem;
-  color: #e06870;
+  color: #d73e48;
   font-size: 85%; 
   line-height: 1.2;
   padding: .1rem .15rem;
diff --git a/docs/dist/spectre-rtl.min.css b/docs/dist/spectre-rtl.min.css
index 071bf10..5a36451 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:#fdf4f4;border-radius:.1rem;color:#e06870;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 .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
diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
index 92799ab..111243c 100644
--- a/docs/dist/spectre.css
+++ b/docs/dist/spectre.css
@@ -1373,9 +1373,9 @@ input.disabled + .form-icon {
 }
 
 code {
-  background: #fdf4f4;
+  background: #fcf2f2;
   border-radius: .1rem;
-  color: #e06870;
+  color: #d73e48;
   font-size: 85%; 
   line-height: 1.2;
   padding: .1rem .15rem;
diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
index ad5a2c5..24307a5 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:#fdf4f4;border-radius:.1rem;color:#e06870;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){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
diff --git a/docs/getting-started.html b/docs/getting-started.html
index b861f36..97c85bc 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -1,716 +1,443 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="robots" content="index, follow">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-  <meta http-equiv="x-ua-compatible" content="ie=edge">
-  <meta name="author" content="https://github.com/picturepan2/">
-  <title>Getting started - Spectre.css CSS Framework</title>
-  <link rel="shortcut icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.ico">
-  <link rel="icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.png">
-  <link rel="stylesheet" href="dist/spectre.min.css">
-  <link rel="stylesheet" href="dist/spectre-icons.min.css">
-  <link rel="stylesheet" href="dist/spectre-exp.min.css">
-  <link rel="stylesheet" href="dist/docs.min.css">
-</head>
-<body>
-  <div class="docs-container off-canvas off-canvas-sidebar-show">
-    <div class="docs-navbar">
-      <a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar">
-        <i class="icon icon-menu"></i>
-      </a>
-      <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
-    </div>
-
-    <div id="sidebar" class="docs-sidebar off-canvas-sidebar">
-      <div class="docs-brand">
-        <a href="index.html" class="docs-logo">
-          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-          <h2>SPECTRE</h2>
-        </a>
-      </div>
-      <div class="docs-nav">
-        <div class="accordion-container">
-          <div class="accordion">
-            <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden checked>
-            <label class="accordion-header c-hand" for="docs-accordion-1">
-              Getting started
-            </label>
-            <div class="accordion-body">
-              <ul class="menu menu-nav">
-                <li class="menu-item">
-                  <a href="getting-started.html">Introduction</a>
-                </li>
-                <li class="menu-item">
-                  <a href="getting-started.html#installation">Installation</a>
-                </li>
-                <li class="menu-item">
-                  <a href="getting-started.html#custom">Custom version</a>
-                </li>
-                <li class="menu-item">
-                  <a href="getting-started.html#browsers">Browser support</a>
-                </li>
-                <li class="menu-item">
-                  <a href="getting-started.html#whatsnew">What's new</a>
-                </li>
-              </ul>
+  <head>
+    <title>Getting started - Spectre.css CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="author" content="Yan Zhu">
+    <link rel="shortcut icon" href="img/favicons/favicon.ico">
+    <link rel="icon" href="img/favicons/favicon.png">
+    <link rel="stylesheet" href="dist/spectre.min.css">
+    <link rel="stylesheet" href="dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="dist/docs.min.css">
+  </head>
+  <body>
+    <div class="docs-container off-canvas off-canvas-sidebar-show">
+      <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a><a class="btn btn-primary" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a></div>
+      <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+        <div class="docs-brand"><a class="docs-logo" href="/"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2></a></div>
+        <div class="docs-nav">
+          <div class="accordion-container">
+            <div class="accordion">
+              <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+              <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="getting-started.html#introduction">Introduction</a></li>
+                  <li class="menu-item"><a href="getting-started.html#installation">Installation</a></li>
+                  <li class="menu-item"><a href="getting-started.html#custom">Custom version</a></li>
+                  <li class="menu-item"><a href="getting-started.html#browsers">Browser support</a></li>
+                  <li class="menu-item"><a href="getting-started.html#whatsnew">What's new</a></li>
+                </ul>
+              </div>
             </div>
-          </div>
-          <div class="accordion">
-            <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden>
-            <label class="accordion-header c-hand" for="docs-accordion-2">
-              Elements
-            </label>
-            <div class="accordion-body">
-              <ul class="menu menu-nav">
-                <li class="menu-item">
-                  <a href="elements.html">Typography</a>
-                </li>
-                <li class="menu-item">
-                  <a href="elements.html#tables">Tables</a>
-                </li>
-                <li class="menu-item">
-                  <a href="elements.html#buttons">Buttons</a>
-                </li>
-                <li class="menu-item">
-                  <a href="elements.html#forms">Forms</a>
-                </li>
-                <li class="menu-item">
-                  <a href="elements.html#icons">Icons</a>
-                </li>
-                <li class="menu-item">
-                  <a href="elements.html#labels">Labels</a>
-                </li>
-                <li class="menu-item">
-                  <a href="elements.html#codes">Codes</a>
-                </li>
-                <li class="menu-item">
-                  <a href="elements.html#media">Media</a>
-                </li>
-              </ul>
+            <div class="accordion">
+              <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-elements">Elements</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="elements.html#typography">Typography</a></li>
+                  <li class="menu-item"><a href="elements.html#tables">Tables</a></li>
+                  <li class="menu-item"><a href="elements.html#buttons">Buttons</a></li>
+                  <li class="menu-item"><a href="elements.html#forms">Forms</a></li>
+                  <li class="menu-item"><a href="elements.html#icons">Icons</a></li>
+                  <li class="menu-item"><a href="elements.html#labels">Labels</a></li>
+                  <li class="menu-item"><a href="elements.html#codes">Codes</a></li>
+                  <li class="menu-item"><a href="elements.html#media">Media</a></li>
+                </ul>
+              </div>
             </div>
-          </div>
-          <div class="accordion">
-            <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden>
-            <label class="accordion-header c-hand" for="docs-accordion-3">
-              Layout
-            </label>
-            <div class="accordion-body">
-              <ul class="menu menu-nav">
-                <li class="menu-item">
-                  <a href="layout.html">Flexbox grid</a>
-                </li>
-                <li class="menu-item">
-                  <a href="layout.html#responsive">Responsive</a>
-                </li>
-                <li class="menu-item">
-                  <a href="layout.html#navbar">Navbar</a>
-                </li>
-              </ul>
+            <div class="accordion">
+              <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-layout">Layout</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="layout.html#flexbox">Flexbox grid</a></li>
+                  <li class="menu-item"><a href="layout.html#responsive">Responsive</a></li>
+                  <li class="menu-item"><a href="layout.html#navbar">Navbar</a></li>
+                </ul>
+              </div>
             </div>
-          </div>
-          <div class="accordion">
-            <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden>
-            <label class="accordion-header c-hand" for="docs-accordion-4">
-              Components
-            </label>
-            <div class="accordion-body">
-              <ul class="menu menu-nav">
-                <li class="menu-item">
-                  <a href="components.html">Accordions</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#avatars">Avatars</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#badges">Badges</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#bars">Bars</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#breadcrumbs">Breadcrumbs</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#cards">Cards</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#chips">Chips</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#empty">Empty states</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#menus">Menus</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#modals">Modals</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#navs">Navs</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#pagination">Pagination</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#panels">Panels</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#popovers">Popovers</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#steps">Steps</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#tabs">Tabs</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#tiles">Tiles</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#toasts">Toasts</a>
-                </li>
-                <li class="menu-item">
-                  <a href="components.html#tooltips">Tooltips</a>
-                </li>
-              </ul>
+            <div class="accordion">
+              <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-components">Components</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="components.html#accordions">Accordions</a></li>
+                  <li class="menu-item"><a href="components.html#avatars">Avatars</a></li>
+                  <li class="menu-item"><a href="components.html#badges">Badges</a></li>
+                  <li class="menu-item"><a href="components.html#bars">Bars</a></li>
+                  <li class="menu-item"><a href="components.html#breadcrumbs">Breadcrumbs</a></li>
+                  <li class="menu-item"><a href="components.html#cards">Cards</a></li>
+                  <li class="menu-item"><a href="components.html#chips">Chips</a></li>
+                  <li class="menu-item"><a href="components.html#empty">Empty states</a></li>
+                  <li class="menu-item"><a href="components.html#menus">Menus</a></li>
+                  <li class="menu-item"><a href="components.html#modals">Modals</a></li>
+                  <li class="menu-item"><a href="components.html#navs">Navs</a></li>
+                  <li class="menu-item"><a href="components.html#pagination">Pagination</a></li>
+                  <li class="menu-item"><a href="components.html#panels">Panels</a></li>
+                  <li class="menu-item"><a href="components.html#popovers">Popovers</a></li>
+                  <li class="menu-item"><a href="components.html#steps">Steps</a></li>
+                  <li class="menu-item"><a href="components.html#tabs">Tabs</a></li>
+                  <li class="menu-item"><a href="components.html#tiles">Tiles</a></li>
+                  <li class="menu-item"><a href="components.html#toasts">Toasts</a></li>
+                  <li class="menu-item"><a href="components.html#tooltips">Tooltips</a></li>
+                </ul>
+              </div>
             </div>
-          </div>
-          <div class="accordion">
-            <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden>
-            <label class="accordion-header c-hand" for="docs-accordion-5">
-              Utilities
-            </label>
-            <div class="accordion-body">
-              <ul class="menu menu-nav">
-                <li class="menu-item">
-                  <a href="utilities.html">Colors</a>
-                </li>
-                <li class="menu-item">
-                  <a href="utilities.html#cursors">Cursors</a>
-                </li>
-                <li class="menu-item">
-                  <a href="utilities.html#display">Display</a>
-                </li>
-                <li class="menu-item">
-                  <a href="utilities.html#divider">Divider</a>
-                </li>
-                <li class="menu-item">
-                  <a href="utilities.html#loading">Loading</a>
-                </li>
-                <li class="menu-item">
-                  <a href="utilities.html#position">Position</a>
-                </li>
-                <li class="menu-item">
-                  <a href="utilities.html#shapes">Shapes</a>
-                </li>
-                <li class="menu-item">
-                  <a href="utilities.html#text">Text</a>
-                </li>
-              </ul>
+            <div class="accordion">
+              <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="utilities.html#colors">Colors</a></li>
+                  <li class="menu-item"><a href="utilities.html#cursors">Cursors</a></li>
+                  <li class="menu-item"><a href="utilities.html#display">Display</a></li>
+                  <li class="menu-item"><a href="utilities.html#divider">Divider</a></li>
+                  <li class="menu-item"><a href="utilities.html#loading">Loading</a></li>
+                  <li class="menu-item"><a href="utilities.html#position">Position</a></li>
+                  <li class="menu-item"><a href="utilities.html#shapes">Shapes</a></li>
+                  <li class="menu-item"><a href="utilities.html#text">Text</a></li>
+                </ul>
+              </div>
             </div>
-          </div>
-          <div class="accordion">
-            <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden>
-            <label class="accordion-header c-hand" for="docs-accordion-6">
-              Experimentals
-            </label>
-            <div class="accordion-body">
-              <ul class="menu menu-nav">
-                <li class="menu-item">
-                  <a href="experimentals.html">Autocomplete</a>
-                </li>
-                <li class="menu-item">
-                  <a href="experimentals.html#calendars">Calendars</a>
-                </li>
-                <li class="menu-item">
-                  <a href="experimentals.html#carousels">Carousels</a>
-                </li>
-                <li class="menu-item">
-                  <a href="experimentals.html#comparison">Comparison sliders</a>
-                </li>
-                <li class="menu-item">
-                  <a href="experimentals.html#filters">Filters</a>
-                </li>
-                <li class="menu-item">
-                  <a href="experimentals.html#meters">Meters</a>
-                </li>
-                <li class="menu-item">
-                  <a href="experimentals.html#off-canvas">Off-canvas</a>
-                </li>
-                <li class="menu-item">
-                  <a href="experimentals.html#parallax">Parallax</a>
-                </li>
-                <li class="menu-item">
-                  <a href="experimentals.html#progress">Progress</a>
-                </li>
-                <li class="menu-item">
-                  <a href="experimentals.html#sliders">Sliders</a>
-                </li>
-                <li class="menu-item">
-                  <a href="experimentals.html#timelines">Timelines</a>
-                </li>
-              </ul>
+            <div class="accordion">
+              <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+              <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
+              <div class="accordion-body">
+                <ul class="menu menu-nav">
+                  <li class="menu-item"><a href="experimentals.html#autocomplete">Autocomplete</a></li>
+                  <li class="menu-item"><a href="experimentals.html#calendars">Calendars</a></li>
+                  <li class="menu-item"><a href="experimentals.html#carousels">Carousels</a></li>
+                  <li class="menu-item"><a href="experimentals.html#comparison">Comparison sliders</a></li>
+                  <li class="menu-item"><a href="experimentals.html#filters">Filters</a></li>
+                  <li class="menu-item"><a href="experimentals.html#meters">Meters</a></li>
+                  <li class="menu-item"><a href="experimentals.html#off-canvas">Off-canvas</a></li>
+                  <li class="menu-item"><a href="experimentals.html#parallax">Parallax</a></li>
+                  <li class="menu-item"><a href="experimentals.html#progress">Progress</a></li>
+                  <li class="menu-item"><a href="experimentals.html#sliders">Sliders</a></li>
+                  <li class="menu-item"><a href="experimentals.html#timelines">Timelines</a></li>
+                </ul>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
-
-    <a class="off-canvas-overlay" href="#close"></a>
-
-    <div id="content" class="docs-content off-canvas-content">
-      <div id="introduction" class="container">
-        <h3 class="s-title"><a href="#introduction" class="anchor" aria-hidden="true">#</a>Introduction</h3>
-        <div class="docs-note">
-          <p><strong>Spectre.css</strong> is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
-          <p>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.</p>
-        </div>
-      </div>
-
-      <div class="container">
-        <div class="docs-ad">
-          <div class="hide-md">
-            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
-            <!-- GitHub-lg -->
-            <ins class="adsbygoogle"
-                  style="display:inline-block;width:728px;height:90px"
-                  data-ad-client="ca-pub-2225124559530218"
-                  data-ad-slot="9894180784"></ins>
-            <script>
-            (adsbygoogle = window.adsbygoogle || []).push({});
-            </script>
+      </div><a class="off-canvas-overlay" href="#close"></a>
+      <div class="off-canvas-content">
+        <div class="docs-content" id="content">
+          <div class="container">
+            <h3 class="s-title" id="introduction"><a class="anchor" href="#introduction" aria-hidden="true">#</a>Introduction</h3>
+            <p> <strong>Spectre.css </strong>is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
+            <p>
+               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.</p>
           </div>
-          <div class="show-md">
-            <!-- GitHub-sm -->
-            <ins class="adsbygoogle"
-                  style="display:inline-block;width:300px;height:250px"
-                  data-ad-client="ca-pub-2225124559530218"
-                  data-ad-slot="9278881734"></ins>
-            <script>
-            (adsbygoogle = window.adsbygoogle || []).push({});
-            </script>
-          </div>
-        </div>
-      </div>
-
-      <div id="installation" class="container">
-        <h3 class="s-title"><a href="#installation" class="anchor" aria-hidden="true">#</a>Installation</h3>
-        <div class="docs-note">
-          <p>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.</p>
-        </div>
-        <div class="docs-note">
-          <p class="h5">Install manually</p>
-          <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/releases" target="_blank">Spectre CSS file</a> (core ~10KB min+gzip):</p>
-          <p><a href="https://github.com/picturepan2/spectre/releases" target="_blank" class="btn btn-primary">Download Spectre.css</a></p>
-          <p>Include <code>spectre.css</code> located in <strong>/dist</strong> in your website or Web app &lt;head&gt;. Also, you can add <code>spectre-icons.css</code> and <code>spectre-exp.css</code> accordingly.</p>
-        </div>
-
-<!-- install manually -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;spectre.min.css&quot;</span>&gt;
-&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;spectre-exp.min.css&quot;</span>&gt;
-&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;spectre-icons.min.css&quot;</span>&gt;
-</code></pre>
-
-        <div class="docs-note">
-          <p class="h5">Install from CDN</p>
-          <p>Alternatively, you can use the <a href="https://unpkg.com/" target="_blank">unpkg</a> or <a href="https://cdnjs.com/libraries/spectre.css" target="_blank">cdnjs</a> CDN to load compiled Spectre.css.</p>
-        </div>
-
-<!-- install from CDN -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;https://unpkg.com/spectre.css/dist/spectre.min.css&quot;</span>&gt;
-&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;https://unpkg.com/spectre.css/dist/spectre-exp.min.css&quot;</span>&gt;
-&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;https://unpkg.com/spectre.css/dist/spectre-icons.min.css&quot;</span>&gt;
+          <div class="container">
+            <h3 class="s-title" id="installation"><a class="anchor" href="#installation" aria-hidden="true">#</a>Installation</h3>
+            <p>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.</p>
+            <h4 class="s-subtitle" id="install-manually"><a class="anchor" href="#install-manually" aria-hidden="true">#</a>Install manually</h4>
+            <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/releases" target="_blank">Spectre CSS file</a> (core ~10KB min+gzip):</p>
+            <p><a class="btn btn-primary" href="https://github.com/picturepan2/spectre/releases" target="_blank">Download Spectre.css</a></p>
+            <p>Include <code>spectre.css</code> located in <strong>/dist</strong> in your website or Web app <head>. Also, you can add <code>spectre-icons.css</code> and <code>spectre-exp.css</code> accordingly.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"spectre.min.css"</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"spectre-exp.min.css"</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"spectre-icons.min.css"</span>&gt;</span>
 </code></pre>
-
-        <div class="docs-note">
-          <p class="h5">Install with NPM</p>
-        </div>
-
-<!-- install with npm -->
-<pre class="code" data-lang="Bash"><code><span class="tag">$</span>npm install <span class="atv">spectre.css</span> --save
+            <h4 class="s-subtitle" id="install-cdn"><a class="anchor" href="#install-cdn" aria-hidden="true">#</a>Install from CDN</h4>
+            <p>Alternatively, you can use the <a href="https://unpkg.com/" target="_blank">unpkg</a> or <a href="https://cdnjs.com/libraries/spectre.css" target="_blank">cdnjs</a> CDN to load compiled Spectre.css.</p>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"https://unpkg.com/spectre.css/dist/spectre.min.css"</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"</span>&gt;</span>
 </code></pre>
-
-        <div class="docs-note">
-          <p class="h5">Install with Yarn</p>
-        </div>
-
-<!-- install with yarn -->
-<pre class="code" data-lang="Bash"><code><span class="tag">$</span>yarn add <span class="atv">spectre.css</span>
+            <h4 class="s-subtitle" id="install-npm"><a class="anchor" href="#install-npm" aria-hidden="true">#</a>Install with NPM</h4>
+            <pre class="code" data-lang="Bash"><code>npm install spectre.css --save
 </code></pre>
-
-        <div class="docs-note">
-          <p class="h5">Install with Bower</p>
-        </div>
-
-<!-- install with bower -->
-<pre class="code" data-lang="Bash"><code><span class="tag">$</span>bower install <span class="atv">spectre.css</span> --save
+            <h4 class="s-subtitle" id="install-yarn"><a class="anchor" href="#install-yarn" aria-hidden="true">#</a>Install with Yarn</h4>
+            <pre class="code" data-lang="Bash"><code>yarn add spectre.css
 </code></pre>
+            <h4 class="s-subtitle" id="install-bower"><a class="anchor" href="#install-bower" aria-hidden="true">#</a>Install from Bower</h4>
+            <pre class="code" data-lang="Bash"><code>bower install spectre.css --save</code></pre>
+          </div>
+          <div class="container">
+            <h3 class="s-title" id="custom"><a class="anchor" href="#custom" aria-hidden="true">#</a>Custom version</h3>
+            <p>You can customize your version of Spectre.css by editing Sass files in <code>/src</code> directory or removing unneeded components from <code>.scss</code> source files.</p>
+            <p><a class="btn btn-primary" href="https://github.com/picturepan2/spectre/" target="_blank">Sass Source Code</a></p>
+            <p>If you are looking for Less version of Spectre.css, please switch to <code>Less</code> branch.</p>
+            <p><a class="btn" href="https://github.com/picturepan2/spectre/tree/less" target="_blank">Less Branch</a></p>
+            <h4 class="s-subtitle" id="compiling"><a class="anchor" href="#compiling" aria-hidden="true">#</a>Compiling CSS</h4>
+            <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. Firstly you need to <a href="https://www.npmjs.com/get-npm" target="_blank">install NPM</a>, which is used to manage Gulp and other dependencies.</p>
+            <p>Then, you can build the CSS file from the command line:</p>
+            <ol>
+              <li>Navigate to the root directory of Spectre.</li>
+              <li>Run <code>npm install</code>. NPM will install all dev dependencies as listed in package.json.</li>
+              <li>When completed, run <code>gulp build</code> task to compile Sass to CSS and minify files.</li>
+              <li>You can find compiled CSS files in <code>/dist</code> directory.</li>
+            </ol>
+            <p>All available Gulp tasks:</p>
+            <ul>
+              <li><code>gulp build</code> - compile Sass to CSS and minify files (default)</li>
+              <li><code>gulp docs</code> - compile Docs related files</li>
+              <li><code>gulp watch</code> - watch file changes and re-compile CSS files</li>
+            </ul>
+            <h4 class="s-subtitle" id="importing"><a class="anchor" href="#importing" aria-hidden="true">#</a>Importing Sass</h4>
+            <p>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.</p>
+            <ul>
+              <li>First, create your own project and install Spectre via <a href="#installation">NPM or other package managers</a>.</li>
+              <li>Then create your <code>project-name.scss</code> file in the root folder. You can use <code>project-name.scss</code> to define your variables.</li>
+              <li>Compile the Sass file to CSS to get the custom version of Spectre.</li>
+            </ul>
+            <!-- importing-->
+            <pre class="code" data-lang="Sass"><code><span class="hljs-comment">// Example of project-name.scss</span>
+<span class="hljs-comment">// Define variables to override default ones</span>
+<span class="hljs-variable">$primary-color</span><span class="hljs-value">: <span class="hljs-hexcolor">#2e5bec</span>;</span>
+<span class="hljs-variable">$dark-color</span><span class="hljs-value">: <span class="hljs-hexcolor">#3e396b</span>;</span>
 
-      </div>
-
-      <div class="container">
-        <div class="docs-ad docs-ad-sidebar">
-          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=picturepan2githubio" id="_carbonads_js"></script>
-        </div>
-      </div>
-
-      <div id="custom" class="container">
-        <h3 class="s-title"><a href="#custom" class="anchor" aria-hidden="true">#</a>Custom version</h3>
-        <div class="docs-note">
-          <p>You can customize your version of Spectre.css by editing Sass files in <code>/src</code> directory or removing unneeded components from <code>.scss</code> source files.</p>
-          <p><a href="https://github.com/picturepan2/spectre/" target="_blank" class="btn btn-primary">Sass Source Code</a></p>
-          <p>If you are looking for Less version of Spectre.css, please switch to <code>Less</code> branch.</p>
-          <p><a href="https://github.com/picturepan2/spectre/tree/less" target="_blank" class="btn">Less Branch</a></p>
-        </div>
-        <h4 id="compiling" class="s-subtitle">Compiling CSS</h4>
-        <div class="docs-note">
-          <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. Firstly you need to <a href="https://www.npmjs.com/get-npm" target="_blank">install NPM</a>, which is used to manage Gulp and other dependencies.</p>
-          <p>Then, you can build the CSS file from the command line:</p>
-          <ol>
-            <li>Navigate to the root directory of Spectre.</li>
-            <li>Run <code>npm install</code>. NPM will install all dev dependencies as listed in package.json.</li>
-            <li>When completed, run <code>gulp build</code> task to compile Sass to CSS and minify files.</li>
-            <li>You can find compiled CSS files in <code>/dist</code> directory.</li>
-          </ol>
-          <p>All available Gulp tasks:</p>
-          <ul>
-            <li><code>gulp build</code> - compile Sass to CSS and minify files (default)</li>
-            <li><code>gulp docs</code> - compile Docs related files</li>
-            <li><code>gulp watch</code> - watch file changes and re-compile CSS files</li>
-          </ul>
-        </div>
-        <h4 id="importing" class="s-subtitle">Importing Sass</h4>
-        <div class="docs-note">
-          <p>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.</p>
-          <ul>
-            <li>First, create your own project and install Spectre via <a href="#installation">NPM or other package managers</a>.</li>
-            <li>Then create your <code>project-name.scss</code> file in the root folder. You can use <code>project-name.scss</code> to define your variables.</li>
-            <li>Compile the Sass file to CSS to get the custom version of Spectre.</li>
-          </ul>
-
-<!-- importing -->
-<pre class="code" data-lang="SASS"><code><span class="com">// Example of project-name.scss</span>
-<span class="com">// Define variables to override default ones</span>
-<span class="tag">$primary-color</span>: <span class="atn"></span>#2e5bec</span>;
-<span class="tag">$dark-color</span>: <span class="atn"></span>#3e396b</span>;
-
-<span class="com">// Import full Spectre source code</span>
-<span class="tag">@import</span> &quot;node_modules/spectre.css/src/spectre&quot;;
+<span class="hljs-comment">// Import full Spectre source code</span>
+<span class="hljs-at_rule">@<span class="hljs-keyword">import</span> <span class="hljs-string">"node_modules/spectre.css/src/spectre"</span>;</span>
 </code></pre>
+            <p>Alternatively, you can create custom <code>_variables.scss</code> and import it to <code>project-name.scss</code>.</p>
+            <!-- custom variables-->
+            <pre class="code" data-lang="Sass"><code><span class="hljs-comment">// Example of project-name.scss</span>
+<span class="hljs-at_rule">@<span class="hljs-keyword">import</span> <span class="hljs-string">"variables"</span>;</span>
 
-          <p>Alternatively, you can create custom <code>_variables.scss</code> and import it to <code>project-name.scss</code>. </p>
-
-<!-- importing -->
-<pre class="code" data-lang="SASS"><code><span class="com">// Example of project-name.scss</span>
-<span class="tag">@import</span> &quot;variables&quot;;
-
-<span class="com">// Import only the needed components</span>
-<span class="tag">@import</span> &quot;node_modules/spectre.css/src/buttons&quot;;
-<span class="tag">@import</span> &quot;node_modules/spectre.css/src/forms&quot;;
+<span class="hljs-comment">// Import only the needed components</span>
+<span class="hljs-at_rule">@<span class="hljs-keyword">import</span> <span class="hljs-string">"node_modules/spectre.css/src/buttons"</span>;</span>
+<span class="hljs-at_rule">@<span class="hljs-keyword">import</span> <span class="hljs-string">"node_modules/spectre.css/src/forms"</span>;</span>
 </code></pre>
-
-        </div>
-
-        <h4 id="folders" class="s-subtitle">Folder structure</h4>
-
-<!-- folder structure -->
-<pre class="code"><code>spectre/
-├── dist/                           <span class="com">// Build folder</span>
-│   ├── spectre-exp.css
-│   ├── spectre-exp.min.css
+            <h4 class="s-subtitle" id="folders"><a class="anchor" href="#folders" aria-hidden="true">#</a>Folder structure</h4>
+            <!-- folder structure-->
+            <pre class="code"><code>spectre/
+├── <span class="hljs-built_in">dist</span>/                           <span class="hljs-comment">// Build folder</span>
+│   ├── spectre-<span class="hljs-built_in">exp</span>.css
+│   ├── spectre-<span class="hljs-built_in">exp</span>.<span class="hljs-built_in">min</span>.css
 │   ├── spectre-icons.css
-│   ├── spectre-icons.min.css
+│   ├── spectre-icons.<span class="hljs-built_in">min</span>.css
 │   ├── spectre.css
-│   └── spectre.min.css
+│   └── spectre.<span class="hljs-built_in">min</span>.css
 │
 ├── docs/
-│   ├── dist/                       <span class="com">// Pre-built CSS folder</span>
-│   │   ├── spectre-exp.css
-│   │   ├── spectre-exp.min.css
+│   ├── <span class="hljs-built_in">dist</span>/                       <span class="hljs-comment">// Pre-built CSS folder</span>
+│   │   ├── spectre-<span class="hljs-built_in">exp</span>.css
+│   │   ├── spectre-<span class="hljs-built_in">exp</span>.<span class="hljs-built_in">min</span>.css
 │   │   ├── spectre-icons.css
-│   │   ├── spectre-icons.min.css
+│   │   ├── spectre-icons.<span class="hljs-built_in">min</span>.css
 │   │   ├── spectre.css
-│   │   └── spectre.min.css
-|   ├── css/                        <span class="com">// Docs CSS file</span>
+│   │   └── spectre.<span class="hljs-built_in">min</span>.css
+|   ├── css/                        <span class="hljs-comment">// Docs CSS files</span>
 │   │   └── docs.css
 |   ├── src/
-│   │   └── docs.scss
-│   ├── examples/                   <span class="com">// Example tempalte</span>
+│   │   ├── scss                    <span class="hljs-comment">// Docs Sass files</span>
+│   │   │   └── docs.scss
+│   │   ├── index.pug               <span class="hljs-comment">// Docs Pug files</span>
+│   │   └── ...
+│   ├── examples/                   <span class="hljs-comment">// Example tempalte</span>
 │   │   └── starter.html
 │   ├── ../
 │   ├── index.html
 │   └── ...
 │
-├── src/                            <span class="com">// Source Sass files</span>
+├── src/                            <span class="hljs-comment">// Source Sass files</span>
 │   ├── spectre.scss
 │   ├── spectre-icons.scss
-│   ├── spectre-exp.scss
+│   ├── spectre-<span class="hljs-built_in">exp</span>.scss
 │   ├── _mixins.scss
 │   ├── _variables.scss
 │   └── ...
 │
 ├── gulpfile.js
-├── package.json
+├── <span class="hljs-keyword">package</span>.json
 └── ...
 </code></pre>
-
-        <h4 id="variables" class="s-subtitle"><a href="#variables" class="anchor" aria-hidden="true">#</a>Variables</h4>
-        <div class="docs-note">
-          <p>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 <code>_variables.scss</code> include <code>!default</code> flag. You can redefine the variables to override the values.</p>
-        </div>
-        <h5 id="variables-colors" class="s-subtitle">Colors</h5>
-        <div class="columns">
-          <div class="column col-3 col-md-6">
-            <div class="docs-color" style="background:#5755d9;color:#fff;">
-              <div class="color-title">#5755d9</div>
-              <div class="color-subtitle">Primary</div>
-            </div>
-          </div>
-          <div class="column col-3 col-md-6">
-            <div class="docs-color" style="background:#f1f1fc;color:#5755d9;">
-              <div class="color-title">#f1f1fc</div>
-              <div class="color-subtitle">Secondary</div>
-            </div>
-          </div>
-        </div>
-        <div class="columns">
-          <div class="column col-3 col-md-6">
-            <div class="docs-color" style="background:#32b643;color:#fff;">
-              <div class="color-title">#32b643</div>
-              <div class="color-subtitle">Success</div>
-            </div>
-          </div>
-          <div class="column col-3 col-md-6">
-            <div class="docs-color" style="background:#ffb700;color:#fff;">
-              <div class="color-title">#ffb700</div>
-              <div class="color-subtitle">Warning</div>
-            </div>
-          </div>
-          <div class="column col-3 col-md-6">
-            <div class="docs-color" style="background:#e85600;color:#fff;">
-              <div class="color-title">#e85600</div>
-              <div class="color-subtitle">Error</div>
-            </div>
-          </div>
-        </div>
-        <div class="columns">
-          <div class="column col-3 col-md-6">
-            <div class="docs-color" style="background:#454d5d;color:#fff;">
-              <div class="color-title">#454d5d</div>
-              <div class="color-subtitle">Dark</div>
+            <h4 class="s-subtitle" id="variables"><a class="anchor" href="#variables" aria-hidden="true">#</a>Variables</h4>
+            <p>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 <code>_variables.scss</code> include <code>!default</code> flag. You can redefine the variables to override the values.</p>
+            <h4 class="s-subtitle" id="variables-colors"><a class="anchor" href="#variables-colors" aria-hidden="true">#</a>Variables - Colors</h4>
+            <div class="columns">
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#5755d9;color:#fff;">
+                  <div class="color-title">#5755d9</div>
+                  <div class="color-subtitle">Primary</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#f1f1fc;color:#5755d9;">
+                  <div class="color-title">#f1f1fc</div>
+                  <div class="color-subtitle">Secondary</div>
+                </div>
+              </div>
             </div>
-          </div>
-          <div class="column col-3 col-md-6">
-            <div class="docs-color" style="background:#727e96;color:#fff;">
-              <div class="color-title">#727e96</div>
-              <div class="color-subtitle">Gray dark</div>
-            </div>
-          </div>
-          <div class="column col-3 col-md-6">
-            <div class="docs-color" style="background:#acb3c2;color:#fff;">
-              <div class="color-title">#acb3c2</div>
-              <div class="color-subtitle">Gray</div>
+            <div class="columns">
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#32b643;color:#fff;">
+                  <div class="color-title">#32b643</div>
+                  <div class="color-subtitle">Success</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#ffb700;color:#fff;">
+                  <div class="color-title">#ffb700</div>
+                  <div class="color-subtitle">Warning</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#e85600;color:#fff;">
+                  <div class="color-title">#e85600</div>
+                  <div class="color-subtitle">Error</div>
+                </div>
+              </div>
             </div>
-          </div>
-          <div class="column col-3 col-md-6">
-            <div class="docs-color" style="background:#e7e9ed;color:#727e96;">
-              <div class="color-title">#e7e9ed</div>
-              <div class="color-subtitle">Gray light</div>
+            <div class="columns">
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#454d5d;color:#fff;">
+                  <div class="color-title">#454d5d</div>
+                  <div class="color-subtitle">Dark</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#727e96;color:#fff;">
+                  <div class="color-title">#727e96</div>
+                  <div class="color-subtitle">Gray dark</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#acb3c2;color:#fff;">
+                  <div class="color-title">#acb3c2</div>
+                  <div class="color-subtitle">Gray</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#e7e9ed;color:#727e96;">
+                  <div class="color-title">#e7e9ed</div>
+                  <div class="color-subtitle">Gray light</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#f0f1f4;color:#727e96;">
+                  <div class="color-title">#f0f1f4</div>
+                  <div class="color-subtitle">Border</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#f8f9fa;color:#727e96;">
+                  <div class="color-title">#f8f9fa</div>
+                  <div class="color-subtitle">Background</div>
+                </div>
+              </div>
+              <div class="column col-3 col-md-6">
+                <div class="docs-color" style="background:#fff;color:#727e96;">
+                  <div class="color-title">#fff</div>
+                  <div class="color-subtitle">Light</div>
+                </div>
+              </div>
             </div>
-          </div>
-          <div class="column col-3 col-md-6">
-            <div class="docs-color" style="background:#f0f1f4;color:#727e96;">
-              <div class="color-title">#f0f1f4</div>
-              <div class="color-subtitle">Border</div>
-            </div>
-          </div>
-          <div class="column col-3 col-md-6">
-            <div class="docs-color" style="background:#f8f9fa;color:#727e96;">
-              <div class="color-title">#f8f9fa</div>
-              <div class="color-subtitle">Background</div>
-            </div>
-          </div>
-          <div class="column col-3 col-md-6">
-            <div class="docs-color" style="background:#fff;color:#727e96;">
-              <div class="color-title">#fff</div>
-              <div class="color-subtitle">Light</div>
-            </div>
-          </div>
-        </div>
-
-        <h5 id="variables-buttons" class="s-subtitle">Buttons</h5>
-        <div class="docs-note">
-          <p>There are 2 button variant mixins in <code>_mixins.scss</code> to generate different color variants. </p>
-          <ul>
-            <li>@mixin button-variant(<code>$color</code>: $primary-color);</li>
-            <li>@mixin button-outline-variant(<code>$color</code>: $primary-color);</li>
-          </ul>
-
-<!-- button variables -->
-<pre class="code" data-lang="SASS"><code><span class="com">&lt;!-- filled button with the success color --&gt;</span>
-<span class="tag">.btn-success</span> {
-  <span class="tag">@include</span> button-variant(<span class="atv">$success-color</span>);
+            <h4 class="s-subtitle" id="variables-buttons"><a class="anchor" href="#variables-buttons" aria-hidden="true">#</a>Variables - Button mixins</h4>
+            <p>There are 2 button variant mixins in <code>_mixins.scss</code> to generate different color variants.</p>
+            <ul>
+              <li>@mixin button-variant(<code>$color</code>: $primary-color);</li>
+              <li>@mixin button-outline-variant(<code>$color</code>: $primary-color);</li>
+            </ul>
+            <!-- button mixins-->
+            <pre class="code" data-lang="Sass"><code>&lt;!-- filled <span class="hljs-tag">button</span> with the success <span class="hljs-attribute">color</span> --&gt;
+<span class="hljs-class">.btn-success</span> {
+  <span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> button-variant</span>(<span class="hljs-variable">$success-color</span>);</span>
 }
 
-<span class="com">&lt;!-- outlined button with the success color --&gt;</span>
-<span class="tag">.btn-outline-success</span> {
-  <span class="tag">@include</span> button-outline-variant(<span class="atv">$success-color</span>);
+&lt;!-- outlined <span class="hljs-tag">button</span> with the success <span class="hljs-attribute">color</span> --&gt;
+<span class="hljs-class">.btn-outline-success</span> {
+  <span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> button-outline-variant</span>(<span class="hljs-variable">$success-color</span>);</span>
 }
 </code></pre>
-
-        </div>
-        
-        <h5 id="variables-sizes" class="s-subtitle">Sizes</h5>
-        <div class="docs-note">
-          <p>The default REM (root em) size in Spectre.css is <code>20px</code>. </p>
-          <p>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 <code>20px</code>, which is relatively easy to calculate. </p>
-          <p>Spectre uses <code>4px</code> as the unit size. Sizes of components are based on the unit size. </p>
-        </div>
-        
-        <h5 id="variables-custom-prefix" class="s-subtitle">Custom prefix</h5>
-        <div class="docs-note">
-          <p>There is also a way to add custom prefix to all CSS classes. You can use <a href="https://www.npmjs.com/package/gulp-css-prefix" target="_blank">gulp-css-prefix</a> plugin and add a new Gulp task to enable it. </p>
-        </div>
-
-<!-- custom prefix -->
-<pre class="code"><code><span class="tag">$</span> npm install <span class="atv">gulp-css-prefix</span>
+            <h4 class="s-subtitle" id="variables-sizes"><a class="anchor" href="#variables-sizes" aria-hidden="true">#</a>Variables - Sizes</h4>
+            <p>The default REM (root em) size in Spectre.css is <code>20px</code>.</p>
+            <p>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 <code>20px</code>, which is relatively easy to calculate.</p>
+            <p>Spectre uses <code>4px</code> as the unit size. Sizes of components are based on the unit size.</p>
+            <h4 class="s-subtitle" id="variables-custom-prefix"><a class="anchor" href="#variables-custom-prefix" aria-hidden="true">#</a>Variables - Custom prefix</h4>
+            <p>There is also a way to add custom prefix to all CSS classes. You can use <a href="https://www.npmjs.com/package/gulp-css-prefix" target="_blank">gulp-css-prefix</a> plugin and add a new Gulp task to enable it.</p>
+            <!-- custom prefix-->
+            <pre class="code" data-lang="Bash"><code>npm install gulp-css-prefix
 </code></pre>
+            <p>To add <code>spectre-</code> to all classes, you can add the Gulp task to <code>gulpfile.js</code> file.</p>
+            <!-- custom prefix-->
+            <pre class="code"><code><span class="hljs-keyword">var</span> cssPrefix = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-css-prefix'</span>);
 
-        <div class="docs-note">
-          <p>To add <code>spectre-</code> to all classes, you can add the Gulp task to <code>gulpfile.js</code> file.</p>
-        </div>
-
-<!-- custom prefix -->
-<pre class="code"><code>var cssPrefix = require('<span class="atv">gulp-css-prefix</span>');
-  
-gulp.task('prefix', function() {
-  gulp.src('./dist/*.css')
-      .pipe(cssPrefix('<span class="atv">spectre-</span>'))
-      .pipe(gulp.dest('./dist'))
+gulp.task(<span class="hljs-string">'prefix'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
+  gulp.src(<span class="hljs-string">'./dist/*.css'</span>)
+      .pipe(cssPrefix(<span class="hljs-string">'spectre-'</span>))
+      .pipe(gulp.dest(<span class="hljs-string">'./dist'</span>))
 });
 </code></pre>
-
-        <div class="docs-note">
-          <p>After you compile your version of Spectre in the /dist, run <code>gulp prefix</code> in the directory of Spectre.</p>
-        </div>
-      </div>
-
-      <div id="accessibility" class="container">
-        <h3 class="s-title"><a href="#accessibility" class="anchor" aria-hidden="true">#</a>Accessibility <small class="label">coming soon</small></h3>
-      </div>
-
-      <div id="browsers" class="container">
-        <h3 class="s-title"><a href="#browsers" class="anchor" aria-hidden="true">#</a>Browser support</h3>
-        <div class="docs-note">
-          <p>Spectre uses <a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> to make most styles compatible with earlier browsers and <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:</p>
-          <ul>
-            <li>Chrome <small class="label label-success">LAST 4</small></li>
-            <li>Microsoft Edge <small class="label label-success">LAST 4</small></li>
-            <li>Firefox <small class="label label-success text-uppercase">Extended Support Release</small></li>
-            <li>Safari <small class="label label-success">LAST 4</small></li>
-            <li>Opera <small class="label label-success">LAST 4</small></li>
-            <li>Internet Explorer 10+</li>
-          </ul>
-          <p>Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.</p>
-        </div>
-      </div>
-
-      <div id="whatsnew" class="container">
-        <h3 class="s-title"><a href="#whatsnew" class="anchor" aria-hidden="true">#</a>What's new</h3>
-        <div class="docs-note">
-          <p><strong>September 2017</strong></p>
-          <ul>
-            <li>
-              <a href="experimentals.html#off-canvas">Off-canvas</a>: navigation layout that the sidebar can slide in and out of the viewport <small class="label label-primary">NEW</small>
-            </li>
-          </ul>
-          <p><strong>August 2017</strong></p>
-          <ul>
-            <li>
-              <a href="getting-started.html">Switch to Sass</a> <small class="label label-primary">NEW</small>
-            </li>
-            <li>
-              <a href="getting-started.html">New Docs Experience</a> <small class="label label-primary">NEW</small>
-            </li>
-          </ul>
-          <p><strong>April 2017</strong></p>
-          <ul>
-            <li>
-              <a href="components.html#accordions">Accordions</a>: used to toggle sections of content 
-            </li>
-            <li>
-              <a href="experimentals.html#filters">Filters</a>: CSS only content filters 
-            </li>
-            <li>
-              <a href="experimentals.html#comparison">Comparison Sliders</a>: sliders for comparing two images
-            </li>
-            <li>
-              <a href="experimentals.html#timelines">Timelines</a>: ordered sequences of activities
-            </li>
-          </ul>
-          <p><strong>March 2017</strong></p>
-          <ul>
-            <li>
-              <a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons
-            </li>
-            <li>
-              <a href="components.html#popovers">Popovers</a>: small overlay content containers
-            </li>
-            <li>
-              <a href="layout.html#panels">Panels</a>: flexible view container layout with auto-expand content section
-            </li>
-            <li>
-              <a href="experimentals.html#carousels">Carousels</a>: slideshows for cycling images
-            </li>
-            <li>
-              <a href="experimentals.html#calendars">Calendars</a>: date or date range picker and events display
-            </li>
-          </ul>
-          <p><strong>February 2017</strong></p>
-          <ul>
-            <li>New Documents experience</li>
-            <li>
-              <a href="components.html#bars">Bars</a>: represent the progress of a task or the value within the known range
-            </li>
-            <li>
-              <a href="components.html#steps">Steps</a>: progress indicators of a sequence of task steps
-            </li>
-            <li>
-              <a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks
-            </li>
-            <li>
-              <a href="experimentals.html">Experimentals</a>: experimental elements and features
-            </li>
-            <li>
-              <a href="experimentals.html#meters">Meters</a>, <a href="experimentals.html#parallax">Parallax</a>, <a href="experimentals.html#progress">Progress</a> and <a href="experimentals.html#sliders">Sliders</a>
-            </li>
-          </ul>
-          <p><strong>March 2016</strong></p>
-          <ul>
-            <li>Initial commit</li>
-          </ul>
-          <p><a href="https://github.com/picturepan2/spectre/releases" target="_blank" class="btn btn-primary">Releases</a></p>
+            <p>After you compile your version of Spectre in the /dist, run <code>gulp prefix</code> in the directory of Spectre.</p>
+          </div>
+          <div class="container">
+            <h3 class="s-title" id="accessibility"><a class="anchor" href="#accessibility" aria-hidden="true">#</a>Accessibility</h3>
+          </div>
+          <div class="container">
+            <h3 class="s-title" id="browers"><a class="anchor" href="#browers" aria-hidden="true">#</a>Browser support</h3>
+            <p>Spectre uses <a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> to make most styles compatible with earlier browsers and <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:</p>
+            <ul>
+              <li>Chrome <small class="label label-success">LAST 4</small></li>
+              <li>Microsoft Edge <small class="label label-success">LAST 4</small></li>
+              <li>Firefox <small class="label label-success text-uppercase">Extended Support Release</small></li>
+              <li>Safari <small class="label label-success">LAST 4</small></li>
+              <li>Opera <small class="label label-success">LAST 4</small></li>
+              <li>Internet Explorer 10+</li>
+            </ul>
+            <p>Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.</p>
+          </div>
+          <div class="container">
+            <h3 class="s-title" id="whatsnew"><a class="anchor" href="#whatsnew" aria-hidden="true">#</a>What's new</h3>
+            <p><strong>September 2017</strong></p>
+            <ul>
+              <li><a href="experimentals.html#off-canvas">Off-canvas</a>: navigation layout that the sidebar can slide in and out of the viewport <small class="label label-primary">NEW</small></li>
+            </ul>
+            <p><strong>August 2017</strong></p>
+            <ul>
+              <li><a href="getting-started.html">Switch to Sass </a><small class="label label-primary">NEW</small></li>
+              <li><a href="getting-started.html">New Docs Experience </a><small class="label label-primary">NEW</small></li>
+            </ul>
+            <p><strong>April 2017</strong></p>
+            <ul>
+              <li><a href="components.html#accordions">Accordions</a>: used to toggle sections of content</li>
+              <li><a href="experimentals.html#filters">Filters</a>: CSS only content filters</li>
+              <li><a href="experimentals.html#comparison">Comparison Sliders</a>: sliders for comparing two images</li>
+              <li><a href="experimentals.html#timelines">Timelines</a>: ordered sequences of activities</li>
+            </ul>
+            <p><strong>March 2017</strong></p>
+            <ul>
+              <li><a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons</li>
+              <li><a href="components.html#popovers">Popovers</a>: small overlay content containers</li>
+              <li><a href="layout.html#panels">Panels</a>: flexible view container layout with auto-expand content section</li>
+              <li><a href="experimentals.html#carousels">Carousels</a>: slideshows for cycling images</li>
+              <li><a href="experimentals.html#calendars">Calendars</a>: date or date range picker and events display</li>
+            </ul>
+            <p><strong>February 2017</strong></p>
+            <ul>
+              <li>New Documents experience</li>
+              <li><a href="components.html#bars">Bars</a>: represent the progress of a task or the value within the known range</li>
+              <li><a href="components.html#steps">Steps</a>: progress indicators of a sequence of task steps</li>
+              <li><a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks</li>
+              <li><a href="experimentals.html">Experimentals</a>: experimental elements and features</li>
+              <li><a href="experimentals.html#meters">Meters</a>, <a href="experimentals.html#parallax">Parallax</a>, <a href="experimentals.html#progress">Progress</a> and <a href="experimentals.html#sliders">Sliders</a></li>
+            </ul>
+            <p><strong>March 2016</strong></p>
+            <ul>
+              <li>Initial commit</li>
+            </ul>
+            <p><a class="btn btn-primary" href="https://github.com/picturepan2/spectre/releases" target="_blank">Releases</a></p>
+          </div>
         </div>
       </div>
-
-      <footer class="docs-footer">
-        <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
-        <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
-      </footer>
-
     </div>
-  </div>
-
-  <script>
+    <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-                  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-              m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
+      
       ga('create', 'UA-2702768-8', 'auto');
       ga('send', 'pageview');
-  </script>
-</body>
-</html>
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/docs/gettings.html b/docs/gettings.html
new file mode 100644
index 0000000..b861f36
--- /dev/null
+++ b/docs/gettings.html
@@ -0,0 +1,716 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="robots" content="index, follow">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="author" content="https://github.com/picturepan2/">
+  <title>Getting started - Spectre.css CSS Framework</title>
+  <link rel="shortcut icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.ico">
+  <link rel="icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.png">
+  <link rel="stylesheet" href="dist/spectre.min.css">
+  <link rel="stylesheet" href="dist/spectre-icons.min.css">
+  <link rel="stylesheet" href="dist/spectre-exp.min.css">
+  <link rel="stylesheet" href="dist/docs.min.css">
+</head>
+<body>
+  <div class="docs-container off-canvas off-canvas-sidebar-show">
+    <div class="docs-navbar">
+      <a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar">
+        <i class="icon icon-menu"></i>
+      </a>
+      <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
+    </div>
+
+    <div id="sidebar" class="docs-sidebar off-canvas-sidebar">
+      <div class="docs-brand">
+        <a href="index.html" class="docs-logo">
+          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+          <h2>SPECTRE</h2>
+        </a>
+      </div>
+      <div class="docs-nav">
+        <div class="accordion-container">
+          <div class="accordion">
+            <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden checked>
+            <label class="accordion-header c-hand" for="docs-accordion-1">
+              Getting started
+            </label>
+            <div class="accordion-body">
+              <ul class="menu menu-nav">
+                <li class="menu-item">
+                  <a href="getting-started.html">Introduction</a>
+                </li>
+                <li class="menu-item">
+                  <a href="getting-started.html#installation">Installation</a>
+                </li>
+                <li class="menu-item">
+                  <a href="getting-started.html#custom">Custom version</a>
+                </li>
+                <li class="menu-item">
+                  <a href="getting-started.html#browsers">Browser support</a>
+                </li>
+                <li class="menu-item">
+                  <a href="getting-started.html#whatsnew">What's new</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="accordion">
+            <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden>
+            <label class="accordion-header c-hand" for="docs-accordion-2">
+              Elements
+            </label>
+            <div class="accordion-body">
+              <ul class="menu menu-nav">
+                <li class="menu-item">
+                  <a href="elements.html">Typography</a>
+                </li>
+                <li class="menu-item">
+                  <a href="elements.html#tables">Tables</a>
+                </li>
+                <li class="menu-item">
+                  <a href="elements.html#buttons">Buttons</a>
+                </li>
+                <li class="menu-item">
+                  <a href="elements.html#forms">Forms</a>
+                </li>
+                <li class="menu-item">
+                  <a href="elements.html#icons">Icons</a>
+                </li>
+                <li class="menu-item">
+                  <a href="elements.html#labels">Labels</a>
+                </li>
+                <li class="menu-item">
+                  <a href="elements.html#codes">Codes</a>
+                </li>
+                <li class="menu-item">
+                  <a href="elements.html#media">Media</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="accordion">
+            <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden>
+            <label class="accordion-header c-hand" for="docs-accordion-3">
+              Layout
+            </label>
+            <div class="accordion-body">
+              <ul class="menu menu-nav">
+                <li class="menu-item">
+                  <a href="layout.html">Flexbox grid</a>
+                </li>
+                <li class="menu-item">
+                  <a href="layout.html#responsive">Responsive</a>
+                </li>
+                <li class="menu-item">
+                  <a href="layout.html#navbar">Navbar</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="accordion">
+            <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden>
+            <label class="accordion-header c-hand" for="docs-accordion-4">
+              Components
+            </label>
+            <div class="accordion-body">
+              <ul class="menu menu-nav">
+                <li class="menu-item">
+                  <a href="components.html">Accordions</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#avatars">Avatars</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#badges">Badges</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#bars">Bars</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#breadcrumbs">Breadcrumbs</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#cards">Cards</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#chips">Chips</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#empty">Empty states</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#menus">Menus</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#modals">Modals</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#navs">Navs</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#pagination">Pagination</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#panels">Panels</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#popovers">Popovers</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#steps">Steps</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#tabs">Tabs</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#tiles">Tiles</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#toasts">Toasts</a>
+                </li>
+                <li class="menu-item">
+                  <a href="components.html#tooltips">Tooltips</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="accordion">
+            <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden>
+            <label class="accordion-header c-hand" for="docs-accordion-5">
+              Utilities
+            </label>
+            <div class="accordion-body">
+              <ul class="menu menu-nav">
+                <li class="menu-item">
+                  <a href="utilities.html">Colors</a>
+                </li>
+                <li class="menu-item">
+                  <a href="utilities.html#cursors">Cursors</a>
+                </li>
+                <li class="menu-item">
+                  <a href="utilities.html#display">Display</a>
+                </li>
+                <li class="menu-item">
+                  <a href="utilities.html#divider">Divider</a>
+                </li>
+                <li class="menu-item">
+                  <a href="utilities.html#loading">Loading</a>
+                </li>
+                <li class="menu-item">
+                  <a href="utilities.html#position">Position</a>
+                </li>
+                <li class="menu-item">
+                  <a href="utilities.html#shapes">Shapes</a>
+                </li>
+                <li class="menu-item">
+                  <a href="utilities.html#text">Text</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="accordion">
+            <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden>
+            <label class="accordion-header c-hand" for="docs-accordion-6">
+              Experimentals
+            </label>
+            <div class="accordion-body">
+              <ul class="menu menu-nav">
+                <li class="menu-item">
+                  <a href="experimentals.html">Autocomplete</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#calendars">Calendars</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#carousels">Carousels</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#comparison">Comparison sliders</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#filters">Filters</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#meters">Meters</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#off-canvas">Off-canvas</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#parallax">Parallax</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#progress">Progress</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#sliders">Sliders</a>
+                </li>
+                <li class="menu-item">
+                  <a href="experimentals.html#timelines">Timelines</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <a class="off-canvas-overlay" href="#close"></a>
+
+    <div id="content" class="docs-content off-canvas-content">
+      <div id="introduction" class="container">
+        <h3 class="s-title"><a href="#introduction" class="anchor" aria-hidden="true">#</a>Introduction</h3>
+        <div class="docs-note">
+          <p><strong>Spectre.css</strong> is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
+          <p>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.</p>
+        </div>
+      </div>
+
+      <div class="container">
+        <div class="docs-ad">
+          <div class="hide-md">
+            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+            <!-- GitHub-lg -->
+            <ins class="adsbygoogle"
+                  style="display:inline-block;width:728px;height:90px"
+                  data-ad-client="ca-pub-2225124559530218"
+                  data-ad-slot="9894180784"></ins>
+            <script>
+            (adsbygoogle = window.adsbygoogle || []).push({});
+            </script>
+          </div>
+          <div class="show-md">
+            <!-- GitHub-sm -->
+            <ins class="adsbygoogle"
+                  style="display:inline-block;width:300px;height:250px"
+                  data-ad-client="ca-pub-2225124559530218"
+                  data-ad-slot="9278881734"></ins>
+            <script>
+            (adsbygoogle = window.adsbygoogle || []).push({});
+            </script>
+          </div>
+        </div>
+      </div>
+
+      <div id="installation" class="container">
+        <h3 class="s-title"><a href="#installation" class="anchor" aria-hidden="true">#</a>Installation</h3>
+        <div class="docs-note">
+          <p>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.</p>
+        </div>
+        <div class="docs-note">
+          <p class="h5">Install manually</p>
+          <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/releases" target="_blank">Spectre CSS file</a> (core ~10KB min+gzip):</p>
+          <p><a href="https://github.com/picturepan2/spectre/releases" target="_blank" class="btn btn-primary">Download Spectre.css</a></p>
+          <p>Include <code>spectre.css</code> located in <strong>/dist</strong> in your website or Web app &lt;head&gt;. Also, you can add <code>spectre-icons.css</code> and <code>spectre-exp.css</code> accordingly.</p>
+        </div>
+
+<!-- install manually -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;spectre.min.css&quot;</span>&gt;
+&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;spectre-exp.min.css&quot;</span>&gt;
+&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;spectre-icons.min.css&quot;</span>&gt;
+</code></pre>
+
+        <div class="docs-note">
+          <p class="h5">Install from CDN</p>
+          <p>Alternatively, you can use the <a href="https://unpkg.com/" target="_blank">unpkg</a> or <a href="https://cdnjs.com/libraries/spectre.css" target="_blank">cdnjs</a> CDN to load compiled Spectre.css.</p>
+        </div>
+
+<!-- install from CDN -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;https://unpkg.com/spectre.css/dist/spectre.min.css&quot;</span>&gt;
+&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;https://unpkg.com/spectre.css/dist/spectre-exp.min.css&quot;</span>&gt;
+&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;https://unpkg.com/spectre.css/dist/spectre-icons.min.css&quot;</span>&gt;
+</code></pre>
+
+        <div class="docs-note">
+          <p class="h5">Install with NPM</p>
+        </div>
+
+<!-- install with npm -->
+<pre class="code" data-lang="Bash"><code><span class="tag">$</span>npm install <span class="atv">spectre.css</span> --save
+</code></pre>
+
+        <div class="docs-note">
+          <p class="h5">Install with Yarn</p>
+        </div>
+
+<!-- install with yarn -->
+<pre class="code" data-lang="Bash"><code><span class="tag">$</span>yarn add <span class="atv">spectre.css</span>
+</code></pre>
+
+        <div class="docs-note">
+          <p class="h5">Install with Bower</p>
+        </div>
+
+<!-- install with bower -->
+<pre class="code" data-lang="Bash"><code><span class="tag">$</span>bower install <span class="atv">spectre.css</span> --save
+</code></pre>
+
+      </div>
+
+      <div class="container">
+        <div class="docs-ad docs-ad-sidebar">
+          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=picturepan2githubio" id="_carbonads_js"></script>
+        </div>
+      </div>
+
+      <div id="custom" class="container">
+        <h3 class="s-title"><a href="#custom" class="anchor" aria-hidden="true">#</a>Custom version</h3>
+        <div class="docs-note">
+          <p>You can customize your version of Spectre.css by editing Sass files in <code>/src</code> directory or removing unneeded components from <code>.scss</code> source files.</p>
+          <p><a href="https://github.com/picturepan2/spectre/" target="_blank" class="btn btn-primary">Sass Source Code</a></p>
+          <p>If you are looking for Less version of Spectre.css, please switch to <code>Less</code> branch.</p>
+          <p><a href="https://github.com/picturepan2/spectre/tree/less" target="_blank" class="btn">Less Branch</a></p>
+        </div>
+        <h4 id="compiling" class="s-subtitle">Compiling CSS</h4>
+        <div class="docs-note">
+          <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. Firstly you need to <a href="https://www.npmjs.com/get-npm" target="_blank">install NPM</a>, which is used to manage Gulp and other dependencies.</p>
+          <p>Then, you can build the CSS file from the command line:</p>
+          <ol>
+            <li>Navigate to the root directory of Spectre.</li>
+            <li>Run <code>npm install</code>. NPM will install all dev dependencies as listed in package.json.</li>
+            <li>When completed, run <code>gulp build</code> task to compile Sass to CSS and minify files.</li>
+            <li>You can find compiled CSS files in <code>/dist</code> directory.</li>
+          </ol>
+          <p>All available Gulp tasks:</p>
+          <ul>
+            <li><code>gulp build</code> - compile Sass to CSS and minify files (default)</li>
+            <li><code>gulp docs</code> - compile Docs related files</li>
+            <li><code>gulp watch</code> - watch file changes and re-compile CSS files</li>
+          </ul>
+        </div>
+        <h4 id="importing" class="s-subtitle">Importing Sass</h4>
+        <div class="docs-note">
+          <p>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.</p>
+          <ul>
+            <li>First, create your own project and install Spectre via <a href="#installation">NPM or other package managers</a>.</li>
+            <li>Then create your <code>project-name.scss</code> file in the root folder. You can use <code>project-name.scss</code> to define your variables.</li>
+            <li>Compile the Sass file to CSS to get the custom version of Spectre.</li>
+          </ul>
+
+<!-- importing -->
+<pre class="code" data-lang="SASS"><code><span class="com">// Example of project-name.scss</span>
+<span class="com">// Define variables to override default ones</span>
+<span class="tag">$primary-color</span>: <span class="atn"></span>#2e5bec</span>;
+<span class="tag">$dark-color</span>: <span class="atn"></span>#3e396b</span>;
+
+<span class="com">// Import full Spectre source code</span>
+<span class="tag">@import</span> &quot;node_modules/spectre.css/src/spectre&quot;;
+</code></pre>
+
+          <p>Alternatively, you can create custom <code>_variables.scss</code> and import it to <code>project-name.scss</code>. </p>
+
+<!-- importing -->
+<pre class="code" data-lang="SASS"><code><span class="com">// Example of project-name.scss</span>
+<span class="tag">@import</span> &quot;variables&quot;;
+
+<span class="com">// Import only the needed components</span>
+<span class="tag">@import</span> &quot;node_modules/spectre.css/src/buttons&quot;;
+<span class="tag">@import</span> &quot;node_modules/spectre.css/src/forms&quot;;
+</code></pre>
+
+        </div>
+
+        <h4 id="folders" class="s-subtitle">Folder structure</h4>
+
+<!-- folder structure -->
+<pre class="code"><code>spectre/
+├── dist/                           <span class="com">// Build folder</span>
+│   ├── spectre-exp.css
+│   ├── spectre-exp.min.css
+│   ├── spectre-icons.css
+│   ├── spectre-icons.min.css
+│   ├── spectre.css
+│   └── spectre.min.css
+│
+├── docs/
+│   ├── dist/                       <span class="com">// Pre-built CSS folder</span>
+│   │   ├── spectre-exp.css
+│   │   ├── spectre-exp.min.css
+│   │   ├── spectre-icons.css
+│   │   ├── spectre-icons.min.css
+│   │   ├── spectre.css
+│   │   └── spectre.min.css
+|   ├── css/                        <span class="com">// Docs CSS file</span>
+│   │   └── docs.css
+|   ├── src/
+│   │   └── docs.scss
+│   ├── examples/                   <span class="com">// Example tempalte</span>
+│   │   └── starter.html
+│   ├── ../
+│   ├── index.html
+│   └── ...
+│
+├── src/                            <span class="com">// Source Sass files</span>
+│   ├── spectre.scss
+│   ├── spectre-icons.scss
+│   ├── spectre-exp.scss
+│   ├── _mixins.scss
+│   ├── _variables.scss
+│   └── ...
+│
+├── gulpfile.js
+├── package.json
+└── ...
+</code></pre>
+
+        <h4 id="variables" class="s-subtitle"><a href="#variables" class="anchor" aria-hidden="true">#</a>Variables</h4>
+        <div class="docs-note">
+          <p>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 <code>_variables.scss</code> include <code>!default</code> flag. You can redefine the variables to override the values.</p>
+        </div>
+        <h5 id="variables-colors" class="s-subtitle">Colors</h5>
+        <div class="columns">
+          <div class="column col-3 col-md-6">
+            <div class="docs-color" style="background:#5755d9;color:#fff;">
+              <div class="color-title">#5755d9</div>
+              <div class="color-subtitle">Primary</div>
+            </div>
+          </div>
+          <div class="column col-3 col-md-6">
+            <div class="docs-color" style="background:#f1f1fc;color:#5755d9;">
+              <div class="color-title">#f1f1fc</div>
+              <div class="color-subtitle">Secondary</div>
+            </div>
+          </div>
+        </div>
+        <div class="columns">
+          <div class="column col-3 col-md-6">
+            <div class="docs-color" style="background:#32b643;color:#fff;">
+              <div class="color-title">#32b643</div>
+              <div class="color-subtitle">Success</div>
+            </div>
+          </div>
+          <div class="column col-3 col-md-6">
+            <div class="docs-color" style="background:#ffb700;color:#fff;">
+              <div class="color-title">#ffb700</div>
+              <div class="color-subtitle">Warning</div>
+            </div>
+          </div>
+          <div class="column col-3 col-md-6">
+            <div class="docs-color" style="background:#e85600;color:#fff;">
+              <div class="color-title">#e85600</div>
+              <div class="color-subtitle">Error</div>
+            </div>
+          </div>
+        </div>
+        <div class="columns">
+          <div class="column col-3 col-md-6">
+            <div class="docs-color" style="background:#454d5d;color:#fff;">
+              <div class="color-title">#454d5d</div>
+              <div class="color-subtitle">Dark</div>
+            </div>
+          </div>
+          <div class="column col-3 col-md-6">
+            <div class="docs-color" style="background:#727e96;color:#fff;">
+              <div class="color-title">#727e96</div>
+              <div class="color-subtitle">Gray dark</div>
+            </div>
+          </div>
+          <div class="column col-3 col-md-6">
+            <div class="docs-color" style="background:#acb3c2;color:#fff;">
+              <div class="color-title">#acb3c2</div>
+              <div class="color-subtitle">Gray</div>
+            </div>
+          </div>
+          <div class="column col-3 col-md-6">
+            <div class="docs-color" style="background:#e7e9ed;color:#727e96;">
+              <div class="color-title">#e7e9ed</div>
+              <div class="color-subtitle">Gray light</div>
+            </div>
+          </div>
+          <div class="column col-3 col-md-6">
+            <div class="docs-color" style="background:#f0f1f4;color:#727e96;">
+              <div class="color-title">#f0f1f4</div>
+              <div class="color-subtitle">Border</div>
+            </div>
+          </div>
+          <div class="column col-3 col-md-6">
+            <div class="docs-color" style="background:#f8f9fa;color:#727e96;">
+              <div class="color-title">#f8f9fa</div>
+              <div class="color-subtitle">Background</div>
+            </div>
+          </div>
+          <div class="column col-3 col-md-6">
+            <div class="docs-color" style="background:#fff;color:#727e96;">
+              <div class="color-title">#fff</div>
+              <div class="color-subtitle">Light</div>
+            </div>
+          </div>
+        </div>
+
+        <h5 id="variables-buttons" class="s-subtitle">Buttons</h5>
+        <div class="docs-note">
+          <p>There are 2 button variant mixins in <code>_mixins.scss</code> to generate different color variants. </p>
+          <ul>
+            <li>@mixin button-variant(<code>$color</code>: $primary-color);</li>
+            <li>@mixin button-outline-variant(<code>$color</code>: $primary-color);</li>
+          </ul>
+
+<!-- button variables -->
+<pre class="code" data-lang="SASS"><code><span class="com">&lt;!-- filled button with the success color --&gt;</span>
+<span class="tag">.btn-success</span> {
+  <span class="tag">@include</span> button-variant(<span class="atv">$success-color</span>);
+}
+
+<span class="com">&lt;!-- outlined button with the success color --&gt;</span>
+<span class="tag">.btn-outline-success</span> {
+  <span class="tag">@include</span> button-outline-variant(<span class="atv">$success-color</span>);
+}
+</code></pre>
+
+        </div>
+        
+        <h5 id="variables-sizes" class="s-subtitle">Sizes</h5>
+        <div class="docs-note">
+          <p>The default REM (root em) size in Spectre.css is <code>20px</code>. </p>
+          <p>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 <code>20px</code>, which is relatively easy to calculate. </p>
+          <p>Spectre uses <code>4px</code> as the unit size. Sizes of components are based on the unit size. </p>
+        </div>
+        
+        <h5 id="variables-custom-prefix" class="s-subtitle">Custom prefix</h5>
+        <div class="docs-note">
+          <p>There is also a way to add custom prefix to all CSS classes. You can use <a href="https://www.npmjs.com/package/gulp-css-prefix" target="_blank">gulp-css-prefix</a> plugin and add a new Gulp task to enable it. </p>
+        </div>
+
+<!-- custom prefix -->
+<pre class="code"><code><span class="tag">$</span> npm install <span class="atv">gulp-css-prefix</span>
+</code></pre>
+
+        <div class="docs-note">
+          <p>To add <code>spectre-</code> to all classes, you can add the Gulp task to <code>gulpfile.js</code> file.</p>
+        </div>
+
+<!-- custom prefix -->
+<pre class="code"><code>var cssPrefix = require('<span class="atv">gulp-css-prefix</span>');
+  
+gulp.task('prefix', function() {
+  gulp.src('./dist/*.css')
+      .pipe(cssPrefix('<span class="atv">spectre-</span>'))
+      .pipe(gulp.dest('./dist'))
+});
+</code></pre>
+
+        <div class="docs-note">
+          <p>After you compile your version of Spectre in the /dist, run <code>gulp prefix</code> in the directory of Spectre.</p>
+        </div>
+      </div>
+
+      <div id="accessibility" class="container">
+        <h3 class="s-title"><a href="#accessibility" class="anchor" aria-hidden="true">#</a>Accessibility <small class="label">coming soon</small></h3>
+      </div>
+
+      <div id="browsers" class="container">
+        <h3 class="s-title"><a href="#browsers" class="anchor" aria-hidden="true">#</a>Browser support</h3>
+        <div class="docs-note">
+          <p>Spectre uses <a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> to make most styles compatible with earlier browsers and <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:</p>
+          <ul>
+            <li>Chrome <small class="label label-success">LAST 4</small></li>
+            <li>Microsoft Edge <small class="label label-success">LAST 4</small></li>
+            <li>Firefox <small class="label label-success text-uppercase">Extended Support Release</small></li>
+            <li>Safari <small class="label label-success">LAST 4</small></li>
+            <li>Opera <small class="label label-success">LAST 4</small></li>
+            <li>Internet Explorer 10+</li>
+          </ul>
+          <p>Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.</p>
+        </div>
+      </div>
+
+      <div id="whatsnew" class="container">
+        <h3 class="s-title"><a href="#whatsnew" class="anchor" aria-hidden="true">#</a>What's new</h3>
+        <div class="docs-note">
+          <p><strong>September 2017</strong></p>
+          <ul>
+            <li>
+              <a href="experimentals.html#off-canvas">Off-canvas</a>: navigation layout that the sidebar can slide in and out of the viewport <small class="label label-primary">NEW</small>
+            </li>
+          </ul>
+          <p><strong>August 2017</strong></p>
+          <ul>
+            <li>
+              <a href="getting-started.html">Switch to Sass</a> <small class="label label-primary">NEW</small>
+            </li>
+            <li>
+              <a href="getting-started.html">New Docs Experience</a> <small class="label label-primary">NEW</small>
+            </li>
+          </ul>
+          <p><strong>April 2017</strong></p>
+          <ul>
+            <li>
+              <a href="components.html#accordions">Accordions</a>: used to toggle sections of content 
+            </li>
+            <li>
+              <a href="experimentals.html#filters">Filters</a>: CSS only content filters 
+            </li>
+            <li>
+              <a href="experimentals.html#comparison">Comparison Sliders</a>: sliders for comparing two images
+            </li>
+            <li>
+              <a href="experimentals.html#timelines">Timelines</a>: ordered sequences of activities
+            </li>
+          </ul>
+          <p><strong>March 2017</strong></p>
+          <ul>
+            <li>
+              <a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons
+            </li>
+            <li>
+              <a href="components.html#popovers">Popovers</a>: small overlay content containers
+            </li>
+            <li>
+              <a href="layout.html#panels">Panels</a>: flexible view container layout with auto-expand content section
+            </li>
+            <li>
+              <a href="experimentals.html#carousels">Carousels</a>: slideshows for cycling images
+            </li>
+            <li>
+              <a href="experimentals.html#calendars">Calendars</a>: date or date range picker and events display
+            </li>
+          </ul>
+          <p><strong>February 2017</strong></p>
+          <ul>
+            <li>New Documents experience</li>
+            <li>
+              <a href="components.html#bars">Bars</a>: represent the progress of a task or the value within the known range
+            </li>
+            <li>
+              <a href="components.html#steps">Steps</a>: progress indicators of a sequence of task steps
+            </li>
+            <li>
+              <a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks
+            </li>
+            <li>
+              <a href="experimentals.html">Experimentals</a>: experimental elements and features
+            </li>
+            <li>
+              <a href="experimentals.html#meters">Meters</a>, <a href="experimentals.html#parallax">Parallax</a>, <a href="experimentals.html#progress">Progress</a> and <a href="experimentals.html#sliders">Sliders</a>
+            </li>
+          </ul>
+          <p><strong>March 2016</strong></p>
+          <ul>
+            <li>Initial commit</li>
+          </ul>
+          <p><a href="https://github.com/picturepan2/spectre/releases" target="_blank" class="btn btn-primary">Releases</a></p>
+        </div>
+      </div>
+
+      <footer class="docs-footer">
+        <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
+        <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+      </footer>
+
+    </div>
+  </div>
+
+  <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+                  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+              m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+  </script>
+</body>
+</html>
diff --git a/docs/index.html b/docs/index.html
index 27603d1..7f2c097 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,144 +1,112 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="robots" content="index, follow">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-  <meta http-equiv="x-ua-compatible" content="ie=edge">
-  <meta name="author" content="https://github.com/picturepan2/">
-  <title>Spectre.css - a Lightweight, Responsive and Modern CSS Framework. </title>
-  <link rel="shortcut icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.ico">
-  <link rel="icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.png">
-  <link rel="stylesheet" href="dist/spectre.min.css">
-  <link rel="stylesheet" href="dist/spectre-icons.min.css">
-  <link rel="stylesheet" href="dist/docs.min.css">
-</head>
-<body>
-  
-  <div class="section section-hero bg-gray">
-    <div id="overview" class="grid-hero container grid-lg text-center">
-      <div class="docs-brand">
-        <a href="index.html" class="docs-logo">
-          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-          <h2>SPECTRE</h2>
-        </a>
-      </div>
-      <h1>Spectre.css</h1>
-      <h2>a <u>Lightweight</u>, <u>Responsive</u> and <u>Modern</u> CSS Framework</h2>
-      <p>
-        <a href="getting-started.html" class="btn btn-primary btn-lg">Docs</a>
-        <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary btn-lg">GitHub</a>
-      </p>
-      <p class="text-gray">Latest version: <span class="version"></span></p>
-      <div class="columns">
-        <div class="column col-4 col-xs-12">
-          <div class="card text-center">
-            <div class="card-header">
-              <span class="card-title">Lightweight</span>
-            </div>
-            <div class="card-body">
-              Lightweight  (~10KB gzipped) starting point for your projects
+  <head>
+    <title>Spectre.css - A Lightweight, Responsive and Modern CSS Framework</title>
+    <meta charset="utf-8">
+    <meta name="robots" content="index, follow">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="author" content="Yan Zhu">
+    <link rel="shortcut icon" href="img/favicons/favicon.ico">
+    <link rel="icon" href="img/favicons/favicon.png">
+    <link rel="stylesheet" href="dist/spectre.min.css">
+    <link rel="stylesheet" href="dist/spectre-icons.min.css">
+    <link rel="stylesheet" href="dist/spectre-exp.min.css">
+    <link rel="stylesheet" href="dist/docs.min.css">
+  </head>
+  <body>
+    <div class="section section-hero bg-gray">
+      <div class="grid-hero container grid-lg text-center" id="overview">
+        <div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+            <h2>SPECTRE</h2></a></div>
+        <h1>Spectre.css</h1>
+        <h2>A 
+          <u>Lightweight</u>, 
+          <u>Responsive</u> and 
+          <u>Modern</u> CSS Framework 
+        </h2>
+        <p><a class="btn btn-primary btn-lg mr-2" href="getting-started.html">Docs</a><a class="btn btn-primary btn-lg" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a></p>
+        <p class="text-gray">Latest version: <span class="version"></span></p>
+        <div class="columns">
+          <div class="column col-4 col-xs-12">
+            <div class="card text-center">
+              <div class="card-header"><span class="card-title">Lightweight</span></div>
+              <div class="card-body">Lightweight  (~10KB gzipped) starting point for your projects</div>
             </div>
           </div>
-        </div>
-        <div class="column col-4 col-xs-12">
-          <div class="card text-center">
-            <div class="card-header">
-              <span class="card-title">Responsive</span>
-            </div>
-            <div class="card-body">
-              Flexbox-based, responsive and mobile-friendly layout
+          <div class="column col-4 col-xs-12">
+            <div class="card text-center">
+              <div class="card-header"><span class="card-title">Responsive</span></div>
+              <div class="card-body">Flexbox-based, responsive and mobile-friendly layout</div>
             </div>
           </div>
-        </div>
-        <div class="column col-4 col-xs-12">
-          <div class="card text-center">
-            <div class="card-header">
-              <span class="card-title">Modern</span>
-            </div>
-            <div class="card-body">
-              Elegantly designed and developed elements and components
+          <div class="column col-4 col-xs-12">
+            <div class="card text-center">
+              <div class="card-header"><span class="card-title">Modern</span></div>
+              <div class="card-body">Elegantly designed and developed elements and components</div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-
-  <div class="section section-features bg-primary text-light text-center">
-    <div class="container grid-lg">
-      <h2>Introduction</h2>
-      <div class="columns">
-        <div class="column col-10 col-sm-12 col-mx-auto text-left">
-          <p class="text-secondary">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.</p>
-        </div>
-        <div class="column col-10 col-sm-12 col-mx-auto">
-          <a href="getting-started.html#installation" class="btn btn-lg">Install Spectre.css</a>
+    <div class="section section-features bg-primary text-light text-center">
+      <div class="container grid-lg">
+        <h2>Introduction</h2>
+        <div class="columns">
+          <div class="column col-10 col-sm-12 col-mx-auto text-left">
+            <p class="text-secondary">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.</p>
+          </div>
+          <div class="column col-10 col-sm-12 col-mx-auto"><a class="btn btn-lg" href="getting-started.html#installation">Install Spectre.css</a></div>
         </div>
       </div>
     </div>
-  </div>
-
-  <div class="section section-updates bg-gray">
-    <div class="container grid-lg">
-      <div class="columns">
-        <div class="column col-4 col-xs-12">
-          <div class="card">
-            <div class="card-header">
-              <div class="card-title h6">Spectre Twitter</div>
-            </div>
-            <div class="card-body">
-              For the latest announcements and updates, follow on Twitter: <a href="https://twitter.com/spectrecss" target="_blank">@spectrecss</a>.
-            </div>
-            <div class="card-footer">
-              <a href="https://twitter.com/spectrecss" class="btn btn-primary" target="_blank">Follow</a>
+    <div class="section section-updates bg-gray">
+      <div class="container grid-lg">
+        <div class="columns">
+          <div class="column col-4 col-xs-12">
+            <div class="card">
+              <div class="card-header">
+                <div class="card-title h6">Spectre Twitter</div>
+              </div>
+              <div class="card-body">For the latest announcements and updates, follow on Twitter: <a href="https://twitter.com/spectrecss" target="_blank">@spectrecss</a>.</div>
+              <div class="card-footer"><a class="btn btn-primary" href="https://twitter.com/spectrecss" target="_blank">Follow</a></div>
             </div>
           </div>
-        </div>
-        <div class="column col-4 col-xs-12">
-          <div class="card">
-            <div class="card-header">
-              <div class="card-title h6">PayPal Donate</div>
-            </div>
-            <div class="card-body">
-              Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development. ♥
-            </div>
-            <div class="card-footer">
-              <a href="https://www.paypal.me/picturepan2" class="btn btn-primary" target="_blank">Donate</a>
+          <div class="column col-4 col-xs-12">
+            <div class="card">
+              <div class="card-header">
+                <div class="card-title h6">PayPal Donate</div>
+              </div>
+              <div class="card-body">Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development. &hearts;</div>
+              <div class="card-footer"><a class="btn btn-primary" href="https://www.paypal.me/picturepan2" target="_blank">Donate</a></div>
             </div>
           </div>
-        </div>
-        <div class="column col-4 col-xs-12">
-          <div class="card">
-            <div class="card-header">
-              <div class="card-title h6">Spectre Docs</div>
-            </div>
-            <div class="card-body">
-                Spectre Docs experience has been completely rewritten and improved. 
-            </div>
-            <div class="card-footer">
-              <a href="getting-started.html" class="btn btn-primary">Explore</a>
+          <div class="column col-4 col-xs-12">
+            <div class="card">
+              <div class="card-header">
+                <div class="card-title h6">Spectre Docs</div>
+              </div>
+              <div class="card-body">Spectre Docs experience has been completely rewritten and improved.</div>
+              <div class="card-footer"><a class="btn btn-primary" href="getting-started.html">Explore</a></div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-
-  <footer class="section section-footer">
-    <div id="copyright" class="grid-footer container grid-lg">
-      <p><a href="getting-started.html" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
-      <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
-    </div>
-  </footer>
-  <script>
+    <footer class="section section-footer">
+      <div class="grid-footer container grid-lg" id="copyright">
+        <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p>
+        <p>Designed and built with <span class="text-error">&hearts;</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.  </p>
+      </div>
+    </footer>
+    <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-                  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-              m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
+      
       ga('create', 'UA-2702768-8', 'auto');
       ga('send', 'pageview');
-  </script>
-</body>
-</html>
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/docs/src/_ads.pug b/docs/src/_ads.pug
new file mode 100644
index 0000000..c7e1c91
--- /dev/null
+++ b/docs/src/_ads.pug
@@ -0,0 +1,17 @@
+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/_docs-layout.pug b/docs/src/_docs-layout.pug
new file mode 100644
index 0000000..7ae771c
--- /dev/null
+++ b/docs/src/_docs-layout.pug
@@ -0,0 +1,99 @@
+extends _layout.pug
+include _mixins.pug
+
+block content
+  .docs-container.off-canvas.off-canvas-sidebar-show
+    .docs-navbar
+      a.off-canvas-toggle.btn.btn-link.btn-action(href='#sidebar')
+        i.icon.icon-menu
+      a.btn.btn-primary(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+    #sidebar.docs-sidebar.off-canvas-sidebar
+      .docs-brand
+        a.docs-logo(href='/')
+          img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
+          h2 SPECTRE
+      .docs-nav
+        .accordion-container
+          +docs-accordion(
+            'getting-started',
+            'Getting started',
+            {url: '#introduction', name: 'Introduction'},
+            {url: '#installation', name: 'Installation'},
+            {url: '#custom', name: 'Custom version'},
+            {url: '#browsers', name: 'Browser support'},
+            {url: '#whatsnew', name: 'What\'s new'}
+          )
+          +docs-accordion(
+            'elements',
+            'Elements',
+            {url: '#typography', name: 'Typography'},
+            {url: '#tables', name: 'Tables'},
+            {url: '#buttons', name: 'Buttons'},
+            {url: '#forms', name: 'Forms'},
+            {url: '#icons', name: 'Icons'},
+            {url: '#labels', name: 'Labels'},
+            {url: '#codes', name: 'Codes'},
+            {url: '#media', name: 'Media'}
+          )
+          +docs-accordion(
+            'layout',
+            'Layout',
+            {url: '#flexbox', name: 'Flexbox grid'},
+            {url: '#responsive', name: 'Responsive'},
+            {url: '#navbar', name: 'Navbar'}
+          )
+          +docs-accordion(
+            'components',
+            'Components',
+            {url: '#accordions', name: 'Accordions'},
+            {url: '#avatars', name: 'Avatars'},
+            {url: '#badges', name: 'Badges'},
+            {url: '#bars', name: 'Bars'},
+            {url: '#breadcrumbs', name: 'Breadcrumbs'},
+            {url: '#cards', name: 'Cards'},
+            {url: '#chips', name: 'Chips'},
+            {url: '#empty', name: 'Empty states'},
+            {url: '#menus', name: 'Menus'},
+            {url: '#modals', name: 'Modals'},
+            {url: '#navs', name: 'Navs'},
+            {url: '#pagination', name: 'Pagination'},
+            {url: '#panels', name: 'Panels'},
+            {url: '#popovers', name: 'Popovers'},
+            {url: '#steps', name: 'Steps'},
+            {url: '#tabs', name: 'Tabs'},
+            {url: '#tiles', name: 'Tiles'},
+            {url: '#toasts', name: 'Toasts'},
+            {url: '#tooltips', name: 'Tooltips'}
+          )
+          +docs-accordion(
+            'utilities',
+            'Utilities',
+            {url: '#colors', name: 'Colors'},
+            {url: '#cursors', name: 'Cursors'},
+            {url: '#display', name: 'Display'},
+            {url: '#divider', name: 'Divider'},
+            {url: '#loading', name: 'Loading'},
+            {url: '#position', name: 'Position'},
+            {url: '#shapes', name: 'Shapes'},
+            {url: '#text', name: 'Text'}
+          )
+          +docs-accordion(
+            'experimentals',
+            'Experimentals',
+            {url: '#autocomplete', name: 'Autocomplete'},
+            {url: '#calendars', name: 'Calendars'},
+            {url: '#carousels', name: 'Carousels'},
+            {url: '#comparison', name: 'Comparison sliders'},
+            {url: '#filters', name: 'Filters'},
+            {url: '#meters', name: 'Meters'},
+            {url: '#off-canvas', name: 'Off-canvas'},
+            {url: '#parallax', name: 'Parallax'},
+            {url: '#progress', name: 'Progress'},
+            {url: '#sliders', name: 'Sliders'},
+            {url: '#timelines', name: 'Timelines'}
+          )
+  
+    a.off-canvas-overlay(href='#close')
+    .off-canvas-content
+      #content.docs-content
+        block docs-content
\ No newline at end of file
diff --git a/docs/src/_footer.pug b/docs/src/_footer.pug
new file mode 100644
index 0000000..018a01a
--- /dev/null
+++ b/docs/src/_footer.pug
@@ -0,0 +1,20 @@
+footer.section.section-footer
+  #copyright.grid-footer.container.grid-lg
+    p
+      a(href='getting-started.html' target='_blank') Documents
+      |  · 
+      a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+      |  · 
+      a(href='https://twitter.com/spectrecss' target='_blank') Twitter
+      |  · 
+      a(href='https://www.paypal.me/picturepan2' target='_blank') PayPal Donate
+      |  · Version 
+      span.version
+    p
+      | Designed and built with 
+      span.text-error &hearts;
+      |  by 
+      a(href='https://twitter.com/picturepan2' target='_blank') Yan Zhu
+      | . Licensed under the 
+      a(href='https://github.com/picturepan2/spectre/blob/master/LICENSE' target='_blank') MIT License
+      | .
\ No newline at end of file
diff --git a/docs/src/_layout.pug b/docs/src/_layout.pug
new file mode 100644
index 0000000..ad32f32
--- /dev/null
+++ b/docs/src/_layout.pug
@@ -0,0 +1,33 @@
+block variables
+  - var title = 'Spectre.css - A Lightweight, Responsive and Modern CSS Framework'
+  - var description = ''
+
+doctype html
+html(lang='en')
+  head
+    title= title
+    meta(charset='utf-8')
+    meta(name='robots' content='index, follow')
+    meta(name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no')
+    meta(http-equiv='x-ua-compatible' content='ie=edge')
+    meta(name='author' content='Yan Zhu')
+    link(rel='shortcut icon' href='img/favicons/favicon.ico')
+    link(rel='icon' href='img/favicons/favicon.png')
+    link(rel='stylesheet' href='dist/spectre.min.css')
+    link(rel='stylesheet' href='dist/spectre-icons.min.css')
+    link(rel='stylesheet' href='dist/spectre-exp.min.css')
+    link(rel='stylesheet' href='dist/docs.min.css')
+
+  body
+    block content
+
+    script.
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-2702768-8', 'auto');
+      ga('send', 'pageview');
+
+  
\ No newline at end of file
diff --git a/docs/src/_mixins.pug b/docs/src/_mixins.pug
new file mode 100644
index 0000000..54e76d7
--- /dev/null
+++ b/docs/src/_mixins.pug
@@ -0,0 +1,22 @@
+mixin docs-accordion(id, name, ...pages)
+  .accordion
+    input(id='accordion-' + id type='checkbox' name='docs-accordion-checkbox' hidden='' checked=(current === id ? true : false))
+    label.accordion-header.c-hand(for='accordion-' + id)= name
+    .accordion-body
+      ul.menu.menu-nav
+        each page in pages
+          li.menu-item
+            a(href=id + '.html' + page.url)= page.name
+
+mixin docs-heading(id, name)
+  .container
+    h3.s-title(id=id)
+      a.anchor(href='#'+id aria-hidden='true') #
+      | #{name}
+    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
diff --git a/docs/src/contents/browers.pug b/docs/src/contents/browers.pug
new file mode 100644
index 0000000..dfa95cd
--- /dev/null
+++ b/docs/src/contents/browers.pug
@@ -0,0 +1,25 @@
+p
+  | Spectre uses 
+  a(href='https://github.com/postcss/autoprefixer', target='_blank') Autoprefixer
+  |  to make most styles compatible with earlier browsers and 
+  a(href='https://necolas.github.io/normalize.css/', target='_blank') Normalize.css
+  |  for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:
+ul
+  li
+    | Chrome 
+    small.label.label-success LAST 4
+  li
+    | Microsoft Edge 
+    small.label.label-success LAST 4
+  li
+    | Firefox 
+    small.label.label-success.text-uppercase Extended Support Release
+  li
+    | Safari 
+    small.label.label-success LAST 4
+  li
+    | Opera 
+    small.label.label-success LAST 4
+  li Internet Explorer 10+
+p
+  | Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.
\ No newline at end of file
diff --git a/docs/src/contents/custom.pug b/docs/src/contents/custom.pug
new file mode 100644
index 0000000..ce787f7
--- /dev/null
+++ b/docs/src/contents/custom.pug
@@ -0,0 +1,287 @@
+p
+  | You can customize your version of Spectre.css by editing Sass files in 
+  code /src
+  |  directory or removing unneeded components from 
+  code .scss
+  |  source files.
+p
+  a.btn.btn-primary(href='https://github.com/picturepan2/spectre/', target='_blank') Sass Source Code
+p
+  | If you are looking for Less version of Spectre.css, please switch to 
+  code Less
+  |  branch.
+p
+  a.btn(href='https://github.com/picturepan2/spectre/tree/less', target='_blank') Less Branch
+
++docs-subheading('compiling', 'Compiling CSS')
+
+p
+  | Spectre uses 
+  a(href='http://gulpjs.com/', target='_blank') Gulp
+  |  for compiling CSS. Firstly you need to 
+  a(href='https://www.npmjs.com/get-npm', target='_blank') install NPM
+  | , which is used to manage Gulp and other dependencies.
+p Then, you can build the CSS file from the command line:
+ol
+  li Navigate to the root directory of Spectre.
+  li
+    | Run 
+    code npm install
+    | . NPM will install all dev dependencies as listed in package.json.
+  li
+    | When completed, run 
+    code gulp build
+    |  task to compile Sass to CSS and minify files.
+  li
+    | You can find compiled CSS files in 
+    code /dist
+    |  directory.
+p All available Gulp tasks:
+ul
+  li
+    code gulp build
+    |  - compile Sass to CSS and minify files (default)
+  li
+    code gulp docs
+    |  - compile Docs related files
+  li
+    code gulp watch
+    |  - watch file changes and re-compile CSS files
+
++docs-subheading('importing', 'Importing Sass')
+p
+  | 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.
+ul
+  li
+    | First, create your own project and install Spectre via 
+    a(href='#installation') NPM or other package managers
+    | .
+  li
+    | Then create your 
+    code project-name.scss
+    |  file in the root folder. You can use 
+    code project-name.scss
+    |  to define your variables.
+  li Compile the Sass file to CSS to get the custom version of Spectre.
+
+// importing
+pre.code(data-lang='Sass')
+  code
+    :highlight(lang="scss")
+      // Example of project-name.scss
+      // Define variables to override default ones
+      $primary-color: #2e5bec;
+      $dark-color: #3e396b;
+
+      // Import full Spectre source code
+      @import "node_modules/spectre.css/src/spectre";
+
+p
+  | Alternatively, you can create custom 
+  code _variables.scss
+  |  and import it to 
+  code project-name.scss
+  | .
+
+// custom variables
+pre.code(data-lang='Sass')
+  code
+    :highlight(lang="scss")
+      // Example of project-name.scss
+      @import "variables";
+
+      // Import only the needed components
+      @import "node_modules/spectre.css/src/buttons";
+      @import "node_modules/spectre.css/src/forms";
+
++docs-subheading('folders', 'Folder structure')
+
+// folder structure
+pre.code
+  code
+    :highlight
+      spectre/
+      ├── dist/                           // Build folder
+      │   ├── spectre-exp.css
+      │   ├── spectre-exp.min.css
+      │   ├── spectre-icons.css
+      │   ├── spectre-icons.min.css
+      │   ├── spectre.css
+      │   └── spectre.min.css
+      │
+      ├── docs/
+      │   ├── dist/                       // Pre-built CSS folder
+      │   │   ├── spectre-exp.css
+      │   │   ├── spectre-exp.min.css
+      │   │   ├── spectre-icons.css
+      │   │   ├── spectre-icons.min.css
+      │   │   ├── spectre.css
+      │   │   └── spectre.min.css
+      |   ├── css/                        // Docs CSS files
+      │   │   └── docs.css
+      |   ├── src/
+      │   │   ├── scss                    // Docs Sass files
+      │   │   │   └── docs.scss
+      │   │   ├── index.pug               // Docs Pug files
+      │   │   └── ...
+      │   ├── examples/                   // Example tempalte
+      │   │   └── starter.html
+      │   ├── ../
+      │   ├── index.html
+      │   └── ...
+      │
+      ├── src/                            // Source Sass files
+      │   ├── spectre.scss
+      │   ├── spectre-icons.scss
+      │   ├── spectre-exp.scss
+      │   ├── _mixins.scss
+      │   ├── _variables.scss
+      │   └── ...
+      │
+      ├── gulpfile.js
+      ├── package.json
+      └── ...
+
++docs-subheading('variables', 'Variables')
+
+p
+  | 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 
+  code _variables.scss
+  |  include 
+  code !default
+  |  flag. You can redefine the variables to override the values.
+
++docs-subheading('variables-colors', 'Variables - Colors')
+
+.columns
+  .column.col-3.col-md-6
+    .docs-color(style='background:#5755d9;color:#fff;')
+      .color-title #5755d9
+      .color-subtitle Primary
+  .column.col-3.col-md-6
+    .docs-color(style='background:#f1f1fc;color:#5755d9;')
+      .color-title #f1f1fc
+      .color-subtitle Secondary
+.columns
+  .column.col-3.col-md-6
+    .docs-color(style='background:#32b643;color:#fff;')
+      .color-title #32b643
+      .color-subtitle Success
+  .column.col-3.col-md-6
+    .docs-color(style='background:#ffb700;color:#fff;')
+      .color-title #ffb700
+      .color-subtitle Warning
+  .column.col-3.col-md-6
+    .docs-color(style='background:#e85600;color:#fff;')
+      .color-title #e85600
+      .color-subtitle Error
+.columns
+  .column.col-3.col-md-6
+    .docs-color(style='background:#454d5d;color:#fff;')
+      .color-title #454d5d
+      .color-subtitle Dark
+  .column.col-3.col-md-6
+    .docs-color(style='background:#727e96;color:#fff;')
+      .color-title #727e96
+      .color-subtitle Gray dark
+  .column.col-3.col-md-6
+    .docs-color(style='background:#acb3c2;color:#fff;')
+      .color-title #acb3c2
+      .color-subtitle Gray
+  .column.col-3.col-md-6
+    .docs-color(style='background:#e7e9ed;color:#727e96;')
+      .color-title #e7e9ed
+      .color-subtitle Gray light
+  .column.col-3.col-md-6
+    .docs-color(style='background:#f0f1f4;color:#727e96;')
+      .color-title #f0f1f4
+      .color-subtitle Border
+  .column.col-3.col-md-6
+    .docs-color(style='background:#f8f9fa;color:#727e96;')
+      .color-title #f8f9fa
+      .color-subtitle Background
+  .column.col-3.col-md-6
+    .docs-color(style='background:#fff;color:#727e96;')
+      .color-title #fff
+      .color-subtitle Light
+
++docs-subheading('variables-buttons', 'Variables - Button mixins')
+
+p
+  | There are 2 button variant mixins in 
+  code _mixins.scss
+  |  to generate different color variants.
+ul
+  li
+    | @mixin button-variant(
+    code $color
+    | : $primary-color);
+  li
+    | @mixin button-outline-variant(
+    code $color
+    | : $primary-color);
+
+// button mixins
+pre.code(data-lang='Sass')
+  code
+    :highlight(lang="scss")
+      <!-- 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);
+      }
+
++docs-subheading('variables-sizes', 'Variables - Sizes')
+
+p
+  | The default REM (root em) size in Spectre.css is 
+  code 20px
+  | .
+p
+  | 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 
+  code 20px
+  | , which is relatively easy to calculate.
+p
+  | Spectre uses 
+  code 4px
+  |  as the unit size. Sizes of components are based on the unit size.
+
++docs-subheading('variables-custom-prefix', 'Variables - Custom prefix')
+p
+  | There is also a way to add custom prefix to all CSS classes. You can use 
+  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
+pre.code(data-lang='Bash')
+  code
+    :highlight(lang="Bash")
+      npm install gulp-css-prefix
+
+p
+  | To add 
+  code spectre-
+  |  to all classes, you can add the Gulp task to 
+  code gulpfile.js
+  |  file.
+
+// custom prefix
+pre.code
+  code
+    :highlight(lang="JavaScript")
+      var cssPrefix = require('gulp-css-prefix');
+  
+      gulp.task('prefix', function() {
+        gulp.src('./dist/*.css')
+            .pipe(cssPrefix('spectre-'))
+            .pipe(gulp.dest('./dist'))
+      });
+
+p
+  | After you compile your version of Spectre in the /dist, run 
+  code gulp prefix
+  |  in the directory of Spectre.
\ No newline at end of file
diff --git a/docs/src/contents/installation.pug b/docs/src/contents/installation.pug
new file mode 100644
index 0000000..cada6ce
--- /dev/null
+++ b/docs/src/contents/installation.pug
@@ -0,0 +1,68 @@
+p
+  | 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.
+
++docs-subheading('install-manually', 'Install manually')
+p
+  | Download the compiled and minified 
+  a(href='https://github.com/picturepan2/spectre/releases', target='_blank') Spectre CSS file
+  |  (core ~10KB min+gzip):
+p
+  a.btn.btn-primary(href='https://github.com/picturepan2/spectre/releases', target='_blank') Download Spectre.css
+p
+  | Include 
+  code spectre.css
+  |  located in 
+  strong /dist
+  |  in your website or Web app <head>. Also, you can add 
+  code spectre-icons.css
+  |  and 
+  code spectre-exp.css
+  |  accordingly.
+
+//- install manually
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <link rel="stylesheet" href="spectre.min.css">
+      <link rel="stylesheet" href="spectre-exp.min.css">
+      <link rel="stylesheet" href="spectre-icons.min.css">
+  
++docs-subheading('install-cdn', 'Install from CDN')
+p
+  | Alternatively, you can use the 
+  a(href='https://unpkg.com/', target='_blank') unpkg
+  |  or 
+  a(href='https://cdnjs.com/libraries/spectre.css', target='_blank') cdnjs
+  |  CDN to load compiled Spectre.css.
+
+//- install from CDN
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <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">
+
++docs-subheading('install-npm', 'Install with NPM')
+
+//- install with npm
+pre.code(data-lang='Bash')
+  code
+    :highlight(lang="Bash")
+      npm install spectre.css --save
+
++docs-subheading('install-yarn', 'Install with Yarn')
+
+//- install with yarn
+pre.code(data-lang='Bash')
+  code
+    :highlight(lang="bash")
+      yarn add spectre.css
+
++docs-subheading('install-bower', 'Install from Bower')
+
+//- install with bower
+pre.code(data-lang='Bash')
+  code
+    :highlight(lang="bash")
+      bower install spectre.css --save
\ No newline at end of file
diff --git a/docs/src/contents/introduction.pug b/docs/src/contents/introduction.pug
new file mode 100644
index 0000000..8e544de
--- /dev/null
+++ b/docs/src/contents/introduction.pug
@@ -0,0 +1,5 @@
+p 
+  strong Spectre.css 
+  | is a lightweight, responsive and modern CSS framework for faster and extensible development.
+p 
+  | 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.
\ No newline at end of file
diff --git a/docs/src/contents/whatsnew.pug b/docs/src/contents/whatsnew.pug
new file mode 100644
index 0000000..0c38102
--- /dev/null
+++ b/docs/src/contents/whatsnew.pug
@@ -0,0 +1,79 @@
+p
+  strong September 2017
+ul
+  li
+    a(href='experimentals.html#off-canvas') Off-canvas
+    | : navigation layout that the sidebar can slide in and out of the viewport 
+    small.label.label-primary NEW
+p
+  strong August 2017
+ul
+  li
+    a(href='getting-started.html') Switch to Sass 
+    small.label.label-primary NEW
+  li
+    a(href='getting-started.html') New Docs Experience 
+    small.label.label-primary NEW
+p
+  strong April 2017
+ul
+  li
+    a(href='components.html#accordions') Accordions
+    | : used to toggle sections of content
+  li
+    a(href='experimentals.html#filters') Filters
+    | : CSS only content filters
+  li
+    a(href='experimentals.html#comparison') Comparison Sliders
+    | : sliders for comparing two images
+  li
+    a(href='experimentals.html#timelines') Timelines
+    | : ordered sequences of activities
+p
+  strong March 2017
+ul
+  li
+    a(href='elements.html#icons') Icons
+    | : single-element, responsive and pure CSS icons
+  li
+    a(href='components.html#popovers') Popovers
+    | : small overlay content containers
+  li
+    a(href='layout.html#panels') Panels
+    | : flexible view container layout with auto-expand content section
+  li
+    a(href='experimentals.html#carousels') Carousels
+    | : slideshows for cycling images
+  li
+    a(href='experimentals.html#calendars') Calendars
+    | : date or date range picker and events display
+p
+  strong February 2017
+ul
+  li New Documents experience
+  li
+    a(href='components.html#bars') Bars
+    | : represent the progress of a task or the value within the known range
+  li
+    a(href='components.html#steps') Steps
+    | : progress indicators of a sequence of task steps
+  li
+    a(href='components.html#tiles') Tiles
+    | : repeatable or embeddable information blocks
+  li
+    a(href='experimentals.html') Experimentals
+    | : experimental elements and features
+  li
+    a(href='experimentals.html#meters') Meters
+    | , 
+    a(href='experimentals.html#parallax') Parallax
+    | , 
+    a(href='experimentals.html#progress') Progress
+    |  and 
+    a(href='experimentals.html#sliders') Sliders
+p
+  strong March 2016
+ul
+  li Initial commit
+p
+  a.btn.btn-primary(href='https://github.com/picturepan2/spectre/releases', target='_blank') Releases
\ No newline at end of file
diff --git a/docs/src/getting-started.pug b/docs/src/getting-started.pug
new file mode 100644
index 0000000..19e1db0
--- /dev/null
+++ b/docs/src/getting-started.pug
@@ -0,0 +1,32 @@
+extends _docs-layout.pug
+
+block variables
+  - var title = 'Getting started - Spectre.css CSS Framework'
+  - var description = ''
+  - var current = 'getting-started'
+
+block docs-content
+  //- introduction
+  +docs-heading('introduction', 'Introduction')
+    include contents/introduction.pug
+    
+  //- installation
+  +docs-heading('installation', 'Installation')
+    include contents/installation.pug
+
+  //- Custom
+  +docs-heading('custom', 'Custom version')
+    include contents/custom.pug
+
+  //- Accessibility
+  +docs-heading('accessibility', 'Accessibility')
+  
+  //- Browser support
+  +docs-heading('browers', 'Browser support')
+    include contents/browers.pug
+
+  //- What's new
+  +docs-heading('whatsnew', 'What\'s new')
+    include contents/whatsnew.pug
+
+    
\ No newline at end of file
diff --git a/docs/src/index.pug b/docs/src/index.pug
new file mode 100644
index 0000000..6cc08bc
--- /dev/null
+++ b/docs/src/index.pug
@@ -0,0 +1,102 @@
+extends _layout.pug
+
+block content
+  .section.section-hero.bg-gray
+    #overview.grid-hero.container.grid-lg.text-center
+      .docs-brand
+        a.docs-logo(href='index.html')
+          img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
+          h2 SPECTRE
+      h1 Spectre.css
+      h2
+        | A 
+        u Lightweight
+        | , 
+        u Responsive
+        |  and 
+        u Modern
+        |  CSS Framework 
+      p
+        a.btn.btn-primary.btn-lg.mr-2(href='getting-started.html') Docs
+        a.btn.btn-primary.btn-lg(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+      p.text-gray
+        | Latest version: 
+        span.version
+      .columns
+        .column.col-4.col-xs-12
+          .card.text-center
+            .card-header
+              span.card-title Lightweight
+            .card-body
+              | Lightweight  (~10KB gzipped) starting point for your projects
+        .column.col-4.col-xs-12
+          .card.text-center
+            .card-header
+              span.card-title Responsive
+            .card-body
+              | Flexbox-based, responsive and mobile-friendly layout
+        .column.col-4.col-xs-12
+          .card.text-center
+            .card-header
+              span.card-title Modern
+            .card-body
+              | Elegantly designed and developed elements and components
+  .section.section-features.bg-primary.text-light.text-center
+    .container.grid-lg
+      h2 Introduction
+      .columns
+        .column.col-10.col-sm-12.col-mx-auto.text-left
+          p.text-secondary
+            | 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.
+        .column.col-10.col-sm-12.col-mx-auto
+          a.btn.btn-lg(href='getting-started.html#installation') Install Spectre.css
+
+  .section.section-updates.bg-gray
+    .container.grid-lg
+      .columns
+        .column.col-4.col-xs-12
+          .card
+            .card-header
+              .card-title.h6 Spectre Twitter
+            .card-body
+              | For the latest announcements and updates, follow on Twitter: 
+              a(href='https://twitter.com/spectrecss' target='_blank') @spectrecss
+              | .
+            .card-footer
+              a.btn.btn-primary(href='https://twitter.com/spectrecss' target='_blank') Follow
+        .column.col-4.col-xs-12
+          .card
+            .card-header
+              .card-title.h6 PayPal Donate
+            .card-body
+              | Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development. &hearts;
+            .card-footer
+              a.btn.btn-primary(href='https://www.paypal.me/picturepan2' target='_blank') Donate
+        .column.col-4.col-xs-12
+          .card
+            .card-header
+              .card-title.h6 Spectre Docs
+            .card-body
+              | Spectre Docs experience has been completely rewritten and improved.
+            .card-footer
+              a.btn.btn-primary(href='getting-started.html') Explore
+  footer.section.section-footer
+    #copyright.grid-footer.container.grid-lg
+      p
+        a(href='getting-started.html' target='_blank') Documents
+        |  · 
+        a(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
+        |  · 
+        a(href='https://twitter.com/spectrecss' target='_blank') Twitter
+        |  · 
+        a(href='https://www.paypal.me/picturepan2' target='_blank') PayPal Donate
+        |  · Version 
+        span.version
+      p
+        | Designed and built with 
+        span.text-error &hearts;
+        |  by 
+        a(href='https://twitter.com/picturepan2' target='_blank') Yan Zhu
+        | . Licensed under the 
+        a(href='https://github.com/picturepan2/spectre/blob/master/LICENSE' target='_blank') MIT License
+        | .  
\ No newline at end of file
diff --git a/docs/src/docs.scss b/docs/src/scss/docs.scss
index 70f4eb8..342ca8c 100644
--- a/docs/src/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -1,7 +1,7 @@
 /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
 // Core variables and mixins
-@import "../../src/variables";
-@import "../../src/mixins";
+@import "../../../src/variables";
+@import "../../../src/mixins";
 
 .version::after {
   content: "#{$version}";
@@ -18,6 +18,10 @@
   .off-canvas-sidebar {
     width: 12rem;
   }
+
+  .off-canvas-content {
+    padding: 0;
+  }
 }
 
 .docs-navbar {
@@ -80,12 +84,9 @@
 
 .docs-content {
   flex: 1 1 auto;
+  padding: 0 4rem;
   width: calc(100vw - 12rem);
 
-  &.off-canvas-content {
-    padding: 0 4rem;
-  }
-
   & > .container {
     margin-left: 0;
     max-width: 800px;
@@ -241,26 +242,28 @@
   }
 
   .code {
-    color: lighten($body-font-color, 10%);
+    .hljs-tag {
+      color: lighten($body-font-color, 10%);
+    }
 
-    .com {
+    .hljs-comment {
       color: $gray-color;
     }
-    .tag {
+    .hljs-title,
+    .hljs-class,
+    .hljs-string {
       color: $primary-color;
     }
-    .atn {
-      color: lighten($body-font-color, 10%);
-    }
-    .atv {
-      color: #e06870;
+    .hljs-attribute,
+    .hljs-variable,
+    .hljs-keyword,
+    .hljs-built_in {
+      color: $code-color;
+      
     }
-
-    &[data-lang="Bash"] {
-      .tag {
-        margin-right: 1em;
-        user-select: none;
-      }
+    .hljs-value,
+    .hljs-hexcolor {
+      color: lighten($body-font-color, 10%);
     }
   }
 
diff --git a/docs/src/scss/spectre-rtl.scss b/docs/src/scss/spectre-rtl.scss
new file mode 100644
index 0000000..51bc122
--- /dev/null
+++ b/docs/src/scss/spectre-rtl.scss
@@ -0,0 +1,7 @@
+/*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre */
+$rtl: true;
+
+// Import Spectre
+@import "../../../src/spectre";
+@import "../../../src/spectre-icons";
+@import "../../../src/spectre-exp";
diff --git a/docs/src/spectre-rtl.scss b/docs/src/spectre-rtl.scss
deleted file mode 100644
index fe18944..0000000
--- a/docs/src/spectre-rtl.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/*! Spectre.css RTL | MIT License | github.com/picturepan2/spectre */
-$rtl: true;
-
-// Import Spectre
-@import "../../src/spectre";
-@import "../../src/spectre-icons";
-@import "../../src/spectre-exp";