body{font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;}
.sweet-modal-buttons {
    border-top: 1px solid #e0e0e0;
    margin-top: 48px;
    text-align: right;
    padding-left: 22px;
    padding-right: 22px;
    padding-top: 18px;
    padding-bottom: 18px;
}
@media screen and (max-width: 420px) {
    .sweet-modal-buttons {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
}
}
.sweet-modal-buttons a.button, .sweet-modal-buttons button, a.button, button {
    display: inline-block;
    background: #F57C00;
    border: 1px solid #b85d00;
    color: #fff;
    font-size: 13px;
    font-family: "Roboto", "Open Sans", sans-serif;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: 3px;
    cursor: pointer;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
    margin-left: 12px;
    min-width: 64px;
    transition: all 0.2s;
    outline: 0;
}
a.button:hover, button:hover {
    background: #ff901f;
    color: #fff;
    text-decoration: none;
}
a.button:active, button:active {
    background: #b85d00;
    color: #fffaf5;
    border-color: #8f4800;
    box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.4);
}
a.accentB.button, button.accentB {
    background: #F57C00;
    border-color: #b85d00;
}
a.accentB.button:hover, button.accentB:hover {
    background: #ff901f;
}
a.accentB.button:active, button.accentB:active {
    background: #b85d00;
    color: #fffaf5;
    border-color: #8f4800;
}
a.accentB.bordered.button, button.accentB.bordered {
    background: none;
    border-color: #F57C00;
    color: #F57C00;
}
a.accentB.bordered.button:hover, button.accentB.bordered:hover {
    background: #F57C00;
    color: #fff;
    border-color: #b85d00;
}
a.accentB.bordered.button:active, button.accentB.bordered:active {
    background: #b85d00;
    color: #fffaf5;
    border-color: #8f4800;
}
a.blueB.button, button.blueB {
    background: #27AAE1;
    border-color: #1985b2;
}
a.blueB.button:hover, button.blueB:hover {
    background: #4bb8e6;
}
a.blueB.button:active, button.blueB:active {
    background: #1985b2;
    color: #fff;
    border-color: #146a8e;
}
a.blueB.bordered.button, button.blueB.bordered {
    background: none;
    border-color: #27AAE1;
    color: #27AAE1;
}
a.blueB.bordered.button:hover, button.blueB.bordered:hover {
    background: #27AAE1;
    color: #fff;
    border-color: #1985b2;
}
a.blueB.bordered.button:active, button.blueB.bordered:active {
    background: #1985b2;
    color: #fff;
    border-color: #146a8e;
}
a.redB.button, button.redB {
    background: #E64A33;
    border-color: #c42e18;
}
a.redB.button:hover, button.redB:hover {
    background: #ea6a57;
}
a.redB.button:active, button.redB:active {
    background: #c42e18;
    color: #fff;
    border-color: #9f2614;
}
a.redB.bordered.button, button.redB.bordered {
    background: none;
    border-color: #E64A33;
    color: #E64A33;
}
a.redB.bordered.button:hover, button.redB.bordered:hover {
    background: #E64A33;
    color: #fff;
    border-color: #c42e18;
}
a.redB.bordered.button:active, button.redB.bordered:active {
    background: #c42e18;
    color: #fff;
    border-color: #9f2614;
}
a.yellowB.button, button.yellowB {
    background: #f39c12;
    border-color: #be780a;
}
a.yellowB.button:hover, button.yellowB:hover {
    background: #f5ac39;
}
a.yellowB.button:active, button.yellowB:active {
    background: #be780a;
    color: #fff;
    border-color: #976008;
}
a.yellowB.bordered.button, button.yellowB.bordered {
    background: none;
    border-color: #f39c12;
    color: #f39c12;
}
a.yellowB.bordered.button:hover, button.yellowB.bordered:hover {
    background: #f39c12;
    color: #fff;
    border-color: #be780a;
}
a.yellowB.bordered.button:active, button.yellowB.bordered:active {
    background: #be780a;
    color: #fff;
    border-color: #976008;
}
a.blueB.button, button.blueB {
    background: #27AAE1;
    border-color: #1985b2;
}
a.blueB.button:hover, button.blueB:hover {
    background: #4bb8e6;
}
a.blueB.button:active, button.blueB:active {
    background: #1985b2;
    color: #fff;
    border-color: #146a8e;
}
a.blueB.bordered.button, button.blueB.bordered {
    background: none;
    border-color: #27AAE1;
    color: #27AAE1;
}
a.blueB.bordered.button:hover, button.blueB.bordered:hover {
    background: #27AAE1;
    color: #fff;
    border-color: #1985b2;
}
a.blueB.bordered.button:active, button.blueB.bordered:active {
    background: #1985b2;
    color: #fff;
    border-color: #146a8e;
}
a.greenB.button, button.greenB {
    background: #B7D968;
    border-color: #a0cd37;
}
a.greenB.button:hover, button.greenB:hover {
    background: #c7e189;
}
a.greenB.button:active, button.greenB:active {
    background: #a0cd37;
    color: #fff;
    border-color: #88af2c;
}
a.greenB.bordered.button, button.greenB.bordered {
    background: none;
    border-color: #B7D968;
    color: #B7D968;
}
a.greenB.bordered.button:hover, button.greenB.bordered:hover {
    background: #B7D968;
    color: #fff;
    border-color: #a0cd37;
}
a.greenB.bordered.button:active, button.greenB.bordered:active {
    background: #a0cd37;
    color: #fff;
    border-color: #88af2c;
}
a.redB.button, button.redB {
    background: #E64A33;
    border-color: #c42e18;
}
a.redB.button:hover, button.redB:hover {
    background: #ea6a57;
}
a.redB.button:active, button.redB:active {
    background: #c42e18;
    color: #fff;
    border-color: #9f2614;
}
a.redB.bordered.button, button.redB.bordered {
    background: none;
    border-color: #E64A33;
    color: #E64A33;
}
a.redB.bordered.button:hover, button.redB.bordered:hover {
    background: #E64A33;
    color: #fff;
    border-color: #c42e18;
}
a.redB.bordered.button:active, button.redB.bordered:active {
    background: #c42e18;
    color: #fff;
    border-color: #9f2614;
}
a.pinkB.button, button.pinkB {
    background: #E91E63;
    border-color: #b8124a;
}
a.pinkB.button:hover, button.pinkB:hover {
    background: #ed437d;
}
a.pinkB.button:active, button.pinkB:active {
    background: #b8124a;
    color: #fff;
    border-color: #930e3b;
}
a.pinkB.bordered.button, button.pinkB.bordered {
    background: none;
    border-color: #E91E63;
    color: #E91E63;
}
a.pinkB.bordered.button:hover, button.pinkB.bordered:hover {
    background: #E91E63;
    color: #fff;
    border-color: #b8124a;
}
a.pinkB.bordered.button:active, button.pinkB.bordered:active {
    background: #b8124a;
    color: #fff;
    border-color: #930e3b;
}
a.purpleB.button, button.purpleB {
    background: #673AB7;
    border-color: #4d2b89;
}
a.purpleB.button:hover, button.purpleB:hover {
    background: #7c52c8;
}
a.purpleB.button:active, button.purpleB:active {
    background: #4d2b89;
    color: #f7f4fc;
    border-color: #3b216a;
}
a.purpleB.bordered.button, button.purpleB.bordered {
    background: none;
    border-color: #673AB7;
    color: #673AB7;
}
a.purpleB.bordered.button:hover, button.purpleB.bordered:hover {
    background: #673AB7;
    color: #fff;
    border-color: #4d2b89;
}
a.purpleB.bordered.button:active, button.purpleB.bordered:active {
    background: #4d2b89;
    color: #f7f4fc;
    border-color: #3b216a;
}
.sweet-modal-buttons a.orangeB.button, .sweet-modal-buttons button.orangeB, a.button, button {
    background: #F57C00;
    border-color: #b85d00;
}
a.button:hover, button:hover {
    background: #ff901f;
}
a.button:active, button:active {
    background: #b85d00;
    color: #fffaf5;
    border-color: #8f4800;
}
a.bordered.button, button.bordered {
    background: none;
    border-color: #F57C00;
    color: #F57C00;
}
a.bordered.button:hover, button.bordered:hover {
    background: #F57C00;
    color: #fff;
    border-color: #b85d00;
}
a.bordered.button:active, button.bordered:active {
    background: #b85d00;
    color: #fffaf5;
    border-color: #8f4800;
}
a.secondaryB.button, button.secondaryB {
    background: #0b0b0b;
    border-color: #000;
    color: #0b0b0b;
}
a.secondaryB.button:hover, button.secondaryB:hover {
    background: #000;
    color: #181818;
}
a.secondaryB.button:active, button.secondaryB:active {
    background: #000;
    box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.2);
    border-color: #000;
}
a.secondaryB.bordered.button, button.secondaryB.bordered {
    background: none;
    border-color: #0b0b0b;
    color: #0b0b0b;
}
a.secondaryB.bordered.button:hover, button.secondaryB.bordered:hover {
    background: #0b0b0b;
    color: #0b0b0b;
    border-color: #0b0b0b;
}
a.secondaryB.bordered.button:active, button.secondaryB.bordered:active {
    background: #000;
    color: #000;
    border-color: #000;
}
a.whiteB.button, button.whiteB {
    background: #fff;
    border-color: #e0e0e0;
    color: #0b0b0b;
}
a.whiteB.button:hover, button.whiteB:hover {
    background: #ebebeb;
    color: #181818;
}
a.whiteB.button:active, button.whiteB:active {
    background: #e0e0e0;
    box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.2);
    border-color: #ccc;
}
a.whiteB.bordered.button, button.whiteB.bordered {
    background: none;
    border-color: #fff;
    color: #fff;
}
a.whiteB.bordered.button:hover, button.whiteB.bordered:hover {
    background: #fff;
    color: #0b0b0b;
    border-color: #fff;
}
a.whiteB.bordered.button:active, button.whiteB.bordered:active {
    background: #e0e0e0;
    color: gray;
    border-color: #ccc;
}
a.darkB.button, button.darkB {
    background: #5A5A5A;
    border-color: #3b3b3b;
}
a.darkB.button:hover, button.darkB:hover {
    background: #6e6e6e;
}
a.darkB.button:active, button.darkB:active {
    background: #3b3b3b;
    color: #dadada;
    border-color: #272727;
}
a.darkB.bordered.button, button.darkB.bordered {
    background: none;
    border-color: #5A5A5A;
    color: #5A5A5A;
}
a.darkB.bordered.button:hover, button.darkB.bordered:hover {
    background: #5A5A5A;
    color: #fff;
    border-color: #3b3b3b;
}
a.darkB.bordered.button:active, button.darkB.bordered:active {
    background: #3b3b3b;
    color: #dadada;
    border-color: #272727;
}
a.disabledB.button, button.disabledB {
    background: #81cded;
    border-color: #66c3ea;
    color: #1d9cd1;
    cursor: default;
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
a.bordered.flat.button, button.bordered.flat {
    border-color: transparent;
}
body {
    margin: 0;
    padding: 0;
    font-size: 15px;
    /*font-family: "Clear Sans", "Open Sans", Roboto, sans-serif;*/
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .nexa, section.options table th {
    margin: 0;
    padding: 0;
    font-family: Nexa, Roboto, Open Sans, sans-serif;
}
pre, h4 {
    margin: 0;
    padding: 0;
}
pre {
    overflow: auto;
}
.grey {
    color: #999;
}
p.desc {
    margin: 0;
    padding: 0;
    color: #999;
}
a {
    color: #F57C00;
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: #999;
    text-decoration: underline;
}
a.button, button {
    margin-left: 0;
}
input[type=text] {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
    outline: 0;
    border-radius: 3px;
    border: 1px solid #e0e0e0;
    box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.04);
}
/*header {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding-top: 48px;
    padding-bottom: 32px;
}
header>.logo {
    display: table-cell;
    vertical-align: middle;
    width: 284px;
    text-align: center;
}
header>.logo span.logo {
    display: block;
    font-size: 32px;
    padding-top: 24px;
    padding-bottom: 24px;
    border-radius: 3px;
}
header>.logo span.logo span.sweet {
    color: #F57C00;
    font-family: Architects Daughter, sans-serif;
}
header>.logo span.logo span.modal {
    font-weight: 600;
}
header .slogan {
    display: table-cell;
    vertical-align: middle;
    width: auto;
    padding-left: 48px;
    font-family: Architects Daughter, sans-serif;
    font-size: 24px;
}
header .github {
    display: table-cell;
    vertical-align: middle;
    width: 164px;
    text-align: right;
}
header .github a svg {
    vertical-align: middle;
    margin-top: -4px;
}
header .github a svg, header .github a svg path {
    fill: #F57C00;
    transition: all 0.2s;
}
header .github a span {
    font-size: 18px;
    font-weight: 600;
}
header .github a:hover {
    text-decoration: none;
}
header .github a:hover svg, header .github a:hover svg path {
    fill: #999;
}*/
/*@media screen and (max-width: 600px) {
    header {
    display: block;
    padding-bottom: 48px;
}
header>.logo, header .slogan, header .github {
    display: block;
    width: auto;
    text-align: center;
    padding: 0;
}
header>.logo+.slogan {
    margin-top: -24px;
}
header>.logo+.github, header>.slogan+.github {
    margin-top: 24px;
}
}*/
section {
    position: relative;
}
section .wrap {
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 64px;
    padding-bottom: 56px;
}
section h2 {
    position: relative;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 24px;
}
section h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}
section h3:not(.no-transform) {
    text-transform: uppercase;
}
section h3:not(.no-letter-spacing) {
    letter-spacing: 4px;
}
section.intro {
    background: #F57C00;
    color: #fff;
}
section.intro h2 {
    margin: 0;
    padding: 0;
    text-transform: none;
}
section.intro h2 code {
    display: inline-block;
    font-size: 25px;
    text-transform: none;
}
section.intro+section.demo {
    padding-top: 32px;
}
section.demo .example {
    background: #ECEFF1;
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 24px;
    padding-right: 24px;
}
section.demo .example .code h4 {
    font-size: 14px;
    font-weight: 600;
}
section.demo .example .code h4+pre {
    margin-top: 12px;
}
section.demo .example .code pre+h4 {
    margin-top: 24px;
}
section.demo .example+.example {
    margin-top: 32px;
}
section.demo .example:last-child {
    margin-bottom: 32px;
}
@media screen and (max-width: 600px) {
    section.demo .example .meta+.code {
    margin-top: 32px;
}
}
section.demo .paragraph+.example {
    margin-top: 48px;
}
section.demo .paragraph {
    padding-top: 32px;
    padding-bottom: 32px;
}
section.demo .paragraph p {
    font-size: 16px;
    padding-left: 24px;
    padding-right: 24px;
}
section.demo .paragraph p button {
    padding-top: 4px;
    padding-bottom: 4px;
}
section.demo+section.setup {
    margin-top: 32px;
}
section.setup {
    background: #292c34;
    color: #fff;
}
section.setup h2 {
    color: #F57C00;
    margin-bottom: 0;
}
section.setup .methods .method {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.2);
    margin: 5px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}
