@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600");

* {
    -webkit-font-smoothing      : antialiased;
    -webkit-overflow-scrolling  : touch;
    -webkit-tap-highlight-color : rgba(0, 0, 0, 0);
    -webkit-text-size-adjust    : none;
    -webkit-touch-callout       : none;
    box-sizing                  : border-box
}

.emoji {
    height         : 19.2px;
    height         : 1.2rem;
    vertical-align : middle
}

.progress {
    background-color : #0F9AEE;
    height           : 2px;
    left             : 0;
    position         : fixed;
    right            : 0;
    top              : 0;
    transition       : width .2s, opacity .4s;
    width            : 0;
    z-index          : 5
}


body, html {
    background: #FBFBFB;
    height : 100%
}

body {
    -moz-osx-font-smoothing : grayscale;
    -webkit-font-smoothing  : antialiased;
    color                   : #34495E;
    font-family             : Source Sans Pro, Helvetica Neue, Arial, sans-serif;
    font-size               : 16px;
    letter-spacing          : 0;
    margin                  : 0;
    overflow-x              : hidden
}

img {
    max-width : 100%
}

a[disabled] {
    cursor  : not-allowed;
    opacity : .6
}

kbd {
    border         : 1px solid #CCCCCC;
    border-radius  : 3px;
    display        : inline-block;
    font-size      : 12px !important;
    line-height    : 12px;
    margin-bottom  : 3px;
    padding        : 3px 5px;
    vertical-align : middle
}

.task-list-item {
    list-style-type : none
}

li input[type=checkbox] {
    margin         : 0 .2em .25em -1.6em;
    vertical-align : middle
}
.text-center {
    text-align: center !important;
}
main {
    display  : block;
    position : relative;
    width    : 100vw;
    height   : 100%;
    z-index  : 0
}

.anchor {
    display         : inline-block;
    text-decoration : none;
    transition      : all .3s
}

.anchor span {
    color : #34495E
}

.anchor:hover {
    text-decoration : underline
}

.sidebar {
    overflow-y   : auto;
    padding      : 15px 0 0;
    top          : 0;
    bottom       : 0;
    left         : 0;
    position     : absolute;
    transition   : -webkit-transform .25s ease-out;
    transition   : transform .25s ease-out, -webkit-transform .25s ease-out;
    width        : 300px;
    z-index      : 3
}

.sidebar > h1 {
    margin      : 0 auto 16px;
    margin      : 0 auto 1rem;
    font-size   : 24px;
    font-size   : 1.5rem;
    font-weight : 300;
    text-align  : center
}

.sidebar > h1 a {
    color           : inherit;
    text-decoration : none
}

.sidebar > h1 .app-nav {
    display  : block;
    position : static
}

.sidebar .sidebar-nav {
    line-height    : 2em;
    padding-bottom : 40px
}

.sidebar ul {
    margin  : 0;
    padding : 0
}

.sidebar li > p {
    font-weight : 700;
    margin      : 0
}

.sidebar ul, .sidebar ul li {
    list-style : none
}

.sidebar ul li a {
    border-bottom : none;
    display       : block
}

.sidebar ul li ul {
    padding-left : 20px
}

.sidebar::-webkit-scrollbar {
    width : 4px
}

.sidebar::-webkit-scrollbar-thumb {
    background    : transparent;
    border-radius : 4px
}

.sidebar:hover::-webkit-scrollbar-thumb {
    background : hsla(0, 0%, 53%, .4)
}

.sidebar:hover::-webkit-scrollbar-track {
    background : hsla(0, 0%, 53%, .1)
}

.sidebar-toggle {
    background-color : transparent;
    border           : 0;
    outline          : none;
    padding          : 10px;
    top           : 0;
    right             : 0;
    position         : absolute;
    text-align       : center;
    transition       : opacity .3s;
    z-index          : 4
}

.sidebar-toggle .sidebar-toggle-button:hover {
    opacity : .4
}

