:root{--border-color:#505050;--primary-background:#191919;--secondary-background:#252525;--primary-textcolor:#eee;--font-size:15px}body{margin:0;font-family:Roboto,Arial;background:#191919;color:#eee;text-align:center;font-size:var(--font-size)}.main-content{background:var(--secondary-background);display:flex;padding:20px}.main-content>div{margin:10px}.panel-right{text-align:left}.editor{border:1px solid var(--border-color);padding:10px;flex:auto}.topbar{background-color:#393939;padding:2px 6px;text-align:left}.topbar button{background-color:inherit;font-family:inherit;font-size:inherit;outline:0;border:none;padding:4px 8px;cursor:pointer;color:var(--primary-textcolor)}.topbar button:hover{background-color:#2a2a2a}.editor-display{display:inline-block;background:#000;padding:10px}.editor-display>div{position:relative}.editor-display>div span{appearance:none;margin:0;display:inline-block;border-radius:100%;position:absolute;top:0;left:0}.settings-box{display:inline-block;user-select:none;text-align:left;min-width:200px}.settings-box>div{margin:10px 0}.button-fix{display:flex}.button-fix>button{flex:auto}.color-box .colors{display:inline-block;width:120px;text-align:left}.color-box>div>div>div{width:28px;height:28px;margin:1px;display:inline-block}.color-box>div{flex-direction:column;margin:0 5px}.current-color{margin:40px 0!important}.current-color>div{margin:10px 0}.current-color .options-checkbox{margin:0 25px}.current-color>div>button{width:15px;height:15px;margin:0 5px;align-self:flex-end;outline:0;border:none;background:#d8d8d8}.current-color>div>div{display:inline-block;position:relative}.current-color>div .brush>*{width:25px;height:25px;border:1px solid #949494;outline:2px #4a4a4a;outline-style:outset;display:inline-block}#currentPrimary{top:12px;left:14px;position:absolute}.options-checkbox>p{display:inline-block}.options-checkbox>input{margin-left:8px}.window-prompt{width:500px;background-color:#2b2b2b;position:fixed;opacity:0;z-index:1000;left:0;right:0;top:50%;margin-left:auto;margin-right:auto;padding:20px 25px;border:1px solid #484848;border-radius:3px 3px 0 0;box-shadow:0 2px 1px 0 rgba(0,0,0,.3);text-align:left;transform:translateY(-50%) scale(0);transition:opacity .35s ease}.window-popout.active{opacity:1;transform:translateY(-50%) scale(1)}.window-popout .close{filter:invert(1);opacity:.4}.settings>div>input{float:right}.settings>button{margin-top:16px}.settings>div{display:block;margin:10px 0}.settings-box>div>input{margin-left:8px;width:110px;float:right}.settings-box>div>input[type=checkbox]{width:auto}.project-name-display{margin-top:0;border-bottom:1px solid var(--border-color);padding-bottom:10px}.frame-controls{background:#1d1d1d;text-align:left;margin-top:10px;user-select:none;min-width:850px}.frame-actions{padding:7px 8px 0 8px;cursor:pointer;border-top:1px solid var(--border-color)}.frame-actions>div{display:inline-block;vertical-align:middle;margin:4px}.frame-actions button{margin:0 2px;border:none;height:25px;outline:0;cursor:pointer;background-color:#ccc}.frame-actions button:hover{background-color:#eee}.frame-actions span{margin:0 10px}#clearFrame:hover{background-color:#eee}#deleteFrame:hover{background-color:red}.timeline-container{height:40px}.frames{display:flex;height:100%;background-color:#131313;position:relative}.frames>div{flex:auto;display:inline-flex;align-items:center;flex-direction:column;border-right:1px solid var(--border-color);border-left:1px solid var(--border-color)}.frame-active{border-top:8px solid #868686}.frame-controls canvas{position:absolute;top:30%}.context-menu{position:absolute;background-color:#444;padding:10px 0;z-index:100;user-select:none;color:#ccc;border:1px solid #5a5a5a;box-shadow:3px 3px 3px #00000080;text-align:left}.context-menu .context-sub{background-color:#444;position:absolute;top:0;left:100%;padding:0 0;border:1px solid #5a5a5a;box-shadow:3px 3px 3px #00000080}.context-menu .item{padding:8px 15px;margin:0;cursor:pointer;width:max-content;min-width:-webkit-fill-available;position:relative}.context-menu .item:hover{background-color:#3a3a3a}.icon{width:18px;height:20px;display:inline-block;background-size:18px 20px;filter:invert(1) brightness(.8);user-select:none;margin:0 3px}.icon:hover{filter:invert(1) brightness(1)}#frame-start{transform:scaleX(-1);background-image:url(icons/frame_absolute.svg)}#frame-backward{background-image:url(icons/frame_step.svg);transform:scaleX(-1)}#play-pause{background-image:url(icons/play.svg)}#play-pause.active{background-image:url(icons/pause.svg)}#frame-forward{background-image:url(icons/frame_step.svg)}#frame-end{background-image:url(icons/frame_absolute.svg)}.window-popout{width:500px;background-color:#2b2b2b;position:fixed;opacity:0;z-index:1000;left:0;right:0;top:50%;margin-left:auto;margin-right:auto;padding:20px 25px;border:1px solid #484848;border-radius:3px 3px 0 0;box-shadow:0 2px 1px 0 rgba(0,0,0,.3);text-align:left;transform:translateY(-50%) scale(0);transition:opacity .35s ease}.window-popout-active{opacity:1;transform:translateY(-50%) scale(1)}