@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barriecito&family=Gochi+Hand&family=Patrick+Hand+SC&display=swap');

:root {
    --move-duration: 1s;

    /* putting all z-index values here to keep them under control. */
    --z-index-room-background-layers: 500;

    --z-index-radio-vis: 1000;
    --z-index-radio-metadata: 1005;
    --z-index-graffiti: 1010;
    --z-index-room-item: 1015;

    --z-index-avatar: 1020;
    --z-index-avatar-me: 1030;

    --z-index-radio-controls: 1040;
    --z-index-cheer: 1050;

    --z-index-room-welcome-fade-screen: 1055;
    --z-index-graffiti-debug-overlay: 1058;

    --z-index-short-chat-log: 1060;
    --z-index-full-chat-log: 1060;
    --z-index-room-overlay-controls: 1070;
    --z-index-cheer-controls:1071;

    --z-index-param-group-sticky-ctrl: 9900;
    --z-index-instrument-closet-button-container: 9901;
    --z-index-sequencer-main: 9902;

    --z-index-chat-slash-command-help: 10000;
    --z-index-sequencer-dialog: 10010;
    --z-index-modal-dialog: 10030;
    --z-index-moderation-dialog: 10040;

    --z-index-popup-menu: 10050;

    --z-index-alert-screen: 10100;
    --z-index-room-alert-area: 10110;
    --z-index-drag-graffiti-screen: 10120;

    --z-index-gesture-splash: 100000;
}

body {
    background-color: black;
    color: #0aa;
    font-family: 'Overpass', sans-serif;
    /*font-family: 'Courier New', Courier, monospace;*/
    font-size: medium;
}

html,
body {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

a:link,
a:visited {
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 10px;
    margin: 0;
}

input[type="text"i],
input[type="password"i],
textarea {
    background-color: #444;
    border: 2px solid #055;
    color: #0cc;
    font-family: 'Overpass', sans-serif;
    /*font-family: 'Courier New', Courier, monospace;*/
    font-weight: normal;
    font-size: small;
    margin: 2px;
}



input[type="text"i]:focus,
input[type="password"i]:focus {
    border: 2px solid #0cc;
}


button {
    display: inline-flex;
    align-content: center;
    align-items: center;

    background-color: #444;
    border: 1px solid #888;
    color: #0bb;
    /*font-family: 'Overpass', sans-serif; /*font-family: 'Courier New', Courier, monospace;*/
    font-weight: bold;
    font-size: small;
    margin: 2px;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #066;
}

button:focus {
    border: 1px solid #0ff;
}

.validationError {
    color: red;
}

.clickable {
    cursor: pointer !important;
}

#allContentContainer {
    height: 100vh;
    width: 100%;
}


/* https://grid.layoutit.com/ */
#grid-container {
    height: 100vh;
    width: 100%;

    display: grid;
    --left-column-size: 270px;
    --right-column-size: 320px;
    grid-template-columns: var(--left-column-size) minmax(0, 1fr) var(--right-column-size);
    /* minmax(0,..) avoids keyboard content from increasing cell size.https://css-tricks.com/preventing-a-grid-blowout/ */
    grid-template-rows: 0fr minmax(0, 1fr) 0fr 0fr;
    gap: 5px 5px;
    grid-template-areas:
        "headerArea headerArea headerArea"
        "leftArea roomArea rightArea"
        "leftArea chatArea rightArea"
        "leftArea pianoArea rightArea";
}



#grid-container.wide #rightArea input[type="range"] {
    width: 350px;
}

#grid-container>* {
    background-color: #222;
}

.roomArea {
    background-color: black;
    color: #339;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    transition: background-position var(--move-duration);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    grid-area: roomArea;
    /* announcement area fix */
}

#leftArea,
#rightArea {
    display: flex;
    flex-direction: column;
    overflow: auto; /* important to let X scroll in case usernames are long */
    /* max-width: 15vw; */
}

@keyframes screenFadeOut {
    10% {
        opacity: 100%
    }

    100% {
        opacity: 0%;
    }
}

#roomArea {
    background-color: black;
}

/* this is the fade-in fade-out screen which appears when entering / leaving rooms. */
#roomArea .screen {
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    opacity: 100%;
    z-index: var(--z-index-room-welcome-fade-screen);
    animation: screenFadeOut 1s 1;
    animation-fill-mode: forwards;
}

.backgroundLayer {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    --background-z:0;
    z-index: calc(var(--background-z) + var(--z-index-room-background-layers));
    background-repeat: no-repeat;
    transition: background-position var(--move-duration);
    pointer-events: none;
}

.component {
    width: 100%;
    color: #0aa;
    border: 4px solid #044;
    box-sizing: border-box;
    margin-bottom: 20px;
    border-radius: 5px;
    position: relative;
}