.sidebar-toggle span {
    background-color : #0F9AEE;
    display          : block;
    margin-bottom    : 4px;
    width: 20px;
    height: 3px;
}

body.sticky .sidebar, body.sticky .sidebar-toggle {
    position : fixed
}
.content {
    padding-top : 60px;
    top         : 0;
    right       : 0;
    bottom      : 0;
    left        : 300px;
    position    : absolute;
    transition  : left .25s ease;
    background: #FBFBFB;
}

.markdown-section {
    margin    : 0 auto;
    max-width : 860px;
    padding   : 0 15px;
    position  : relative;
    text-align: justify;
}

.markdown-section > * {
    box-sizing : border-box;
    font-size  : inherit
}

.markdown-section > :first-child {
    margin-top : 0 !important
}

.markdown-section hr {
    border        : none;
    border-bottom : 1px solid #EEEEEE;
    margin        : 2em 0
}

.markdown-section table {
    border-collapse : collapse;
    border-spacing  : 0;
    display         : block;
    margin-bottom   : 16px;
    margin-bottom   : 1rem;
    overflow        : auto;
    width           : 100%
}

.markdown-section th {
    font-weight : 700
}

.markdown-section td, .markdown-section th {
    border  : 1px solid #DDDDDD;
    padding : 6px 13px
}

.markdown-section tr {
    border-top : 1px solid #CCCCCC
}

.markdown-section p.tip, .markdown-section tr:nth-child(2n) {
    background-color : #F8F8F8
}

.markdown-section p.tip {
    border-bottom-right-radius : 2px;
    border-left                : 4px solid #FF6666;
    border-top-right-radius    : 2px;
    margin                     : 2em 0;
    padding                    : 12px 24px 12px 30px;
    position                   : relative
}

.markdown-section p.tip code {
    background-color : #EFEFEF
}

.markdown-section p.tip em {
    color : #34495E
}

.markdown-section p.tip:before {
    background-color : #FF6666;
    border-radius    : 100%;
    color            : #FFFFFF;
    content          : "!";
    font-family      : Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
    font-size        : 14px;
    font-weight      : 700;
    left             : -12px;
    line-height      : 20px;
    position         : absolute;
    width            : 20px;
    height           : 20px;
    text-align       : center;
    top              : 14px
}

.markdown-section p.warn {
    background    : rgba(66, 185, 131, .1);
    border-radius : 2px;
    padding       : 16px;
    padding       : 1rem
}

body.closed .sidebar {
    -webkit-transform : translateX(-300px);
    transform         : translateX(-300px)
}

body.closed .sidebar-toggle {
    width : auto
}

body.closed .content {
    left : 0
}
.note {
    padding: 25px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    position: relative;
    margin-bottom: 30px;
}

.note a {
    color: rgba(0, 0, 0, 0.55) !important;
}

.note a:hover {
    color: rgba(0, 0, 0, 0.65) !important;
}

.note .icon-holder {
    font-size: 30px;
    position: absolute;
    left: 30px;
    top: 35%;
    color: rgba(0, 0, 0, 0.25);
}

.note .text {
    margin-left: 60px;
}
.note .text p {
    margin-top: 0;
}
.note .text p:last-child {
    margin-bottom: 0;
}

.note .note-title {
    margin-top: 0;
    margin-bottom: 5px;
    color: rgba(0, 0, 0, 0.65);
}
.note-info {
    background: #2daee9;
    color: #fff;
}
.note-success {
    background: #b9df90;
    color: #fff;
}
.note-warning {
    background: #ffdd87;
    color: #fff;
}
.note-danger {
    background: #f2838f;
    color: #fff;
}
.screenshot-holder {
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
    text-align: center;
}
.screenshot-holder img {
    border: 1px solid #f0f0f0;
}
.screenshot-holder .mask {
    display: block;
    visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    text-decoration: none;
}
.screenshot-holder .mask .icon {
    color: #fff;
    font-size: 42px;
    display: block;
    position: absolute;
    width: 100%;
    /*height: 100%;*/
    top: 50%;
    margin-top: -21px;
}
.screenshot-holder:hover .mask {
    visibility: visible;
}
@media print {
    .app-nav, .github-corner, .sidebar, .sidebar-toggle {
        display : none
    }
}

