body {
    background-color: #dac0ff;
}

.container-fluid {
    padding-top: 1em;
}

#beatList {
    width: 100%;
    text-align: center;
    margin-bottom: 2em;
    font-size: 1vw;
}

.tick {
    display: inline-block;
    padding: 1em;
    border-left: 1px solid #DDD;
    font-size: 1.2em;
    height: 14em;
}

.tick.currentTick {
    background-color: #FFD;
}

.tick:first-of-type {
    border-left: 0px;
}

.tickName {
    font-size: 1.3em;
    font-weight: bold;
    position: relative;
}

.tick.currentTick .tickName:before {
    border: 6px solid #000;
    content: "";
    width: 3px;
    height: 3px;
    display: inline-block;
    position: absolute;
    left: calc(50% - 6px);
    top: -8px;
    border-radius: 6px;
}

.tick .strumIndicator {
    background-color: #EFEFEF;
    padding: 1em;
    border-radius: 1em;
    height: 1em;
    margin-top: 3.25em;
}

.tick .strumIndicator.strumUp,  .tick .strumIndicator.strumDown {
    height: 5em;
    background-color: #CCC;
}

.tick.currentTick .strumIndicator.strumUp, .tick.currentTick .strumIndicator.strumDown {
    background-color: #AAD;
}

.tick .strumIndicator.strumUp {
    margin-top: 1em;

}
.tick .strumIndicator.strumDown {
    margin-top: 3em;
}

.btn {
    box-shadow: 0 0 0 0!important;
}

#settingsContainer {
    margin-top: 1em;
    background-color: #DDD;
}

#collapseSettings {
    padding: 1em;
}