@charset "utf-8";
/* CSS Document */

*{margin: 0; padding: 0; box-sizing: border-box;}
body{font-family: 'Open Sans', sans-serif; font-size: 14px; padding-left: 380px; padding-top: 60px;}

/* ---- header ---- */
.doc-header{height: 60px; width: 100%; display: inline-block; vertical-align: top; padding: 10px; position: fixed; top: 0; left: 0; background-color: #fff; border-bottom: 1px solid #ddd; z-index: 1030;}
.doc-logo{position: absolute; top: 10px; left: 10px;}
.doc-logo img{max-height: 39px;}
.header-nav{float: right; margin: 0; padding: 0;}
.header-nav li{display: inline-block; vertical-align: middle;  list-style: none; padding: 0 5px;}
.header-nav li:last-child{padding-right: 0;}
.header-nav li a{display: inline-block; text-decoration: none; color: #444; padding: 10px 15px; border-radius: 3px; }
.header-nav li a:hover{background-color: #f2f4f7;}
.header-nav li.doc-login a{background-color: #0388a3; font-weight: 600; color: #fff;}
.header-nav li.doc-login a:hover{background-color: #06758c;}

/* ---- side navigation ---- */
.doc-side-nav{display: inline-block; width: 380px; height: calc(100vh - 60px); position: fixed; left: 0; top: 59px; border-right: 1px solid #ddd; padding-left: 110px; background-color: #f2f4f7; overflow: auto; z-index: 1020; -webkit-transition: all ease-out .3s; transition: all ease-out .3s;}
.side-main-nav-wrap{display: inline-block; width: 110px; height: calc(100% - 60px); position: fixed; bottom: 0; left: 0; border-right: 1px solid #ddd; background-color: #fff; overflow: auto; -webkit-transition: all ease-out .3s; transition: all ease-out .3s;}
.side-main-nav-wrap ul.nav-menu-list{display: inline-block; width: 100%; padding: 0; margin: 0; vertical-align: top;}
.side-main-nav-wrap ul.nav-menu-list li{list-style: none; display: block; border-bottom: 1px solid #ddd;}
.side-main-nav-wrap ul.nav-menu-list li a{display: inline-block; width: 100%; vertical-align: top; text-align: center; color: #666; padding: 20px 0;}
.side-main-nav-wrap ul.nav-menu-list li a:hover{color: #ef8822;}
ul.nav-menu-list li a i{display: inline-block; font-size: 20px;}
ul.nav-menu-list li a span{display: inline-block; width: 100%; vertical-align: top; font-size: 12px; margin-top: 5px; font-weight: 600;}
.doc-main-nav-wrap{display: inline-block; width: 100%; vertical-align: top; padding: 0;}
.doc-page-title{display: inline-block; width: 100%; vertical-align: top; margin: 0; padding: 10px; color: #ef8822; font-size: 18px; border-bottom: 1px solid #ddd; margin-bottom: -1px;}
.main-nav-list{display: inline-block; width: 100%; vertical-align: top; margin: 0; padding: 0;}
.main-nav-list li{display: inline-block; width: 100%; vertical-align: top; margin-bottom: 10px;}
.main-nav-list li a{display: inline-block; width: 100%; vertical-align: top; padding: 10px 15px; text-decoration: none; color: #666;}
.main-nav-list li a:hover{color: #ef8822}
.main-nav-list li.active{background-color: #fff; padding: 5px 0; border: 1px solid #ddd; border-right: 0; border-left: 0;}
.main-nav-list li.active a.list-title{color: #ef8822; font-weight: 600;}
.main-nav-list li > ul{display: none;}
.main-nav-list li.active > ul{display: block;}
.main-nav-list li > ul li{position: relative; padding-left: 20px; margin: 0;}
.main-nav-list li > ul li:before{content: '-'; position: absolute; left: 20px; line-height: 39px; top: 0; color: #666;}
code {background-color: #f2f4f6; color: #383838;}
ol.linenums{
  overflow: auto;
}


footer.footer {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        right: auto;
        font-size: 11px;
        background: #fff;
        height: 20px;
        z-index: 999;
        color: gray;
        text-align: right;
        padding: 3px 10px 0px 0px;
        box-shadow: 0px 1px 2px #000;
}

/* ---- mainPage ---- */
.mainPage{display: inline-block; width: 100%; vertical-align: top;}
.doc-main-section, .doc-card-section{display: inline-block; width: 100%; vertical-align: top; padding: 40px 40px 20px; border-bottom: 1px solid #ddd;}
.doc-main-section:focus, .doc-card-section:focus{outline: 0 none;}
.doc-title{margin-top: 0; margin-bottom: 30px; color: #0388a3; font-weight: 500;}
h1.doc-title{font-size: 30px;}
h2.doc-title{font-size: 26px;}
h3.doc-title{font-size: 20px; margin-bottom: 20px;}
.doc-cnt{display: inline-block; width: 100%; vertical-align: top;}
.doc-cnt p{font-size: 14px; line-height: 25px; color: #666; margin-bottom: 20px;}
.doc-cnt ol{font-size: 12px; line-height: 20px; color: #666; margin-bottom: 20px;padding-left: 40px;}
.doc-cnt ul{font-size: 12px; line-height: 20px; color: #666; margin-bottom: 20px;padding-left: 40px;}

.doc-cnt .doc-list-wrap{margin: 0; padding: 0; display: inline-block; width: 100%; vertical-align: top; margin-bottom: 20px; padding-left: 10px;}
.doc-cnt .doc-list-wrap li{font-size: 14px; line-height: 28px; color: #666; list-style: none; position: relative; padding-left: 20px; margin-bottom: 5px;}
.doc-cnt .doc-list-wrap li:last-child{margin-bottom: 0;}
.doc-cnt .doc-list-wrap li::before{content: ''; position: absolute; height: 5px; width: 5px; display: inline-block; vertical-align: top; top: 12px; left: 0; background-color: #666; border-radius: 50%;}
a.doc-link{color: #ef8822;}
.doc-mark{background-color: #def9ff; padding: 0 4px;}
.doc-note{display: inline-block; width: 100%; padding: 15px 20px; background-color: #fff6ed; border: 1px solid #fde0c4; margin-bottom: 20px;}
.doc-note p{color: #666; line-height: 28px; margin: 0; font-size: 14px;}
.doc-note p span{font-weight: 600; display: block;}
.doc-language{display: inline-block; width: 100%; vertical-align: top; margin: 0; padding: 0; margin-bottom: 20px; background-color: #f2f4f7; border: 1px solid #ddd; overflow: auto;}
.doc-language code{display: inline-block; width: 100%; vertical-align: top; color: #666; font-size:80%;}
.token.cdata, .token.comment, .token.doctype, .token.prolog{color: #708090;}
.token.boolean, .token.constant, .token.deleted, .token.number, .token.property, .token.symbol, .token.tag{color: #905;}
.doc-table{display: inline-block; width: 100%; vertical-align: top; margin-bottom: 20px; border: 1px solid #ddd; overflow: auto;}
.doc-table table{width: 100%; border-collapse: collapse;}
.doc-table table th, td{padding: 8px 15px; text-align: left; color: #666; font-size: 14px;}
.doc-table table thead{background-color: #f2f4f7;}
.doc-table table thead tr{border-bottom: 2px solid #ddd;}
.doc-table table tbody tr{border-bottom: 1px solid #ddd;}
.doc-table table tbody tr:last-child{border-bottom: 0;}
.doc-sub-menuWrap{display: none;}
.doc-sub-menuWrap.active{display: inline-block;}
.side-main-nav-wrap ul.nav-menu-list li a.menu-btn.active{color: #ef8822; background-color: #fff6ed;}
/*section {
    min-height: 100%;
}
body, .mainPage {
    height: 100%;
}*/
.labeled-pre {
    padding-left: 5em;
}
pre a {
    color: #3E4853!important;
    font-family: "Roboto Mono", "Consolas", monospace;
    text-decoration: none;
    border-bottom: 1px dotted;
}

.doc-nav-btn{height: 39px; width: 39px; border: 0; background-color: transparent; outline: none 0px; display: none; vertical-align: top; position: absolute; top: 10px; left: 10px;}
span.navBarBtn{width: 24px; height: 16px; position: absolute; display: inline-block; vertical-align: top; top: 50%; margin-top: -8px; left: 50%; -webkit-transition: all ease .3s; transition: all ease .3s;}
span.navBarBtn{margin-left: -12px;}
.menu-open .doc-nav-btn span.navBarBtn{margin-left: -18px;}
b.navBars{display: inline-block; position: absolute; width: 100%; height: 2px; top: 0; background-color: #666; left: 0; -webkit-transition: all ease .3s; transition: all ease .3s;}
.menu-open .doc-nav-btn b.navBars{background-color: #ef8822;}
b.navBars:nth-child(2){top: 50%; margin-top: -1px; -webkit-transition: all ease .3s; transition: all ease .3s;}
b.navBars:nth-child(3){bottom: 0; top: auto; -webkit-transition: all ease .3s; transition: all ease .3s; width: 75%;}
.menu-open .doc-nav-btn span.navBarBtn{-webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transform-origin: center; transform-origin: center;}
.menu-open .doc-nav-btn b.navBars:nth-child(1){-webkit-transform: rotate(45deg); transform: rotate(45deg); width: 60%; top: 2px;}
.menu-open .doc-nav-btn b.navBars:nth-child(2){display: none;}
.menu-open .doc-nav-btn b.navBars:nth-child(3){-webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 60%; bottom: 3px;}
body.menu-open{overflow: hidden;}
.doc-more-btn{height: 39px; width: 39px; border: 0; background-color: transparent; outline: none 0px; display: none; vertical-align: top; position: absolute; top: 10px; right: 10px;}
.doc-more-btn b.navBars{height: 4px; width: 4px; left: 0; right: 0; margin: 0 auto; border-radius: 50%;}
.doc-more-btn b.navBars:nth-child(2){margin-top: -2px;}
.doc-more-btn span.navBarBtn{height: 22px; margin-top: -11px;}

.posrelative {position: relative;}

.copypre{position: relative; }
.copybutton{position: absolute; top: 4px; right: 4px; background-color: rgba(255, 255, 255, 1); padding: 4px 8px; border: 0; border-radius: 3px; font-size: 10px; opacity: 0;}
.posrelative:hover .copybutton{opacity: 1;}

@media (max-width: 991px){
    body{padding-left: 0;}
    .doc-side-nav{width: 320px;}
    .main-nav-list li > ul li{padding-left: 15px;}
    .main-nav-list li > ul li:before{left: 15px;}
    .doc-main-section, .doc-card-section{padding: 20px 20px 10px;}
    .doc-title{margin-bottom: 20px;}
    h1.doc-title{font-size: 26px;}
    h2.doc-title{font-size: 22px;}
    h3.doc-title{font-size: 18px; margin-bottom: 10px;}
    .doc-logo{left: 60px;}
    .doc-nav-btn{display: inline-block;}
    .side-main-nav-wrap, .doc-side-nav{left: -100%;}
    body.menu-open .side-main-nav-wrap, body.menu-open .doc-side-nav{left: 0;}
}

@media (max-width: 620px){
    .header-nav li{padding: 0;}
    .doc-more-btn{display: inline-block;}
    .header-nav{position: absolute; top: 120%; right: 10px; background-color: #fff; border: 1px solid #ddd; padding: 10px; max-width: 220px; display: none;}
    .header-nav.open{display: inline-block;}
    .header-nav li{width: 100%;}
    .header-nav li a{width: 100%;}
    .header-nav li.doc-login a{background-color: #fff; color: #0388a3;}
    .header-nav li.doc-login a:hover, .header-nav li.doc-login a:focus{background-color: #f2f4f7; color: #0388a3;}
}

@media (max-width: 420px){
    h1.doc-title{font-size: 22px;}
    h2.doc-title{font-size: 20px;}
    h3.doc-title{font-size: 16px; font-weight: 600;}
}

/*
 * Derived from einaros's Sons of Obsidian theme at
 * http://studiostyl.es/schemes/son-of-obsidian by
 * Alex Ford of CodeTunnel:
 * http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme
 */