.navbar{position:fixed;top:0;left:0;width:100%;z-index:10;background:#04b2c5!important;color:#fff!important}.navbar a.nav-link{cursor:pointer;font-weight:700}.navbar a.nav-link:hover{color:#fbf8c9!important}.navbar-light .navbar-brand{color:#fff!important}.navbar-light .navbar-nav .nav-link{color:#fff}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}body{margin:0}.slice{padding:20px 0}.lang-header{text-align:left;margin-top:100px;margin-bottom:20px}.lang-header .step-box{padding:10px 5px;height:100%;border-radius:5px}.lang-header .step-box .step-title{font-size:18px;color:#333;font-weight:700;text-align:center}.lang-header .step-box .step-age{font-size:14px;color:#f1f1f1;margin:15px 0;text-align:center}.lang-header .step-box .step-age .age{background:#37c18c;border-radius:4px;width:60px;margin:auto;padding:5px;text-align:center;color:#fff}.lang-header .step-box .step-desc{color:#666;font-size:15px;margin-top:10px;padding-top:15px;text-align:center}#footer-main{color:#fff!important;font-weight:700}#footer-main .bg-dark{background-color:#04b2c5!important}#footer-main a{color:#eee;text-decoration:none}#footer-main a:hover{color:#ff0}.container{margin-top:30px;text-align:center}.home img{width:100%}.home .section-title{font-size:18px;font-weight:700;margin-top:30px;border:1px solid #cee4f4;padding:5px 0;margin-bottom:40px;border-radius:5px;background:#ddf7ff}.home .section-content{margin-bottom:30px}.home .section-content div{height:30px}.home .home-title{color:#fff;margin-top:30px;text-align:left;font-size:50px;font-weight:700}@media(max-width:800px){.home .home-title{font-size:30px;text-align:center}.home .home-img{height:auto!important}}.cpp-content .compare-coder{width:40%;height:100%;overflow:auto;position:relative}.cpp-content .compare-coder .tip{position:absolute;bottom:10px;left:60px;color:#333;z-index:100}.cpp-content .compare-coder .editor{width:100%;height:100%;background:#f5fdfb}.cpp-content .compare-coder .editor .ace_print-margin{display:none}.cpp-content .compare-coder .editor.editor-font-1{font-size:12px!important}.cpp-content .compare-coder .editor.editor-font-2{font-size:14px!important}.cpp-content .compare-coder .editor.editor-font-3{font-size:16px!important}.cpp-content .compare-coder .font-setting{position:absolute;right:10px;top:10px;display:flex;border:1px solid #eee}.cpp-content .compare-coder .font-setting .item{width:35px;text-align:center;font-size:14px;background:#fff;cursor:pointer}.cpp-content .compare-coder .font-setting .item.active{background:#04b2c5;color:#fff}.cpp-content .panel{width:20%;border-left:1px solid #eee}.cpp-content .panel .notes .tabs .tab.active{background:#04b2c5}.python-content{position:fixed;top:56px;left:0;width:100%;height:calc(100% - 56px);display:flex}.python-content .coder{width:80%;height:100%;overflow:auto;position:relative}.python-content .coder .editor{width:100%;height:calc(100% - 46px)!important;margin-top:46px;background:#f5fdfb}.python-content .coder .editor .ace_print-margin{display:none}.python-content .coder .editor.editor-font-1{font-size:12px!important}.python-content .coder .editor.editor-font-2{font-size:14px!important}.python-content .coder .editor.editor-font-3{font-size:16px!important}.python-content .coder .font-setting{position:absolute;right:10px;top:10px;display:flex;border:1px solid #eee}.python-content .coder .font-setting .item{width:35px;text-align:center;font-size:14px;background:#fff;cursor:pointer}.python-content .coder .font-setting .item.active{background:#04b2c5;color:#fff}.python-content .panel{width:25%}.python-content .panel .result{width:100%;height:50%;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #eee}.python-content .panel .result .title{position:absolute;top:0;left:0;width:100%;padding:10px;font-weight:700;font-size:14px}.python-content .panel .result canvas{max-width:100%;max-height:100%}.python-content .panel .notes{width:100%;height:100%;overflow:auto}.python-content .panel .notes .tabs{display:flex;font-size:14px;justify-content:space-around}.python-content .panel .notes .tabs .tab{width:50%;text-align:center;padding:10px 0;cursor:pointer;border-bottom:1px solid #eee}.python-content .panel .notes .tabs .tab.active{background:#8fbc8f;font-weight:700;color:#fff}.cpp-content{position:fixed;top:56px;left:0;width:100%;height:calc(100% - 56px);display:flex}.cpp-content .coder{width:75%;height:100%;overflow:auto;position:relative}.cpp-content .coder .editor{width:100%;height:calc(100% - 46px)!important;margin-top:46px;background:#f5fdfb}.cpp-content .coder .editor .ace_print-margin{display:none}.cpp-content .coder .editor.editor-font-1{font-size:12px!important}.cpp-content .coder .editor.editor-font-2{font-size:14px!important}.cpp-content .coder .editor.editor-font-3{font-size:16px!important}.cpp-content .coder .font-setting{position:absolute;right:10px;top:10px;display:flex;border:1px solid #eee}.cpp-content .coder .font-setting .item{width:35px;text-align:center;font-size:14px;background:#fff;cursor:pointer}.cpp-content .coder .font-setting .item.active{background:#04b2c5;color:#fff}.cpp-content .panel{width:25%;border-left:none!important}.cpp-content .panel .result{width:100%;height:50%;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #eee}.cpp-content .panel .result .title{position:absolute;top:0;left:0;width:100%;padding:10px;font-weight:700;font-size:14px}.cpp-content .panel .result canvas{max-width:100%;max-height:100%}.cpp-content .panel .notes{width:100%;height:100%;overflow:auto}.cpp-content .panel .notes .tabs{display:flex;font-size:14px;justify-content:space-around}.cpp-content .panel .notes .tabs .tab{width:50%;text-align:center;padding:10px 0;cursor:pointer;border-bottom:1px solid #eee}.cpp-content .panel .notes .tabs .tab.active{background:#8fbc8f!important;color:#fff}.content .coder .editor{height:100%}.content .panel .result canvas{max-width:100%;max-height:100%}.pjsconsole{width:60%}.sub{list-style:none;color:#666;font-weight:400;margin-top:5px}.content{position:fixed;top:56px;left:0;width:100%;height:calc(100% - 56px);display:flex}.content .coder{width:60%;height:100%;overflow:auto;position:relative}.content .coder .editor{width:100%;height:calc(100% - 46px)!important;margin-top:46px;background:#f5fdfb}.content .coder .editor .ace_print-margin{display:none}.content .coder .editor.editor-font-1{font-size:12px!important}.content .coder .editor.editor-font-2{font-size:14px!important}.content .coder .editor.editor-font-3{font-size:16px!important}.content .coder .font-setting{position:absolute;right:10px;top:10px;display:flex;border:1px solid #eee}.content .coder .font-setting .item{width:35px;text-align:center;font-size:14px;background:#fff;cursor:pointer}.content .coder .font-setting .item.active{background:#04b2c5;color:#fff}.content .panel{width:40%;border-left:1px solid #eee}.content .panel .result{width:100%;height:50%;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #eee}.content .panel .result .title{position:absolute;top:0;left:0;width:100%;padding:10px;font-weight:700;font-size:14px}.content .panel .result canvas{max-width:none;max-height:none}.content .panel .notes{width:100%;height:50%;overflow:auto}.content .panel .notes .tabs{display:flex;font-size:14px;justify-content:space-around}.content .panel .notes .tabs .tab{width:50%;text-align:center;padding:10px 0;cursor:pointer;border-bottom:1px solid #eee}.content .panel .notes .tabs .tab.active{background:#04b2c5;color:#fff}.buttons{position:fixed;bottom:10px;right:41%;z-index:10}.ace_gutter-cell.error-line{background:#ff4500;color:#fff}.ace_gutter-cell .ace_fold-widget{display:none!important}.pjsconsole{width:60%!important;height:150px!important}.pjsconsole .console{overflow-y:auto!important;height:150px!important;padding-bottom:20px}.project-row{display:flex;justify-content:space-between;padding:5px 10px;font-size:15px;cursor:pointer}.project-row:hover{background:#eee}.class-row{padding:5px 10px;font-size:15px;cursor:pointer}.class-row:hover{background:#eee}.topic-row{cursor:pointer;font-size:13px;padding:3px 20px;padding-right:8px;display:flex;color:#666;justify-content:space-between}.error-layer,.topic-row:hover{background:#eee}.error-layer{position:fixed;bottom:0;height:180px;left:0;width:60%;border-top:1px solid #ccc}.ace_identifier{color:#bd3c01}.ace_numeric{color:#038795!important}.ace_keyword{color:#2b5a01!important}h1{font-size:48px}h1,h3{font-weight:700}h3{font-size:32px}p{font-size:18px}.list-group-item{font-size:16px;font-weight:700}.img-fluid{max-width:100%;height:auto}@media (max-width:800px){.list-group-item{font-size:18px;font-weight:700}h3{font-size:24px}}.drawer{position:fixed;top:0;left:-400px;width:400px;max-width:100%;height:100%;background-color:#f8f9fa;transition:left .3s ease-in-out;z-index:1000;overflow:auto}.drawer.open{left:0}.drawer-content{padding:20px;font-size:14px}.drawer p{font-size:14px}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:999;display:none}.overlay.open{display:block}