@import '../fonts/iconfont/iconfont.css';

body, html {
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #34495e;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    height: 100%;
}

.main {
    position: relative;
    height: 100%;
    background-color: #eee;
}

.main-banner {
    background-color: #fff;
    width: 100%;
    height: 60px;
    margin-bottom: 13px;

}

.main-banner-title{
    width: 90%;
    margin: 0 auto;
    line-height: 60px;
    font-size: 20px;
    font-weight: bold;
/*    background-color: lightblue;*/
}

.main-wrapper{
    position: relative;
    border-radius: 6px;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    margin: 0 auto;
    width:90%;
    height: calc(100% - 73px);
    background-color: #fff;
    overflow: hidden;
}

.main-wrapper-sidebar {
    color:#495060;
    float: left;
    display: block;
    width:17%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
/*    background-color: lightblue;*/
}

.main-wrapper-sidebar .menu-root {
    position: relative;
    padding-left: 10px;
}

.main-wrapper-sidebar ul {
    list-style-type: none;
    margin: 0;
    line-height: 1.8em;
}

.main-wrapper-sidebar .main-wrapper-sidebar-link {
    color:#34495e;
    font-size: 16px;
    cursor: default;
    line-height: 2.5em;
}

.main-wrapper-sidebar .menu-sub {
    font-size: 1.0em;
    padding-left: 18px;
}

.main-wrapper-sidebar .menu-sub li {
    line-height: 3.1em;
}


.main-wrapper-sidebar .menu-sub li .active {
    font-weight: bold;
    color: #ed4114;
    border-right:3px solid #ed4114;
}

.main-wrapper-sidebar a {
    display: inline-block;
    width:100%;
    height:100%;
    text-decoration: none;
    color: #34495e;
}

.main-wrapper-container{
    height:100%;
    float: left;
    position: relative;
    width: 83%;
    padding-left:20px;
    overflow-y: auto;
    background-color: #ffffff;
}

.main-wrapper-sidebar{
    position:relative;
}

