.imsMetronome {
    margin: auto;
    position: absolute;
    overflow: auto;
    width: 100%;
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;
    background-size: cover;
    background-color: #FFF;
    color: #889299
}

.imsMetronome .metronomeContent {
    max-width: 640px;
    margin: auto
}

.imsMetronome .centerFlex {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-align-content: center;
    align-content: center
}

.imsMetronome .centerFlex>div {
    -webkit-order: 0;
    order: 0;
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
    -webkit-flex-basis: auto;
    flex-basis: auto;
    -webkit-align-self: auto;
    align-self: auto;
    display: inline-block;
    overflow: hidden;
    width: 100%
}

@media screen and (min-height:650px) {
    .imsMetronome .centerFlex {
        height: 100%
    }
}

.imsMetronome .headContent {
    padding: 0;
    border: none;
    margin-top: 0;
    display: table;
    width: 100%
}

.imsMetronome .tb {
    display: table;
    width: 100%
}

.imsMetronome .btn-group-vertical>.btn:first-child {
    border-top-right-radius: 20px;
    border-top-left-radius: 20px
}

.imsMetronome .btn-group-vertical>.btn:last-child {
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px
}

.in {
    -webkit-transition: opacity 50ms ease-in;
    -moz-transition: opacity 50ms ease-in;
    -o-transition: opacity 50ms ease-in;
    opacity: 1
}

.out {
    opacity: 0
}

.imsMetronome .btn.focus,
.imsMetronome .btn:focus,
.imsMetronome .btn:hover {
    color: inherit;
    text-decoration: none
}

.imsMetronome .btn-minus-sm,
.imsMetronome .btn-plus-sm {
    display: inline-block;
    text-align: center;
    height: 30px;
    width: 30px;
    line-height: 30px;
    font-size: 40px;
    font-weight: 200;
    padding: 0 5px;
    cursor: pointer;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    vertical-align: middle
}

.imsMetronome .btn-minus-sm span {
    display: block;
    line-height: 22px
}

.imsMetronome .group-minusPlus {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: 0 0;
    line-height: 20px ;
    font-weight: 500;
    padding: 0!important;
    border: 1px solid #889299;
    width: 20px;
    padding: 0px;
    height: 20px;
    font-size: 12px;
}

.imsMetronome .group-minusPlus.btn-minus span {
    margin-top: -4px;
    display: block
}

.imsMetronome .bpmLeft,
.imsMetronome .bpmRight {
    display: inline-block;
    text-align: center;
    vertical-align: top
}

.imsMetronome .bpmInfos {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin: auto
}

.imsMetronome .blockBPM {
    color: #fff;
    display: inline-block;
    float: right;
    text-align: center;
    width: 70%
}

.imsMetronome .bpmRight.btn-group-vertical>.btn {
    display: inline-block
}

.imsMetronome .bpm {
    width: 100%;
    color: #FA5E46;
    font-family: Raleway;
    font-size: 120px;
    font-weight: 800;
    line-height: 120px;
    text-align: center
}

.imsMetronome .bpm span {
    font-size: 30px;
    font-weight: 800
}

.imsMetronome .bpmType {
    color: #232C32;
    font-size: 16px;
    font-weight: 500;
    margin-top: -10px;
    text-align: center;
    width: 100%;
    text-transform: uppercase
}

.imsMetronome .bpmImg {
    font-size: 16px
}

.imsMetronome .blockPlayVol {
    border-top: solid thin rgba(255, 255, 255, .2);
    text-align: center
}

.imsMetronome .blockPLAYER {
    color: #fff;
    display: inline-block;
    text-align: center;
    width: 80px;
    vertical-align: top;
    height: 80px;
    border-radius: 50%;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2)
}

.imsMetronome .btn-playPause {
    font-size: 38px;
    opacity: 1;
    cursor: pointer;
    color: #FA5E46;
    padding: 20%
}

.imsMetronome .blockVOLUME {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 80px);
    text-align: right
}

.imsMetronome .minusContent,
.imsMetronome .plusContent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 51px
}

.imsMetronome .volLeft,
.imsMetronome .volRight {
    display: inline-block;
    width: 40px;
    vertical-align: top;
    text-align: center;
    padding-top: 8px
}

.imsMetronome .volCenter {
    padding: 0;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: calc(100% - 170px);
    margin-left: 25px
}

@media screen and (min-width:540px) {
    .imsMetronome .volLeft,
    .imsMetronome .volRight {
        width: 60px
    }
    .imsMetronome .volCenter {
        width: calc(100% - 180px);
        margin-left: 25px
    }
}

.imsMetronome slider {
    height: 3px;
    margin: 25px 0;
    cursor: pointer;
    background-color: #889299
}

.imsMetronome slider span.pointer {
    height: 25px;
    width: 25px;
    top: -12px;
    cursor: pointer;
    border: none;
    background-color: #FA5E46;
    color: #fff;
    font-size: 13px
}

