header{height:80px;width:100%;background-color:#363e49;padding:0 20px;justify-content:space-between}header,header .inner{display:flex;align-items:center}header .inner{height:100%;float:left;position:relative;width:60%}header .inner .logo{height:70%;width:auto}header .inner .ft-connector{position:absolute;right:38px}.ft-connector form[data-v-fb26e22c]{display:flex;justify-content:center;align-items:center}.ft-connector form[data-v-fb26e22c] .input-field input{background:none;width:110px;text-align:center}.ft-connector .connect-button[data-v-fb26e22c]{position:relative;left:7px}.ft-connector .connect-button[data-v-fb26e22c] .icon{width:auto;height:45%}.ft-connector .connect-button .round-button[data-v-fb26e22c]{background-color:hsla(0,0%,53%,.2);box-shadow:1px 1px 8px #222}.ft-connector .connect-button .round-button[data-v-fb26e22c]:hover{border:0;background-color:#9f2925}.input-field-box{display:flex;align-items:center;justify-content:space-between}.input-field{margin-left:5px;position:relative}input{background:none;color:#fff;border:none;border-bottom:1px solid gray}.error-message{position:absolute;top:100%;padding-top:2px;font-size:.8em;color:#bc2e2a;opacity:1}.error-message-invisible{opacity:0}.round-button{display:flex;justify-content:center;align-items:center;border-radius:100%;border:0;outline:0;color:#fff;cursor:pointer;box-shadow:2px 2px 10px #222;background-color:rgba(159,41,37,.8);transition:background-color .3s}.round-button:hover{border:0;background-color:#9f2925}.round-button.disabled{background-color:hsla(0,0%,53%,.4);color:rgba(0,0,0,.4);cursor:default}.round-button.sm{width:24px;height:24px}.round-button.md{width:32px;height:32px}.round-button.lg{width:64px;height:64px}@media (max-width:1200px){.round-button.lg{width:50px;height:50px}}.round-button .icon{fill:#fff;width:auto;height:80%;max-height:20px}@media (max-width:1200px){.round-button .icon{width:auto;height:35%}}.spinner{color:#fff;width:100%;height:100%;animation:rotate 1s infinite linear}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}#codypp main{display:flex}#codypp main .blocklyContainer{z-index:1}#codypp main .codePreview{z-index:2!important}.blockly-container{position:relative;height:calc(100vh - 80px)}.blockly-container.sm{width:60%}.blockly-container.bg{width:100%}.blockly-container .hide-button{position:absolute;right:0;width:64px;float:right;display:flex;align-items:center;justify-content:center;height:calc(100vh - 80px)}.blockly-container .hide-button .semicircle-button{z-index:2!important;margin-left:auto;opacity:1;transition:.2s ease-out;transition-delay:.2s}.blockly-container .hide-button .semicircle-button:hover{margin-left:auto;opacity:1;transition:.2s ease-in}.blockly-container .toolbox-footer{position:absolute;left:0;bottom:20px;width:111px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2!important}.blockly-container .toolbox-footer .language-button{margin:7px}.blockly-container .toolbox-footer .version-tag{font-size:.85em}.blockly-container #blockly{position:absolute;z-index:1;top:0;left:0;right:0;bottom:0;width:100%}.blockly-container .blocklyToolboxDiv{background-color:#363e49;box-shadow:0 0 10px #222;min-width:111px}.blockly-container .blocklyToolboxDiv .blocklyTreeRoot{padding:0}.blockly-container .blocklyToolboxDiv .blocklyTreeRoot .blocklyTreeRow{padding:10px 20px;margin:0;height:auto;cursor:pointer;transition:background-color .2s}.blockly-container .blocklyToolboxDiv .blocklyTreeRoot .blocklyTreeRow:hover{background-color:#4f5a69}.blockly-container .blocklyToolboxDiv .blocklyTreeRoot .blocklyTreeRow .blocklyTreeLabel{cursor:pointer}.blockly-container .blocklyFlyoutBackground{fill:#4f5a69}.blockly-container .blocklySvg{background-color:#272d35;width:101%;height:101%;margin-top:-1px;box-shadow:inset 0 0 10px #222}.blockly-container .blocklyScrollbarHandle{fill:hsla(0,0%,53%,.4);transition:fill .15s}.blockly-container .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,.blockly-container .blocklyScrollbarHandle:hover{fill:hsla(0,0%,53%,.6)}.blockly-container .blocklyZoom>image{transition:opacity .15s}.blockly-container .blocklyText,.blockly-container .blocklyTreeLabel{font-family:Roboto,sans-serif}.blockly-container .toolboxLabelStyle>.blocklyFlyoutLabelText,.vue-js-switch .v-switch-label.v-left,.vue-js-switch .v-switch-label.v-right{font-family:Roboto,sans-serif;fill:#fff}.semicircle-button{width:32px;height:64px;display:flex;justify-content:center;align-items:center;border-top-left-radius:32px;border-bottom-left-radius:32px;border:0;outline:0;cursor:pointer;box-shadow:2px 2px 10px #222;background-color:rgba(54,62,73,.4)}.semicircle-button.isHided .arrow{left:4px;transform:rotate(-180deg)}.semicircle-button:hover{border:0;background-color:rgba(54,62,73,.65)}.semicircle-button .arrow{position:relative;height:12px;width:12px;transform-origin:center center;transition:transform .3s}.semicircle-button .arrow:after,.semicircle-button .arrow:before{position:absolute;width:100%;height:100%;display:block;top:0;left:0;content:"";box-sizing:border-box;border:2px solid hsla(0,0%,100%,.4);border-left:0;border-top:0;transform:rotate(-45deg)}#fileSaver{display:none}.code-preview{position:relative}.code-preview.visible{width:40%}.code-preview.invisible .preview-container{display:none}.code-preview .preview-container .code-container{height:calc(100vh - 80px);overflow-y:scroll}.code-preview .preview-container .code-container .scrollable{padding:60px 20px}.code-preview .preview-container .code-container .vb-dragger{z-index:5;width:12px;right:0;padding:12px 0}.code-preview .preview-container .code-container .vb-dragger>.vb-dragger-styler{border-radius:5px;height:100%;display:block;width:10px;background-color:hsla(0,0%,53%,.4)}.code-preview .preview-container .code-container .vb-dragger>.vb-dragger-styler:hover{background-color:hsla(0,0%,53%,.6)}.code-preview .preview-container .drop-down{position:absolute;top:20px;left:20px;z-index:1;opacity:.8;transition:opacity .3s}.code-preview .preview-container .drop-down:hover{opacity:1}.code-preview .preview-container .hljs{background:transparent}.code-preview .buttons{position:absolute;bottom:20px;right:32px;display:flex;flex-direction:row-reverse;transition:.2s ease-in}.code-preview .buttons.right-offset{bottom:31px;right:100px;transition:.2s ease-out}@media (max-width:1200px){.code-preview .buttons.right-offset{bottom:36px}}@media (max-width:1200px){.code-preview .buttons{flex-direction:column}}.code-preview .buttons .round-button{margin-left:20px}@media (max-width:1200px){.code-preview .buttons .round-button{margin-top:10px}}.drop-down{position:relative;cursor:pointer;display:inline-block;min-width:210px;font-size:1em;background-color:#272d35}.drop-down.opened .arrow{transform:rotate(-180deg)}.drop-down .current{padding:7px 10px;display:flex;justify-content:space-between;align-items:center;border:1px solid hsla(0,0%,100%,.4)}.drop-down .current .arrow{height:16px;width:16px;position:relative;transition:transform .2s}.drop-down .current .arrow:after{content:"";position:absolute;top:0;left:0;right:0;margin:auto;width:8px;height:8px;border:2px solid hsla(0,0%,100%,.4);border-left:0;border-top:0;transform:rotate(45deg)}.drop-down .options{position:absolute;width:100%;border:1px solid hsla(0,0%,100%,.4);border-top:0;background-color:#272d35}.drop-down .options ul{list-style:none;padding:0;margin:0}.drop-down .options ul li{padding:7px 10px;transition:color .2s,background-color .2s}.drop-down .options ul li:hover{color:#272d35;background-color:#fff}#config main,.inputFieldContainer{display:flex;justify-content:center}.inputFieldContainer{position:absolute;top:100px}.inputFields{display:flex;flex-direction:column;width:320px}.button{align:center;padding-top:20px;margin:0 auto}.hljs{display:block;overflow-x:auto;padding:.5em;color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}@font-face{font-family:Roboto;src:url(Roboto-Light.ttf);font-weight:400;font-style:normal}html{min-width:900px;margin:0}body{padding:0;margin:0;font-family:Roboto;font-size:16px;background-color:#272d35;color:#fff}*{box-sizing:border-box}