.main-wrapper-sidebar:after{
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background: #dddee1;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}

.main-wrapper-container:after{
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background: #dddee1;
    position: absolute;
    left:-1px;
    top: 0;
    bottom: 0;
    z-index: 1;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mt25 {
    margin-top: 25px;
}

.mt30 {
    margin-top: 30px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb25 {
    margin-bottom: 25px;
}

.mb30 {
    margin-bottom: 30px;
}

.pt5 {
    padding-top: 5px;
}

.pt10 {
    padding-top: 10px;
}

.pt15 {
    padding-top: 15px;
}

.pt20 {
    padding-top-top: 20px;
}

.pt25 {
    padding-top: 25px;
}

.pt30 {
    padding-top: 30px;
}

.bold {
    font-weight: bold;
}

/*log start*/
.page-component .content {
    margin-left: -1px;
}

.page-changelog {
    padding-bottom: 100px;
}

.page-changelog .heading {
    margin-bottom: 40px;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.page-changelog .fr {
    float: right;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

a {
    color: rgb(64, 120, 192);
    text-decoration-line: none;
    text-decoration-style: initial;
    text-decoration-color: initial;
}

.page-changelog .fr a {
    display: block;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    color: rgb(71, 86, 105);
}

.page-changelog .fr:hover a {
    color: rgb(32, 160, 255);
}

.page-changelog .timeline {
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 105px;
    padding-left: 25px;
    position: relative;
    color: rgb(94, 109, 130);
}

.page-changelog .timeline::before {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 10px;
    background-color: #ffc4b5;
}

.page-changelog .timeline > li {
    list-style-type: none;
    list-style-position: initial;
    list-style-image: initial;
    position: relative;
    line-height: 1.8;
}

.page-changelog .timeline > li:not(:last-child) {
    margin-bottom: 50px;
}

.page-changelog .timeline > li:first-child {
    margin-top: -10px;
}

.page-container h3 {
    font-size: 22px;
}

.page-container h2, .page-container h3, .page-container h4, .page-container h5 {
    font-weight: 400;
    color: rgb(31, 47, 61);
}

.page-changelog .timeline > li:first-child h3::before {
    left: -33px;
    top: 10px;
    width: 17px;
    height: 17px;
    background-color: rgb(32, 160, 255);
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: initial;
    border-right-style: initial;
    border-bottom-style: initial;
    border-left-style: initial;
    border-top-color: initial;
    border-right-color: initial;
    border-bottom-color: initial;
    border-left-color: initial;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.page-changelog .timeline h3 {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
}

.page-changelog .timeline h3::before {
    content: "";
    display: block;
    position: absolute;
    left: -31px;
    top: 13px;
    width: 13px;
    height: 13px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: rgb(32, 160, 255);
    border-right-color: rgb(32, 160, 255);
    border-bottom-color: rgb(32, 160, 255);
    border-left-color: rgb(32, 160, 255);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
}

.page-container h2 a, .page-container h3 a, .page-container h4 a, .page-container h5 a {
    float: left;
    margin-left: -20px;
    opacity: 0;
    cursor: pointer;
}

.page-changelog .timeline h3 a {
    opacity: 1;
    float: none;
    margin-left: 0px;
    color: inherit;
}

.page-container p {
    font-size: 14px;
    color: rgb(94, 109, 130);
    line-height: 1.5em;
}

.page-changelog .timeline p {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

.page-changelog .timeline em {
    position: absolute;
    left: -127px;
    font-style: normal;
    top: 6px;
    font-size: 14px;
    color: #f97351;
}

.page-changelog .timeline ul {
    padding-left: 0px;
}

.page-changelog .timeline li li {
    font-size: 14px;
    list-style-type: none;
    list-style-position: initial;
    list-style-image: initial;
    padding-left: 0px;
    word-break: break-all;
}

.page-changelog .timeline li li::before {
    content: "";
    width: 4px;
    height: 4px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: rgb(94, 109, 130);
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
}

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;


   /* background-color: rgb(249, 250, 252);
    padding-top: 0px;
    padding-right: 4px;
    padding-bottom: 0px;
    padding-left: 4px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: rgb(234, 238, 251);
    border-right-color: rgb(234, 238, 251);
    border-bottom-color: rgb(234, 238, 251);
    border-left-color: rgb(234, 238, 251);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;*/
}

.page-changelog .timeline h4 {
    margin-top: 50px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
}

.page-changelog .timeline ul ul {
    padding-left: 20px;
}

.page-changelog .timeline ul ul li::before {
    content: "";
    width: 4px;
    height: 4px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: rgb(255, 255, 255);
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: rgb(94, 109, 130);
    border-right-color: rgb(94, 109, 130);
    border-bottom-color: rgb(94, 109, 130);
    border-left-color: rgb(94, 109, 130);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
}

.page-changelog .timeline > li:first-child h3:before {
    left: -33px;
    top: 10px;
    width: 17px;
    height: 17px;
    background-color: #ed4114;
    border: 0;
}

.page-changelog .timeline h3:before {
    content: "";
    display: block;
    position: absolute;
    left: -31px;
    top: 13px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #ed4114;
    box-sizing: border-box;
    background-color: #fff;
}

/*log end*/

/*展示实例 start*/

.example-effectHtml{
    margin-top:20px;

}

.example-codeHighlight code {
    font-family: Menlo,Monaco,Consolas,Courier,monospace;
    line-height: 1.2;
    font-size: 12px;
}

.example-codeDescription-title {
    font-weight: 500;
    margin: 30px 0 10px;
    position: relative;
}

.example-codeDescription-title:before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #e9e9e9;
    position: absolute;
    top: 10px;
    left: 0;
}

.example-codeDescription-title-span {
    display: inline-block;
    background: #fff;
    padding: 0 5px 0 18px;
    position: relative;
    margin-left: 30px;
    font-size: 14px;
    color: #C5C0B0;
}

.example-codeHighlight {
    margin-top: 20px;
    margin-bottom: 50px;
    border-top: 1px dotted #e9e9e9;
    position: relative;
}

.example-codeHighlight-showCode {
    text-align: center;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    color: #C5C0B0;
    font-size: 14px;
    border-bottom: 1px solid #e9e9e9;
}

.example-codeHighlight-showCode:hover {
    color: #ED5C43;
    box-shadow:0 4px 6px -6px #555;
}

.example-codeHighlight-tools{
    position: absolute;
    right: 30px;
    top:30px;
}

.example-codeHighlight-tools-i{
    margin-left: 10px;
    color:#7c9be0;
    cursor:pointer;
    font-size:16px;

}

.copy-code-done{
    margin-left: 10px;
    font-size:16px;
    color: #139a13;
    font-weight: bold;
}

.example-codeHighlight-tools-i:hover{
    color:#3561c3;

}

/*实例中的table*/

.example-table{
    border-collapse: collapse;
    width: 100%;
    background-color: #fff;
    color: #5e6d82;
    font-size: 14px;
    margin-bottom: 45px;
    line-height: 1.5em
}

.example-table strong{
    font-weight: 400
}

.example-table thead tr{
    height:38px;
}

.example-table th {
    text-align: left;
    border-top: 1px solid #eaeefb;
    background-color: #eee;
    white-space: nowrap
}

.example-table td, example-table th {
    text-align: left;
    border-bottom: 1px solid #eaeefb;
    padding: 10px;
    max-width: 250px
}

.example-table td:first-child, .example-table th:first-child {
    padding-left: 10px
}

/*展示实例 end*/


/*进度条 satrt*/
#nprogress .bar {
    height: 4px;
    background: #27c4f5 linear-gradient(to right,#27c4f5,#a307ba,#fd8d32,#70c050,#27c4f5) !important;
    background-size: 500%;
    animation: 2s linear infinite barprogress, .3s fadein;
    width: 100%;
}

@keyframes barprogress{
    0% {
        background-position:0% 0
    }
    to{
        background-position:125% 0
    }
}

#nprogress .spinner-icon {
    border-top-color: transparent;
    border-left-color: transparent;
}
/*进度条 end*/


/*回到顶部 start*/
.main-back-top{
    position: fixed;
    bottom: 100px;
    right: 38px;
    width:80px;
}

.main-back-top-icon{
    color:#555;
    font-size: 56px;
    opacity:0.4;
}

.main-back-top-icon:hover{
    cursor: pointer;
    opacity:0.8;
}
/*回到顶部 end*/

.anchor{
    cursor: pointer;
}

.hljs{
    background-color: #eee !important;
}

/*设置滚动条样式*/

*::-webkit-scrollbar{
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
}

*::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
*-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}


/*设置滚动条样式 end*/