html,body {
    height: 100%;
    font-size: 12px;
}

body,form,ul,ol,table,input,button,p,h1,h2,h3,h4,h5,h6,blockquote,pre,dl,dt,dd,div,span,b,i {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    color: #222;
    background-color: #fff;
    font-size: 14px;
    word-wrap: break-word;
    line-height: 1em;
}
h1,h2,h3,h4,h5,h6,strong,input,select,textarea,button,body,code {
    font-family: Helvetica Neue,NotoSansHans-Regular,AvenirNext-Regular,arial,Hiragino Sans GB,Microsoft Yahei,WenQuanYi Micro Hei,Arial,Helvetica,sans-serif;
}
h1 {
    font-size: 2.25em;
    font-weight: 500;
}

h2 {
    font-size: 1.75em;
    font-weight: 500;
}

h3 {
    font-size: 1.5em;
    font-weight: 500
}

h4 {
    font-size: 1.2em;
    font-weight: 300
}

h5 {
    font-size: 1.0em;
    font-weight: 300
}

h6 {
    font-size: .8em;
    font-weight: 200
}
table>tbody>tr:hover{
    background-color: #F5F5F5;
}
/* .m-manual:not(.manual-mobile) ::-webkit-scrollbar {
    height: 10px;
    width: 7px;
    background: rgba(0,0,0,.1);
}

.m-manual:not(.manual-mobile) ::-webkit-scrollbar:hover {
    background: rgba(0,0,0,.2)
}

.m-manual:not(.manual-mobile) ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.3);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px
}

.m-manual:not(.manual-mobile)::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,.25);
    -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,.25);
    -ms-box-shadow: inset 1px 1px 1px rgba(0,0,0,.25);
    -o-box-shadow: inset 1px 1px 1px rgba(0,0,0,.25);
    box-shadow: inset 1px 1px 1px rgba(0,0,0,.25);
    background-color: rgba(0,0,0,.4)
}  */
.m-manual.manual-reader .manual-head .slidebar {
    display: none
}

.m-manual .manual-head {
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    min-width: 980px;
    /*overflow: hidden;*/
    white-space: nowrap;text-overflow: ellipsis;
    height: 54px;
    line-height: 54px;
    padding: 0 .8em;
    z-index: 800;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-left: 0;
    background-color: #fff;
    transition-property: top;
    transition-duration: .3s;
    transition-timing-function: linear;
    transition-delay: 0s;
    -moz-transition-property: top;
    -moz-transition-duration: .3s;
    -moz-transition-timing-function: linear;
    -moz-transition-delay: 0s;
    -webkit-transition-property: top;
    -webkit-transition-duration: .3s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 0s;
    -o-transition-property: top;
    -o-transition-duration: .3s;
    -o-transition-timing-function: linear;
    -o-transition-delay: 0s;
}

.m-manual .slidebar{
    display: none;
}
.m-manual .manual-head .manual-title{
    display: inline-block;
    height: 30px;
    line-height: 54px;
    color: #333;
    font-size: 16px;
    font-weight: bold;
}
.m-manual .manual-tab {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}
.m-manual .manual-left {
    position: absolute;
    left: 0;
    top: 55px;
    z-index: 999;
    bottom: 0;
    width: 300px;
    /* border-right: 1px solid #ddd; */
    /* background-color: #fafafa; */
    background-color:#ffffff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.m-manual .manual-tab .tab-navg {
    zoom:1;border-bottom: 1px solid #ddd
}

.m-manual .manual-tab .tab-util {
    position: absolute;
    top: 50%;
    right: -14px
}
.m-manual .manual-tab .tab-util .item {
    color: #999;
    cursor: pointer;
    height: 24px;
    line-height: 24px;
    display: inline-block;
    margin-top: 4px
}

.manual-fullscreen-switch {
    display: block
}

.manual-fullscreen-switch .open,.manual-fullscreen-switch .close {
    display: inline-block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-color: #5cb85c;
    border-radius: 50%;
    color: #fff;
    position: relative;
    font-size: 16px;
    vertical-align: top;
    opacity : 1;
    text-shadow:none;
    font-weight: 400;
}
.manual-fullscreen-switch .open:hover,.manual-fullscreen-switch .close:hover {
    background-color: #449d44;
}

.manual-fullscreen-switch .open:before,.manual-fullscreen-switch .close:before {
    position: absolute;
    top: 7px;
    right: 5px;
}

.manual-fullscreen-switch .open {
    display: none;
}

.m-manual.manual-fullscreen-active .manual-fullscreen-switch {
    /*margin-top: 30px;*/
}

.m-manual.manual-fullscreen-active .manual-fullscreen-switch .open {
    display: inline-block;
}

.m-manual.manual-fullscreen-active .manual-fullscreen-switch .close {
    display: none;
}
.m-manual.manual-fullscreen-active .manual-left .m-copyright,.m-manual.manual-fullscreen-active .manual-left .tab-navg,.m-manual.manual-fullscreen-active .manual-left .tab-wrap{
    display: none;
}
.m-manual.manual-fullscreen-active .manual-left{
    width: 0px;
}

.m-manual .manual-tab .tab-navg:after {
    content: '.';
    display: block;
    width: 0;
    height: 0;
    line-height: 9;
    overflow: hidden;
    clear: both;
    visibility: hidden;
}

.m-manual .manual-tab .tab-navg .navg-item {
    font-size: 14px;
    padding: 0 9px;
    cursor: pointer;
    float: left;
    height: 30px;
    line-height: 30px;
    color: #999
}

.m-manual .manual-tab .tab-navg .navg-item .fa {
    margin-right: 4px;
    color: #aaa
}

.m-manual .manual-tab .tab-navg .navg-item .text {
    font-weight: 200
}

.m-manual .manual-tab .tab-navg .navg-item.active,.m-manual .manual-tab .tab-navg .navg-item.active:hover,.m-manual .manual-tab .tab-navg .navg-item:hover {
    color: #333
}

.m-manual .manual-tab .tab-navg .navg-item.active .icon,.m-manual .manual-tab .tab-navg .navg-item.active:hover .icon,.m-manual .manual-tab .tab-navg .navg-item:hover .icon {
    color: #333
}
.m-manual .manual-tab .tab-navg .navg-item.active {
    border-bottom: 1px solid #fafafa;
    margin-bottom: -1px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding-left: 8px;
    padding-right: 8px;
    height: 31px;
}
.m-manual .manual-tab .tab-item {
    display: none;
    position: absolute;
    top: 31px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    background-color: #fafafa;
    margin-bottom: 35px;
}

