.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.container{margin-left:auto;margin-right:auto;padding-left:4%;padding-right:4%;max-width:1000px}.container:before,.container:after{content:" ";display:table}.container:after{clear:both}@media (max-width: 543px){.container{padding-left:4.8%;padding-right:4.8%}}@media (min-width: 1600px){.container{max-width:1600px}}.row,.color-chips{margin-left:-2px;margin-right:-2px}.row:before,.color-chips:before,.row:after,.color-chips:after{content:" ";display:table}.row:after,.color-chips:after{clear:both}.col-half{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:100%}@media (min-width: 768px){.col-half{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:50%}}.blog-logo{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:25%}@media (min-width: 768px){.blog-logo{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:20%}}@media (min-width: 1600px){.blog-logo{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:10%}}.cover{margin-left:-2px;margin-right:-2px}.cover:before,.cover:after{content:" ";display:table}.cover:after{clear:both}.cover-content{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:100%}@media (min-width: 544px){.cover-content{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:75%}}@media (min-width: 768px){.cover-content{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:80%}}#carbonads{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:100%}@media (min-width: 544px){#carbonads{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:25%}}@media (min-width: 768px){#carbonads{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:20%}}.shortcut-wrap .shortcut-menus{height:232px;-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:4px;-moz-column-gap:4px;column-gap:4px;-moz-column-fill:auto;column-fill:auto}@media (min-width: 544px){.shortcut-wrap .shortcut-menus{height:150px;-webkit-column-count:4;-moz-column-count:4;column-count:4}}@media (min-width: 768px){.shortcut-wrap .shortcut-menus{height:110px;-webkit-column-count:5;-moz-column-count:5;column-count:5}}@media (min-width: 1600px){.shortcut-wrap .shortcut-menus{height:80px;-webkit-column-count:10;-moz-column-count:10;column-count:10}}.color-chip{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:100%}@media (min-width: 544px){.color-chip{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:25%}}@media (min-width: 768px){.color-chip{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:20%}}@media (min-width: 1600px){.color-chip{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:10%}}@media (min-width: 544px){.docs-section,.introduction-section{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:75%}}@media (min-width: 768px){.docs-section,.introduction-section{position:relative;min-height:1px;padding-right:2px;padding-left:2px;float:left;width:80%}}a.blog-logo{display:inline-block;height:63px;background:url("../asset/images/logo.svg") no-repeat;background-size:40px 40px;background-position:center left;vertical-align:top}.metadata{padding:0;color:#868e96;font-size:12px;font-weight:400;line-height:18px}.nav-menus-wrap{display:inline-block;margin:0;padding:0;float:right}.nav-menus-group{position:relative;margin:0;list-style:none;float:left}.nav-menus-group:hover .nav-menus,.nav-menus-group:focus .nav-menus,.nav-menus-group:active .nav-menus{display:block}.menus-title{display:inline-block;margin:10px 5px;padding:10px 25px 13px;font-size:14px;color:#868e96;background-color:transparent;border:none;border-radius:22px;transition:font-weight 0.2s ease, background-color 0.2s ease, color 0.2s ease}.menus-title:hover{color:#495057;background-color:#f1f3f5}.menus-title:focus,.menus-title:active,.menus-title.active{color:#495057;font-weight:700;background-color:#f1f3f5}.nav-menus{position:absolute;top:100%;left:6px;z-index:1000;display:none;float:left;min-width:160px;margin:0;padding:8px 0;list-style:none;font-size:12px;background-color:#fff;border:1px solid #ced4da;border-radius:4px;box-shadow:0 1px 6px rgba(0,0,0,0.1);background-clip:padding-box;line-height:24px}.nav-menus>li>a{display:block;min-width:160px;padding:1px 40px 1px 20px;clear:both;font-size:14px;font-weight:normal;color:#868e96;line-height:2.5;white-space:nowrap;transition:background 0.2s ease, color 0.2s ease}.nav-menus>li>a:hover,.nav-menus>li>a:focus,.nav-menus>li>a:active{background-color:#f8f9fa;color:#495057}#navbar-toggle,.navbar-toggle{display:none}.navbar-toggle{z-index:2;margin-bottom:0;padding:0;width:auto;font-weight:400;float:right}.navbar-toggle:hover:after{color:#495057;font-weight:700}.navbar-toggle:after{content:'MENU';display:inline-block;margin-right:-4.8vw;padding:15px 30px;background:transparent;text-align:center;font-size:13px;color:#495057;line-height:2.5;-webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;-o-transition:all 0.5s linear;transition:all 0.5s linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#navbar-toggle:checked+.navbar-toggle:after{color:#495057;font-weight:700}@media only screen and (max-width: 870px){.navbar-toggle{display:inline-block;position:relative;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}#navbar-toggle:checked ~ .nav-menus-wrap{display:block;opacity:1}.nav-menus-wrap{display:none;opacity:0;margin-left:0;padding:20px 0;z-index:1;background:#fff;text-align:center;padding-top:70px}.nav-menus-wrap:before,.nav-menus-wrap:after{content:" ";display:table}.nav-menus-wrap:after{clear:both}.nav-menus-group,.menus-title,.nav-menus{width:100%}.nav-menus-group{margin-bottom:10px}.menus-title:not(.menus-github),.menus-title:not(.menus-github):hover,.menus-title:not(.menus-github):focus,.menus-title:not(.menus-github):active,.menus-title:not(.menus-github).active{margin:0 0 10px;padding:10px 0;color:#495057;font-weight:700}.menus-github{margin:0;padding:20px 0;border:1px solid #ced4da;border-radius:3px}.nav-menus{display:block;position:relative;left:0;text-align:center;border:none;box-shadow:none;padding:0}.nav-menus .nav-menu{padding:6px 0}}.cover{padding:100px 0;border-bottom:1px solid #dee2e6}.cover h1{margin:0 40px 40px 0;font-weight:600;color:#495057;font-size:36px;line-height:1.2}.cover h1 .sub{padding-top:20px;font-size:18px;font-weight:400;color:#868e96;line-height:1.5}.shortcut-wrap{padding:20px 0}.shortcut-wrap .shortcut-menus{list-style:none;margin-top:0;margin-bottom:0;padding:0}.shortcut-wrap a.shortcut{display:block;padding:6px 0;width:100%;font-size:12px;color:#868e96;font-weight:400;text-transform:uppercase;letter-spacing:.05em;transition:all 0.2s ease-out}.shortcut-wrap a.shortcut.gray:hover,.shortcut-wrap a.shortcut.gray:focus,.shortcut-wrap a.shortcut.gray:active{color:#495057}.shortcut-wrap a.shortcut .list-color{display:inline-block;margin-top:-2px;margin-right:10px;width:12px;height:12px;border-radius:3px;vertical-align:middle}.shortcut-wrap a.shortcut .list-color-gray{background:#495057}.shortcut-wrap a.shortcut.red:hover,.shortcut-wrap a.shortcut.red:focus,.shortcut-wrap a.shortcut.red:active{color:#f03e3e}.shortcut-wrap a.shortcut .list-color{display:inline-block;margin-top:-2px;margin-right:10px;width:12px;height:12px;border-radius:3px;vertical-align:middle}.shortcut-wrap a.shortcut .list-color-red{background:#f03e3e}.shortcut-wrap a.shortcut.pink:hover,.shortcut-wrap a.shortcut.pink:focus,.shortcut-wrap a.shortcut.pink:active{color:#d6336c}.shortcut-wrap a.shortcut .list-color{display:inline-block;margin-top:-2px;margin-right:10px;width:12px;height:12px;border-radius:3px;vertical-align:middle}.shortcut-wrap a.shortcut .list-color-pink{background:#d6336c}.shortcut-wrap a.shortcut.grape:hover,.shortcut-wrap a.shortcut.grape:focus,.shortcut-wrap a.shortcut.grape:active{color:#ae3ec9}.shortcut-wrap a.shortcut .list-color{display:inline-block;margin-top:-2px;margin-right:10px;width:12px;height:12px;border-radius:3px;vertical-align:middle}.shortcut-wrap a.shortcut .list-color-grape{background:#ae3ec9}.shortcut-wrap a.shortcut.violet:hover,.shortcut-wrap a.shortcut.violet:focus,.shortcut-wrap a.shortcut.violet:active{color:#7048e8}.shortcut-wrap a.shortcut .list-color{display:inline-block;margin-top:-2px;margin-right:10px;width:12px;height:12px;border-radius:3px;vertical-align:middle}.shortcut-wrap a.shortcut .list-color-violet{background:#7048e8}.shortcut-wrap a.shortcut.indigo:hover,.shortcut-wrap a.shortcut.indigo:focus,.shortcut-wrap a.shortcut.indigo:active{color:#4263eb}.shortcut-wrap a.shortcut .list-color{display:inline-block;margin-top:-2px;margin-right:10px;width:12px;height:12px;border-radius:3px;vertical-align:middle}.shortcut-wrap a.shortcut .list-color-indigo{background:#4263eb}.shortcut-wrap a.shortcut.blue:hover,.shortcut-wrap a.shortcut.blue:focus,.shortcut-wrap a.shortcut.blue:active{color:#1c7ed6}.shortcut-wrap a.shortcut .list-color{display:inline-block;margin-top:-2px;margin-right:10px;width:12px;height:12px;border-radius:3px;vertical-align:middle}.shortcut-wrap a.shortcut .list-color-blue{background:#1c7ed6}.shortcut-wrap a.shortcut.cyan:hover,.shortcut-wrap a.shortcut.cyan:focus,.shortcut-wrap a.shortcut.cyan:active{color:#1098ad}.shortcut-wrap a.shortcut .list-color{display:inline-block;margin-top:-2px;margin-right:10px;width:12px;height:12px;border-radius:3px;vertical-align:middle}.shortcut-wrap a.shortcut .list-color-cyan{background:#1098ad}.shortcut-wrap a.shortcut.teal:hover,.shortcut-wrap a.shortcut.teal:focus,.shortcut-wrap a.shortcut.teal:active{color:#0ca678}.shortcut-wrap a.shortcut .list-color{display:inline-block;margin-top:-2px;margin-right:10px;width:12px;height:12px;border-radius:3px;vertical-align:middle}.shortcut-wrap a.shortcut .list-color-teal{background:#0ca678}.shortcut-wrap a.shortcut.green:hover,.shortcut-wrap a.shortcut.green:focus,.shortcut-wrap a.shortcut.green:active{color:#37b24d}.shortcut-wrap a.shortcut .list-color{display:inline-block;margin-top:-2px;margin-right:10px;width:12px;height:12px;border-radius:3px;vertical-align:middle}.shortcut-wrap a.shortcut .list-color-green{background:#37b24d}.shortcut-wrap a.shortcut.lime:hover,.shortcut-wrap a.shortcut.lime:focus,.shortcut-wrap a.shortcut.lime:active{color:#74b816}.shortcut-wrap a.shortcut .list-color{display:inline-block;margin-top:-2px;margin-right:10px;width:12px;height:12px;border-radius:3px;vertical-align:middle}.shortcut-wrap a.shortcut .list-color-lime{background:#74b816}.shortcut-wrap a.shortcut.yellow:hover,.shortcut-wrap a.shortcut.yellow:focus,.shortcut-wrap a.shortcut.yellow:active{color:#f59f00}.shortcut-wrap a.shortcut .list-color{display:inline-block;margin-top:-2px;margin-right:10px;width:12px;height:12px;border-radius:3px;vertical-align:middle}.shortcut-wrap a.shortcut .list-color-yellow{background:#f59f00}.shortcut-wrap a.shortcut.orange:hover,.shortcut-wrap a.shortcut.orange:focus,.shortcut-wrap a.shortcut.orange:active{color:#f76707}.shortcut-wrap a.shortcut .list-color{display:inline-block;margin-top:-2px;margin-right:10px;width:12px;height:12px;border-radius:3px;vertical-align:middle}.shortcut-wrap a.shortcut .list-color-orange{background:#f76707}.color-wrap{display:inline-block}.color-group{padding-top:40px}.color-title{margin:0 0 30px;font-size:24px;text-transform:capitalize;font-weight:700;line-height:1.5}.color-title span{margin-right:0.5em}.color-chips{text-align:center}.color-chip{margin-bottom:40px;line-height:1.25}.color-chip input[type="text"]{border:none;font-family:"Roboto Mono",monospace;background-color:transparent}.color-name{padding:14px 3px 2px;text-transform:uppercase;text-align:left;font-size:14px;font-weight:500}.color-hex{padding:2px 3px;width:100%;font-size:14px;color:#868e96;line-height:1.3}.color-chip-bg{height:80px;border-radius:2px;position:relative;cursor:pointer}.color-chip-bg span{position:absolute;top:0;left:0;margin:10px;font-size:12px;text-transform:uppercase}.color-chip-bg:hover{transform:scale(0.92)}.ripple:before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;transform:translate(-50%, -50%);border-radius:50%;background-color:#fff;visibility:hidden;z-index:2}.ripple:not(:active):before{animation:ripple 0.3s cubic-bezier(0, 0.4, 0.8, 1);transition:visibility .2s step-end}.ripple:active:before{visibility:visible}@keyframes ripple{0%{width:0;height:0;opacity:0}100%{width:212px;height:212px;opacity:.18}}.bg-gray-0{background-color:#f8f9fa}.bg-gray-1{background-color:#f1f3f5}.bg-gray-2{background-color:#e9ecef}.bg-gray-3{background-color:#dee2e6}.bg-gray-4{background-color:#ced4da}.bg-gray-5{background-color:#adb5bd}.bg-gray-6{background-color:#868e96}.bg-gray-7{background-color:#495057}.bg-gray-8{background-color:#343a40}.bg-gray-9{background-color:#212529}.bg-red-0{background-color:#fff5f5}.bg-red-1{background-color:#ffe3e3}.bg-red-2{background-color:#ffc9c9}.bg-red-3{background-color:#ffa8a8}.bg-red-4{background-color:#ff8787}.bg-red-5{background-color:#ff6b6b}.bg-red-6{background-color:#fa5252}.bg-red-7{background-color:#f03e3e}.bg-red-8{background-color:#e03131}.bg-red-9{background-color:#c92a2a}.bg-pink-0{background-color:#fff0f6}.bg-pink-1{background-color:#ffdeeb}.bg-pink-2{background-color:#fcc2d7}.bg-pink-3{background-color:#faa2c1}.bg-pink-4{background-color:#f783ac}.bg-pink-5{background-color:#f06595}.bg-pink-6{background-color:#e64980}.bg-pink-7{background-color:#d6336c}.bg-pink-8{background-color:#c2255c}.bg-pink-9{background-color:#a61e4d}.bg-grape-0{background-color:#f8f0fc}.bg-grape-1{background-color:#f3d9fa}.bg-grape-2{background-color:#eebefa}.bg-grape-3{background-color:#e599f7}.bg-grape-4{background-color:#da77f2}.bg-grape-5{background-color:#cc5de8}.bg-grape-6{background-color:#be4bdb}.bg-grape-7{background-color:#ae3ec9}.bg-grape-8{background-color:#9c36b5}.bg-grape-9{background-color:#862e9c}.bg-violet-0{background-color:#f3f0ff}.bg-violet-1{background-color:#e5dbff}.bg-violet-2{background-color:#d0bfff}.bg-violet-3{background-color:#b197fc}.bg-violet-4{background-color:#9775fa}.bg-violet-5{background-color:#845ef7}.bg-violet-6{background-color:#7950f2}.bg-violet-7{background-color:#7048e8}.bg-violet-8{background-color:#6741d9}.bg-violet-9{background-color:#5f3dc4}.bg-indigo-0{background-color:#edf2ff}.bg-indigo-1{background-color:#dbe4ff}.bg-indigo-2{background-color:#bac8ff}.bg-indigo-3{background-color:#91a7ff}.bg-indigo-4{background-color:#748ffc}.bg-indigo-5{background-color:#5c7cfa}.bg-indigo-6{background-color:#4c6ef5}.bg-indigo-7{background-color:#4263eb}.bg-indigo-8{background-color:#3b5bdb}.bg-indigo-9{background-color:#364fc7}.bg-blue-0{background-color:#e7f5ff}.bg-blue-1{background-color:#d0ebff}.bg-blue-2{background-color:#a5d8ff}.bg-blue-3{background-color:#74c0fc}.bg-blue-4{background-color:#4dabf7}.bg-blue-5{background-color:#339af0}.bg-blue-6{background-color:#228be6}.bg-blue-7{background-color:#1c7ed6}.bg-blue-8{background-color:#1971c2}.bg-blue-9{background-color:#1864ab}.bg-cyan-0{background-color:#e3fafc}.bg-cyan-1{background-color:#c5f6fa}.bg-cyan-2{background-color:#99e9f2}.bg-cyan-3{background-color:#66d9e8}.bg-cyan-4{background-color:#3bc9db}.bg-cyan-5{background-color:#22b8cf}.bg-cyan-6{background-color:#15aabf}.bg-cyan-7{background-color:#1098ad}.bg-cyan-8{background-color:#0c8599}.bg-cyan-9{background-color:#0b7285}.bg-teal-0{background-color:#e6fcf5}.bg-teal-1{background-color:#c3fae8}.bg-teal-2{background-color:#96f2d7}.bg-teal-3{background-color:#63e6be}.bg-teal-4{background-color:#38d9a9}.bg-teal-5{background-color:#20c997}.bg-teal-6{background-color:#12b886}.bg-teal-7{background-color:#0ca678}.bg-teal-8{background-color:#099268}.bg-teal-9{background-color:#087f5b}.bg-green-0{background-color:#ebfbee}.bg-green-1{background-color:#d3f9d8}.bg-green-2{background-color:#b2f2bb}.bg-green-3{background-color:#8ce99a}.bg-green-4{background-color:#69db7c}.bg-green-5{background-color:#51cf66}.bg-green-6{background-color:#40c057}.bg-green-7{background-color:#37b24d}.bg-green-8{background-color:#2f9e44}.bg-green-9{background-color:#2b8a3e}.bg-lime-0{background-color:#f4fce3}.bg-lime-1{background-color:#e9fac8}.bg-lime-2{background-color:#d8f5a2}.bg-lime-3{background-color:#c0eb75}.bg-lime-4{background-color:#a9e34b}.bg-lime-5{background-color:#94d82d}.bg-lime-6{background-color:#82c91e}.bg-lime-7{background-color:#74b816}.bg-lime-8{background-color:#66a80f}.bg-lime-9{background-color:#5c940d}.bg-yellow-0{background-color:#fff9db}.bg-yellow-1{background-color:#fff3bf}.bg-yellow-2{background-color:#ffec99}.bg-yellow-3{background-color:#ffe066}.bg-yellow-4{background-color:#ffd43b}.bg-yellow-5{background-color:#fcc419}.bg-yellow-6{background-color:#fab005}.bg-yellow-7{background-color:#f59f00}.bg-yellow-8{background-color:#f08c00}.bg-yellow-9{background-color:#e67700}.bg-orange-0{background-color:#fff4e6}.bg-orange-1{background-color:#ffe8cc}.bg-orange-2{background-color:#ffd8a8}.bg-orange-3{background-color:#ffc078}.bg-orange-4{background-color:#ffa94d}.bg-orange-5{background-color:#ff922b}.bg-orange-6{background-color:#fd7e14}.bg-orange-7{background-color:#f76707}.bg-orange-8{background-color:#e8590c}.bg-orange-9{background-color:#d9480f}.color-tables{padding-top:40px;margin-bottom:60px}.value-table{border-collapse:separate;font-size:14px;width:100%}.value-table thead>tr>th{padding-top:10px;padding-bottom:10px;text-transform:uppercase;font-size:14px;letter-spacing:0.04em;line-height:1;color:#495057}.value-table tbody>tr>td{border-top:1px solid #e9ecef}.value-table tr>th,.value-table tr>td{padding:8px 12px;text-align:right;background-color:transparent;transition:background-color 0.2s ease-out;font-family:-apple-system,BlinkMacSystemFont,Lato,"Segoe UI",Verdana,Arial,sans-serif;width:calc(100% / 8);color:#868e96;transition:all 0.2s ease-out}.value-table tr>th.level,.value-table tr>td.level{text-align:left}.value-table tr>th:first-child,.value-table tr>td:first-child{padding-left:0}.value-table tr>th>.color-preview,.value-table tr>td>.color-preview{display:inline-block;margin-right:4px;width:16px;height:16px;border-radius:3px;vertical-align:text-top}.value-table tr>td.level{min-width:110px;text-transform:uppercase;letter-spacing:.05em;color:#495057;font-weight:500}.value-table>tbody>tr{transition:all 0.2s ease-out}.value-table>tbody>tr:hover{background-color:#f8f9fa}.value-table>tbody>tr:hover>th,.value-table>tbody>tr:hover>td{color:#495057}.value-table>tbody>tr:hover>th.rgb-red,.value-table>tbody>tr:hover>td.rgb-red{color:#e64980}.value-table>tbody>tr:hover>th.rgb-green,.value-table>tbody>tr:hover>td.rgb-green{color:#12b886}.value-table>tbody>tr:hover>th.rgb-blue,.value-table>tbody>tr:hover>td.rgb-blue{color:#4c6ef5}@media (max-width: 879px){.value-table{margin-left:-4%;margin-right:-4%;width:100vw}.value-table thead>tr>th:first-child,.value-table tbody>tr>td:first-child{padding-left:4%}.value-table thead>tr>th:last-child,.value-table tbody>tr>td:last-child{padding-right:4%}}.docs-section,.introduction-section{padding:40px 0}.docs-section:before,.docs-section:after,.introduction-section:before,.introduction-section:after{content:" ";display:table}.docs-section:after,.introduction-section:after{clear:both}.docs-title,.introduction-title{margin-top:0;margin-bottom:30px;font-size:24px;font-weight:700;line-height:1.5}@media (max-width: 543px){.docs-title,.introduction-title{font-size:20px}}.docs-content,.introduction-content{font-size:20px;line-height:1.6}@media (max-width: 543px){.docs-content,.introduction-content{font-size:16px}}.docs-content h5,.introduction-content h5{font-size:16px;margin-top:0}.docs-content p,.introduction-content p{margin-top:0}.docs-content ul,.introduction-content ul{padding-left:1.5em}.docs-content li .list-title,.introduction-content li .list-title{font-weight:700;width:100px;display:inline-block}.docs-content .row,.docs-content .color-chips,.introduction-content .row,.introduction-content .color-chips{margin-left:-15px;margin-right:-15px}.docs-content .row .col-half,.docs-content .color-chips .col-half,.introduction-content .row .col-half,.introduction-content .color-chips .col-half{padding-left:15px;padding-right:15px}.docs-content .example,.introduction-content .example{margin-top:2em;margin-bottom:2em}.docs-content .example .color-gray-0,.introduction-content .example .color-gray-0{color:#f8f9fa}.docs-content .example .bg-gray-0,.introduction-content .example .bg-gray-0{background-color:#f8f9fa}.docs-content .example .box.border-gray-0,.introduction-content .example .box.border-gray-0{border:1px solid #f8f9fa}.docs-content .example .color-gray-1,.introduction-content .example .color-gray-1{color:#f1f3f5}.docs-content .example .bg-gray-1,.introduction-content .example .bg-gray-1{background-color:#f1f3f5}.docs-content .example .box.border-gray-1,.introduction-content .example .box.border-gray-1{border:1px solid #f1f3f5}.docs-content .example .color-gray-2,.introduction-content .example .color-gray-2{color:#e9ecef}.docs-content .example .bg-gray-2,.introduction-content .example .bg-gray-2{background-color:#e9ecef}.docs-content .example .box.border-gray-2,.introduction-content .example .box.border-gray-2{border:1px solid #e9ecef}.docs-content .example .color-gray-3,.introduction-content .example .color-gray-3{color:#dee2e6}.docs-content .example .bg-gray-3,.introduction-content .example .bg-gray-3{background-color:#dee2e6}.docs-content .example .box.border-gray-3,.introduction-content .example .box.border-gray-3{border:1px solid #dee2e6}.docs-content .example .color-gray-4,.introduction-content .example .color-gray-4{color:#ced4da}.docs-content .example .bg-gray-4,.introduction-content .example .bg-gray-4{background-color:#ced4da}.docs-content .example .box.border-gray-4,.introduction-content .example .box.border-gray-4{border:1px solid #ced4da}.docs-content .example .color-gray-5,.introduction-content .example .color-gray-5{color:#adb5bd}.docs-content .example .bg-gray-5,.introduction-content .example .bg-gray-5{background-color:#adb5bd}.docs-content .example .box.border-gray-5,.introduction-content .example .box.border-gray-5{border:1px solid #adb5bd}.docs-content .example .color-gray-6,.introduction-content .example .color-gray-6{color:#868e96}.docs-content .example .bg-gray-6,.introduction-content .example .bg-gray-6{background-color:#868e96}.docs-content .example .box.border-gray-6,.introduction-content .example .box.border-gray-6{border:1px solid #868e96}.docs-content .example .color-gray-7,.introduction-content .example .color-gray-7{color:#495057}.docs-content .example .bg-gray-7,.introduction-content .example .bg-gray-7{background-color:#495057}.docs-content .example .box.border-gray-7,.introduction-content .example .box.border-gray-7{border:1px solid #495057}.docs-content .example .color-gray-8,.introduction-content .example .color-gray-8{color:#343a40}.docs-content .example .bg-gray-8,.introduction-content .example .bg-gray-8{background-color:#343a40}.docs-content .example .box.border-gray-8,.introduction-content .example .box.border-gray-8{border:1px solid #343a40}.docs-content .example .color-gray-9,.introduction-content .example .color-gray-9{color:#212529}.docs-content .example .bg-gray-9,.introduction-content .example .bg-gray-9{background-color:#212529}.docs-content .example .box.border-gray-9,.introduction-content .example .box.border-gray-9{border:1px solid #212529}.docs-content .example .box,.introduction-content .example .box{padding:2em 0;text-align:center;border-radius:4px;margin-bottom:10px;display:block;width:100%;border:1px solid transparent;transition:background-color 0.2s ease}.docs-content .example .box>.box,.introduction-content .example .box>.box{margin:2em 2em 0;width:auto}.docs-content .example .box.button,.introduction-content .example .box.button{background:#fff;border:1px solid #ced4da}.docs-content .example .box.button:hover,.docs-content .example .box.button:focus,.docs-content .example .box.button:active,.introduction-content .example .box.button:hover,.introduction-content .example .box.button:focus,.introduction-content .example .box.button:active{background-color:#f1f3f5}.docs-content .example .box.button.bg-gray-0,.introduction-content .example .box.button.bg-gray-0{background-color:#f8f9fa}.docs-content .example .box.button.bg-gray-0:hover,.docs-content .example .box.button.bg-gray-0:focus,.docs-content .example .box.button.bg-gray-0:active,.introduction-content .example .box.button.bg-gray-0:hover,.introduction-content .example .box.button.bg-gray-0:focus,.introduction-content .example .box.button.bg-gray-0:active{background-color:#e9ecef}.highlight{margin-left:0;margin-right:0;padding:20px 30px;background-color:#f8f9fa;border-radius:4px}pre{display:block;margin-top:0;margin-bottom:0;padding:0;line-height:1.5;white-space:pre;white-space:-moz-pre;white-space:-pre;white-space:-o-pre;word-wrap:break-word;word-break:break-all}pre code{margin:0;padding:0;font-size:inherit;white-space:pre-wrap;word-break:break-all;background-color:transparent;border-radius:0}@media (max-width: 543px){.cover{padding:20px 0}.cover h1{margin-bottom:30px;font-size:26px}.cover h1 .sub{padding-top:10px;font-size:15px}.cover .version,.cover .license{display:inline-block;float:left;margin-right:20px}.shortcut-wrap{padding:10px 0}.color-group,.color-tables{margin-top:3vw;margin-bottom:5vw;padding-top:2vw;padding-bottom:5vw}.color-title{margin-bottom:5vw;padding:2vw 0;font-size:20px}.color-chips{-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:4px;-moz-column-gap:4px;column-gap:4px;-moz-column-fill:auto;column-fill:auto}.color-chip{margin-bottom:4vw}.color-chip-bg{width:50px;height:50px;float:left;border-radius:6px}.color-name,.color-hex{width:calc(100% - 50px);float:left}.color-name{padding:8px 0 0 12px}.color-hex{padding:2px 0 2px 12px}.value-table{margin-left:-4.8%;margin-right:-4.8%;width:100vw}.value-table thead>tr>th,.value-table tbody>tr>td{padding:12px;font-size:14px}.value-table thead>tr>th:first-child,.value-table tbody>tr>td:first-child{padding-left:4.8%}.value-table thead>tr>th:nth-child(5),.value-table tbody>tr>td:nth-child(5){padding-right:4.8%}.value-table thead>tr>th:nth-child(6),.value-table thead>tr>th:nth-child(7),.value-table thead>tr>th:nth-child(8),.value-table tbody>tr>td:nth-child(6),.value-table tbody>tr>td:nth-child(7),.value-table tbody>tr>td:nth-child(8){display:none}@keyframes ripple{0%{width:0;height:0;opacity:0}100%{width:0;height:0;opacity:0}}}#carbonads{display:none;float:right;overflow:hidden;text-transform:none;font-size:12px;line-height:1.5}@media (max-width: 543px){#carbonads{margin-top:50px}}.carbon-text{color:#868e96;transition:all .2s ease-out}.carbon-text:hover,.carbon-text:focus,.carbon-text:active{color:#495057}#carbonads span{display:block;overflow:hidden}.carbon-img{display:block;margin-bottom:10px}.carbon-img img{border-radius:2px}@media (max-width: 543px){.carbon-img{display:inline-block;margin-bottom:0}}.carbon-text{display:block;text-align:left}@media (max-width: 543px){.carbon-text{display:inline-block;width:calc(100% - 130px);padding-left:20px;vertical-align:top}}a.carbon-poweredby{display:block;margin-top:10px;font-size:11px;color:#868e96}a.carbon-poweredby:hover,a.carbon-poweredby:focus,a.carbon-poweredby:active{color:#495057}@media (max-width: 543px){a.carbon-poweredby{margin-top:-22px;line-height:2;margin-left:150px}}html{box-sizing:border-box;font-size:14px}*,*:before,*:after{box-sizing:inherit}body{color:#495057;font-family:-apple-system,BlinkMacSystemFont,Lato,"Segoe UI",Verdana,Arial,sans-serif;font-size:14px;line-height:1.5;letter-spacing:0;-webkit-text-size-adjust:none}::selection{background:#e9ecef}a{color:#339af0;text-decoration:none}a:focus,a:hover{color:#1c7ed6}abbr[title]{border-bottom:none}hr{margin:40px auto;width:50%;height:1px;border:none;background:#dee2e6}ul>li+li{margin-top:0.25em}.no-wrap{display:inline-block;white-space:nowrap}.in-writing{margin-top:40px;font-size:22px;color:#868e96}