.component>h2 {
    background-color: #044;
    padding-left: 5px;
    margin: 0;
    border: 0;
    font-size: larger;
    overflow: hidden;
    /* allows floated content to increase div height https://stackoverflow.com/questions/2159843/how-to-make-div-height-increase-to-include-floated-image*/
}

.component>h2 .buttonContainer {
    float: right;
    line-height: 10px;
}

.component>h2 button {
    font-weight: normal;
    background-color: #033;
    border: 1px solid #066;
    font-size: x-small;
}

.clipboardControls {
    border: 0;
    background-color: #022;
    border-radius: 10px;
    margin-bottom: 10px;
}


.clipboardControls legend {
    font-size: small;
}

#roomArea .component {
    margin-top: 30px;
}

.userPing {
    font-size: smaller;
    font-style: italic;
    font-weight: normal;
}

.headerArea {
    padding: 3px;
    padding-bottom:0;
    display: flex;
    justify-content: space-between;
    user-select: none;
}

.headerArea>span {
    margin: 0;
    margin-left: 20px;
    margin-right: 20px;
    font-size: small;
    display: inline-flex;
    align-items: center;
}

.headerArea .masterVolume,
 .headerArea .pitchBend
 {
 margin:0px 10px;
 display:flex;
 align-items: center;
}

.headerArea .headerTitle {
    font-size: 34px;
    color: #dd0;
    font-weight: bold;
    padding: 0px 18px;
}

.headerArea a:link,
.headerArea a:visited,
.headerArea a {
    color: #088;
}

#chatArea {
    display: flex;
}

#chatArea input {
    flex-grow: 1;
}

.shortChatLog {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* important because if you have 1 message that cannot be wrapped, it will make the chat log area grow wider, and everyone's messages will get cutoff. this allows other long messages to still wrap.*/
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    /*stroke*/
    color: #aaa;
    pointer-events: none;

    -webkit-mask-image: linear-gradient(transparent, transparent 25%, rgba(0, 0, 0, 1.0) 60%, rgba(0, 0, 0, 1.0));
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    z-index: var(--z-index-short-chat-log);
}


.fullChatLog {
    overflow-y: scroll;
    position: absolute;
    z-index: var(--z-index-full-chat-log);
    bottom: 0;
    width: 100%;
    /* important because if you have 1 message that cannot be wrapped, it will make the chat log area grow wider, and everyone's messages will get cutoff. this allows other long messages to still wrap.*/
    /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;/*stroke*/
    color: #aaa;
    background-color: #000000d4;

    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.fullChatLog ul {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/*  button.switchChatView */
.roomOverlayControlsRight {
    position: absolute;
    top: 0;
    right: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: var(--z-index-room-overlay-controls);
}

.roomOverlayControlsRight div.showSequencer button.showSequencerButton {
    border: 0;
    background-color: #ccc;
    border-radius: 3px;
    color: #044;
    display: flex;
    justify-content: center;
    font-family: monospace;
    font-size: 16px;
    padding: 10px;
    padding-right: 15px;
    padding-left: 15px;
    box-shadow: inset 0px 0px 1em #fff, 0 0 2px white;
    margin-top: 10px;
}

.roomOverlayControlsRight div.showSequencer button.showSequencerButton:hover {
    background-color: #ffa;
    box-shadow: inset 0px 0px 1em #fff, 0 0 2px white;
}


#pianoArea {
    overflow-y: hidden;
    height: 110px;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}


#announcementArea {
    color: #be62ec;
    text-align: center;
    background-color: #00000087;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    pointer-events: none;
}

@keyframes blinker3 {
    to {
        opacity: 0;
    }
}

#roomAlertArea {
    color: #ff0000;
    text-align: center;
    background-color: #000000C0;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    padding: 15px;
    font-size: 32px;
    font-weight: bold;
    margin-top: 5px;
    z-index: var(--z-index-room-alert-area);
    position: relative;
}

#roomAlertArea button {
    font-size: large;
}

#roomAlertArea>span {
    animation: blinker3 .8s ease-in-out infinite alternate;
}

.chatLogEntryAggregate,
.chatLogEntryNick,
.chatLogEntryJoin,
.chatLogEntryPart {
    font-style: italic;
    font-size: smaller;
    opacity: 50%;
    font-weight: normal;
}

.chatLogEntryChat .messageBody {
    margin-left: 4px;
}

.chatLogEntryChat .timestamp {
    color: #888;
    margin-right: 4px;
}

.chatLogEntryChat .userName {
    white-space: nowrap;
}

.chatLogEntryChat .messageBody a,
.chatLogEntryChat .messageBody a:link,
.chatLogEntryChat .messageBody a:visited,
.chatLogEntryChat .messageBody a:hover {
    color: #cc0;
    text-decoration: none;
    pointer-events: auto;
}

.chatLogEntryChat.server .messageBody {
    font-size: larger;
    color: #6dd;
}

.chatLogEntryChat.server .serverTag {
    color: #aa0;
    font-weight: bold;
}


