.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}.nav-item{margin:0 7px;font-size:15px}#app{-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}.cpp-content{position:fixed;top:56px;left:0;width:100%;height:calc(100% - 56px);display:flex;background:#f5f5f5}.cpp-content .coder{width:calc(100% - 380px)!important;height:100%;overflow:auto;position:relative}.cpp-content .coder .editor{width:100%;border-radius:5px}.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:25px;top:25px;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:380px;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{margin:10px;height:calc(100% - 20px);background:#fff;padding:10px;border-radius:5px;border:1px solid #ddd;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:linear-gradient(#5fd6e3,#06b2c5)!important;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%;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:7px 10px;font-size:15px;color:#222;cursor:pointer}.class-row:hover{background:#eee}.topic-row{cursor:pointer;font-size:14px;padding:5px 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}.question-page{position:fixed;left:0;top:55px;width:100%;height:calc(100% - 55px);display:flex;background:#eee}.sidebar{width:240px;height:100%}.sidebar .wrapper{margin:15px;width:calc(100% - 30px);text-align:left;padding:10px 10px}.content .wrapper,.sidebar .wrapper{background:#fff;height:calc(100% - 30px);overflow:auto;border-radius:10px}.content .wrapper{margin:15px 0;width:100%;padding:10px 15px}.sidebar .q-title{height:40px;line-height:40px;font-size:15px;text-align:center;border:1px solid #f5f5f5;margin-bottom:5px}.sidebar .q-title.active{background:#04b2c5;color:#fff;border-radius:5px}.sidebar .q-title:hover{background:#e1f3f9;color:#333;cursor:pointer}.content{color:#000;width:calc(100% - 740px)}.content,.operation{height:100%;line-height:25px}.operation{width:500px}.option{display:flex;line-height:30px;cursor:pointer;color:#666;padding:5px 10px;border-radius:3px;border:1px solid #f5f5f5;margin-bottom:5px}.option.active.correct{background:#28a745;border-radius:3px;color:#fff}.option.active code{color:#fff}.option.active.wrong{background:#dc3545;color:#fff;border-radius:3px}.option:hover{background:#e1f3f9}.operation .wrapper{background:#fff;margin:15px 15px;height:calc(100% - 30px);width:calc(100% - 30px);padding:10px 15px;overflow:auto;border-radius:10px}pre{border-radius:3px;color:#fff;background:#333;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;padding:5px 10px;line-height:25px}code{color:#333}table{border-collapse:collapse}.drawer{position:fixed;top:0;right:-400px;width:400px;max-width:100%;height:100%;background-color:#f8f9fa;transition:right .3s ease-in-out;z-index:1000;overflow:auto}.drawer.open{right: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}