.m-manual .manual-tab .tab-item.active {
    display: block
}
.m-manual.manual-mode-search .manual-search {
    display: block
}
.m-manual.manual-mode-view .manual-catalog {
    display: block
}
.m-manual.manual-mode-search .manual-search .search-container{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.m-manual .manual-search .search-form{
    margin: 5px 5px 10px 5px;
    position: relative;
}

.m-manual .manual-search .btn-search{
    background-color: #ffffff;
    border: 0;
    padding: 5px;
    position: absolute;
    top: 2px;
    right: 5px;
}
.m-manual .manual-search .btn-search .fa{
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.m-manual .manual-search .btn-search .loading{
    background-image: url("../image/loading.gif");
}

.m-manual .manual-search .search-result{
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 275px;
    overflow-y: auto;
    border-top: 1px solid #eee;
}
.m-manual .manual-search .search-result .search-empty{
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    text-align: center;
}
.m-manual .manual-search .search-result .search-empty i{
    font-size: 50px;
    display: block;
    color: #999;
    font-weight: 200;
}
.m-manual .manual-search .search-result .search-empty .text{
    font-size: 16px;
    font-weight: 200;
    color: #999;
    line-height: 40px;
}
.m-manual .manual-search .search-list{
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 100%;
}
.m-manual .manual-search .search-list a{
    display: block;
    border-bottom: 0;
    height: 30px;
    line-height: 24px;
    padding: 3px 10px 3px 20px;
    color: #666;
    text-decoration: none;
    white-space:nowrap;
    overflow: hidden;
}
.m-manual .manual-search .search-list a:hover{
    text-shadow: none;
    background: #116cd6;
    box-shadow: none;
    color: #fff;
    text-decoration: none;
    white-space:nowrap;
}
.m-manual .manual-search .search-list a.active{
    background: #10af88;
    background: -webkit-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
    background: linear-gradient(to bottom, #10af88 0%, #10af88 100%);
    color: #ffffff;
}
.m-manual .markdown-body .search-highlight{
    background-color: #FFFF00 !important;
    font-style: normal;
}
.m-manual .manual-left .m-copyright {
    display: none;
    border-top: 0;
    background: #fff;
    border-top: 1px solid #ddd;
    opacity: 1;
    filter: alpha(opacity=100);
    position: absolute;
    bottom: 0;
    margin: 0;
    font-size: 12px;
    z-index: 999;
    height: auto;
    width: 100%;
    padding: 5px 0;
    text-align: center;
    line-height: 24px
}
.m-manual .manual-right {
    position: absolute;
    left: 300px;
    top: 55px;
    z-index: 300;
    overflow-y: auto;
    bottom: 0;
    right: 0;
    transition-property: top;
    transition-duration: .3s;
    transition-timing-function: linear;
    transition-delay: 0s;
    -moz-transition-property: top;
    -moz-transition-duration: .3s;
    -moz-transition-timing-function: linear;
    -moz-transition-delay: 0s;
    -webkit-transition-property: top;
    -webkit-transition-duration: .3s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 0s;
    -o-transition-property: top;
    -o-transition-duration: .3s;
    -o-transition-timing-function: linear;
    -o-transition-delay: 0s
}
.m-manual.manual-fullscreen-active .manual-right{
    left: 0;
}
.m-manual .manual-right .manual-article{
    background: #ffffff;
}
.manual-article .article-head {
    position: relative;
    zoom:1;padding: 10px 20px 0px;
}
.manual-reader .book-title{
    color: #333333;
}
.manual-reader .book-title:hover{
    text-decoration: none;
    color: #333333;
}

.manual-article .article-head h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 200;
    text-align: center;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #444
}
.manual-article .article-content{
    max-width: 1000px;
    padding: 10px;
    margin-left: auto!important;
    margin-right: auto!important
}
@media screen and (max-width: 840px) {
    .manual-article .article-content{
        min-width: inherit;
    }
}
.manual-article .article-content .article-body{
    min-height: 90px;
    padding: 5px;
    padding-top: 20px;
}
.manual-article .article-content .article-body .attach-list{
    list-style: none;
    border-top: 1px solid #DDDDDD;
    padding-top: 15px;
}
.manual-article .jump-top .view-backtop{
    position: fixed;
    bottom: -30px;
    right: 30px;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    z-index: 9999;
    font-weight: 200;
    width: 30px;
    height: 30px;
    background-color: #999;
    border-radius: 4px;
    opacity: 0;
    filter: alpha(opacity=0);
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: linear;
    transition-delay: 0s;
    -moz-transition-property: all;
    -moz-transition-duration: .2s;
    -moz-transition-timing-function: linear;
    -moz-transition-delay: 0s;
    -webkit-transition-property: all;
    -webkit-transition-duration: .2s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 0s;
    -o-transition-property: all;
    -o-transition-duration: .2s;
    -o-transition-timing-function: linear;
    -o-transition-delay: 0s;
}

.manual-article .jump-top .view-backtop.active{
    opacity: 0.5;
    bottom: 30px;
}
.manual-article .jump-top .view-backtop.active:hover{
    background-color: #449D44;
    opacity: 1;
}
.m-manual .manual-progress {
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 302;
    /* background-color: #e1e2e3; */
    transition-property: top;
    transition-duration: .3s;
    transition-timing-function: linear;
    transition-delay: 0s;
    -moz-transition-property: top;
    -moz-transition-duration: .3s;
    -moz-transition-timing-function: linear;
    -moz-transition-delay: 0s;
    -webkit-transition-property: top;
    -webkit-transition-duration: .3s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 0s;
    -o-transition-property: top;
    -o-transition-duration: .3s;
    -o-transition-timing-function: linear;
    -o-transition-delay: 0s
}

.m-manual .manual-progress .progress-bar {
    display: block;
    background-color: #136ec2;
    height: 100%
}
.m-comment{
    margin: 30px auto 70px auto;
}
.m-comment .comment-result .title {
    display: block;
    font-size: 16px;
    padding-bottom: 6px;
    line-height: 1.5em;
    border-bottom: 1px solid #ddddd9;
    margin-bottom: 10px;
}
.w-textarea.textarea-full {
    display: block;
}
.w-fragment.fragment-tip {
    color: #999;
}
.w-textarea .textarea-input {
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 3px;
    border: 1px solid #ccc;
    line-height: 1.7em;
    font-weight: 200;
}
.m-comment .comment-post .form .enter textarea {
    resize: none;
    min-height: 72px;
    overflow: hidden;
    width: 100%;
}
.m-comment .comment-list {
    padding-bottom: 12px
}

.m-comment .comment-post {
    padding-bottom: 35px
}

.m-comment .comment-item {
    position: relative;
    font-size: 1em;
    border-top: 1px dotted #eee;
    margin-bottom: -1px;
    padding: 12px 0;
    line-height: 1.7em
}

.m-comment .comment-item .avatar {
    position: absolute;
    left: 0;
    top: 12px;
    display: inline-block;
    border-radius: 50%;
    background: #eee
}

.m-comment .comment-item .avatar img {
    border-radius: 50%
}

.m-comment .comment-item .date {
    font-weight: 200;
    color: #999;
    margin-left: 12px
}

.m-comment .comment-item .name {
    color: #136ec2
}

.m-comment .comment-item .content {
    margin: 6px 0 9px;
    font-size: 1.14em;
    padding: 3px 0
}

.m-comment .comment-item .content pre {
    padding: 16px;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f7f7f7;
    border: 0;
    border-radius: 3px;
    font-family: Microsoft Yahei,Helvetica Neue,Arial,Helvetica,sans-serif;
}

.m-comment .comment-item .content pre>code {
    display: inline;
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow: initial;
    line-height: inherit;
    background-color: transparent;
    border: 0;
    font-size: 100%
}

.m-comment .comment-item .operate {
    position: absolute;
    top: 12px;
    right: 0;
    height: 24px;
    line-height: 24px
}

.m-comment .comment-item .operate .number {
    color: #999
}

.m-comment .comment-item .operate .delete {
    display: none
}

.m-comment .comment-item:hover .operate.toggle .delete {
    display: inline-block
}

.m-comment .comment-item:hover .operate.toggle .number {
    display: none
}

.m-comment .comment-item .info {
    height: 24px;
    line-height: 24px
}

.m-comment .comment-item .vote {
    display: inline-block;
    margin-right: 12px
}

.m-comment .comment-item .vote .agree,.m-comment .comment-item .vote .oppose {
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: #f5f5f5;
    color: #666666;
}
.m-comment .comment-item .vote .agree:hover,.m-comment .comment-item .vote .oppose:hover{
    color: #333333;
}

.m-comment .comment-item .vote .count {
    height: 30px;
    line-height: 30px;
    color: #999;
    display: inline-block;
    text-align: center;
    padding: 0 6px;
    min-width: 12px;
    font-weight: 200;
    vertical-align: top;
    background-color: #f5f5f5;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee
}

.m-comment .comment-item .vote .agree {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.m-comment .comment-item .vote .oppose {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.m-comment .comment-item .vote.disabled .agree,.m-comment .comment-item .vote.disabled .oppose {
    cursor: default
}

.m-comment .comment-item .vote.disabled .agree i,.m-comment .comment-item .vote.disabled .oppose i {
    color: #ccc
}

.m-comment .comment-item .vote.disabled .agree:hover i,.m-comment .comment-item .vote.disabled .oppose:hover i {
    color: #ccc
}

.m-comment .comment-item .reply {
    float: right;
    line-height: 30px;
    display: none
}

.m-comment .comment-item:hover .reply {
    display: inline-block
}

.m-comment .comment-empty {
    text-align: center;
    display: block;
    padding-top: 36px;
    padding-bottom: 36px
}

.m-comment .comment-empty .text {
    color: #666;
    font-weight: 200
}

.m-comment .comment-empty.empty-active {
    display: block
}

.m-comment .comment-more,.m-comment .comment-replace {
    display: none;
    text-align: center;
    margin-bottom: 24px
}

.m-comment .comment-more .more-inner,.m-comment .comment-replace .more-inner {
    display: inline-block;
    text-align: center;
    height: 36px;
    line-height: 36px;
    cursor: pointer;
    min-width: 300px;
    border-radius: 4px;
    border: 1px solid #aaa
}

.m-comment .comment-more .more-inner:hover,.m-comment .comment-replace .more-inner:hover {
    background-color: #f3f3f3;
    border-color: #888
}

.m-comment .comment-more .more-inner:active,.m-comment .comment-replace .more-inner:active {
    box-shadow: 0 3px 6px rgba(99,99,99,.1) inset
}

.m-comment .comment-more.more-active,.m-comment .comment-replace.more-active {
    display: block
}

.m-comment .comment-more.replace-active,.m-comment .comment-replace.replace-active {
    display: block
}

.m-comment .think-loading.loading-ripple-empty {
    text-align: center
}

.m-comment .comment-post-disabeld {
    display: none;
    height: 72px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px 10px;
    text-align: center;
    line-height: 72px
}

.m-comment.comment-disabled .comment-post {
    display: none
}

.m-comment.comment-disabled .comment-post-disabeld {
    display: block
}
.editor-content {
    line-height: 1.7em;
    font-size: 14px
}
.editor-content p{
    margin-bottom: 14px;
    line-height: 1.7em;
    font-size: 1.3rem;
    color: #5D5D5D;
}
.editor-content a {
    color: #3eb1d0
}
.editor-content h1 {
    font-size: 1.7rem;
    line-height: 1.2
}
.editor-content h2 {
    padding-bottom: 0.3em;
    font-size: 1.6rem;
    line-height: 2.5em;
    border-bottom: 1px solid #eee
}
.editor-content h3 {
    font-size: 1.65rem;
    line-height: 2em;
    border-bottom: 1px solid #eee
}
.editor-content h4 {
    font-size: 1.5rem
}
.editor-content h5 {
    font-size: 1.45em
}
.editor-content h6 {
    font-size: 1.4em;
    color: #777
}
.editor-content br {
    display: block;
    margin: .2em
}
.editor-content hr {
    border: 0;
    border-bottom: 1px solid #ddd
}
.editor-content ul {
    padding-left: 28px
}
.editor-content ol {
    padding-left: 28px
}
.editor-content h1,.editor-content h2,.editor-content h3,.editor-content h4,.editor-content h5,.editor-content h6,.editor-content p,.editor-content ul,.editor-content ol,.editor-content blockquote,.teditor-content pre,.editor-content table {
    margin-bottom: 14px
}
.editor-content table {
    border-collapse: collapse;
    table-layout: fixed;
    display: block;
    width: 100%;
    overflow: auto;
    word-break: keep-all;
    margin: 10px 0
}
.editor-content th {
    text-align: left
}
.editor-content table thead tr{
    background-color: #0088CC;
    color: #ffffff;
}
.editor-content  table tr:nth-child(2n) {
    background-color: #f8f8f8
}
.editor-content table td,.editor-content table th {
    padding: 6px 13px;
    border: 1px solid #ddd;
}

.editor-content img {
    max-width: 100%
}

.editor-content table pre {
    margin-bottom: 0
}

.editor-content table p {
    margin: 0
}
.editor-content blockquote {
    padding: 5px 5px 5px 15px;
    color: #777;
    border-left: 4px solid #ddd
}

.editor-content blockquote.info {
    border-left-color: #5bc0de;
    color: #5bc0de;
    background-color: #f4f8fa
}

.editor-content blockquote.warning {
    background-color: #fcf8f2;
    border-color: #f0ad4e;
    color: #f0ad4e
}

.editor-content blockquote.danger {
    color: #d9534f;
    background-color: #fdf7f7;
    border-color: #d9534f
}

.editor-content blockquote.success {
    background-color: #f3f8f3;
    border-color: #50af51;
    color: #50af51
}

.editor-content blockquote>:last-child {
    margin-bottom: 0
}

.editor-content .markdown-toc-list ul:only-child {
    padding-left: 0;
    margin-bottom: 0
}
.editor-content pre{
    border: 0;
    margin-bottom:14px;
}
.editor-content code, .editor-content pre {
    border-radius: 0;
    font-family: Microsoft Yahei,Helvetica Neue,Arial,Helvetica,sans-serif;
}
.editor-content pre>code{
    word-break: break-all;
    white-space: inherit;
}
.editor-content blockquote {
    border-color: inherit;
    color: inherit;
    background: 0
}

.hljs-line-numbers {
    text-align: right;
    border-right: 1px solid #ccc;
    color: #999;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.editor-content .markdown-toc{
    padding: 15px 5px;
    background-color: #FFFFFF;
    line-height: 25px;
    border: 1px solid #CCCCCC;
    width: 300px;
    float: right;
    overflow-x: auto;
    margin: 0 0 10px 10px;
}

.http-method .default{
    width: 70px;
    display: inline-block;
    background-color: #333333;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    vertical-align: middle;
    margin-bottom: 3px;
    margin-right: 15px;
    color: #FFF !important;
    font-size: 11px;
    height: 24px;
    line-height: 24px;
    text-transform: uppercase;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.http-method .post{
    background-color: #F47023 !important;
}
.http-method .get{
    background-color:#27AE60 !important;
}
.http-method .put{
    background-color:#4A90E2!important;
}

.http-method .del{
    background-color:red!important;
}
.http-method .trace{
    background-color:#e09d43 !important;
}


.m-manual .manual-head{
    transition: margin-left 0.3s;
}

@media screen and (max-width: 840px) {
    .m-manual .manual-head{left: 0;padding-left: 15px;}
    .m-manual.manual-reader {
        font-size:13px;
        min-width: initial
    }

    .m-manual.manual-reader .manual-head {
        min-width: initial
    }
    .m-manual.manual-reader .manual-head .manual-menu{
        display: none;
    }

    .m-manual.manual-reader .manual-body {
        padding-left: 0
    }

    .m-manual.manual-reader .manual-left {
        width: 80%;
        max-width: 360px;
        left: -80%;
        top: 0;
        z-index: 4000
    }

    .m-manual.manual-reader .manual-left .article-menu{
        width: 100%;
    }

    .m-manual.manual-reader .manual-head .pull-left {
        right: 0;
        left: 0;
        position: relative
    }

    .m-manual.manual-reader .manual-head .pull-left .slidebar {
        display: inline-block;
        margin-right: 10px;
        /*position: absolute;*/
        /*left: 0;*/
        /*top: 0;*/
        /*font-size: 20px*/
    }

    .m-manual.manual-reader .manual-head .pull-left .slidebar i {
        display: inline-block;
        vertical-align: top;
        margin-top: 20px;
        line-height: 100%
    }

    .m-manual.manual-reader .manual-head .pull-left .manual-title {
        padding-left: 30px;
        height: 54px;
        line-height: 54px;
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }

    .m-manual.manual-reader .manual-navg {
        display: block
    }

    .m-manual.manual-reader .manual-head .left .manual-navg {
        margin-left: 36px;
        margin-right: 36px
    }

    .m-manual.manual-reader .manual-navg .title {
        float: none;
        text-align: center;
        display: block
    }

    .m-manual.manual-reader .manual-tab .tab-util {
        display: none
    }

    .m-manual.manual-reader .article-view .head-util {
        display: none
    }

    .m-manual.manual-reader .article-jump .jump-up,.m-manual.manual-reader .article-jump .jump-down {
        float: none;
        display: block
    }

    .m-manual.manual-reader .m-article .think-loading.loading-ripple {
        margin-left: -48px
    }

    .m-manual.manual-reader .manual-right {
        left: 0;
        padding: 0;
        border-radius: 0;
    }
    .m-manual.manual-reader .manual-right .manual-article{
        padding: 5px;
    }

    .m-manual.manual-reader.manual-auto-close .manual-head {
        top: -55px
    }

    .m-manual.manual-reader.manual-auto-close .manual-progress {
        top: 0
    }

    .m-manual.manual-reader.manual-auto-open .manual-head {
        top: 0
    }

    .m-manual.manual-reader .manual-article .article-view {
        padding: 0 12px
    }

    .m-manual.manual-reader .manual-article .article-comment {
        padding: 0 12px
    }

    .m-manual.manual-reader .manual-article .article-head{
        /*display: none*/
    }
    .m-manual.manual-reader .manual-article .editor-content .markdown-toc{
        display: none;
    }
    .m-manual.manual-reader .manual-mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -10;
        background-color: #000;
        opacity: 0
    }

    .m-manual.manual-reader.manual-mobile-show-left .manual-left {
        transition:left 0.5s;
        left: 0;
        z-index: 3001
    }
    .m-manual.manual-reader .manual-left{
        transition: left 0.5s;
    }

    .m-manual.manual-reader.manual-mobile-show-left .manual-mask {
        opacity: .3;
        z-index: 3000
    }
}

.xbook-item a{color: #333;}

.editormd-preview-container ol.linenums li code, .editormd-html-preview ol.linenums li code{
    line-height: 1.7;
}
.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{
    font-weight: 400 !important;
}
.markdown-body{font-size: 1.14em !important;line-height: 2;}
.editormd-preview-container ol.linenums li, .editormd-html-preview ol.linenums li{
    min-height: 20px;
}
.markdown-body table th{font-weight: normal;}
li.L1, li.L3, li.L5, li.L7, li.L9{background-color: transparent;}
.markdown-body img{margin: 8px 0;cursor: zoom-in}

.markdown-body audio,.markdown-body video{
    max-width: 100%;
    min-width: 480px;
}

.editormd-preview-container ol.linenums li code, .editormd-html-preview ol.linenums li code{
    display: block;
    white-space: pre;
}
.editormd-preview-container pre code{
    display: inline-block !important;
}

.hung-read-link{margin: 30px 0px 180px;line-height: 200%;}
.hung-read-link .col-xs-12{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-left: 0px;}
.hung-read-link .col-xs-12 a{margin-left: 5px;}
.xbook-bars{position: fixed;right: 50px;bottom: 50px;border:1px solid rgba(0,0,0,.1);
    z-index: 9999;box-shadow: 0px 1px 3px rgba(0,0,0,.1);border-radius: 4px;background-color: #fff;
}

@media screen and (max-width: 768px){
    .xbook-bars{right: 15px;bottom: 30px;}
    .manual-article .article-head h1 {
        white-space: inherit; font-size: 20px !important; line-height: 1.5;
    }
}

.xbook-bars ul,.xbook-bars li{list-style: none;padding:0px;margin: 0px;}
.xbook-bars li a{display: block;height: 40px;width: 40px;text-align: center;line-height: 40px;color: #666}
.xbook-bars li{border-bottom: 1px solid #efefef;}
.xbook-bars li:last-child{border-bottom:0px;}
.xbook-bars li:hover{background-color: #EFEFEF}
.xbook-bars li:hover a{color: #10af88}
.editormd-preview-container code, .editormd-html-preview code{
    border:0px;display: inline-block;padding-bottom: 0px;
    line-height: 1.7;
}
.editormd-preview-container blockquote, .editormd-html-preview blockquote{font-style: normal;color: #777;}

.xbook-bars .bars-menu-hide{display: none !important;}

#ModalBookmark li,#ModalHistory li{
    list-style: none;border-bottom: 1px dashed #EFEFEF;
    padding-right: 50px;position: relative;
    padding-left: 5px;
}
#ModalBookmark li:last-of-type,#ModalHistory li:last-of-type{
    border-bottom: 0px;
}
#ModalBookmark li .text-muted{
    margin-right: 5px;
}
#ModalBookmark li:hover,#ModalHistory li:hover{
    background-color: #EFEFEF;
}
#ModalBookmark li .fa,#ModalHistory li .fa{
    position: absolute;right: 0px;line-height: 250%;
    padding:0px 10px;cursor: pointer;color: #888;font-weight: 100;
}
#ModalBookmark li a,#ModalHistory li a{
    display: inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
    line-height: 250%;text-decoration: none;
}

#ModalHistory .progress{border-radius: 10px;height: 16px;}
#ModalHistory .text-muted{color: #999}

.manual-left{transition: margin-left 0.3s;}
.manual-left-toggle{margin-left: -300px;}
.m-manual .manual-right{transition: left 0.3s;}
.m-manual .manual-right-toggle{left: 0px;}
.article-menu{overflow:auto;padding:10px 0 15px 10px;position: absolute;top:70px;bottom: 0;width: 300px;}
.article-menu ul,.article-menu li{list-style: none;padding: 0px;margin: 0px;}
.article-menu li{padding-left: 1em;}
.article-menu a{display: block;word-break: break-word;line-height: 25px;color: #666666;margin-bottom: 10px;}
.article-menu a:hover{color: #008cff;}
.article-menu a.jstree-clicked,.article-menu a.active{color:#008cff !important;}
.article-menu .readed>a{color: #999999;}
.article-menu .readed>a:before{content:url("../image/readed.png");margin-left: -19px;
    position: relative;top: 3px;margin-right: 3px;}
.article-menu .readed.collapse-node>a:before{content: none}
.article-search{padding: 10px;border-bottom: 1px solid #dddddd;}
.article-search .input-group-addon{padding: 0px;border-color: #DDDDDD;background-color: transparent;}
.article-search .input-group-addon button{padding: 8px 10px;background-color: transparent;border: 0px;}
.article-search .pull-right{margin-right: -40px;margin-top: -20px;cursor: pointer;color: #666666;}

.article-search .form-control{padding-right: 5px;border-right: 0px;box-shadow: none;border-color: #DDDDDD;}
.article-search .input-group-addon-clear{background-color: #ffffff;cursor: pointer;
    padding: 0px 8px;border-left: 0px;display: none;;
}
.article-search .input-group-btn .btn-default{
    border-color: #ddd !important;
}
.article-search .btn-group.open .dropdown-toggle{box-shadow: none;}
.article-search .dropdown-menu{box-shadow: none;max-height: 50vh;overflow-y: auto;}

.article-search { padding: 15px; border-bottom: 1px solid #f0f0f0; background: #fff; }
.article-search .input-group { border: 1px solid #eee; border-radius: 4px; background: #f9f9f9; transition: all 0.3s; }
.article-search .input-group:hover { border-color: #40a9ff; background: #fff; }
.article-search input.form-control { border: none; box-shadow: none; background: transparent; height: 36px; font-size: 14px; }
.article-search .input-group-addon { background: transparent; border: none; color: #999; padding: 0 12px; }
.article-search button { background: transparent; border: none; color: #666; }
.article-search button:hover { color: #008cff; }

.article-menu .search-result{margin-left: -15px;display: none;}
.article-menu .search-empty{text-align: center;color: #888888;position: absolute;top:40%;width: 100%;font-weight: normal;font-size: 16px;}
.article-menu .search-empty .text{font-weight: normal !important;}
.article-menu .search-empty .fa-search-plus{display: block;font-size: 40px;margin-bottom: 15px;}

#nprogress .bar{z-index: 9999;}
#nprogress .spinner{left: 45%;top:15px;z-index: 9999;}
#nprogress .spinner-icon{width: 30px;height: 30px;border: solid 2px transparent;
    border-top-color: #29d;
    border-left-color: #29d;}


.markdown-body h1{font-size: 1.8em;}
.markdown-body h2{font-size: 1.6em;}
.markdown-body h3{font-size: 1.4em;}
.markdown-body h4{font-size: 1.3em;}
.markdown-body h5{font-size: 1.2em;}
.markdown-body h6{font-size: 1.1em;}

.btn-link,a.btn-link,a.btn-link:hover{color: #222222 !important;text-decoration: none;}

.article-info{
    border-top: 1px solid #EFEFEF;padding-top: 10px;padding-bottom: 15px;margin-top: 0px;margin-bottom: 0px !important;
}
.article-info a,.article-info span{color: #cccccc;font-size: 13px;}
.article-info:hover a,.article-info:hover span{color: #888;font-size: 13px;text-decoration: none;}
.article-info a:hover{color: #29d;}
.article-info span{margin-right: 10px;margin-top: 5px;}
.article-info span.pull-right{margin-right: 0px;}
.article-info i{font-style: normal;}

.editormd-preview-container blockquote, .editormd-html-preview blockquote{
    color: #777 !important;font-style: normal !important;
    border-left: 4px solid #D6DBDF;font-size: 14px;
    background: none repeat scroll 0 0 rgba(102,128,153,.05);
    margin: 8px 0;padding: 8px;
}

.article-content pre{position: relative;}
.article-content pre .btn-copy{position: absolute;right: 15px;display: none;}
.article-content pre:hover .btn-copy{display: block;}


/*.markdown-toc-fixed{*/
    /**/
/*}*/

.mgb-15px{margin-bottom: 15px;}
.mgt-15px{margin-top: 15px;}

/*.article-menu a:hover{color: #008cff;}*/

.collapse-menu{margin-left: 10px;padding-bottom: 50px;}
.collapse-menu .collapse-node{position: relative;}
.collapse-menu .collapse-node span {
    display: inline-block;
    width: 32px;height: 25px;
    box-sizing: border-box;
    position: absolute;left: -19px;
    cursor: pointer;
    background: url("../image/angle-down.png") no-repeat center center;
}
.collapse-menu .collapse-node.collapse-hide{
    height: 32px;
    white-space: nowrap;
}
.collapse-menu .collapse-node.collapse-hide ul{
    display: none;
}
.collapse-menu .collapse-node.collapse-hide span{
    background: url("../image/angle-right.png") no-repeat center center;
}

.editormd-preview-container pre, .editormd-preview-container code, .editormd-preview-container kbd, .editormd-html-preview pre, .editormd-html-preview code, .editormd-html-preview kbd{
    font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
}

.pun, .opn, .clo{color: #607D8B;}

.xbook-viewer{
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    left: 0;top: 0;bottom: 0;right: 0;
    z-index: 9999;
    display: none;
    overflow: auto;
    padding-bottom: 30px;
    cursor: zoom-out;
}

.xbook-viewer img{
    background-color: #ffffff;
    padding: 15px;
    border-radius: 5px;
    margin: auto;
    display: block;
    max-width: 95%;
    background-color: #ffffff;
}

a{color: #008cff;}
.ap-content-menu{position: relative;top:-10px;left: -10px;width: 300px;box-sizing: border-box;}
.markdown-body a{position: relative;color: #008cff;}
.markdown-body a .btn-ilink{display: none;}
.markdown-body a:hover .btn-ilink{display: block;
    color: #008cff;
    position: absolute;
    right: 0;
    top: 0;
}

#ModalMayLike ul,#ModalMayLike li{list-style: none;padding: 0;margin: 0;}
#ModalMayLike .modal-body{padding-top: 0;padding-bottom: 0;}
#ModalMayLike li a{display: block;overflow: hidden;text-overflow: ellipsis;line-height: 260%;border-bottom: 1px dashed #efefef;text-decoration: none;}
#ModalMayLike li a:hover{background-color: #efefef;}

.video-box{
    display: block;
    margin: 15px 0;
}
.video-main{
    position: relative;
    display: inline-block;
}
.video-heading{
    position: absolute;
    width: 100%;
    background-color: rgba(0,0,0,0.3);
    color: #fff;
    height: 35px;
    line-height: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    padding: 0 5px;
    font-size: 14px;
}
.video-heading.hide{
    display: none;
}
.video-main:hover .video-heading.hide{
    display: block;
}
.video-title{margin-right: 65px;text-overflow: ellipsis;overflow: hidden;}
.video-playbackrate{position: absolute;top: 0;right: 0;z-index: 999;height: 35px;}
.video-playbackrate select{
    line-height: 35px;
    border: 0;
    height: 35px;
    position: relative;
    top: -1px;
    background: rgba(0,0,0,0.3);
    color: #fff;
}

.page-svg{height: 600px;overflow: scroll;border: 1px solid #ccc;
    border-radius: 4px;
}
.page-svg img{width: 100%;}
@media (max-width: 768px) {
    .page-svg{height: 320px;}
}

.page,.page:last-of-type{border: 1px solid #ddd;}
.page{border-bottom: 0;}
.page img{width: 100%;min-height: 456px;}
.attach-list ul,.attach-list li{padding: 0;margin: 0;}

.markdown-redirect-read{
    max-height:640px;overflow:hidden;
}

.source-tips{
    padding-top: 100px;
    position: relative;
    height: 100px; 
    top: -100px;
    background-image: linear-gradient(rgba(255,255,255,0.3), rgb(255, 255, 255));
}
.copyright-statment{border-top: 1px solid #ddd;margin-top: 30px;padding-top: 15px;}
#ModalHistory .modal-body ul{
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

html.theme-dark{
    filter: invert(1) hue-rotate(180deg);
}

html.theme-dark img{
    filter: invert(1) hue-rotate(180deg);
}

html.theme-dark .xbook-item img{
    filter: none;
}

html.theme-dark body{
    font-family: PingFang SC,-apple-system,SF UI Text,Lucida Grande,STheiti,Microsoft YaHei,sans-serif;
}

html.theme-dark .markdown-body{
    color: #666;
    font-family: unset;
}

html.theme-dark .editormd-preview-container code,html.theme-dark  .editormd-html-preview code{
    background-color: #ccc;
}

html.theme-dark .editormd-preview-container blockquote,html.theme-dark  .editormd-html-preview blockquote{
    border-color: #aaa;
    background-color: #ddd;
}

html.theme-dark .editormd-preview-container pre,html.theme-dark  .editormd-html-preview pre{
    background-color: #ccc;
}

html.theme-dark .com{
    color: #888;
}
html span.moon{display: inline-block;}
html.theme-dark span.moon{display: none;}
html span.sun{display: none;}
html.theme-dark span.sun{display: inline-block;}
.btn-versions button{
    border: 0;
}

.dropdown-menu { border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.1); border-radius: 8px; padding: 10px 0; margin-top: 10px; }
.dropdown-menu > li > a { padding: 8px 20px; color: #666; }
.dropdown-menu > li > a:hover { background: #f5f7fa; color: #008cff; }
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{
    background-color: #008cff;
}





/*----------------book css------------------------*/
.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-main,#main{transition:margin-left .4s}
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
.w3-bar .w3-button{white-space:normal}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
.w3-responsive{display:block;overflow-x:auto}
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
.w3-col.s1{width:8.33333%}.w3-col.s2{width:19.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:19.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:19.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
.w3-col.l9{width:74.99999%}.w3-col.l10{width:79.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
.w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px}
.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
@media (max-width:1205px){.w3-auto{max-width:95%}}
@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}	
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-display-position{position:absolute}
.w3-circle{border-radius:50%}
.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:14px!important}.w3-large{font-size:18px!important}
.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}
.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
.w3-left{float:left!important}.w3-right{float:right!important}
.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
.w3-hover-none:hover{box-shadow:none!important}
/* Colors */
.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}
.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}
.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}
.w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}
.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}
.w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important}
.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}
.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}
.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}
.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}
.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}
.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}
.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}
.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}
.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}
.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
.w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important}
.w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important}
.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
.w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important}
.w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important}
.w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important}
.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important}
.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
.w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important}
.w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important}
.w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important}
.w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important}
.w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important}
.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important}
.w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important}
.w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important}
.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important}
.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important}
.w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important}
.w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important}
.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important}
.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}