button.muteButton,
button.muteButton:focus {
    border: 0;
}


button.muteButton.muted  {
    color: #bbb;
}

button.muteButton.muted:hover  {
    background-color: #888;
}


.userName {
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatLog .userName,
.userName.inline {
    display:inline-flex;
}

.userName.online {
    font-weight: bold;
}

.moreOfflineUserIndicator,
.lessOfflineUserIndicator {
    font-style: italic;
    cursor: pointer;
}

.moreOfflineUserIndicator:hover,
.lessOfflineUserIndicator:hover {
    font-style: italic;
    background-color: #044;
}

.userName .badge {
    margin-left: 1px;
    font-size: 9px;
    background-color: #555;
    color: #ccc;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 2px 3px;
}

.userName .badge .role {padding: 0px 1px;}




.cheer {
    position: absolute;
    pointer-events: none;
    z-index: var(--z-index-cheer);
}

#cheerControl {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--z-index-cheer-controls);
}

#cheerControl input[type="text"i] {
    width: 2em;
}

#cheerControl .cheerButton {
    background-color: #444;
    border: 1px solid #888;
    color: #0bb;
    font-family: 'Overpass', sans-serif;
    /*font-family: 'Courier New', Courier, monospace;*/
    font-weight: bold;
    font-size: small;
    margin: 2px;
    border-radius: 6px;
    padding: 2px;
    display: inline;
    cursor: pointer;
}

:root {
    --cheer-distance: 160px;
    --neg-cheer-distance: -160px;
  }

@keyframes floatY0 {
    to {
        transform: translateY(var(--cheer-distance));
    }
}

@keyframes floatX0 {
    to {
        transform: translate(var(--cheer-distance));
    }
}

@keyframes floatY1 {
    to {
        transform: translateY(var(--neg-cheer-distance));
    }
}

@keyframes floatX1 {
    to {
        transform: translate(var(--neg-cheer-distance));
    }
}

@keyframes floatOpacity {
    to {
        opacity: 0;
    }
}

#audioVisCanvas {
    width: 200px;
    height: 128px;
}

.idleIndicator {
    color: #aaa;
    font-size: smaller;
    font-style: italic;
}

ul.instParamList {
    white-space: nowrap;
    overflow-x: hidden;
}

ul.instParamList label {
    font-size: smaller;
    color: #ccc;
    cursor: pointer;
    display: inline-flex;
    /* helps control param value display when there are mappings showing */
}

ul.instParamList input[type="range"i] {
    margin: 0;
    /* width: 100%; */
}

ul.instParamList li.buttonsParam {
    /* allow button types to wrap */
    white-space: normal;
}

ul.instParamList li.buttonsParam.sfzSelect {
    /*    display: flex;
    flex-direction: column;*/
}

ul.instParamList li.buttonsParam.sfzSelect button {
    display: block;
}

