.subtitler[data-theme=light] .subtitler-background{background:#efefef url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXR0ZXJuIGlkPSJhIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGZpbGw9InJnYmEoMCwgMCwgMCwgMC4yKSIgZD0iTTAgMGgxMHYxMEgwem0xMCAxMGgxMHYxMEgxMHoiLz48L3BhdHRlcm4+PHJlY3QgZmlsbD0idXJsKCNhKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==");opacity:.45}.subtitler[data-theme=light] .subtitler-placeholder-ctn{background:#fcfcfc}.subtitler[data-theme=light] .subtitler-toolbar-debug{background:#fff}.subtitler[data-theme=light] .subtitler-editor-firstline .left{border-right:1px solid #e5e5e5;background:#f8f8f8}.subtitler[data-theme=light] .subtitler-editor-firstline .left .play{border-right:1px solid #e5e5e5}.subtitler[data-theme=light] .subtitler-editor-firstline .left .play svg{fill:#9e9e9e}.subtitler[data-theme=light] .subtitler-editor-firstline .left .play:hover svg{fill:#000}.subtitler[data-theme=light] .subtitler-editor-firstline .left .range-buttons .range-button{background:#e8e8e8;color:#848484}.subtitler[data-theme=light] .subtitler-editor-firstline .right{background:#fff;color:#ababab}.subtitler[data-theme=light] .subtitler-editor-timelines .timeline{border-top:1px solid #e5e5e5}.subtitler[data-theme=light] .subtitler-editor-timelines .timeline .left{border-right:1px solid #e5e5e5}.subtitler[data-theme=light] .subtitler-editor-timelines .timeline .left .tick-wrapper .tick svg{fill:#fff}.subtitler[data-theme=light] .subtitler-editor-timelines .timeline .left .count-wrapper .count{background:#f2f2f2;color:#919191}.subtitler[data-theme=light] .subtitler-editor-timelines .timeline .right{background:#f8f8f8}.subtitler[data-theme=light] .subtitler-editor-timelines .timeline.active .right{background:repeating-linear-gradient(-45deg,#fff,#fff 5px,#f2f2f2 0,#f2f2f2 6px)}.subtitler[data-theme=light] .subtitler-editor-timelines .timeline:not(.active) .tick{border:1px solid #b2b2b2}.subtitler[data-theme=light] .subtitler-editor-timelines .timeline:not(.active) .tick:hover{border:1px solid #2d2f36}.subtitler[data-theme=dark] .subtitler-background{background:#2d2f36 url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXR0ZXJuIGlkPSJhIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGZpbGw9InJnYmEoMCwgMCwgMCwgMC4yKSIgZD0iTTAgMGgxMHYxMEgwem0xMCAxMGgxMHYxMEgxMHoiLz48L3BhdHRlcm4+PHJlY3QgZmlsbD0idXJsKCNhKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==")}.subtitler[data-theme=dark] .subtitler-placeholder-ctn{background:#16171a;color:#c5c5c6}.subtitler[data-theme=dark] .subtitler-toolbar-debug{background:#16171a;color:#fff}.subtitler[data-theme=dark] .subtitler-file .audio-icon svg path:first-child{fill:#5c606d}.subtitler[data-theme=dark] .subtitler-file .audio-icon svg path:last-child{fill:#16171a}.subtitler[data-theme=dark] .subtitler-editor-firstline .left{border-right:1px solid #50545f;background:#2d2f36}.subtitler[data-theme=dark] .subtitler-editor-firstline .left .play{border-right:1px solid #50545f}.subtitler[data-theme=dark] .subtitler-editor-firstline .left .play svg{fill:#8f93a0}.subtitler[data-theme=dark] .subtitler-editor-firstline .left .play:hover svg{fill:#fff}.subtitler[data-theme=dark] .subtitler-editor-firstline .left .range-buttons .arrow{fill:#000;opacity:1}.subtitler[data-theme=dark] .subtitler-editor-firstline .left .range-buttons .range-button{background:#16171a;color:#848484}.subtitler[data-theme=dark] .subtitler-editor-firstline .right{background:#16171a;color:#8f93a0}.subtitler[data-theme=dark] .subtitler-editor-timelines .timeline{border-top:1px solid #454851}.subtitler[data-theme=dark] .subtitler-editor-timelines .timeline .left{border-right:1px solid #50545f;background:#16171a;color:#8f93a0}.subtitler[data-theme=dark] .subtitler-editor-timelines .timeline .left .tick-wrapper .tick svg{fill:#16171a}.subtitler[data-theme=dark] .subtitler-editor-timelines .timeline .left .count-wrapper .count{background:#2d2f36;color:#919191}.subtitler[data-theme=dark] .subtitler-editor-timelines .timeline .right{background:#2d2f36}.subtitler[data-theme=dark] .subtitler-editor-timelines .timeline.active .left .tick-wrapper .tick svg{fill:#fff}.subtitler[data-theme=dark] .subtitler-editor-timelines .timeline.active .right{background:repeating-linear-gradient(-45deg,#16171a,#16171a 5px,#1d1e22 0,#1d1e22 6px)}.subtitler[data-theme=dark] .subtitler-editor-timelines .timeline:not(.active) .tick{border:1px solid #5c606d}.subtitler[data-theme=dark] .subtitler-editor-timelines .timeline:not(.active) .tick:hover{border:1px solid #b2b2b2}.timeline[data-theme=purple].active .tick{border:1px solid #7a73a5;background:#7a73a5}.timeline[data-theme=purple] .sub{border:1px solid #7a73a5;background:#ece7ff;color:#7a73a5}.timeline[data-theme=orange].active .tick{border:1px solid #e19d45;background:#e19d45}.timeline[data-theme=orange] .sub{border:1px solid #e19d45;background:#fff1e8;color:#e19d45}.timeline[data-theme=blue].active .tick{border:1px solid #7682bb;background:#7682bb}.timeline[data-theme=blue] .sub{border:1px solid #7682bb;background:#e1ecff;color:#7682bb}.timeline[data-theme=green].active .tick{border:1px solid #7aba4b;background:#7aba4b}.timeline[data-theme=green] .sub{border:1px solid #7aba4b;background:#f1faed;color:#7aba4b}.timeline[data-theme=red].active .tick{border:1px solid #f93048;background:#f93048}.timeline[data-theme=red] .sub{border:1px solid #f93048;background:#feeaee;color:#f93048}.subtitler[data-color=purple] .subtitler-editor-range .end,.subtitler[data-color=purple] .subtitler-editor-range .start{border-right:1px dashed #7a73a5}.subtitler[data-color=purple] .subtitler-editor-range .end-time,.subtitler[data-color=purple] .subtitler-editor-range .start-time{background:#7a73a5}.subtitler[data-color=purple] .subtitler-editor-range .end-time:after,.subtitler[data-color=purple] .subtitler-editor-range .start-time:after{border-bottom-color:#7a73a5}.subtitler[data-color=purple] .range-button.active:after{background:#7a73a5}.subtitler[data-color=orange] .subtitler-editor-range .end,.subtitler[data-color=orange] .subtitler-editor-range .start{border-right:1px dashed #e19d45}.subtitler[data-color=orange] .subtitler-editor-range .end-time,.subtitler[data-color=orange] .subtitler-editor-range .start-time{background:#e19d45}.subtitler[data-color=orange] .subtitler-editor-range .end-time:after,.subtitler[data-color=orange] .subtitler-editor-range .start-time:after{border-bottom-color:#e19d45}.subtitler[data-color=orange] .range-button.active:after{background:#e19d45}.subtitler[data-color=blue] .subtitler-editor-range .end,.subtitler[data-color=blue] .subtitler-editor-range .start{border-right:1px dashed #7682bb}.subtitler[data-color=blue] .subtitler-editor-range .end-time,.subtitler[data-color=blue] .subtitler-editor-range .start-time{background:#7682bb}.subtitler[data-color=blue] .subtitler-editor-range .end-time:after,.subtitler[data-color=blue] .subtitler-editor-range .start-time:after{border-bottom-color:#7682bb}.subtitler[data-color=blue] .range-button.active:after{background:#7682bb}.subtitler[data-color=green] .subtitler-editor-range .end,.subtitler[data-color=green] .subtitler-editor-range .start{border-right:1px dashed #7aba4b}.subtitler[data-color=green] .subtitler-editor-range .end-time,.subtitler[data-color=green] .subtitler-editor-range .start-time{background:#7aba4b}.subtitler[data-color=green] .subtitler-editor-range .end-time:after,.subtitler[data-color=green] .subtitler-editor-range .start-time:after{border-bottom-color:#7aba4b}.subtitler[data-color=green] .range-button.active:after{background:#7aba4b}.subtitler[data-color=red] .subtitler-editor-range .end,.subtitler[data-color=red] .subtitler-editor-range .start{border-right:1px dashed #f93048}.subtitler[data-color=red] .subtitler-editor-range .end-time,.subtitler[data-color=red] .subtitler-editor-range .start-time{background:#f93048}.subtitler[data-color=red] .subtitler-editor-range .end-time:after,.subtitler[data-color=red] .subtitler-editor-range .start-time:after{border-bottom-color:#f93048}.subtitler[data-color=red] .range-button.active:after{background:#f93048}.subtitler-editor{position:relative;width:100%}.subtitler-editor-firstline{width:100%;height:38px;display:flex;align-items:flex-end}.subtitler-editor-firstline .left{display:flex;align-items:center;width:200px;padding-right:10px;font-size:.75rem}.subtitler-editor-firstline .left .play{width:38px;height:38px;display:flex;justify-content:center;align-items:center;cursor:pointer}.subtitler-editor-firstline .left .play svg{width:12px;transition:fill .2s ease-out;opacity:1}.subtitler-editor-firstline .left .range-buttons{display:flex;align-items:center;margin-left:12px}.subtitler-editor-firstline .left .range-buttons .arrow{display:block;width:10px;height:10px;opacity:.15}.subtitler-editor-firstline .left .range-buttons .range-button{position:relative;display:block;padding:5px 8px 7px;border-radius:4px;font-weight:600;cursor:pointer}.subtitler-editor-firstline .left .range-buttons .range-button:first-child{margin-right:8px}.subtitler-editor-firstline .left .range-buttons .range-button:nth-child(3){margin-left:8px}.subtitler-editor-firstline .left .range-buttons .range-button:hover{color:#000}.subtitler-editor-firstline .left .range-buttons .range-button.disabled{opacity:.25;pointer-events:none}.subtitler-editor-firstline .left .range-buttons .range-button.active{padding-right:15px}.subtitler-editor-firstline .left .range-buttons .range-button.active:after{position:absolute;content:"";right:4px;bottom:4px;width:5px;height:5px;border-radius:50%}.subtitler-editor-firstline .right{width:calc(100% - 200px);height:calc(100% - 3px);display:flex;align-items:center;justify-content:flex-end;padding-top:3px;padding-right:12px;font-size:.75rem}.subtitler-editor-timelines .timeline{width:100%;height:44px;background:#fff;display:flex}.subtitler-editor-timelines .timeline .left{display:flex;align-items:center;width:200px;font-size:.75rem}.subtitler-editor-timelines .timeline .left .tick-wrapper{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.subtitler-editor-timelines .timeline .left .tick-wrapper .tick{width:14px;height:14px;border-radius:3px;display:flex;justify-content:center;align-items:center;cursor:pointer}.subtitler-editor-timelines .timeline .left .tick-wrapper .tick svg{width:8px;height:8px}.subtitler-editor-timelines .timeline .left .name{width:calc(100% - 80px)}.subtitler-editor-timelines .timeline .left .count-wrapper{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.subtitler-editor-timelines .timeline .left .count-wrapper .count{padding:2px 5px;border-radius:4px}.subtitler-editor-timelines .timeline .right{width:calc(100% - 200px);display:flex;align-items:center}.subtitler-editor-timelines .timeline .right .subs{position:relative;width:100%;height:30px}.subtitler-editor-timelines .timeline .right .subs .sub{position:absolute;top:0;height:100%;border-radius:4px;font-size:.75rem}.subtitler-editor-timelines .timeline .right .subs .sub-index{position:absolute;top:3px;left:5px}.subtitler-editor-timelines .timeline .right .subs .sub-handle{position:absolute;top:0;left:0;width:2px;height:100%;pointer-events:none}.subtitler-editor-timelines .timeline .right .subs .sub-handle-left{left:-1px}.subtitler-editor-timelines .timeline .right .subs .sub-handle-right{left:calc(100% - 1px)}.subtitler-editor-timelines .timeline .left>*,.subtitler-editor-timelines .timeline .right>*{transition:opacity .2s ease-out}.subtitler-editor-timelines .timeline.active .right .subs .sub-handle{cursor:ew-resize;pointer-events:auto}.subtitler-editor-timelines .timeline.inactive .left>*,.subtitler-editor-timelines .timeline.inactive .right>*{opacity:.2}.subtitler-editor-timelines .timeline.inactive:hover .left>*,.subtitler-editor-timelines .timeline.inactive:hover .right>*{opacity:1}.subtitler-editor-timelines .timeline:not(.active) .tick{transition:border .15s ease-out}.subtitler-editor-progress{position:absolute;top:0;left:200px;width:calc(100% - 200px);height:100%;pointer-events:none;z-index:3}.subtitler-editor-progress .bar{position:relative;width:0;height:100%;border-top:4px solid #2288e8;border-right:1px dashed #2288e8}.subtitler-editor-progress .bar .handle{position:absolute;width:14px;height:14px;background:#2288e8;right:0;top:-2px;border-radius:50%;transform:translate(50%,-50%);pointer-events:auto;cursor:ew-resize}.subtitler-editor-progress .bar .handle:hover{transform:translate(50%,-50%) scale(1.1)}.subtitler-editor-progress .bar .current-time{position:absolute;right:0;transform:translateX(50%);top:8px;background:#2288e8;padding:2px 5px;font-size:.75rem;color:#fff;border-radius:2px;min-width:35px;text-align:center}.subtitler-editor-progress .bar .current-time:after{bottom:100%;left:50%;content:" ";height:0;width:0;position:absolute;pointer-events:none;border:3px solid transparent;border-bottom-color:#2288e8;margin-left:-3px}.subtitler-editor-range{position:absolute;top:0;left:200px;width:calc(100% - 200px);height:100%;pointer-events:none;z-index:2}.subtitler-editor-range .end,.subtitler-editor-range .start{position:absolute;top:0;left:0;width:0;height:100%}.subtitler-editor-range .end-time,.subtitler-editor-range .start-time{position:absolute;right:0;transform:translateX(50%);top:12px;padding:2px 5px;font-size:.75rem;color:#fff;border-radius:2px;min-width:35px;text-align:center}.subtitler-editor-range .end-time:after,.subtitler-editor-range .start-time:after{bottom:100%;left:50%;content:" ";height:0;width:0;position:absolute;pointer-events:none;border:3px solid transparent;margin-left:-3px}.subtitler-toolbar{position:absolute;width:100%;top:0;z-index:2;display:flex;justify-content:flex-end}.subtitler-toolbar-debug{height:2rem;margin-left:0;box-shadow:0 2px 5px rgba(22,23,26,.05);display:flex;align-items:center;font-family:monospace;font-size:11px}.subtitler-toolbar-debug .coord{padding:0 1rem}.subtitler-toolbar-debug .coord.prop{width:100px}.subtitler-toolbar-debug .coord.prop:before{content:"x: "}.subtitler-toolbar-debug .coord.time{width:100px;padding-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.subtitler-toolbar-debug .coord.time:before{content:"time: "}.subtitler-toolbar-debug .coord.text{width:100px;padding-left:0}.subtitler-toolbar-debug .coord.text:before{content:"text: "}.subtitler{position:relative;width:100%;padding-bottom:0;margin-bottom:3rem;user-select:none}.subtitler button{outline:none}.subtitler-background{position:absolute;width:100%;height:100%}.subtitler-placeholder,.subtitler-placeholder-ctn{position:relative;padding:2.5rem}.subtitler-placeholder-ctn{z-index:1;display:flex;justify-content:center}.subtitler-file{position:relative;width:100%;height:100%;z-index:1;padding:1.5rem 1.5rem 2.5rem}.subtitler-file.debug{padding-top:2.5rem}.subtitler-file .subtitler-video{position:relative;width:100%;display:flex;justify-content:center;align-items:center}.subtitler-file .subtitler-video-ctn{position:relative;display:inline-block;max-width:100%;z-index:2}.subtitler-file .subtitler-video-ctn video{display:block;max-width:100%;max-height:calc(75vh - 12rem)}.subtitler-file .subtitler-audio .audio-icon{display:block;width:75px;margin:1rem auto 0}.tracksbuilder-button{position:relative;display:flex;align-items:center;background:#fff;border-radius:1px;margin-bottom:2px;box-shadow:0 2px 5px rgba(22,23,26,.05);cursor:pointer}.tracksbuilder-button .icon{width:38px;height:38px;background:#f5f5f5;display:flex;align-items:center;justify-content:center}.tracksbuilder-button .icon svg{fill:#16171a;width:16px;height:16px;transform:scaleX(-1)}.tracksbuilder-button .text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:baseline;width:calc(100% - 38px);line-height:1.25rem;padding:.5rem .75rem}.tracksbuilder-button .text em{font-style:normal;margin-right:1rem;flex-grow:1;font-size:.875rem;color:#16171a}.tracksbuilder-button.error .icon{background:#d52a20}.tracksbuilder-button.error .icon svg{fill:#fff}.tracksbuilder-button.success .icon svg{fill:#a7bd69}.tracksbuilder-button.processing .icon svg{animation:rotate-icon 1.5s linear infinite}@keyframes rotate-icon{0%{transform:scaleX(-1) rotate(0deg)}to{transform:scaleX(-1) rotate(-1turn)}}