.imsMetronome slider span.pointer:after {
    display: none
}

::-ms-tooltip {
    display: none
}

.imsMetronome slider span.bubble {
    display: none!important
}

.imsMetronome slider span.bar {
    background-color: #889299
}

.imsMetronome .minusBpm,
.imsMetronome .plusBpm {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 59px;
    width: 60px;
    line-height: 59px;
    font-size: 55px;
    font-weight: 500;
    float: right;
    padding: 0 5px;
    cursor: pointer;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: thin solid rgba(136, 146, 153, .5)
}

.imsMetronome .minusBpm:hover,
.imsMetronome .plusBpm:hover {
    border: thin solid rgba(136, 146, 153, 1)
}

.imsMetronome .minusBpm span {
    margin-top: -5px;
    line-height: 32px
}

.imsMetronome .widget-header {
    padding: 10px;
    background: rgba(255, 255, 255, .3);
    display: table;
    width: 100%;
    cursor: pointer
}

.imsMetronome .widget-content {
    border: thin solid rgba(255, 255, 255, .3);
    padding: 15px 10px;
    display: table;
    width: 100%;
    border-radius: 0 0 5px 5px
}

.imsMetronome .firstTime,
.imsMetronome .measure {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 0;
    cursor: pointer;
    float: none;
    width: 100%
}

.imsMetronome .firstTime i {
    font-size: 1.5em;
    vertical-align: middle
}

.imsMetronome .measure {
    margin-top: 15px
}

@media screen and (min-width:540px) {
    .imsMetronome .firstTime {
        float: left;
        width: auto
    }
    .imsMetronome .measure {
        padding: 0 8px;
        margin-top: 0;
        float: right;
        width: auto
    }
}

.imsMetronome .group-minusPlus.txt-measure {
    cursor: default;
    font-size: inherit
}

.imsMetronome .nbMeasure {
    display: inline-block;
    font-size: 2.5em;
    font-family: ds-digitalnormal
}

.imsMetronome .btn-note {
    -webkit-border-radius: 4px!important;
    -moz-border-radius: 4px!important;
    border-radius: 4px!important;
    background: #889299;
    width: 60px;
    height: 60px
}

.imsMetronome .btn-note .ico {
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: #fff
}

.noteType {
    text-align: left;
    padding-top: 3%;
    padding-left: 0
}

.imsMetronome .btn-note.set,
.imsMetronome .btn-note:hover {
    background: #FA5E46
}

.imsMetronome .timerContent {
    margin-left: 0;
    float: none
}

@media screen and (min-width:540px) {
    .imsMetronome .timerContent {
        float: right;
        margin-top: -7px
    }
    .hidden-sm-up {
        display: none
    }
}

@media screen and (max-width:540px) {
    .imsMetronome .timerContent {
        display: inline-block;
        float: right
    }
    .noteType {
        display: block;
        text-align: center;
        padding-top: 0
    }
    .hidden-sm-up {
        display: inline-block
    }
    .i-checks-spe>i {
        margin-top: -20px!important
    }
    .m-t-nxs {
        margin-top: -5px!important
    }

    .imsMetronome .btn-note {
    width: 57px;
    height: 57px;
}
}

.imsMetronome .i-checks input:checked+i:before {
    background-color: #FA5E46;
    border-color: #FA5E46
}

.imsMetronome .i-checks input:checked+i {
    border-color: #FA5E46
}

.imsMetronome .group-minusPlus.txt-timer {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #889299;
    cursor: default;
    font-size: inherit
}

.imsMetronome timer {
    position: relative;
    font-size: 16px
}

.imsMetronome timer .min,
.imsMetronome timer .sec {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    width: 15px;
    font-size: 16px;
    font-weight: 700;
    margin-top: -6px;
}

.imsMetronome timer .sepa {
    width: 4px;
    text-align: center;
    vertical-align: top;
    display: inline-block;
    font-size: 14px;
    font-weight: 700
}

.imsMetronome select.countSelect {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border-color: rgba(255, 255, 255, .6);
    background: 0 0;
    color: #fff;
    cursor: pointer
}

.imsMetronome select.countSelect option {
    background: rgba(255, 255, 255, .8);
    color: #000
}

.imsMetronome .ico-croches {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAMAAAC5KTl3AAAAM1BMVEX////////////////////////////////////////////////////////////////////lEOhHAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAKNJREFUeAHt1UkOgzAMheEXnOExQHL/01ZFarEoSbOsir+lFX4kb4y7MsYYYYWgE0sFb1ao6S+gwgpWsIIVrPADhSGQcvHQeTJ0FPxSntbp3J32efZEk5vLS+WEZbYDa7kuTL1Xby3XhVHNAxpiOcx6B2qe0TKrh4JDUoWIluUIBCjs3IL61ybQ5B2OqFMb2xJOYt6/Hx2+GhKj4JOLTB5/zjwAeVAVGxv5xvcAAAAASUVORK5CYII=)
}