.instParamGroup {
    margin: 0;
    padding: 1px;
    min-inline-size: auto;
    border: 2px solid #003838;
    border-radius: 15px;
    background: linear-gradient(to bottom, #00cccc15, #00cccc07);
}

.instParamGroup.modulation {
    background-color: #333;
}

.instParamGroup.modulation legend {
    color: #66c;
}

.instParamGroup.disabled {
    background-color: #222;
    border: 2px solid #333;
    background: none;
}

.instParamGroup.disabled legend {
    color: #555;
}


.wide .instParamGroup {
    margin: 10px;
}

.instParamGroup legend {
    border-radius: 6px;
    cursor: pointer;
    padding-right: 20px;
}

.instParamGroup legend:hover {
    background-color: #00666660;
}

.instParamGroup .instParamGroupNameAnnotation {
    color: #888;
    font-style: italic;
    font-size: small;
}

.instParamList .paramSpacer {
    margin-top: 15px;
}

.instParamList .paramSpacer:first-child {
    margin-top: 0;
}



.presetList {
    padding: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.presetList ul {
    padding: 0;
}


.presetList li,
.presetListControls li {
    font-size: smaller;
    color: #aaa;
    background-color: #044;
    padding: 6px;
    margin: 0;
    margin-bottom: 2px;
    white-space: normal;
}


.presetList li:hover,
.presetList li:active {
    background-color: #066;
}

.presetList .presetName {
    font-weight: normal;
    color: #ccc;
    white-space: nowrap;
}

.presetList .author,
.presetList .savedDate,
.presetList .description,
.presetList .tags {
    font-weight: normal;
    font-style: italic;
    font-size: x-small;
    color: #888;
    display: inline;
}

.presetList .description {
    display: block;
}

.presetList .description {
    color: #0aa;
    font-size: small;
}

.presetList .authorAndDateBox {}

.presetList ul {
    position: relative;
}

.presetList ul .buttonContainer {
    position: absolute;
    right: 0;
}

.presetList li button {
    visibility: hidden;
    border: 0;
    font-weight: normal;
}

.presetList li:hover button {
    visibility: visible;
}

.presetList li button:active {
    background-color: #088;
}

.presetList li button:hover,
.presetList li button:focus {
    background-color: #033;
}


.roomItemContainer,
.roomItem {
    z-index: var(--z-index-room-item);
}
.roomItem {
    border: 5px solid blue;
    box-sizing: border-box;
    background: #00000061;
    text-align: center;
    position: absolute;
    transition: top var(--move-duration), left var(--move-duration);
    pointer-events: none;
    /* allow clicks to be processed by the room itself, not the item. */
    cursor: pointer;
    color: #dd0;
    font-weight: bold;
}

.roomSign {
    position: absolute;

    border-radius: 6px;
    border: 0px;
    box-sizing: border-box;
    padding: 15px;
    transition: top var(--move-duration), left var(--move-duration);
    transform: translate(-50%, -110%);
    /* this puts the "origin" of the element in the center. */

    background: #00000080;
    font-size: 16px;
    text-align: center;
    color: #dd0;
}

.roomSign a:link,
.roomSign a:visited {
    color: #dd0;
}


.component.userList h2 {
    color: #066;
    margin-bottom: 8px;
}

.component.userList h2 .roomName {
    color: #0aa;
}

.component.userList h2 .userCount,
.component.userList h2 .noteOns {
    color: #088;
}


.component.userList ul.onlineUserList {
    padding-bottom: 0;
    padding-top: 0;
}

.component.userList ul.offlineUserList {
    opacity: 75%;
    padding-bottom: 0;
    padding-top: 0;
}


.component.userList ul.onlineUserList .presenceIndicator {
    color: #47c447;
    /* discord color with differet hue*/
    font-size: 30px;
    padding-right: 8px;
    display: flex;
    align-items: center;
    line-height: 0; /* important so it doesn't take up too much vertical space*/
}

.component.userList ul.offlineUserList .presenceIndicator {
    color: #4752c4;
    /* discord color */
    font-size: 30px;
    line-height: 0;
    vertical-align: middle;
    padding-right: 8px;
}

.component.userList .roomHeaderStats {
    color: #066;
    font-size: medium;
    margin-left: 10px;
}

ul.otherRoomUserList .presenceIndicator {
    color: #47c447;
    /* discord color with differet hue*/
    font-size: 30px;
    line-height: 0;
    vertical-align: middle;
    padding-right: 8px;
}
.otherRoomUserList li {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

ul.userList li.userRow {display: flex;align-items: center;white-space: nowrap;}

.worldStatus .room {
    margin: 10px;
    color: #066;
}

.worldStatus .room dd {
    margin-left: 11px;
}

.worldStatus .room .roomName {
    font-weight: bold;
}

.worldStatus .room .roomName {
    color: #0aa;
}

.worldStatus .room .userCount,
.worldStatus .room .noteOns {
    color: #088;
}


div.paramFilter input[type="text"] {
    width: 50px;
    display: inline;

}

div.presetFilter {
    display: inline;
}

div.presetFilter input[type="text"] {
    width: 50px;
    display: inline;
}


.paramGroupFocusBtn,
.paramGroupFocusBtn:active,
.paramGroupFocusBtn:focus {
    border: 0;
    font-weight: normal;
}

.paramGroupFocusBtn.active {
    background-color: #077;
}




.buttonParam,
.buttonParam:active,
.buttonParam:focus {
    border: 0;
    font-weight: normal;
}

.buttonParam.active {
    background-color: #066;
}

.buttonParam:hover {
    background-color: #088;
}



.paramGroupCtrl {
    border: 0;
    font-size: small;
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    padding-top: 4px;
    background-color: #222;
    z-index: var(--z-index-param-group-sticky-ctrl);
}


.groupFocusButtons {
    background-color: black;
    border-radius: 10px;
    border: 0;
}



input[type="range"].floatParam,
input[type="range"].intParam,
input[type="range"].stylizedRange {
    border: 0;
    border-radius: 8px;
    height: 8px;
    outline: none;
    -webkit-appearance: none;
}

input[type="range"].floatParam::-webkit-slider-thumb,
input[type="range"].intParam::-webkit-slider-thumb,
input[type="range"].stylizedRange::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #0aa;
    height: 14px;
    width: 14px;
    cursor: pointer;
    border-radius: 100%;
}

.modAmtParam input[type="range"].floatParam,
.modAmtParam input[type="range"].intParam,
.modAmtParam input[type="range"].stylizedRange {
    height: 4px;
}

.modAmtParam input[type="range"].floatParam::-webkit-slider-thumb,
.modAmtParam input[type="range"].intParam::-webkit-slider-thumb,
.modAmtParam input[type="range"].stylizedRange::-webkit-slider-thumb {
    background: #aaa;
    height: 9px;
    width: 9px;
}



.instPresetButtons {
    white-space: normal;
}

.instPresetButtons button {
    border: 0;
    cursor: pointer;
    font-weight: normal;
}

.instPresetButtons .confirmationBox,
.presetList .confirmationBox {
    color: #8cc;
    padding: 10px;
    border-radius: 0;
    border: 1px solid #a00;
    background-color: #200;
    white-space: normal;
    border-left: 7px solid #a00;
}

.instPresetButtons .confirmationBox button,
.presetList .confirmationBox button {
    visibility: visible;
    background-color: #266;
    color: #000;
    padding: 5px;
}

.instPresetButtons .confirmationBox button:hover,
.instPresetButtons .confirmationBox button:focus,
.presetList .confirmationBox button:hover,
.presetList .confirmationBox button:focus {
    background-color: #acc;
}


li.dropdownParam {
    font-size: small;
}

li.dropdownParam .mainButton {
    cursor: pointer;
    margin: 4px;
    background-color: #022;
}

li.dropdownParam .mainButton:hover {
    background: #066;
}

li.dropdownParam ul.dropdown {
    background-color: #022;
    margin-left: 15px;
    padding: 0;
    padding-left: 10px;
}

li.dropdownParam ul.dropdown li {
    padding: 2px;
    cursor: pointer;
}

li.dropdownParam ul.dropdown li.active {
    background-color: #044;
}

li.dropdownParam ul.dropdown li:hover {
    background-color: #066;
}

li.dropdownParam ul.dropdown li.active:hover {
    background-color: #066;
}


li.cbxparam {
    display: inline;
}

li.cbxparam button {
    border: 0;
}

li.cbxparam.on button {
    background-color: #088;
}


li.cbxparam button:hover {
    background-color: #066;
}



li.oscEnableButton {
    display: inline-block;
    margin: 3px;
}

ul.instParamList li.inlineLabel {
    display: inline;
}

.instParamGroup .groupControls {
    white-space: normal;
    margin-bottom: 4px;
    border-bottom: 2px dotted #055;
    padding-bottom: 4px;
}

.instParamGroup .groupControls button {
    border: 0;
    font-weight: normal;
    font-size: x-small;
    color: #888;
    line-height: 15px;
}

.instParamGroup .groupControls button:hover {
    background-color: #066;
}



/* --- instrument closet --- */
.component.instrumentCloset {
    user-select: none;
}
.component.instrumentCloset>ul {
    padding-right: 0;
    padding-left: 5px;
    /* overflow: auto; */
}

.component.instrumentCloset li {
    display: flex;
    padding-bottom: 1px;
    justify-content: flex-end;
}

.component.instrumentCloset li .instrument {
    position: relative;
    /* padding: 2px; */
    padding-bottom: 0;
    flex: 1 1;
border:  2px solid transparent;}

.component.instrumentCloset li .instrument.sidechainSource{
    
    
    
    
border: 2px solid #900;border-style: dashed;}

.component.instrumentCloset li .instrument:hover {
    background-color: #044;
}

.component.instrumentCloset li .instrument.selected {
    /* border-left: 6px solid #0aa; */
    background-color: #055;
    padding-left: 4px;
}



.component.instrumentCloset li .instrument.bigClick {
    cursor: pointer;
}


.component.instrumentCloset li .instrument button,
li.floatParam .paramMappingBox button {
    border: 0;
    background-color: #066;
    color: #0cc;
}

.component.instrumentCloset li .instrument button:hover,
li.floatParam .paramMappingBox button:hover {
    background-color: #088;
    color: #0cc;
}

.component.instrumentCloset li .instrument .buttonContainer {
    position: absolute;
    right: 0;
    z-index: var(--z-index-instrument-closet-button-container);
    visibility: hidden;
}

.component.instrumentCloset li .instrument:hover .buttonContainer {
    visibility: visible;
}


.component.instrumentCloset li .instrument:hover .buttonContainer span {
    color: #077;
    background-color: #044;
    font-family: 'Overpass', sans-serif;
    font-weight: bold;
    margin: 2px;
    border-radius: 6px;
    font-style: italic;
}



.component.instrumentCloset li .instrument .takenBy {
    font-size: small;
    font-style: italic;
    opacity: 50%;
}

/* --- */


li.floatParam .paramMappingBox {
    white-space: normal;
    margin: 0;
    padding: 5px;
    background-color: #ffb8002b;
    font-size: small;
}

li.floatParam .paramMappingBox .learningIndicator {
    color: #8cc;
    padding: 10px;
    border-radius: 0;
    border: 1px solid #a00;
    background-color: #200;
    white-space: normal;
    border-left: 7px solid #a00;
}


li.floatParam.expanded {
    /* no mapping */
    border: 1px solid #0aa;
    border-radius: 5px;
}

li.floatParam.hasMapping,
li.floatParam.expanded.hasMapping {
    border-right: 10px solid #ffb800;
}


.instParamGroup.macros {
    border: 2px solid #ffb80040;
}

.instParamGroup.macros legend {
    color: #ffb80080;
}

.macroMappingList {
    padding: 0;
    font-size: x-small;
    margin: 0;
    color: #ffb80080;
}

.midiCCList {}

.midiCCmappingList {
    padding: 3px;
    font-size: x-small;
    margin-bottom: 4px;
    color: #ffb80080;
}

.paramValueLabel,
.paramValueName {
    display: inline-block;
    vertical-align: middle;
}

.paramValueName.readonly {
    color: #666;
}

.mappedLiveValue {
    color: #ffb800;
    font-size: small;
}


.macroMappingList .mappedLiveValue {
    display: inline;
}

.midiCCmappingList .mappedLiveValue {
    display: inline;
}


.socicon {
    height: 32px;
    fill: #0cc;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.socicon:hover {
    background-color: #055;
    fill: #0aa;
}

.logoTxt {
    font-size: medium;
    font-weight: bold;
    margin-right: 16px;
}

.signinScreen {
    min-width: 400px;
}

.userSettingsGoogleSignInContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
    border: solid 3px #033;
    padding: 6px;
}

.homeGoogleSignInContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.googleLoginButton {
    background-image: url('/google_signin_buttons/web/1x/btn_google_signin_dark_normal_web.png');
    display: inline-block;
    width: 191px;
    height: 46px;
    border: 0;
    border-radius: 0;
}

.googleLoginButton:hover {
    background-image: url('/google_signin_buttons/web/1x/btn_google_signin_dark_focus_web.png');
    cursor: pointer;
    border: 0;
    border-radius: 0;
}

.googleLoginButton:active {
    background-image: url('/google_signin_buttons/web/1x/btn_google_signin_dark_pressed_web.png');
    border: 0;
    border-radius: 0;
}

.googleLoginButton:disabled {
    background-image: url('/google_signin_buttons/web/1x/btn_google_signin_dark_disabled_web.png');
    border: 0;
    border-radius: 0;
}

.homeGoogleSignInContainer .googleLoginButton {
    margin-top: 20px;
}


button.stayLoggedIn {
    border: 0;
    color: #aaa;
    background: none;
}

button.stayLoggedIn.on {
    color: #0dd;
    background-color: #044;
}

button.stayLoggedIn:hover {
    background-color: #066;
}


/* https://loading.io/css/ sign-in page progress indicator */
.lds-facebook {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-facebook div {
    display: inline-block;
    position: absolute;
    left: 8px;
    width: 16px;
    background: #0cc;
    animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.lds-facebook div:nth-child(1) {
    left: 8px;
    animation-delay: -0.24s;
}

.lds-facebook div:nth-child(2) {
    left: 32px;
    animation-delay: -0.12s;
}

.lds-facebook div:nth-child(3) {
    left: 56px;
    animation-delay: 0;
}

@keyframes lds-facebook {
    0% {
        top: 8px;
        height: 64px;
    }

    50%, 100% {
        top: 24px;
        height: 32px;
    }
}


.dropdownMenu {
    position: relative;
}

.userSettingsDialog,
.optionsDialog,
.popUpDialog {
    padding: 10px;
    position: absolute;
    font-size: 16px;
    z-index: var(--z-index-popup-menu);
    width: 450px;
    background-color: #111111e8;
    text-align: left;
    box-sizing: content-box;
    border: 3px solid #088;
    border-radius: 10px;
    border-top-left-radius: 0;
}

.creditsButton,
.dropdownMenuButton,
.topMenuButton,
.userSettingsButton {
    display: flex;
    background-color: #033;
    border: 1px solid #066;
    border-radius: 5px;
    padding: 4px 6px;
    margin: 0px 6px;
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
}

.dropdownMenuButton>*:not(:first-child) {
    margin-left: 10px;
}

.popUpDialog fieldset {
    border-radius: 6px;
    border: 0;
    background: #022;
    margin-bottom: 5px;
}

.popUpDialog fieldset .legend {
    color: #aa0;
    font-weight: bold;
}


.userSettingsButton {
    font-weight: bold;
    border-left-width: 15px;
    border-radius: 5px;
    padding: 7px;
    font-size: initial;
}

.dropdownMenu.right .popUpDialog

/* buttons on right */
    {
    right: 0;
}

.userSettings .colorSwatchRow {
    display: flex;
}

.colorSwatch,
.userSettings .colorSwatch {
    width: 24px;
    height: 24px;
    display: inline-block;

    margin-left: 4px;
    margin-right: 4px;
}


.userSettings .noMidiDevices .title {
    color: #c90;
    font-weight: bold;
}

.userSettings ul.midiDevices li.clickable {
    cursor: pointer;
}

.userSettings ul.midiDevices li.clickable:hover {
    background-color: #044;
}

.userSettings ul.midiDevices li {
    margin: 4px;
    background-color: #333;
    color: #888;
    padding: 4px;
}

.userSettings ul.midiDevices li.active {
    color: #cc0;
    background-color: #044;
}

.creditsDialog pre {
    font-size: medium;
}

.creditsButton {
    color: #0cc;
    border: 0;
}

.creditsButton.expanded,
.dropdownMenuButton.expanded {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: 0;
}


.topMenuButton:hover,
.dropdownMenuButton:hover {
    background-color: #055;
}

.optionsDialog .component {
    border: 0;
}

.optionsDialog .component h2 {
    margin: 0;
    border: 0;
    font-size: small;
    border-bottom: 2px dotted #066;
    display: inline-block;
    background-color: transparent;
    color: #0aa;
    padding: 0;
}

button.quantizationOption {
    padding-top: 0;
    padding-bottom: 0;
    width: 35px;


    /* font-size: 30px;
    line-height: 40px;
    height:40px; */
}

div.quantizationGroup {
    display: block;
}

.optionsDialog .helpText {
    color: #888;
    font-style: italic;
}

.optionsDialog input[type="range"] {
    width: 250px;
}

.headerArea>span.optionsBtnContent {
    display: flex;
    align-items: baseline;
}

/* space between items in the options button */
.optionsBtnContent span~span {
    padding-left: 10px;
}

.headerArea span.quantizationValue {
    font-size: 30px;
    height: 30px;
    /* line-height makes sure the text doesn't stretch the height of the container. */
    line-height: 0;
}

.quantizationValue {
    font-size: 30px;
    height: 35px;
    line-height: 0;
}

ul.instParamList .instControlledBy {
    display: block;
    height: 20px;
    font-size: small;
}

ul.instParamList .instActivity {
    display: block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
}

@keyframes mixerActivityBump1 {
    0% {
        opacity: 1.0;
        animation-timing-function: ease-in-out;
    }

    100% {
        opacity: 0.0;
    }
}

/* exact duplicate of the other, so when i toggle between the classes, it resets the animation. why doesn't CSS let you reset one-shot animations?? */
@keyframes mixerActivityBump2 {
    0% {
        opacity: 1.0;
        animation-timing-function: ease-in-out;
    }

    100% {
        opacity: 0.0;
    }
}


ul.instParamList .instActivity.alt1 {
    opacity: 0.0;
    background-color: orange;
    animation: mixerActivityBump1 .15s 1;
}

ul.instParamList .instActivity.alt2 {
    opacity: 0.0;
    background-color: orange;
    animation: mixerActivityBump2 .15s 1;
}

.instrumentCloset .instrumentLoadingIndicator {
    background-color: #444;
    color: #aaa;
    padding: 4px;
    border-radius: 10px;
    font-size: small;
}



#rightArea .instrumentLoadingIndicator {
    font-size: x-small;
    margin: 4px;
    margin-top: 1px;
    margin-bottom: 1px;
    background-color: #a04;
    border-radius: 6px;
}

#rightArea .instrumentLoadingIndicator.hidden {
    visibility: hidden;
}

#rightArea .instrumentLoadingIndicator .doneSegment {
    text-align: center;
    background-color: #0a4;
    color: white;
    border-radius: 6px;
}

.optionsBtnContent .quantIndicator {
    color: orange;
}


li.preloadSFZ {
    padding-top: 5px;
    margin-top: 5px;
    border-top: 2px dotted #077;
}

.liveRoomBeat {
    background-color: #022;
    display: flex;
    pointer-events: none;
}

.liveRoomBeat .beat {
    color: #0cc;
    width: 20px;
    background-color: #033;
    display: flex;
    align-items: center;
    justify-content: center;
}

.liveRoomBeat .beat.minorBeat {
    background-color: #000;
    color: #066;
}


@keyframes liveRoomMajorBeatFlash {
    0% {
        background-color: #f44;
    }

    /* on downbeat */
    5% {
        background-color: #f44;
    }

    100% {
        background-color: #033;
    }

    /* as fades away, this should be the same as beat.complete background-color */
}

.liveRoomBeat .beat.complete {
    animation: liveRoomMajorBeatFlash 0.15s;
}

@keyframes liveRoomMinorBeatFlash {
    0% {
        background-color: #444;
    }

    /* on downbeat */
    5% {
        background-color: #444;
    }

    100% {
        background-color: #000;
    }

    /* as fades away, this should be the same as beat.complete background-color */
}

.liveRoomBeat .beat.complete.minorBeat {
    animation: liveRoomMinorBeatFlash 0.2s;
}



.discordChatMsgIndicator {
    width: 16px;
}


#gestureSplash {
    position: absolute;
    height: 100vh;
    width: 100%;
    background-color: #0006;
    z-index: var(--z-index-gesture-splash);
    display: flex;
    flex-direction: row;
    align-content: stretch;
    justify-content: stretch;
    align-items: stretch;
    overflow: hidden;
}