@media screen and (max-width : 768px) {
    .github-corner, .sidebar, .sidebar-toggle {
        position : fixed
    }

    .app-nav {
        margin-top : 16px
    }

    .app-nav li ul {
        top : 30px
    }

    main {
        height     : auto;
        overflow-x : hidden
    }

    .sidebar {
        left       : -300px;
        transition : -webkit-transform .25s ease-out;
        transition : transform .25s ease-out;
        transition : transform .25s ease-out, -webkit-transform .25s ease-out
    }

    .content {
        left        : 0;
        max-width   : 100vw;
        position    : static;
        padding-top : 20px;
        transition  : -webkit-transform .25s ease;
        transition  : transform .25s ease;
        transition  : transform .25s ease, -webkit-transform .25s ease
    }

    .app-nav, .github-corner {
        transition : -webkit-transform .25s ease-out;
        transition : transform .25s ease-out;
        transition : transform .25s ease-out, -webkit-transform .25s ease-out
    }

    .sidebar-toggle {
        background-color : transparent;
        width            : auto
    }

    body.closed .sidebar {
        -webkit-transform : translateX(300px);
        transform         : translateX(300px)
    }

    body.closed .sidebar-toggle {
        background-color : hsla(0, 0%, 100%, .8);
        transition       : background-color 1s;
        width            : 284px
    }

    body.closed .content {
        -webkit-transform : translateX(300px);
        transform         : translateX(300px)
    }

    body.closed .app-nav, body.closed .github-corner {
        display : none
    }

    .github-corner .octo-arm {
        -webkit-animation : a .56s ease-in-out;
        animation         : a .56s ease-in-out
    }

    .github-corner:hover .octo-arm {
        -webkit-animation : none;
        animation         : none
    }
}

@-webkit-keyframes a {
    0%, to {
        -webkit-transform : rotate(0);
        transform         : rotate(0)
    }
    20%, 60% {
        -webkit-transform : rotate(-25deg);
        transform         : rotate(-25deg)
    }
    40%, 80% {
        -webkit-transform : rotate(10deg);
        transform         : rotate(10deg)
    }
}

@keyframes a {
    0%, to {
        -webkit-transform : rotate(0);
        transform         : rotate(0)
    }
    20%, 60% {
        -webkit-transform : rotate(-25deg);
        transform         : rotate(-25deg)
    }
    40%, 80% {
        -webkit-transform : rotate(10deg);
        transform         : rotate(10deg)
    }
}

section.cover {
    -webkit-box-align   : center;
    -ms-flex-align      : center;
    align-items         : center;
    background-position : 50%;
    background-repeat   : no-repeat;
    background-size     : cover;
    height              : 100vh;
    display             : none
}

section.cover .cover-main {
    -webkit-box-flex : 1;
    -ms-flex         : 1;
    flex             : 1;
    margin           : -20px 16px 0;
    text-align       : center;
    z-index          : 1
}

section.cover a {
    color : inherit
}

section.cover a, section.cover a:hover {
    text-decoration : none
}

section.cover p {
    line-height : 24px;
    line-height : 1.5rem;
    margin      : 1em 0
}

section.cover h1 {
    color       : inherit;
    font-size   : 40px;
    font-size   : 2.5rem;
    font-weight : 300;
    margin      : 10px 0 40px;
    margin      : .625rem 0 2.5rem;
    position    : relative;
    text-align  : center
}

section.cover h1 a {
    display : block
}

section.cover h1 small {
    bottom    : -7px;
    bottom    : -.4375rem;
    font-size : 16px;
    font-size : 1rem;
    position  : absolute
}

section.cover blockquote {
    font-size  : 24px;
    font-size  : 1.5rem;
    text-align : center
}

