ol, ul {
    list-style: none;
}

.default__page__content ul {
    padding-bottom: 0;
}

.navigation-wrapper-tact .dropdown-content {
    border-radius: 4px;
}

li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.default__page__content ul {
    padding-bottom: 0
}

.wrapper {
    background: #EBEBEB
}

.seq-ui {
    background: #fff;
    padding-bottom: 430px;
    position: relative
}

.seq-ui #r-mid {
    position: absolute;
    width: 100%;
    padding: 0 0px;
    z-index: 1
}

.seq-ui button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 4px
}

.seq-ui button:focus {
    outline: none;
    border-color: #d0d0d0;
    animation: focused .5s ease;
    animation-iteration-count: infinite;
    animation-direction: alternate
}

@keyframes focused {
    to {
        border-color: #d0d0d0
    }
}

.seq-ui .mute {
    background: transparent;
    cursor: pointer;
    color: #b1b7c5;
    font-size: .9rem
}

.seq-ui .mute:hover {
    color: #757b89
}

.seq-ui .mute.active {
    color: #272927
}

.seq-ui .sequencer .sequencer-channels {
    background-color: #edf7f9;
    border: 1px solid #caf2fa;
    border-radius: 4px;
    padding: .6rem .5rem 1rem .6rem
}

.seq-ui .seq-row {
    font-size: 0;
    cursor: pointer;
    white-space: nowrap;
    display: -ms-flexbox;
    display: flex;
    width: 80%;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.seq-ui .seq-row.inline {
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 1em
}

.seq-ui .seq-row span {
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: .1rem;
    width: 33px;
    height: 33px;
    background: #fff;
    border: 1px solid #caf2fa;
    border-radius: 20px;
    cursor: pointer;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

.seq-ui .seq-row span.seq-step-measure {
    font-size: 1.1rem;
    background: #ddf0f4;
    color: #b1a6a1;
    font-weight: 400
}

.seq-ui .seq-row span.seq-note {
    font-size: 0;
    background: #E5E5E5;
    border-color: #E5E5E5
}

.seq-ui .seq-row span.seq-note.seq-playhead {
    -ms-transform: translateY(2px);
    transform: translateY(2px)
}

.seq-ui .seq-row span.seq-note.seq-active {
    background: #17a2b8;
    border-color: #caf2fa
}

.seq-ui .seq-row span.seq-note.seq-active:hover {
    border-color: #d0d0d0
}

.seq-ui .seq-row span.seq-note-yellow {
    font-size: 0;
    background: #E5E5E5;
    border-color: #E5E5E5
}

.seq-ui .seq-row span.seq-note-yellow.seq-playhead {
    -ms-transform: translateY(2px);
    transform: translateY(2px)
}

.seq-ui .seq-row span.seq-note-yellow.seq-active {
    background: #f4b400;
    border-color: #caf2fa
}

.seq-ui .seq-row span.seq-note-yellow.seq-active:hover {
    border-color: #d0d0d0
}

.seq-ui .seq-row span.seq-note-empty {
    background: rgba(182,53,53,0.2);
    border-color: rgba(194,52,52,0.2)
}

.seq-ui .seq-row span.seq-playhead {
    border-color: #17a2b8aa;
    box-shadow: 0 0 5px #17a2b8aa
}

.seq-ui .seq-row span:hover {
    border-color: #d0d0d0
}

.seq-ui .seq-row span.hidden {
    display: none
}

.seq-ui .seq-row span.visible {
    display: block
}

.seq-ui .seq-row-name {
    display: inline-block;
    width: 20%;
    text-align: right;
    padding: 0px 10px 0 0;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.seq-ui .channel {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
    vertical-align: middle;
    padding: 5px 10px
}

@keyframes equalize {
    0% {
        transform: scaleX(0.2)
    }

    25% {
        transform: scaleX(0.7)
    }

    35% {
        transform: scaleX(0)
    }

    40% {
        transform: scaleX(0.6)
    }

    50% {
        transform: scaleX(0.1)
    }

    55% {
        transform: scaleX(0.9)
    }

    60% {
        transform: scaleX(0.3)
    }

    75% {
        transform: scaleX(0.8)
    }

    80% {
        transform: scaleX(0.4)
    }

    90% {
        transform: scaleX(0.9)
    }

    100% {
        transform: scaleX(0.2)
    }
}

.seq-ui .transport {
    margin-bottom: .6rem;
    height: 31px;
    width: 100%
}

.seq-ui .transport .module-wrapper {
    max-width: 100%;
    overflow-x: scroll;
    height: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-left: 0px
}

.seq-ui .transport .module-wrapper::-webkit-scrollbar {
    display: none
}

.seq-ui .transport .module-inner:after {
    content: " ";
    white-space: pre
}

.seq-ui .transport .module-inner {
    display: -ms-flexbox;
    display: flex;
    height: 360px
}

.seq-ui .transport .module-inner > nav {
    height: 31px;
    position: relative;
    z-index: 2
}

.seq-ui .transport button {
    height: 35px;
    font-size: 12px;
    margin-right: 8px;
    background: #edf7f9;
    padding: 7px 14px;
    border: 1px solid #caf2fa;
    border-radius: 40px;
    color: #000;
    white-space: nowrap;
    transition: border-color .3s ease,background-color .3s ease,color .3s ease;
    cursor: pointer
}

.seq-ui .transport button:hover {
    border-color: #dadada;
}

.seq-ui .transport button.active {
    color: #fff;
    -ms-transform: translateY(2px);
    transform: translateY(2px)
}

.seq-ui .transport button.swing {
    background-color: #e4e4e4
}

.seq-ui .transport button.swing-disabled {
    background-color: #edf7f9
}

.seq-ui .transport button.transport-play {
    color: #000;
    background-color: #fff
}

.seq-ui .transport button.btn-play {
    background: #edf7f9 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAABLlJREFUeJzt3UmIXFUYxfG/Q4xxSAiOoKAQMaIRUUTBAXERXEgTCIoDiC4cICoEN4qggiJBAg44IBIEdaErXagQFZKoSHBAFBUUDASNOEQjoSV0qtNdLsqH0qaoqvfud787nB+cdd37ndvV6Uq990BERERERERERERERERERCSYQ7wXIPFdC2wHesB+YBsw5bkgiWcj0B+SzcCZfksTa2sYXn6T/cAG4GinNYqhrYw+AE1+BK7zWaZYmWb8A9BkC3COx2IlvEnLbzILPA4sjb9kCantAWjyM3BT9FVLMF0PQJMPgfMir10CCHUA+sAB4BlgedQdSCchD0CT34Bb0SeKWbA4AE0+Bi6MtxVpw/IA9IE54AXguFgbkslYH4AmfwDrgEPjbEvGFesANPkcuCTKzmQssQ9AH5gHXgJOirA/GcHjADTZC6wHDjffpQzleQCafAVcYb1ROTjv8v+bV4FTbLcrC3mXvjDTwL3AIstNy7+8Cx+Wb4HVhvuWf3gXPSqvA6eZ7V7cCx4n+4AHgMVGM6iad7mT5Hvgapsx1Mu71DZ5C1hhMYwaeZfZNjPAI8CS8COpi3eRXbMTWBt6KDXxLjBU3gFWBp5NFbyLC5ke8BhwTNAJFc67NIvsAm4IOaSSeZdlmW3AqmCTKpR3SdaZBZ4EloUaWGm8C4qVX4Cb0TeV/8e7mNj5CDg/yOQK4V2IR+aA59AFLIB/GZ7ZDdxO5d9U9i4hhXwCXNR1kLnyHn4qmQc2Acd3G2d+vAefWvYAdwGHdRlqTrwHnmq+AC7rMNdseA869bwCnNx6uhnwHnAO2QvcQ6EXsHgPN6d8A1zZbszp8h5qjnm61aQT5T3MXHN/m2FPKsZ/XPQjvEaJZoGzGXxT2UzVH1EmbhFwp/WL6ACk7SrrF9CvgLT1ML5aSe8AaTP/4dEBSNsO6xfQAUjbZusX0L8B0tVj8Geg6buA3gHS9RARfgXE4P2JWo55otWkE+U9zJzyJXB5uzGny3uoOeRP4G4K/ZaQ93BTzjzwInBi6+lmwHvIqeYz4OIOc82G96BTy+/AHVT0F5j3wFPJHPA8FT7XwHvwKWQ7cEHXQebKe/ie+RW4hcqvGPYuwSMHgKfQPQMA/zJi533g3CCTK4R3IbHyE3BjoJkVxbsY6/SAjcCxoQZWGu+CLPMecFa4UZXJuySL/ABcE3JIJfMuK2RmgEeBo4JOqHDepYXK28AZgWdTBe/iumYHMBV8KhXxLrBt9gEPAkeGH0ldvItskzeA0w1mUSXvMifJd0S4HKs23qWOk7+A+4AjjGZQNe9yR+U14FSz3Yt7wcPyNQXejiVF3kUvTNE3ZEqRd+FN5oGXKfyWbCnyLr7P4KaMl1pvVA7Os/g9DG6zUuQFF7nwervfBJwQYX8yQuzyP6XiW7OnKFbxu4HbqOiCi1xYFz8HPIsez5Isy/L1gKYMWBSvR7RlJGTxswzunrE06g6kk1Dlb0WPac1S1+J3AddHX7UE07Z4Paq9ENNMXv67wEqPxUp4Wxi/+J3AWpdVipkpRhc/AzwMLHFaoxjbwPDy3wRW+C1NYlkDfMDg+/bTDK60We26IhEREREREREREREREREREZEC/Q2WnoXrb3I25AAAAABJRU5ErkJggg==) no-repeat 12px 7px;
    background-size: 22px;
    background-position: 60%;
    width: 35px
}

.seq-ui .transport button.btn-pause {
    background: #edf7f9 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAZ5JREFUeJzt07FuE0EYRtGfCJJ3BwkCUVp4QkgQdEEKRdKA5Gpn5bXuOdKWHn+evZ4BAAAAAAAAAFjvZma+zMzjzDwveh5m5tPMXC/a9/nA+y7e3ay72P+f2wX77g++7+L9nP0u+GHBvt8H37fJm3MPmJeL2NOW3/h2Zp5WDTnhrO/g6pxfzvkJIE4AcQKIE0CcAOIEECeAOAHECSBOAHECiBNAnADiBBAngDgBxAkgTgBxAogTQJwA4gQQJ4A4AcQJIE4AcQKIE0CcAOIEECeAOAHECSBOAHECiBNAnADiBBAngDgBxAkgTgBxAogTQJwA4gQQJ4A4AcQJIE4AcQKIE0CcAOIEECeAOAHECSBOAHECiBNAnADiBBAngDgBxAkgTgBxAogTQJwA4gQQJ4A4AcQJIE4AcQKIE0CcAOIEECeAOAHECSBOAHECiBNAnADiBBAngDgBxB0hgMcdz/6x8fN/ZubXiiEnbN232REC+Lbj2V8XnHH0fRfv3cx8nJd/w/Oi5/vMfHg9e6vrnfa9X7QPAAAAAAAAAOAffwENZLttc+lMMgAAAABJRU5ErkJggg==) no-repeat 11px 7px;
    background-size: 20px;
    background-position: 50%;
    width: 35px
}

.seq-ui .transport-tempo {
    height: 35px;
    margin-right: 8px;
    background: #edf7f9;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #caf2fa;
    color: #272927;
    text-align: center;
    font-size: 1rem;
    word-wrap: none
}

.seq-ui .transport .dropButton {
    margin-right: 0
}

.seq-ui input[type="text"] {
    font-size: 12px;
    padding: 7px 14px;
    border-radius: 4px
}

.presets {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.presets a {
    display: inline-block;
    color: #555;
    font-size: 12px
}

.presets a:hover {
    background-color: #edf7f9;
    color: #555
}

.presets a.active {
    background-color: #eee;
    color: #636563
}

.dropdown-content {
    height: 320px;
    width: 100%;
    display: none;
    top: 31px;
    left: 0;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    overflow-y: scroll;
    border-radius: 4px;
    z-index: 1
}
.navigation-wrapper-tact .dropdown-content a {
    position: relative;
    left: -35px;
    color: #000;
    padding: 10px 28px 10px 12px;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    display: block;
}
.dropdown-content a {
    color: #000;
    padding: 12px 16px;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    display: block
}

.dropdown-content a:hover {
    color: #1b1b1b
}

.navigation-wrapper {
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    margin-right: 8px
}

.navigation-wrapper .dropdown-content {
    width: auto
}

.navigation-wrapper .active {
    display: block
}

.navigation-wrapper-tact {
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    margin-right: 8px
}

.navigation-wrapper-tact .active {
    display: block
}

.navigation-wrapper-tact .dropdown-content {
    border-radius: 4px
}

.dropdown-content-takt {
    height: auto;
    width: 100%;
    overflow-y: visible;
    border-radius: 4px
}

.dropdown-content-takt nav {
    width: 100%
}

.dropdown-content-takt a {
    text-align: center;
    font-size: 12px
}

.dropdown-content-takt a.active {
    background-color: #eee;
    color: #636563
}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

.clearBtn-disabled {
    display: none
}

.transport ::-webkit-scrollbar {
    -webkit-appearance: none
}

.transport ::-webkit-scrollbar:vertical {
    width: 12px
}

.transport ::-webkit-scrollbar:horizontal {
    height: 12px
}

.transport ::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 10px;
    border: 2px solid #fff
}

.transport ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #fff
}

input[type=text].transport-tempo,textarea.transport-tempo {
    transition: all .3s ease-in-out;
    outline: none;
    border: 1px solid #caf2fa;
    width: 60px
}

input[type=text].transport-tempo:focus,textarea.transport-tempo:focus {
    border: 1px solid #edf7f9;
    border-color: #dadada;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2)
}

article.default__content {
    padding: 0
}

.default__page__title {
    padding-left: 75px
}

.tools__page__content {
    padding: 0 75px 50px
}

@media (min-width: 767px) {
    .its_setting_page.default__content,article.default__content {
        padding:15px 0
    }
}

@media all and (max-width: 1005px) {
    .content {
        background:#fff
    }

    .content__right {
        background-color: #fff
    }

    .default__page__title {
        padding-left: 58px;
        padding-right: 58px;
        margin-top: 15px
    }

    .tools__page__content {
        padding: 0 60px 30px
    }

    .seq-ui .transport .module-wrapper {
        padding: 0 0px
    }

    .seq-ui .sequencer {
        padding: 0
    }

    .seq-ui #r-mid {
        padding: 0 0px
    }
}

@media all and (max-width: 766px) {
    .content__right {
        padding:0
    }

    .tools__page__content {
        padding: 0 15px 60px
    }

    .default__page__title {
        padding-left: 15px;
        margin-top: 10px
    }

    .seq-ui .seq-row-name {
        text-align: left
    }

    .seq-ui .transport .module-wrapper {
        padding: 0 0px
    }

    .seq-ui .sequencer {
        padding: 0
    }

    .seq-ui #r-mid {
        padding: 0 0px
    }
}

@media all and (max-width: 600px) {
    ::-webkit-scrollbar {
        width:0;
        background: transparent
    }

    .seq-ui {
        padding-bottom: 400px
    }

    .seq-ui .channel {
        padding: 0
    }

    .seq-ui .sequencer {
        overflow-x: scroll
    }

    .seq-ui .sequencer .sequencer-channels {
        max-width: 550px;
        width: 550px;
        padding: 1.6rem .5rem 1rem 1.6rem
    }
}

@media all and (max-width: 480px) {
    .seq-ui {
        padding-bottom:350px
    }

    .seq-ui .seq-row span {
        height: 35px
    }

    .seq-ui .seq-row span .seq-step-measure {
        font-size: .9rem
    }

    .seq-ui .seq-row span.seq-note {
        -ms-transform: translateY(2px);
        transform: translateY(2px)
    }

    .seq-ui .seq-row span.seq-note.seq-playhead {
        -ms-transform: translateY(-2px);
        transform: translateY(-2px)
    }

    .seq-ui .navigation-wrapper .dropdown-content {
        right: 0;
        left: auto
    }
}