section.setup .methods .method.manual ol {
    margin: 0;
    padding: 0;
    padding-left: 24px;
}
section.setup .methods .method.manual ol li {
    padding-left: 20px;
    line-height: 1.5;
}
section.setup .methods .method.manual ol li+li {
    margin-top: 12px;
}
section.setup .methods .method.manual ol li h4 {
    font-size: 16px;
}
section.setup .note {
    margin-bottom: 48px;
}
section.options p.desc+h3, section.options .twrap+h3, section.options pre+h3 {
    margin-top: 64px;
}
section.options .twrap {
    overflow-x: auto;
}
section.options p.desc+.twrap {
    margin-top: 32px;
}
section.options table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}
section.options table td, section.options table th {
    font-size: 16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    vertical-align: top;
}
section.options table th {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 2px solid #F57C00;
    color: #F57C00;
}
section.options table td p {
    margin: 0;
    padding: 0;
}
section.options table td p+p {
    margin-top: 16px;
}
section.options table tr:nth-child(even) {
    background: #ECEFF1;
}
footer {
    display: table;
    table-layout: fixed;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 24px;
    padding-bottom: 24px;
}
footer .copyright {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    color: #999;
    font-size: 12px;
}
footer .copyright img {
    height: 14px;
    vertical-align: middle;
}
footer .links {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    text-align: right;
}
footer .links a {
    color: #F57C00;
}
footer .links a svg {
    height: 16px;
    width: 16px;
    vertical-align: middle;
    margin-top: -2px;
}
footer .links a svg, footer .links a svg path {
    fill: #F57C00;
    transition: all 0.2s;
}
footer .links a:hover {
    color: #999;
    text-decoration: none;
}
footer .links a:hover svg, footer .links a:hover svg path {
    fill: #999;
}
pre.prettyprint {
    color: #F8F8F8;
    border: 0 !important;
    -webkit-font-smoothing: auto;
}
pre.stylize, code.stylize {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    border-radius: 3px;
    background: #292c34;
    color: #fff;
    font-family: Hack, Source Code Pro, monospace;
    font-size: 13px;
    line-height: 1.5;
    tab-size: 4;
    border: 0;
}
pre.stylize {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
code.stylize {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
pre.prettyprint .pln {
    color: #fff !important;
}
pre.prettyprint .pun {
    color: #fff !important;
}
pre.prettyprint .com {
    color: #999 !important;
}
pre.prettyprint .typ {
    color: #66D9EF !important;
}
pre.prettyprint .kwd {
    color: #F92672 !important;
}
pre.prettyprint .tag {
    color: #F92672 !important;
}
pre.prettyprint .atn {
    color: #A6E22E !important;
}
pre.prettyprint .atv {
    color: #E6DB74 !important;
}
pre.prettyprint .str {
    color: #E6DB74 !important;
}
pre.prettyprint .lit {
    color: #AE81FF !important;
}
.project-navigation {
    background: #000;
    color: #fff;
    overflow-x: auto;
}
.project-navigation ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    padding-left: 32px;
    padding-right: 32px;
}
.project-navigation ul li {
    display: block;
}
.project-navigation ul li a, .project-navigation ul li label {
    display: block;
    font-size: 14px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 14px;
    padding-bottom: 12px;
}
.project-navigation ul li label {
    font-weight: 600;
}
.project-navigation ul li a {
    color: #999;
}
.project-navigation ul li a.active {
    color: #fff;
    font-weight: 600;
}
nav.project-navigation {
    background: #ECEFF1;
}
nav.project-navigation ul li label {
    color: #8d9ba5;
}
nav.project-navigation ul li a {
    color: #8d9ba5;
}
nav.project-navigation ul li a:hover {
    color: #142B39;
    text-decoration: none;
}
nav.project-navigation ul li a.active {
    background: #fff;
    color: #142B39;
}
 section .wrap, section.demo .example, section.demo .paragraph {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 1000px;
    margin: auto;
}
section.demo .example, section.setup .methods {
    display: flex;
}
section.demo .example .meta {
    width: 33.33%}
section.setup .methods .method.npm, section.setup .methods .method.bower {
    width: 50%}
section.demo .example .code {
    width: 66.67%}
@media screen and (max-width: 600px) {
    section.demo .example, section.setup .methods {
    display: block;
}
section.demo .example .meta, section.setup .methods .method.npm, section.setup .methods .method.bower, section.demo .example .code {
    width: 100%}
}