.midiPlayer{background-color:#050505;border-top-left-radius:12px;border-top-right-radius:12px;display:flex;flex-direction:column;min-height:320px!important;overflow:hidden;position:relative;width:100%!important;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none}@media(min-height:500px)and (min-width:700px){.midiPlayer{min-height:400px!important}}@media(min-height:700px)and (min-width:900px){.midiPlayer{min-height:500px!important}}@media(min-height:900px)and (min-width:900px){.midiPlayer{min-height:600px!important}}.midiPlayer.fullScreen{border-top-left-radius:0;border-top-right-radius:0;margin-bottom:0}.midiPlayer .exitFullScreenIcon,.midiPlayer.fullScreen .enterFullScreenIcon{display:none}.midiPlayer .enterFullScreenIcon,.midiPlayer.fullScreen .exitFullScreenIcon{display:inline}.midiGraphics{cursor:pointer;flex:1;line-height:0;position:relative}.midiGraphics:active{cursor:grab}.midiGraphics canvas{position:absolute}.midiPlayerToolBar{align-items:center;background-color:#222;display:flex;flex-wrap:nowrap;padding:4px}@media(max-width:900px){.midiPlayerToolBar{flex-wrap:wrap;padding:2px}}.midiPlayer button:hover{filter:brightness(90%)}.midiPlayer button:focus{box-shadow:none!important;outline:0!important}.midiPlayerToolBar .btn{border:none;border-radius:12px;height:50px;margin:4px;padding:0;width:50px}@media(max-width:900px){.midiPlayerToolBar .btn{height:40px;margin:2px;width:40px}}@media(max-width:450px){.midiPlayerToolBar .btn{height:36px;width:36px}}@media(max-width:370px){.midiPlayerToolBar .btn{height:30px;width:30px}}@media(max-width:425px){.rewindButton{display:none!important}}.midiPlayer .form-check-input{background-color:#333}.midiPlayer .form-check-input:checked{background-color:#3246af}.midiPlayer .dropdown-menu{background-color:#222;color:#fff}.timerGroup{align-items:center;background:rgba(0,0,0,.25);border-radius:12px;color:#fff;display:flex;flex-grow:1;flex-wrap:nowrap;font-size:1.2rem;height:50px;margin:4px;text-align:center;text-shadow:0 0 4px rgba(0,0,0,.7)}.timerGroup span{margin:0 4px;min-width:3.5rem}@media(max-width:1000px){.timerGroup{font-size:1.1rem}}@media(max-width:900px){.timerGroup{font-size:1rem;height:40px;order:6!important}.timerGroup span{margin:0}}.scrubBar{background:#000;border-radius:12px;cursor:pointer;display:flex;height:20px;min-width:180px;overflow:hidden;position:relative;width:100%}@media(max-width:400px){.scrubBar{min-width:80px}}.scrubBarCurrentProgress{background:#3246af}.setSpeedBtn{border-radius:0!important;line-height:1.25;margin-left:0!important;margin-right:0!important;min-width:80px!important;padding-left:4px!important;padding-right:4px!important}.setSpeedBtn,.setSpeedBtn span{display:block!important}.setSpeedBtn small{font-size:.7rem;margin-left:4px}@media(max-width:700px){.setSpeedBtn{font-size:.8rem;line-height:1.1;min-width:55px!important}.setSpeedBtn small{font-size:.6rem}}.speedDecreaseBtn,.speedIncreaseBtn{width:35px!important}.speedDecreaseBtn{border-bottom-right-radius:0!important;border-top-right-radius:0!important;margin-right:0!important}.speedIncreaseBtn{border-bottom-left-radius:0!important;border-top-left-radius:0!important;margin-left:0!important}@media(max-width:340px){.speedDecreaseBtn,.speedIncreaseBtn{display:none}.setSpeedBtn{border-radius:12px!important;min-width:80px!important}}.midiPlayerToolBar .dropdown-centered .dropdown-menu{left:50%!important;right:auto!important;transform:translateX(-50%) translateY(58px)!important}.dropdown-speed .input-group-text,.dropdown-speed input{background-color:#333!important;color:#fff!important}.volumeGroup{align-items:center;background:rgba(0,0,0,.25);border-radius:12px;display:flex!important;margin-left:4px;margin-right:4px}@media(max-width:630px){.volumeGroup{display:none!important}}.range-slider-label{line-height:0;margin:0 4px}.range-slider{-webkit-appearance:none;appearance:none;background:transparent;border-radius:12px;cursor:pointer;height:20px;outline:none;overflow:hidden;width:100%}.range-slider::-webkit-slider-runnable-track{background:#111;border-radius:20px;height:20px}.range-slider::-moz-range-track{background:#111;border-radius:20px;height:20px}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#3246af;border:2px solid #fff;border-radius:50%;box-shadow:-1010px 0 0 1000px #3246af;height:20px;width:20px}.range-slider::-moz-range-thumb{background-color:#3246af;border:2px solid #fff;border-radius:50%;box-shadow:-1010px 0 0 1000px #3246af;height:16px;width:16px}@keyframes blinkIcon{0%{opacity:1}50%{opacity:.2}to{opacity:1}}.blinkIcon{-webkit-animation:blinkIcon 1.5s linear infinite;-moz-animation:blinkIcon 1.5s linear infinite;-o-animation:blinkIcon 1.5s linear infinite;animation:blinkIcon 1.5s linear infinite}.midiPlayerOverlay{align-items:flex-start;background:rgba(0,0,0,.6);color:#fff;display:flex;flex-wrap:wrap;height:100%;justify-content:space-around;left:0;line-height:1;overflow-y:auto;position:absolute;top:0;width:100%;z-index:20}.midiPlayerOverlay::-webkit-scrollbar-thumb{background:#000;border-radius:5px}.midiPlayerOverlay::-webkit-scrollbar-track{background:#000}.midiPlayerOverlay::-webkit-scrollbar-thumb{background:#3246af;border-radius:2px}.midiPlayerOverlay::-webkit-scrollbar-corner{background:transparent}.midiPlayerOverlay::-webkit-scrollbar{height:8px;width:8px}.midiPlayerOverlay .btnCloseOverlay{background:none;border:0;color:#fff;margin-left:auto;opacity:.75;padding:0 0 0 1rem}.midiPlayerOverlay .btnCloseOverlay:hover{opacity:1}.overlayShortcuts p{margin-bottom:.75rem}.overlayShortcuts .shortcut{border:1px solid #bbb;border-radius:9px;display:inline-block;line-height:1.25;margin-left:.35rem;margin-right:.35rem;min-width:2rem;padding:2px 6px;text-align:center;vertical-align:middle}.midiPlayerOverlay .btn{border:none;border-radius:12px;height:40px;padding:0;transition:none;width:40px}.overlaySettings,.overlayShortcuts,.overlayTrackPreferences{background:#222;border-radius:12px;margin:auto;padding:24px}@media(max-width:600px){.overlaySettings,.overlayShortcuts,.overlayTrackPreferences{padding:12px}}.overlayTitle{display:flex!important;flex-wrap:nowrap;font-weight:600!important;line-height:24px;margin-bottom:24px!important}.overlayTitle .btn{background:none;border:1px solid #ce3232;color:#fff;font-size:.75rem;height:auto;margin-left:.5rem}.overlayTitle .btn:hover{background:#ce3232;border:1px solid #ce3232}.overlaySettings .btn-group button{height:36px!important}.overlaySettings .form-check-input{cursor:pointer;margin-top:0!important}.overlaySettings .form-check-label{line-height:1.125rem}.overlaySettings .form-check.form-switch{cursor:pointer}.trackPreference{align-items:center;background:#333;color:#fff;display:flex;flex-direction:row;margin-top:2px;min-width:0;padding:0 4px;position:relative;word-wrap:break-word;border-radius:9px;font-size:.8rem}.trackPreference:hover{background:#393939}.trackPreference .trackIndex{min-width:1.5rem;padding-left:2px;text-align:center}.trackPreference .trackName{margin:0 2px;overflow:hidden;width:125px}@media(max-width:767.98px){.trackPreference .trackName{width:75px}}.trackPreference .trackName span{display:inline-block;padding:0 2px;white-space:nowrap;width:auto}.trackPreference:hover .trackName span{animation:scrolltrackname 4s linear infinite}@keyframes scrolltrackname{0%,to{transform:translateX(0)}50%{transform:translateX(calc(-100% + 60px))}}.trackPreference .trackBtn{align-items:center;background-color:#3246af;border-radius:9px;color:#fff;display:inline-flex;height:30px;justify-content:center;margin:2px;padding:4px;vertical-align:middle;white-space:nowrap;width:30px}.trackPreference .trackInstrument{max-width:145px}.midiPlayerOverlay select{background:#111;border-radius:9px;color:#fff;display:inline-block;font-size:.75rem;height:30px;margin:2px;padding:0 1rem 0 .3rem;width:100%}.midiPlayerOverlay select:focus{box-shadow:none!important;outline:0!important}.metronomeButtonOff,.metronomeButtonOn{height:35px!important}.metronomeButtonOn{border:2px solid #008014!important;border-right:none!important}.metronomeButtonOff{border:2px solid #ce3232!important;border-bottom-left-radius:0!important;border-left:none!important;border-top-left-radius:0!important}.metronomeDropdown.metronomeDropdownOn .metronomeButtonOn{background-color:#008014!important;border-color:#008014!important}.metronomeDropdown.metronomeDropdownOn .metronomeButtonOn:hover{filter:none}.metronomeDropdown.metronomeDropdownOn .metronomeButtonOff{background-color:transparent;border-color:#ce3232}.metronomeDropdown.metronomeDropdownOn .metronomeButtonOff:hover{background-color:#ce3232}.metronomeDropdown.metronomeDropdownOn .metronomeButton{background-color:#3246af}.metronomeDropdown.metronomeDropdownOff .metronomeButtonOn{background-color:transparent;border-color:#008014}.metronomeDropdown.metronomeDropdownOff .metronomeButtonOff:hover{filter:none}.metronomeDropdown.metronomeDropdownOff .metronomeButtonOn:hover{background-color:#008014}.metronomeDropdown.metronomeDropdownOff .metronomeButtonOff{background-color:#ce3232;border-color:#ce3232}.metronomeDropdown.metronomeDropdownOff .metronomeButton{background-color:#445263}.metronomeDropdown.metronomeDropdownOff .metronomeHideIfDisabled{display:none!important}.midiPlayerDragAndDropOverlay{background:rgba(0,0,0,.3);height:100%;left:0;line-height:1;overflow-y:auto;position:absolute;top:0;width:100%;z-index:30}.midiDragAndDropZone{align-items:center;background:rgba(0,0,0,.3);border-radius:12px 12px 0 0;color:#fff;display:flex;flex-direction:column;height:100%;justify-content:center;padding:4px;position:relative;width:100%}.midiDragAndDropZone p{font-size:1.15rem;text-align:center}.midiDragAndDropZone:hover{background-color:rgba(50,70,175,.7);border:3px dashed #3246af}.midiDragAndDropZone input{cursor:pointer}.midiDragAndDropZone.dragDropActive{background-color:rgba(50,70,175,.9);color:#fff}.midiDragAndDropZone input{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.midiPlayer.miniPlayer{border-radius:0 0 12px 12px;min-height:255px!important}.midiPlayer:not(.fullScreen).miniPlayer .metronomeDropdown,.midiPlayer:not(.fullScreen).miniPlayer .rewindButton,.midiPlayer:not(.fullScreen).miniPlayer .speedDecreaseBtn,.midiPlayer:not(.fullScreen).miniPlayer .speedIncreaseBtn{display:none}.midiPlayer:not(.fullScreen).miniPlayer .setSpeedBtn{border-radius:12px!important}.midiPlayer:not(.fullScreen).miniPlayer .scrubBar{min-width:40px}.midiPlayer:not(.fullScreen).miniPlayer .measure,.midiPlayer:not(.fullScreen).miniPlayer .volumeGroup{display:none!important}.midiPlayer:not(.fullScreen).miniPlayer .timerGroup{font-size:1rem!important}.midiPlayer:not(.fullScreen).miniPlayer .currentTime,.midiPlayer:not(.fullScreen).miniPlayer .midiDuration{min-width:2.75rem!important}.midiPlayer:not(.fullScreen).miniPlayer .midiPlayerDragAndDropOverlay{padding:0!important}.midiPlayer:not(.fullScreen).miniPlayer .midiDragAndDropZone{background-color:rgba(0,0,0,.35);border-radius:0;padding:0!important}.midiPlayer:not(.fullScreen).miniPlayer .midiDragAndDropZone.dragDropActive,.midiPlayer:not(.fullScreen).miniPlayer .midiDragAndDropZone:hover{background-color:rgba(50,70,175,.85)}