#gestureSplash2 {

    background-color: #000d;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    margin: 25vh;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    border: 3px solid #022;
}

#splashLogo {}

#splashTextContainer {}

#splashTitle {

    font-size: 48px;
    font-weight: bold;
    color: #cc0;
    letter-spacing: -1px;
}

#splashClickToContinue {
    font-style: italic;
    font-weight: bold;
}


@keyframes errorBlink {
    0% {
        opacity: 100%
    }

    25% {
        opacity: 100%
    }

    50% {
        opacity: 0%;
    }

    75% {
        opacity: 0%;
    }
}

.connectionIndicator.disconnected i {
    font-size: 24px;
    color: #f44;
    margin-right: 10px;
    animation: errorBlink 1s;
    animation-iteration-count: infinite;
}


.disconnectedGrayscale {
    filter: grayscale(1);
}

/*
https://mui.com/components/material-icons/?query=search
https://www.w3schools.com/icons/google_icons_intro.asp
*/
.material-icons {
    font-size: 18px;
}

.material-icons.highlight {
    color: #cc0;
}













.component.instrumentCloset li .seqCtrlContainer {
    display: flex;
    align-items: center;
}

.component.instrumentCloset li .seqCtrlContainer:hover {
    background-color: #044;
}

.component.instrumentCloset li .seqCtrlContainer .seqIndicator {
    /* empty */
    width: 10px;
    height: 10px;
    margin-right: 3px;
    margin-left: 3px;
    border-radius: 50%;
}
.component.instrumentCloset li.sidechainedToYou .seqCtrlContainer {
    background-color:#055;
  }
  