.w3-code span.marked {
 color:#e80000;
 background-color:transparent;
}
.w3-codeline{background-color:#f1f1f1;color:#000;font-family: Consolas,"courier new";padding:15px;}
#nav_login {background-color:#f1f1f1;color:#000;}
.loginmodalform {margin:auto;width:100%;max-width:700px;text-align:left;padding:20px 40px;}
.loginmodaldiv input {width:100%;border:1px solid #ccc;padding:8px 12px;}
.loginmodaldiv .login_submit_container {text-align:right;}
.loginmodaldiv button {width:30%;min-width:120px;border:none;border-radius:5px;padding:6px 10px;background-color:#4CAF50;color:#fff;cursor:pointer;}
.loginmodaldiv button:hover {background-color:#46a049;color:#fff;}
.loginmodaldiv a {padding:0 !important;color:#000;}
.login_newusertext {width:auto;float:right;text-align:right;}
.login_forgotpasswordtext {width:auto;float:left;}
@media screen and (max-width:700px) {
  .loginmodaldiv .login_submit_container {text-align:center;}
  .login_newusertext {width:100%;text-align:center;margin-top:20px;}
  .login_forgotpasswordtext {width:100%;text-align:center;margin-top:30px;}
}
.darktheme .w3-code span.marked {
 color:#ff9999;
 background-color:transparent;
}
.darktheme .w3-example.w3-light-grey {
  background-color:rgb(40,44,52)!important;color:white;
}
.intro {font-size:16px}
.w3-btn, .w3-btn:link, .w3-btn:visited {color:#FFFFFF;background-color:#4CAF50;border-radius: 5px}
a.w3-btn[href*="exercise.html"],a.w3-btn[href*="exercise_js.html"] {margin:10px 5px 0 0}
a.btnplayit,a.btnplayit:link,a.btnplayit:visited {background-color:#FFAD33;padding:1px 10px 2px 10px}
a.btnplayit:hover,a.btnplayit:active {background-color:#ffffff;color:#FFAD33}
a.btnplayit:hover {box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);}
a.btnsmall:link,a.btnsmall:visited,a.btnsmall:active,a.btnsmall:hover {
float:right;padding:1px 10px 2px 10px;font:15px Verdana, sans-serif;}
a.btnsmall:hover {box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);}
a.btnsmall:active,a.btnsmall:hover {color:#4CAF50;background-color:#ffffff}
.tagcolor{color:mediumblue}
.tagnamecolor{color:brown}
.attributecolor{color:red}
.attributevaluecolor{color:mediumblue}
.commentcolor{color:green}
.cssselectorcolor{color:brown}
.csspropertycolor{color:red}
.csspropertyvaluecolor{color:mediumblue}
.cssdelimitercolor{color:black}
.cssimportantcolor{color:red}  
.jscolor{color:black}
.jskeywordcolor{color:mediumblue}
.jsstringcolor{color:brown}
.jsnumbercolor{color:red}
.jspropertycolor{color:black}
.javacolor{color:black}
.javakeywordcolor{color:mediumblue}
.javastringcolor{color:brown}
.javanumbercolor{color:red}
.javapropertycolor{color:black}
.kotlincolor{color:black}
.kotlinkeywordcolor{color:mediumblue}
.kotlinstringcolor{color:brown}
.kotlinnumbercolor{color:red}
.kotlinpropertycolor{color:black}
.phptagcolor{color:red}
.phpcolor{color:black}
.phpkeywordcolor{color:mediumblue}
.phpglobalcolor{color:goldenrod}
.phpstringcolor{color:brown}
.phpnumbercolor{color:red}  
.pythoncolor{color:black}
.pythonkeywordcolor{color:mediumblue}
.pythonstringcolor{color:brown}
.pythonnumbercolor{color:red}  
.angularstatementcolor{color:red}
.sqlcolor{color:black}
.sqlkeywordcolor{color:mediumblue}
.sqlstringcolor{color:brown}
.sqlnumbercolor{color:} 
.darktheme .w3-code{background-color:rgb(40,44,52);color:white;border-left-color:rgb(40,44,52)}
.darktheme .w3-codeline{background-color:rgb(40,44,52);color:white;border-left-color:rgb(40,44,52)}
.darktheme .w3-example pre{background-color:rgb(40,44,52)!important;border-left-color:rgb(40,44,52)}
.darktheme .tagcolor{color:#88ccbb/*green2*/!important}
.darktheme .tagnamecolor{color:#ff9999/*red*/!important}
.darktheme .attributecolor{color:#c5a5c5/*purple*/!important}
.darktheme .attributevaluecolor{color:#88c999/*green*/!important}
.darktheme .commentcolor{color:#999!important}
.darktheme .cssselectorcolor{color:#ff9999/*red*/!important}
.darktheme .csspropertycolor{color:#c5a5c5/*purple*/!important}
.darktheme .csspropertyvaluecolor{color:#88c999/*green*/!important}
.darktheme .cssdelimitercolor{color:white!important}
.darktheme .cssimportantcolor{color:#ff9999/*red*/!important}
.darktheme .jscolor{color:white!important}
.darktheme .jskeywordcolor{color:#c5a5c5/*purple*/!important}
.darktheme .jsstringcolor{color:#88c999/*green*/!important}
.darktheme .jsnumbercolor{color:#80b6ff/*blue*/!important}
.darktheme .jspropertycolor{color:white!important}
.darktheme .javacolor{color:white!important}
.darktheme .javakeywordcolor{color:#88c999/*green*/!important}
.darktheme .javastringcolor{color:#88c999/*green*/!important}
.darktheme .javanumbercolor{color:#88c999/*green*/!important}
.darktheme .javapropertycolor{color:white!important}
.darktheme .kotlincolor{color:white!important}
.darktheme .kotlinkeywordcolor{color:#88c999/*green*/!important}
.darktheme .kotlinstringcolor{color:#88c999/*green*/!important}
.darktheme .kotlinnumbercolor{color:#88c999/*green*/!important}
.darktheme .kotlinpropertycolor{color:white!important}
.darktheme .phptagcolor{color:#999!important}
.darktheme .phpcolor{color:white!important}
.darktheme .phpkeywordcolor{color:#ff9999/*red*/!important}
.darktheme .phpglobalcolor{color:white!important}
.darktheme .phpstringcolor{color:#88c999/*green*/!important}
.darktheme .phpnumbercolor{color:#88c999/*green*/!important}
.darktheme .pythoncolor{color:white!important}
.darktheme .pythonkeywordcolor{color:#ff9999/*red*/!important}
.darktheme .pythonstringcolor{color:#88c999/*green*/!important}
.darktheme .pythonnumbercolor{color:#88c999/*green*/!important}
.darktheme .angularstatementcolor{color:#ff9999/*red*/!important}
.darktheme .sqlcolor{color:white!important}
.darktheme .sqlkeywordcolor{color:#80b6ff/*blue*/!important}
.darktheme .sqlstringcolor{color:#88c999/*green*/!important}
.darktheme .sqlnumbercolor{color:}
@media only screen and (max-device-width: 480px) {
.w3-code,w3-codeline,.w3-codespan,#w3-exerciseform .exerciseprecontainer {font-family: 'Source Code Pro',Menlo,Consolas,monospace;}
.w3-code,w3-codeline {font-size:14px;}
.w3-codespan {font-size:14px;}
#w3-exerciseform .exerciseprecontainer {font-size:14px;}
#w3-exerciseform .exerciseprecontainer input {padding:0;height:1.5em}
}
@media screen and (max-width:700px) {
#mainLeaderboard {height:60px}
#div-gpt-ad-1422003450156-0 {float:none;margin-left:auto;margin-right:auto}
#div-gpt-ad-1422003450156-3 {float:none;margin-left:auto;margin-right:auto}
}
@media (max-width:1700px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(18){display:none;}}
@media (max-width:1600px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(13){display:none;}}
/*@media (max-width:1510px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(12){display:none;}}*/
@media (max-width:1530px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(12){display:none;}}
@media (max-width:1450px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(11){display:none;}}
/*@media (max-width:1330px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(10){display:none;}}*/
@media (max-width:1350px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(10){display:none;}}
/*@media (max-width:1200px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(9){display:none;}}*/
@media (max-width:1240px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(9){display:none;}}
/*@media (max-width:1100px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(8){display:none;}}*/
@media (max-width:1140px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(8){display:none;}}
/*@media (max-width:1000px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(7){display:none;}}*/
@media (max-width:1050px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(7){display:none;}}
@media (max-width:992px)  {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(6){display:none;}}
@media (max-width:300px)  {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(17){display:none;}}
@media (max-width:930px)  {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(19){display:none;}}
@media (max-width:800px)  {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(20){display:none;}}
@media (max-width:650px)  {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(5){display:none;} #topnav .w3-bar:nth-of-type(1) a:nth-of-type(16){display:none;}}
@media (max-width:460px)  {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(4){display:none;}}
@media (max-width:400px)  {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(3){display:none;}}
.w3-note{background-color:#ffffcc;border-left:6px solid #ffeb3b}
.w3-warning{background-color:#ffdddd;border-left:6px solid #f44336}
.w3-info{background-color:#ddffdd;border-left:6px solid #4CAF50}
hr[id^="ez-insert-after-placeholder"] {margin-top: 0;}
.phonebr {display:none;}
@media screen and (max-width: 475px) {.phonebr {display:initial;}}

/*NYTT:*/
#main{padding:16px 32px 32px 32px;border-right:1px solid #f1f1f1}
#right{padding:16px 8px;position: sticky;top: 40px;align-self: flex-start;}
.sidesection .w3-left-align{text-align:center!important}
#footer{padding:32px;border-top:1px solid #f1f1f1}
#footer hr:first-child{display:none}
.w3-info{background-color:#d4edda;border-left:none;padding:32px;margin:24px;margin-left:-32px;margin-right:-32px}
.w3-example{padding:8px 20px;margin:24px -20px;box-shadow:none!important}
.w3-note,.w3-warning{border-left:none}
.w3-panel{margin-top:24px;margin-bottom:24px;margin-left:-32px;margin-right:-32px;padding:16px 32px}
.nextprev a:focus,.w3-btn:active,.w3-btn:hover,.w3-example a:focus{box-shadow:none;background-color:#46a049!important}
.w3-btn:active.w3-blue,.w3-btn:hover.w3-blue,.w3-button:active.w3-blue,.w3-button:hover.w3-blue{background-color:#0d8bf2!important;color:#fff!important}
.w3-btn:active.w3-white,.w3-btn:hover.w3-white,.w3-button:active.w3-white,.w3-button:hover.w3-white{background-color:#f1f1f1!important}
.nextprev .w3-btn:not(.w3-left):not(.w3-right):active,.nextprev .w3-btn:not(.w3-left):not(.w3-right):focus,.nextprev .w3-btn:not(.w3-left):not(.w3-right):hover{background-color:#f1f1f1!important}
.ws-info {background-color:#D9EEE1;border-left: none;padding:32px;margin:24px;margin-left:-32px;margin-right:-32px;}
.ws-info .w3-btn {background-color:#04AA6D;border-radius: 5px;}

/*NYTT br:*/

.ws-table-all {border-collapse:collapse;border-spacing:0;width:100%;display:table;border:1px solid #ccc}
.ws-table-all tr {border-bottom:1px solid #ddd}
.ws-table-all tr:nth-child(odd) {background-color:#fff}.ws-table-all tr:nth-child(even){background-color:#E7E9EB}
.ws-table-all td,.ws-table-all th {padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.ws-table-all th:first-child, .ws-table-all td:first-child{padding-left:16px}

.bar-item-hover:hover {
  background-color: #04AA6D !important;
  color:white!important;
}
.mystyle,.mystyle:hover {
  background-color: #282A35!important;
  color:white!important;
}
#w3loginbtn:hover {
  background-color: #059862 !important;
  color:white!important;
}

@media screen and (min-width:860px) {
  #myAccordion {
    display: none !important;
  }
}
@media screen and (min-width:601px) {
  #navbtn_menu {
    display: none;
  }
}

@media screen and (max-width:700px) {
  #cert_navbtn {
    display: none !important;
  }
}

#myAccordion{font-family:'Source Sans Pro',sans-serif;z-index:1;width:100%;position:absolute;display:none;background-color:#e7e9eb}
#sectionxs_exercises,#sectionxs_references,#sectionxs_tutorials{background-color:#282a35;color:#fff}
#myAccordion .sectionxsclosenavspan{display:none}
.ws-css-exercises{background-color:#282a35;color:#fff}
.ws-css-exercises .w3-btn{background-color:#04aa6d;color:#fff}
a.btnsmall{background-color:#04aa6d!important;color:#fff;border-radius:5px}

a.btnsmall:hover {box-shadow:none;}
a.btnsmall:active,a.btnsmall:hover {color:#fff;}
a.btnplayit:hover,a.btnplayit:active {background-color:#ff9900!important;color:#fff}
a.btnplayit:hover {box-shadow:none;}
#w3-exerciseform{padding:20px;margin:32px -20px}
p{margin-top:1.2em;margin-bottom:1.2em;font-size:14px}
hr{margin:20px -16px}
.w3-codespan{font-size:105%}
.w3-example p,.w3-panel p{margin-top:1em;margin-bottom:1em}
.w3-code,w3-codeline{font-size:14px}
.adtext{font-family:"Segoe UI",Arial,sans-serif;font-size:12px;color:#777;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0}

@media screen and (max-width:600px) {
.w3-example, #w3-exerciseform {margin-left:-32px;margin-right:-32px;}
}

@media only screen and (max-device-width: 480px) {
#main {padding:24px}
h1{font-size:30px}
h2{font-size:25px}
.w3-example{padding:8px 16px;margin:24px -24px}
#w3-exerciseform{padding:8px 16px 16px 16px;margin:24px -24px}
.w3-info,.w3-panel{margin-left:-24px;margin-right:-24px}
}

/*snigel-cmp-framework//adconsent:*/
#snigel-cmp-framework .sn-b-def.sn-blue {color: #ffffff!important;background-color: #4caf50!important;border-color: #4caf50!important;}
#snigel-cmp-framework .sn-b-def { border-color: #4caf50!important;color: #4caf50!important;}
#snigel-cmp-framework .sn-selector ul li { color: #4caf50!important}
#snigel-cmp-framework .sn-selector ul li:after { background-color: #4caf50!important; }
#snigel-cmp-framework .sn-footer-tab .sn-privacy a {color:#4caf50!important;}
#snigel-cmp-framework .sn-arrow:after, #snigel-cmp-framework .sn-arrow:before { background-color: #4caf50!important; }
#snigel-cmp-framework .sn-switch input:checked+span::before { background-color: #4caf50!important; }
#adconsent-usp-link {border: 1px solid #4caf50!important;color: #4caf50!important;}
#adconsent-usp-banner-optout input:checked+.adconsent-usp-slider {background-color:#4caf50!important;}
#adconsent-usp-banner-btn {color:#ffffff;border: solid 1px #4caf50!important;background-color: #4caf50!important;}

/*pre:*/
.w3-example pre{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4caf50;word-wrap:break-word}
.info-box{padding:10px;margin:6px auto;color:#444;background-color:#f8f8f8;border:1px solid #e1e1e1;border-left:4px solid #4caf50;border-radius:4px;word-wrap:break-word}
#main .result{padding:20px;margin:6px auto;color:#444;background-color:#f8f8f8;border:1px solid #e1e1e1;border-radius:4px;word-wrap:break-word}
#main .prettyprint{padding:1em!important;font-size:1em!important;overflow-x:auto;background:#eee!important;border-radius:8px!important;width:100%;border:1px solid #d6d6d6;border-left:4px solid #4caf50}
pre.just-code{padding:20px;margin:6px auto;color:#444;background-color:#ffede0;border:1px solid #e1e1e1;border-radius:4px;word-wrap:break-word}
pre.demo-code{padding:20px;margin:6px auto;color:#444;background-color:#f8f8f8;border:1px solid #e1e1e1;border-radius:4px;word-wrap:break-word}
#main .list{background:#ffede0;padding:5px 30px;margin:0;border-radius:5px}

.section-ad{position:relative;width:100%;}
.section-ad:before{content:'骞垮憡';position:absolute;left:0;bottom:0;width:46px;height:26px;line-height:26px;color:#fff;font-size:12px;text-align:center;background-color:rgba(0,0,0,.3)}

div.tutintro{width:auto;min-height:150px}
div.tutintro1 img{float:right;margin-right:10px;margin-bottom:10px}
div.tutintro p{margin-top:0;font-size:14px;}

.article-summary{background-color:#fce8e6;border-left:none;padding:32px;margin:24px;margin-left:-32px;margin-right:-32px}

/*lastedittime:*/
#qa_edittime{text-align:left;margin-bottom:10px!important;margin-top:0!important}
#qa_edittime span:hover{color:#080}
#qa_edittime span{border-radius:5px;-moz-border-radius:90px;background:#efefef;font-size:12px;color:#1a1a1a;padding:5px;margin:4px 4px 4px 0}

/* CSS 闈㈠寘灞� */
ul.breadcrumb{padding:5px;list-style:none;}
ul.breadcrumb li{display:inline;font-size:14px}
ul.breadcrumb li+li:before{padding:8px;color:#8c92a4;content:"/\00a0"}
ul.breadcrumb li a{color:#8c92a4;text-decoration:none}
ul.breadcrumb li a:hover{color:#01447e;text-decoration:underline}

/* 浠呭 active_overview 鍦ㄥ彸渚ф坊鍔犲浘鐗� */
.overview_header::before {
content: "";
background-color: currentColor; /* 缁ф壙鐖跺厓绱犵殑棰滆壊 */
mask-image: url(/static/images/chevron-right.svg); /* 浣跨敤 SVG 鍥炬爣浣滀负閬僵 */
mask-size: cover; /* 纭繚閬僵鍥惧儚瑕嗙洊鏁翠釜鍖哄煙 */
width: 1.2rem;
height: 1.2rem;
display: inline-block; /* 纭繚浼厓绱犲彲浠ヨ缃楂� */
float: right;
margin-right:10px;
}

/* 浠呭 active_overview 鍦ㄥ彸渚ф坊鍔犲浘鐗� */
.active_overview::after {
content: "";
background-color: currentColor; /* 缁ф壙鐖跺厓绱犵殑棰滆壊 */
mask-image: url(/static/images/chevron-right.svg); /* 浣跨敤 SVG 鍥炬爣浣滀负閬僵 */
mask-size: cover; /* 纭繚閬僵鍥惧儚瑕嗙洊鏁翠釜鍖哄煙 */
width: 1.5rem;
height: 1.5rem;
display: inline-block; /* 纭繚浼厓绱犲彲浠ヨ缃楂� */
float: right;
transform: rotate(90deg);
margin-right:10px;
}

/* 鑾峰彇鏃ユ湡 */
.icon-date {
font-size: 14px;
font-family: Arial, Helvetica, "Microsoft Yahei";
}

/* 鍥炲埌椤堕儴 */
.mod-goback{display:none}
.mod-goback a{display:block;position:fixed;right:20px;bottom:40px;width:60px;height:60px;background:url(/static/images/goback.png) 0 -60px no-repeat;text-indent:-333em;z-index:99}
.mod-goback a:hover{background-position:0 0}

/* article-heading-ad */
.article-heading-ad { max-height: 98px; text-align: center; padding: 4px; }