section.cover ul {
    line-height     : 1.8;
    list-style-type : none;
    margin          : 1em auto;
    max-width       : 500px;
    padding         : 0
}

section.cover .cover-main > p:last-child a {
    border-color    : #0F9AEE;
    border          : 1px solid var(--theme-color, #0F9AEE);
    border-radius   : 2rem;
    box-sizing      : border-box;
    color           : #0F9AEE;
    color           : var(--theme-color, #0F9AEE);
    display         : inline-block;
    font-size       : 16.8px;
    font-size       : 1.05rem;
    letter-spacing  : 1.6px;
    letter-spacing  : .1rem;
    margin-right    : 16px;
    margin-right    : 1rem;
    padding         : .75em 32px;
    padding         : .75em 2rem;
    text-decoration : none;
    transition      : all .15s ease
}

section.cover .cover-main > p:last-child a:last-child {
    background-color : #0F9AEE;
    background-color : var(--theme-color, #0F9AEE);
    color            : #FFFFFF;
    margin-right     : 0
}

section.cover .cover-main > p:last-child a:last-child:hover {
    color   : inherit;
    opacity : .8
}

section.cover .cover-main > p:last-child a:hover {
    color : inherit
}

section.cover blockquote > p > a {
    border-bottom : 2px solid #0F9AEE;
    border-bottom : 2px solid var(--theme-color, #0F9AEE);
    transition    : color .3s
}

section.cover blockquote > p > a:hover {
    color : #0F9AEE;
    color : var(--theme-color, #0F9AEE)
}

section.cover.show {
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex
}

section.cover.has-mask .mask {
    background-color : #FFFFFF;
    opacity          : .8;
    position         : absolute;
    width            : 100%;
    height           : 100%
}

.sidebar, body {
    background-color : #FFFFFF
}

.sidebar {
    color : #364149
}

.sidebar li {

}

.sidebar ul li a {
    color           : #505D6B;
    font-size       : 15px;
    font-weight     : 400;
    overflow        : hidden;
    text-decoration : none;
    text-overflow   : ellipsis;
    white-space     : nowrap;
    padding : 10px 20px 10px 20px;
}

/*.sidebar ul li a:hover {
    text-decoration : underline
}*/

.sidebar ul li ul {
    padding : 0
}

/*****************************************************/
/*.collapse.in {
    display : block;
}*/

.sidebar-nav {
    background : #FFFFFF;
}

.sidebar-nav ul {
    margin  : 0;
    padding : 0;
}

.sidebar-nav ul li {
    list-style : none;
}

.sidebar-nav ul li a {
    color     : #54667A;
    padding   : 12px 20px 12px 20px;
    display   : block;
    font-size : 15px;
}

.sidebar-nav ul li a.active, .sidebar-nav ul li a:hover {
    color : #0F9AEE;
}

.sidebar-nav ul li a.active {
    font-weight : 600;
    color       : #263238;
}

.sidebar-nav ul li ul {
    padding-left : 30px;
}

.sidebar-nav ul li ul li a {
    padding : 10px 35px 10px 15px;
}

.sidebar-nav ul li ul ul {
    padding-left : 20px;
}

.sidebar-nav ul li.nav-small-cap {
    font-size   : 12px;
    padding     : 14px 14px 14px 20px;
    color       : #90A4AE;
    font-weight : 600;
}

.sidebar-nav ul li.nav-devider {
    height     : 1px;
    background : rgba(120, 130, 140, 0.13);
    display    : block;
    margin     : 20px 0;
}

.sidebar-nav > ul > li.active > a {
    border-left : 3px solid #0F9AEE;
    color       : #0F9AEE;
    background: #F9F9F9;
}

.sidebar-nav > ul > li.active > a i {
    color : #0F9AEE;
}

.sidebar-nav > ul > li > a {
    border-left : 3px solid #FFFFFF;
}

.sidebar-nav > ul > li > a.active, .sidebar-nav > ul > li > a:hover {
    border-left : 3px solid #0F9AEE;
}

.sidebar-nav > ul > li > a.active i, .sidebar-nav > ul > li > a:hover i {
    color : #0F9AEE;
}

.sidebar-nav > ul > li > a i {
    width     : 27px;
    font-size : 21px;
    display   : inline-block;
    vertical-align : middle;
    color     : #A6B7BF;
}

.sidebar-nav > ul > li > a img {
    width  : 32px;
    margin : 0 10px 0 0;
}

.sidebar-nav > ul > li > a .label {
    float      : right;
    margin-top : 6px;
}

.sidebar-nav > ul > li > a.active {
    font-weight : 400;
    background  : #F9F9F9;
    color       : #0F9AEE;
}

.sidebar-nav .has-arrow {
    position : relative;
}

.sidebar-nav .has-arrow::after {
    position                 : absolute;
    content                  : '';
    width                    : .4em;
    height                   : .4em;
    border-width             : 1px 0 0 1px;
    border-style             : solid;
    border-color             : #54667A;
    right                    : 1em;
    -webkit-transform        : rotate(-45deg) translate(0, -50%);
    -ms-transform            : rotate(-45deg) translate(0, -50%);
    -o-transform             : rotate(-45deg) translate(0, -50%);
    transform                : rotate(-45deg) translate(0, -50%);
    -webkit-transform-origin : top;
    -ms-transform-origin     : top;
    -o-transform-origin      : top;
    transform-origin         : top;
    top                      : 50%;
    -webkit-transition       : all .3s ease-out;
    -o-transition            : all .3s ease-out;
    transition               : all .3s ease-out;
}

.sidebar-nav .active > .has-arrow::after,
.sidebar-nav li > .has-arrow.active::after,
.sidebar-nav .has-arrow[aria-expanded="true"]::after {
    -webkit-transform : rotate(-135deg) translate(0, -50%);
    -ms-transform     : rotate(-135deg) translate(0, -50%);
    -o-transform      : rotate(-135deg) translate(0, -50%);
    transform         : rotate(-135deg) translate(0, -50%);
}







/*.sidebar-nav > ul > li > a {
    border-left : 3px solid #FFFFFF;
}
.sidebar ul li.active {
    background: #FBFBFB;
}
.sidebar ul li.active > a {
    border-left : 4px solid;
    color        : #0F9AEE;
    font-weight  : 600;
}
.sidebar-nav > ul > li.active > a {
    border-left: 3px solid #0F9AEE;
    color: #0F9AEE;
}

.sidebar-nav > ul > li > a.active, .sidebar-nav > ul > li > a:hover {
    border-left : 3px solid #0F9AEE;
}

.sidebar-nav > ul > li > a.active i, .sidebar-nav > ul > li > a:hover i {
    color : #0F9AEE;
}*/

.app-sub-sidebar li:before {
    content       : "-";
    padding-right : 4px;
    float         : left
}
.markdown-section .section {
    padding-bottom: 30px;
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
}
.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong {
    color       : #2C3E50;
    font-weight : 600
}

.markdown-section a {
    color       : #0F9AEE;
    font-weight : 600
}

.markdown-section h1 {
    font-size : 2rem;
    margin    : 0 0 1rem
}

.markdown-section h2 {
    font-size : 1.75rem;
    margin    : 45px 0 .8rem
}

.markdown-section h3 {
    font-size : 1.5rem;
    margin    : 40px 0 .6rem
}

.markdown-section h4 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size : 1.25rem
}

.markdown-section h5, .markdown-section h6 {
    font-size : 1rem
}

.markdown-section h6 {
    color : #777777
}

.markdown-section figure, .markdown-section p {
    margin : 1.2em 0
}

.markdown-section ol, .markdown-section p, .markdown-section ul {
    line-height  : 25.6px;
    line-height  : 1.6rem;
    word-spacing : .8px;
    word-spacing : .05rem
}

.markdown-section ol, .markdown-section ul {
    padding-left : 24px;
    padding-left : 1.5rem
}

.markdown-section blockquote {
    border-left  : 4px solid #0F9AEE;
    border-left  : 4px solid var(--theme-color, #0F9AEE);
    color        : #858585;
    margin       : 2em 0;
    padding-left : 20px
}

.markdown-section blockquote p {
    font-weight : 600;
    margin-left : 0
}

.markdown-section iframe {
    margin : 1em 0
}

.markdown-section em {
    color : #7F8C8D
}

.markdown-section code {
    border-radius : 2px;
    color         : #E96900;
    font-size     : 12.8px;
    font-size     : .8rem;
    margin        : 0 2px;
    padding       : 3px 5px;
    white-space   : pre-wrap
}

.markdown-section code, .markdown-section pre {
    background-color : #F8F8F8;
    font-family      : Roboto Mono, Monaco, courier, monospace
}

.markdown-section pre {
    -moz-osx-font-smoothing : initial;
    -webkit-font-smoothing  : initial;
    line-height             : 24px;
    line-height             : 1.5rem;
    margin                  : 1.2em 0;
    overflow                : auto;
    padding                 : 0 22.4px;
    padding                 : 0 1.4rem;
    position                : relative;
    word-wrap               : normal
}

.token.cdata, .token.comment, .token.doctype, .token.prolog {
    color : #8E908C
}

.token.namespace {
    opacity : .7
}

.token.boolean, .token.number {
    color : #C76B29
}

.token.punctuation {
    color : #525252
}

.token.property {
    color : #C08B30
}

.token.tag {
    color : #2973B7
}

.token.string {
    color : #0F9AEE;
    color : var(--theme-color, #0F9AEE)
}

.token.selector {
    color : #6679CC
}

.token.attr-name {
    color : #2973B7
}

.language-css .token.string, .style .token.string, .token.entity, .token.url {
    color : #22A2C9
}

.token.attr-value, .token.control, .token.directive, .token.unit {
    color : #0F9AEE;
    color : var(--theme-color, #0F9AEE)
}

.token.keyword {
    color : #E96900
}

.token.atrule, .token.regex, .token.statement {
    color : #22A2C9
}

.token.placeholder, .token.variable {
    color : #3D8FD1
}

.token.deleted {
    text-decoration : line-through
}

.token.inserted {
    border-bottom   : 1px dotted #202746;
    text-decoration : none
}

.token.italic {
    font-style : italic
}

.token.bold, .token.important {
    font-weight : 700
}

.token.important {
    color : #C94922
}

.token.entity {
    cursor : help
}

.markdown-section pre > code {
    -moz-osx-font-smoothing : initial;
    -webkit-font-smoothing  : initial;
    background-color        : #F8F8F8;
    border-radius           : 2px;
    color                   : #525252;
    display                 : block;
    font-family             : Roboto Mono, Monaco, courier, monospace;
    font-size               : 12.8px;
    font-size               : .8rem;
    line-height             : inherit;
    margin                  : 0 2px;
    max-width               : inherit;
    overflow                : inherit;
    padding                 : 2.2em 5px;
    white-space             : inherit
}

.markdown-section code:after, .markdown-section code:before {
    letter-spacing : .8px;
    letter-spacing : .05rem
}

code .token {
    -moz-osx-font-smoothing : initial;
    -webkit-font-smoothing  : initial;
    min-height              : 24px;
    min-height              : 1.5rem
}

pre:after {
    color       : #CCCCCC;
    content     : attr(data-lang);
    font-size   : 9.6px;
    font-size   : .6rem;
    font-weight : 600;
    height      : 15px;
    line-height : 15px;
    padding     : 5px 10px 0;
    position    : absolute;
    right       : 0;
    text-align  : right;
    top         : 0
}
.doc-header .doc-title {
    color: #0F9AEE;
}
.doc-header .doc-meta span {
    margin: 8px 0px 10px 20px;
    white-space: nowrap;
    color: #868e96;
}
.doc-header .doc-text {
    margin-top: 16px;
}