.component.instrumentCloset li:hover .seqCtrlContainer .seqIndicator {
    /* empty */
    border: 1px solid #444;
}

.component.instrumentCloset li .seqCtrlContainer.on .seqIndicator {
    --seqColorBright:#4f4;
    --seqColorDark:#060;
    background-color: var(--seqColorDark);
}

.component.instrumentCloset li .seqCtrlContainer.off .seqIndicator {
    --seqColorBright:#888;
    --seqColorDark:#444;
    background-color: var(--seqColorDark);
}

.component.instrumentCloset li .seqCtrlContainer.on.swallows .seqIndicator {
    --seqColorBright: #99f;
    --seqColorDark: #44f;
    background-color: var(--seqColorDark);
}

.component.instrumentCloset li .seqCtrlContainer.on.sidechain .seqIndicator {
    border: 1px solid #E00;
/* 
    --seqColorBright:#e00;
    --seqColorDark:#900; */
}

@keyframes seqNoteIndicator1 {
    0% {
        background-color: var(--seqColorBright);
    }

    100% {
        background-color: var(--seqColorDark);
    }
}

@keyframes seqNoteIndicator2 {
    0% {
        background-color: var(--seqColorBright);
    }

    100% {
        background-color: var(--seqColorDark);
    }
}

.component.instrumentCloset li .seqCtrlContainer.on.seqIndicatorAnimation1 .seqIndicator {
    animation: seqNoteIndicator1 .2s 1;
}

