@font-face{font-family:'exo2';src:url('../fonts/exo2-light-webfont.woff2') format('woff2'),url('../fonts/exo2-light-webfont.woff') format('woff');font-weight:normal;font-style:normal}@font-face{font-family:'Exo2';src:url('../fonts/exo2-medium-webfont.woff2') format('woff2'),url('../fonts/exo2-medium-webfont.woff') format('woff');font-weight:bold;font-style:normal}*{box-sizing:border-box;margin:0;padding:0;font-family:Exo2,Arial,Helvetica,sans-serif}body{height:100vh;width:100vw;overflow:hidden;background-color:#000}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#666}::-webkit-scrollbar-thumb{border-radius:5px;background:#444}::-webkit-scrollbar-thumb:hover{background:#2b303d}.browserFail{margin:auto;max-width:500px;text-align:center;opacity:1;transition:opacity 2s}.browserFail .msg{margin:30px 0 10px 0}.browserFail .msg h1{font-size:40px;font-weight:lighter;letter-spacing:0.25em;color:#fff}.browserFail .msg h2{font-size:18px;font-weight:lighter;letter-spacing:0.25em;color:#fff}.browserFail .msg img{margin:20px 0;border-radius:15px;border:1px solid #000;box-shadow:0 0 10px 5px rgba(255,255,255,0.75)}.browserFail .msg p{margin-bottom:8px;font-size:22px;line-height:1em;font-weight:lighter;color:#fff}.browserFail .msg p.sorry{font-size:36px;line-height:1em;font-weight:lighter;color:#fff}.browserFail .browsers{display:flex;flex-direction:row;justify-content:center}.browserFail .browsers a{flex:none;margin:4px;opacity:0.7}.browserFail .browsers a:hover,.browserFail .browsers a:focus{opacity:1}.browserFail .browsers a img{border-radius:10px}.splash{position:absolute;width:350px;height:224px;text-align:center;opacity:1;transition:opacity 2s}.splash h1{font-size:40px;font-weight:lighter;letter-spacing:0.25em;color:#fff}.splash h2{font-size:18px;font-weight:lighter;letter-spacing:0.25em;color:#fff}.splash img{margin-top:20px;border-radius:15px;border:1px solid #000;box-shadow:0 0 10px 5px rgba(255,255,255,0.75)}.splash p{margin-top:10px;font-size:18px;font-weight:lighter;letter-spacing:0.25em;color:#fff}.splash.hidden{opacity:0}.settingsButton{position:absolute;top:25px;left:25px;width:48px;height:48px;border-radius:10px;background:#222 url('../img/settings-white-48dp.svg') no-repeat center;cursor:pointer;opacity:0.5;transition:opacity 2s}.settingsButton:hover{opacity:1;background-color:#1e397c;box-shadow:0 0 10px 5px #3366e5}.settingsButton.hidden{opacity:0}.settings{position:absolute;display:flex;flex-direction:column;left:0px;top:0px;height:100vh;width:300px;border-right:2px solid #444;background-color:#111;box-shadow:0 0 40px #3366e5;opacity:0.95;transition:width 1s,opacity 1s}.settings.hidden{width:0;opacity:0}.settingsHeader{flex:none;display:flex;flex-direction:row;height:46px;border-bottom:2px solid #333;background:url('../img/setting_bkgrnd.png');cursor:pointer}.settingsHeader:hover{box-shadow:inset -30px 0 20px 5px #162c63,inset 0 0 20px 5px #3366e5}.settingsCaption{flex:1;padding:12px 10px 5px 10px;font-size:20px;font-weight:bold;color:#fff;animation:glow 1s ease-in-out infinite alternate}.closeButton{flex:none;height:30px;width:30px;padding-top:12px;font-size:16px;text-align:center;font-weight:bold;color:#fff}.settingsHeader:hover .closeButton{text-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5}.settingsContent{flex:1;overflow-y:auto}.settings.hidden *{display:none}.groupHeader{display:flex;flex-direction:row;height:32px;border-radius:8px;border:1px solid #333;background-color:#000;cursor:pointer;box-shadow:inset 30px 0 10px 5px #162c63}.groupHeader:hover{box-shadow:inset -30px 0 20px 5px #162c63,inset 0 0 20px 5px #3366e5}.groupCaption{flex:1;padding:5px 10px;font-size:16px;font-weight:bold;color:#fff}.enableStatus{flex:none;height:30px;width:30px;padding-top:3px;text-align:center;font-weight:bold;color:#900}.group.enable .enableStatus{color:#090}.groupHeader:hover .enableStatus{text-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5}.groupContent{padding:4px 0 0 0;opacity:1;max-height:10000px;transition:max-height 1s,opacity 1s}.group.collapsed .groupContent{max-height:0px;padding:0;opacity:0}.group.collapsed .groupContent *{display:none}.checkbox{padding:4px 11px 8px 11px;display:flex;flex-direction:row}.checkbox .caption{flex:1;padding:3px 0 0 0;color:#fff}.checkbox:hover .caption{text-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5}.checkbox .input{flex:none;width:24px;height:24px;cursor:pointer}.checkbox .input:hover,.checkbox .input:focus{box-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5}.color{padding:4px 11px 0px 11px;display:flex;flex-direction:row}.color .caption{flex:1;padding:3px 0 0 0;color:#fff}.color:hover .caption{text-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5}.color .input{flex:none;width:50px;margin:3px 0 0 0;border-radius:4px;cursor:pointer}.color .input:hover,.color .input:focus{box-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5}.color .value{flex:none;width:70px;margin:0 0 0 4px;padding:4px;border-radius:4px;border:1px solid transparent;background-color:transparent;color:#fff;text-align:right}.color .value:hover,.color .value:focus{background-color:#333;border:1px solid #333;box-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5}.midiNote{padding:4px 11px 0px 11px;display:flex;flex-direction:row}.midiNote .caption{flex:1;padding:3px 0 0 0;color:#fff}.midiNote:hover .caption{text-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5}.midiNote .input{flex:none;width:50px;margin:3px 0 0 0;border-radius:4px;color:#fff;background-color:#222;cursor:pointer}.midiNote .input:hover,.midiNote .input:focus{background-color:#333;box-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5}.midiNote .value{flex:none;width:70px;margin:0 0 0 4px;padding:4px;border-radius:4px;border:1px solid transparent;background-color:transparent;color:#fff;text-align:right}.midiNote .value:hover,.midiNote .value:focus{background-color:#333;border:1px solid #333;box-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5}.midiNote_window_bkgrnd{position:absolute;top:0px;left:0px;width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.8)}.midiNote_window{display:inline-block;flex:none;border-radius:10px;padding:50px;background-color:#000;box-shadow:0 0 10px 5px #3366e5;color:#fff}.slider{padding:4px 11px 0px 11px}.slider .captionContainer{display:flex;flex-direction:row}.slider .caption{flex:1;color:#fff}.slider:hover .caption,.slider:focus .caption{text-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5}.slider .value{flex:none;width:60px;padding:4px;border-radius:4px;border:1px solid transparent;background-color:transparent;color:#fff;text-align:right}.slider .value:hover,.slider .value:focus{background-color:#333;border:1px solid #333;box-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5}.slider .input{flex:1;width:100%;height:25px;background:#ddd;border-radius:4px;outline:none;cursor:pointer;opacity:0.7;transition:opacity 0.2s}.slider .input:hover,.slider .input:focus{opacity:1;box-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5}.text{padding:4px 11px 0px 11px;display:flex;flex-direction:row}.text .caption{flex:1;padding:3px 0 0 0;color:#fff}.text:hover .caption{text-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5}.text .value{flex:none;width:200px;margin:0 0 0 4px;padding:4px;border-radius:4px;border:1px solid transparent;background-color:transparent;color:#fff;text-align:left}.text .value:hover,.text .value:focus{background-color:#333;border:1px solid #333;box-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5}.button{margin:4px 11px;padding:4px 10px;border-radius:4px;border:1px solid #333;background:#000;color:#fff;box-shadow:inset 30px 0 10px 5px #162c63;cursor:pointer}.button:hover{text-shadow:0px 0px 4px #3366e5,0px 0px 4px #3366e5,0px 0px 4px #3366e5;box-shadow:inset -30px 0 20px 5px #162c63,inset 0 0 20px 5px #3366e5}.buttonUpdateThumbnail{margin:4px 11px;width:32px;height:32px;border-radius:4px;border:1px solid #333;cursor:pointer;background:#222 url('../img/photo_camera-white-24dp.svg') no-repeat center}.buttonUpdateThumbnail:hover,.buttonUpdateThumbnail:focus{background-color:#1e397c;box-shadow:0 0 4px 2px #3366e5}.rightBar{position:absolute;right:0px;top:0px;height:100vh;width:200px;opacity:1;transition:opacity 2s;overflow-x:hidden;overflow-y:auto}.rightBar.hidden{opacity:0}.rightBar .themeButtons{display:flex;flex-direction:row;justify-content:flex-end;margin:0 8px 0 8px;border-radius:0 0 6px 6px;padding:4px 4px 0 0;height:38px;background:#333}.rightBar .theme{margin:10px;width:180px;height:100px;border-radius:10px;border:2px solid #444;background-color:#111;color:#fff;text-align:center;text-shadow:0px 0px 4px #000,0px 0px 4px #000,0px 0px 4px #000;cursor:pointer}.rightBar .theme.current{border:2px solid #3366e5}.rightBar .theme:hover{box-shadow:0 0 20px #3366e5}.rightBar .theme.drag{border-color:#fff}.themeButton{flex:none;margin-left:4px;width:32px;height:32px;border-radius:4px;border:0px none transparent;cursor:pointer;background-color:#222;background-repeat:no-repeat;background-position:center}.themeButton:hover,.themeButton:focus{background-color:#1e397c;box-shadow:0 0 4px 2px #3366e5}.icoSaveToFile{background-image:url('../img/save-white-24dp.svg')}.icoLoadFromFile{background-image:url('../img/folder_open-white-24dp.svg')}.icoAdd{background-image:url('../img/add_circle_outline-white-24dp.svg')}.icoRemove{background-image:url('../img/remove_circle_outline-white-24dp.svg')}.icoDuplicate{background-image:url('../img/content_copy-white-24dp.svg')}