body{background:#581;color:#fff;font-family:Barlow,sans-serif}.title,body{margin:0}#head{background:#00579a;box-shadow:0 1px 2px #000a;padding:10px;text-align:center}#keyboard{padding-bottom:2px;-webkit-user-select:none;user-select:none}#kutija{padding:10px 10px 0}#klavijatura{cursor:default;display:block;width:100%}#tabla{display:flex;flex-wrap:wrap;justify-content:space-evenly;padding:10px}.property{display:inline-block;text-align:center}@media (max-width:480px){.property{flex:0 0 33%;max-width:33%;width:100%}}.property-name{font-size:15px;text-align:center}.arrow{display:inline-block;width:17px}.arrow svg{fill:#9ccc17;width:15px}.arrow:hover svg{fill:#fff}.cifra{bottom:7px;color:#fff;display:inline-block;font-size:22px;position:relative;text-align:center;width:30px}.tekst .cifra{bottom:11px;font-size:14px}.j-0{opacity:.2}.decrease{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.rekord{background:url(/static/media/zvucnik.d93ab9d2a420d77042ca.svg) no-repeat 0 0;background-size:cover;background:#d30;border-radius:50%;height:30px;left:17px;position:absolute;top:27px;width:30px}.rekord .square{display:none}@-webkit-keyframes blinkaj{0%{-webkit-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes blinkaj{0%{-webkit-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1.1);transform:scale(1.1)}}.isRecording-true{-webkit-animation:blinkaj .5s ease-in-out infinite alternate;animation:blinkaj .5s ease-in-out infinite alternate;border:2px solid #fff}.isRecording-true .square{background:#fff;display:block;height:40%;left:30%;position:absolute;top:30%;width:40%}.tone{fill:#e8e8e8;stroke:#272727;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out}.black{fill:#272727}.tone:hover{fill:#fff}.black:hover{fill:#000}.output{display:none}.output.jeste{display:flex;justify-content:space-between;padding-bottom:10px}.active.black{fill:#4b6917;-webkit-transform:translateY(-1px);transform:translateY(-1px)}.active.white{fill:#d5e6b8;-webkit-transform:translateY(1px);transform:translateY(1px)}.label{color:#fff;font-size:16px}.notation{cursor:pointer;margin-right:10px}.notation-true,.notation:hover{color:#fff}.clips{padding:10px}@-webkit-keyframes iskrsni{0%{-webkit-transform:scale(0);transform:scale(0)}50%{background:#074;-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes iskrsni{0%{-webkit-transform:scale(0);transform:scale(0)}50%{background:#074;-webkit-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);transform:scale(1)}}.clip{-webkit-animation:iskrsni .3s ease-out;animation:iskrsni .3s ease-out;background:hsla(0,0%,100%,.1);display:inline-block;margin:0 10px 10px 0;min-width:100px;position:relative}.clip .block{padding:10px}.clip .name-clips{background:hsla(0,0%,100%,.1);font-size:12px;line-height:12px}.clip .nota{fill:#fff}.clip .overlay{opacity:0}.clip:hover .overlay{background:rgba(0,0,0,.7);height:100%;left:0;opacity:1;position:absolute;top:0;transition:opacity .1s ease-in;width:100%}.clip .play{background:url(/static/media/play.4981e213dc1f4a4ad1cf.svg) no-repeat 0 0;background-size:cover;height:40px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:40px}.clip .move,.clip .play{cursor:pointer;display:block;position:absolute}.clip .move{background:url(/static/media/close.66b0ad693f67e0064ab4.svg) no-repeat 0 0;background-size:cover;height:12px;right:10px;top:10px;width:12px}.clip .repeat{background:url(/static/media/riplej.059ac3ce0a2bbb898e50.svg) no-repeat 0 0;background-size:cover;cursor:pointer;display:block;height:15px;position:absolute;right:30px;top:9px;width:12px}.clip.isPlaying-true{background:#074}@-webkit-keyframes repeat{0%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}50%{-webkit-transform:rotate(330deg);transform:rotate(330deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes repeat{0%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}50%{-webkit-transform:rotate(330deg);transform:rotate(330deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.clip.isRepeat-true{box-shadow:0 0 3px #a4a4a4}.clip.isRepeat-true .repeat{-webkit-animation:repeat .7s ease-in infinite;animation:repeat .7s ease-in infinite;border-radius:50%}@-webkit-keyframes play{0%{left:0}to{left:calc(100% - 2px)}}@keyframes play{0%{left:0}to{left:calc(100% - 2px)}}.clip .where{display:none}.clip.isPlaying-true .where{-webkit-animation-name:play;animation-name:play;-webkit-animation-timing-function:linear;animation-timing-function:linear;background:#0ea;display:block;height:100%;left:0;opacity:.5;position:absolute;top:0;width:5px}footer{bottom:1rem;font-size:.8rem;position:fixed;right:1rem}footer a{color:#fff}
/*# sourceMappingURL=main.552287b1.css.map*/