.component.instrumentCloset li .seqCtrlContainer.on.seqIndicatorAnimation2 .seqIndicator {
    animation: seqNoteIndicator2 .2s 1;
}









ul.instParamList li.floatParam {
    display: flex;
    margin-bottom: 2px;
    justify-content: stretch;
    flex-direction: column;
    align-items: stretch;
}

ul.instParamList li.floatParam>div>* {
    flex-grow: 1;
}


ul.instParamList li.floatParam>div>label {
    flex-grow: 0;
    width: 130px;
}


ul.instParamList li.floatParam .floatParamMainControls {
    display: flex;
    margin-bottom: 1px;
    /* flex-grow: 1; */
    align-items: center;
}


#chatSlashCommandHelp {
    position: absolute;
    bottom: 0;
    left: 20px;
    background-color: #222;
    color: #0cc;
    border: 2px solid #044;
    border-radius: 4px;
    z-index: var(--z-index-chat-slash-command-help);
    opacity: 80%;
}

#chatSlashCommandHelp .legend {
    background-color: #044;
    padding: 10px;
}

#chatSlashCommandHelp dl {
    padding: 10px;
}

#chatSlashCommandHelp dl dt {
    color: #aa0;
}

#chatSlashCommandHelp dl dd {
    color: #aaa;
    font-style: italic;
}


#chatSlashCommandHelp dl dd:not(:last-child) {
    margin-bottom: 10px;
}



.showErrorLogButtonContainer button {
    color: #f84;
    border: 0;
    background-color: #822;
    padding: 6px 18px;
}


.sfzEditBtn {
    border: 0;
    background: none;
    color: #f80;
}
.sfzEditBtn i {
    font-size:14px;
      
  }