#article_beat_maker {
    display: grid;
    justify-content: center;
    align-items: center;
}

#top_music_bar {
    display: grid;
    grid-auto-flow: column;
    gap: 10px;
    margin-left: 10px;
    align-items: center;
    margin-bottom: 10px;
}

#bpm_container .form_label {
    font-weight: var(--font-weight-base);
}

#top_music_bar .left_panel {
    display: grid;
    grid-auto-flow: column;
    justify-content: left;
    align-items: center;
    gap: 20px;
}

#top_music_bar .right_panel {
    display: grid;
    grid-auto-flow: column;
    justify-content: end;
    align-items: center;
    gap: 20px;
}

#bpm_input {
    justify-self: left;
    width: 65px;
    padding: 5px;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid var(--my-border-color);
}

#top_music_bar .tool {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
}

#top_music_bar .tool:hover {
    border: 1px solid var(--my-border-color);
}

#top_music_bar .tool img {
    width: 20px;
    height: 20px;
    padding-right: 5px;
}

#top_music_bar .right_panel .tool.three_dots img {
    padding-right: 0px;
}

#top_music_bar .right_panel .popup_overlay.three_dots > .popup {
    width: fit-content;
    padding-bottom: 10px;
}

#top_music_bar .right_panel .popup_overlay.three_dots .popup > .body {
    display: grid;
    grid-auto-flow: row;
    gap: 10px;
    justify-content: center;
    padding-bottom: 10px;
}

#top_music_bar .right_panel .popup_overlay.three_dots .body .tool {
    width: fit-content;
}

#music_grid {
    display: grid;
    gap: 5px;
    background-color: var(--my-font-color);
    padding: 5px 20px 20px 15px;
    border-radius: 15px;
    overflow-x: auto;
    grid-template-rows: 20px !important;
}

#music_grid .grid_cell {
    cursor: pointer;
    background-color: var(--black-shade-1);
    border: 1px solid var(--black-shade-2);
    border-radius: 5px;
    width: 36px;
    height: 36px;
}

#music_grid .grid_cell:hover {
    opacity: 0.5;
}

#music_grid .grid_cell[data-col-ind="0"] {
    color: white;
    border: none;
    white-space: nowrap;
    background-color: var(--my-font-color);
    display: grid;
    align-content: center;
    align-items: center;
    justify-content: left;
    grid-auto-flow: column;
    gap: 10px;
    width: 100%;
}

#music_grid .grid_cell[data-row-ind="0"] {
    color: white;
    border: none;
    white-space: nowrap;
    background-color: var(--my-font-color);
    display: grid;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 20px;
}

#music_grid .grid_cell.kick_drum.selected {
    background-color: #9e0d14;
}

#music_grid .grid_cell.tom.selected {
    background-color: #1f5941;
}

#music_grid .grid_cell.snare.selected {
    background-color: #bf5e04;
}

#music_grid .grid_cell.clap.selected {
    background-color: #047bb3;
}

#music_grid .grid_cell.closed_hihat.selected {
    background-color: #82053f;
}

#music_grid .grid_cell.open_hihat.selected {
    background-color: darkslateblue;
}

#music_grid .grid_cell.bass_1.selected {
    background-color: #b8b207;
}

#music_grid .grid_cell.bass_2.selected {
    background-color: #9e0d14;
}

#music_grid .grid_cell.trumpet.selected {
    background-color: #1f5941;
}

#music_grid .grid_cell.chiptune_bleep.selected {
    background-color: #bf5e04;
}

#music_grid .grid_cell.dub_skank.selected {
    background-color: #047bb3;
}

#music_grid .grid_cell.trombone.selected {
    background-color: #82053f;
}

#music_grid .grid_cell.fx.selected {
    background-color: darkslateblue;
}

#music_grid .grid_cell.synth_hit.selected {
    background-color: #b8b207;
}

#music_grid .grid_cell.piano_c6.selected {
    background-color: #9e0d14;
}

#music_grid .grid_cell.piano_d6.selected {
    background-color: #1f5941;
}

#music_grid .grid_cell.piano_e6.selected {
    background-color: #bf5e04;
}

#music_grid .grid_cell.piano_f6.selected {
    background-color: #047bb3;
}

#music_grid .grid_cell.piano_g6.selected {
    background-color: #82053f;
}

#music_grid .grid_cell.piano_a6.selected {
    background-color: darkslateblue;
}

#music_grid .grid_cell.piano_b6.selected {
    background-color: #b8b207;
}

#music_grid .grid_cell.piano_c7.selected {
    background-color: #9e0d14;
}

#add_audio_form .form_label,
#import_json_file .form_label {
    margin-bottom: 5px;
    display: block;
}

#enter_audio_file {
    margin-top: 20px;
}