.imsMetronome .ico-doubles {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAMAAAC5KTl3AAAAM1BMVEX////////////////////////////////////////////////////////////////////lEOhHAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAM1JREFUeNrtlEkOwyAMRSEhjAb7/qetRBhUQxddtFIrv923XmwDUpQgCMLPYN7lVAx6m//sUOAZnmERFMPz/AVBXvNTHTzPIogggggmFipRj4J2QATXFI6QCdP5StCBKrkXTGkF1XBYM8a9oDM1WgfLf2KxZ9gLeWRX8zUy3kKgTtoKngZnXQnZB2YKjgtsBWATyLAVUG8FtoLybIKCucJeKH2AZdcEmt1j2AmzZb43mMccb2/ahGsROjYTJqsGR0TK4ZgFk4jA6UUQhIUHQbw2tF8FKKUAAAAASUVORK5CYII=)
}

.imsMetronome .ico-noires {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAYAAACO98lFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYzMDQ0M0ZCOThERDExRTVCOUJEODREQzkxOUQ5QUQ2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYzMDQ0M0ZDOThERDExRTVCOUJEODREQzkxOUQ5QUQ2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjMwNDQzRjk5OEREMTFFNUI5QkQ4NERDOTE5RDlBRDYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjMwNDQzRkE5OEREMTFFNUI5QkQ4NERDOTE5RDlBRDYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5DlNbhAAABE0lEQVR42uzagQnCMBBA0WtxgLpBR+gG6iYdoU4gbuAI3USdQDfQEeoEMaEBEREbkEtI/8FBoYXkXtukcC2MMTL3KEAAAQQQQAABBBBAAAEEEEAAAQQQQAAhO4TWZq8xUJnwDaq1BiqFAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAOGfsUhkHrW82m6nOSG4onc21/LedxxkbMQ+tCYSoytd+eK7H9c5jGWOCA7gaLOZOr/cEEIB1BA0d4cuEOCa45pwk7AfLzZaO4UmQshAW5uHHJ+Ey4TXYfAAveZqrYnQ+IWx+nLeFb63edfes2Nska3NlT92BZ/9u69efMyPpeQCBBBAAAEEED7jKcAAnwGCC5zIerQAAAAASUVORK5CYII=)
}

.imsMetronome .ico-shuffle {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAMAAAC5KTl3AAAAM1BMVEX////////////////////////////////////////////////////////////////////lEOhHAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAATVJREFUeAHt1d1ugzAMxfHjxAQT8nHe/2knbaVSKXQolqap6v+Ki+hHnBvj0x+lZjmrA1iYgELDaJEsgJEewQBjxzgRAdQrUxQ7KgGiat3Ujnp4YcNJsTS2CYfpqbCrkGFUiDkLYKSOCo2MwELKqNC5AtJoGBVSzzqVNsHxklFVAIewdUG4fYeAS6XT06q4VMPWqMDJLRS3QHULxS0wuYUevAKLSyhLJxePYJCVTC4BmNmjT0BidQqYmZwCavUKieIUhOoU8C8EOIXQvMKUvUJWpxAKnIKIVwDeTghWyDr/Jsi8drZFngRZ+FN9Lcz9dmwvxMqtV4Ks3NoJ0ngv4LwNeF5Ymfcazks8/VHnvenaFRY8trvcWYVbGTieoilwYYo+Y598EzUJXmedZDPXzo4qeOs+fQEVDBP+isRAzgAAAABJRU5ErkJggg==)
}

.imsMetronome .ico-triolets {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAMAAAC5KTl3AAAAM1BMVEX////////////////////////////////////////////////////////////////////lEOhHAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAPNJREFUeAHt0MFuwyAQhOEBYzIGDPP+T1ulUVJS7cHa3hq+4+rXYBmfJJG3AL+tV8Q+drg1dYDqcNNjQXDbGYGqij9JOgP8suQamKQ8dMItJgCHlOC0SzeA0gan9v161Qkv6gA2nRvccuFRMj5M5lUJtqar+K8XCg2NFtjoPK6FtWBbC2thLUzCTu7h9z2ROYJXyqq7ked7LEN3B+1yEqqeCl6op2aVnAdOGXExjnNJe0CHMaA2l8YCNUl4SJrQLl/6/Jr1CSPY5YvVolmvmeXb8hmM/zg2u5zsz5T4EYceSrDLN1sdGvUWMAulS43RLpfF9AXQoCZBghmgZwAAAABJRU5ErkJggg==)
}

#btnBLocNote {
    text-align: justify;
    font-size: .1px
}

#parent div {
    display: inline-block
}

#btnBLocNote:after {
    content: '';
    width: 100%;
    display: inline-block
}