.gsuiPianoroll {
	width: 100%;
	height: 500px;
	--gsuiDragline-dotSize: 10px;
	--gsuiDragline-dotRad: 2px;
	--gsuiDragline-lineSize: 3px;
}
.gsuiPianoroll:focus {
	outline: 1px solid var( --gsuiBlocksManager-blockColor );
}

/* .......................................................................... */
.gsuiPianoroll-sidePanelTop,
.gsuiPianoroll-gridPanelTop {
	height: 100%;
	min-height: 350px;
}
.gsuiPianoroll-sidePanelBottom,
.gsuiPianoroll-gridPanelBottom {
	min-height: 100px;
	background-color: var( --gsuiBlocksManager-side-bgColor );
}
.gsuiPianoroll-gridPanelTop {
	display: flex;
	flex-direction: column;
}

.gsuiPianoroll-sidePanelBottom {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.gsuiPianoroll-slidersSelect {
	margin: auto;
	color: inherit;
	border: 0;
	background-color: var( --gsuiBlocksManager-side-bgColor );
}
.gsuiPianoroll .gsuiSliderGroup-scale {
	margin-right: 3px;
	color: #fff;
	width: 12px;
	opacity: .3;
}

/* .......................................................................... */
.gsuiPianoroll .gsui-row:hover { background-color: rgba( 255, 255, 255, .03 ); }
.gsuiPianoroll .gsuiKeyBlack-row:hover { background-color: rgba( 0, 0, 0, .15 ); }

/* block */
/* .......................................................................... */
.gsuiPianoroll .gsuiBlocksManager-block {
	--gsuiDragline-color: var( --gsuiBlocksManager-blockColor );
}
.gsuiPianoroll .gsuiBlocksManager-block::before {
	content: attr( data-key );
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 0;
	width: 16px;
	max-width: 100%;
	height: 100%;
	color: #000;
	font-size: 11px;
	font-weight: bold;
	opacity: .4;
	pointer-events: none;
}

/* .......................................................................... */
.gsuiPianoroll .gsuiDragline {
	top: 50%;
	right: 0;
}

/* .......................................................................... */
.gsuiPianoroll .gsuiDragline-drop {
	top: 50%;
	left: 0px;
}
.gsuiPianoroll .gsuiDragline-drop::before {
	left: 0px;
}
.gsuiPianoroll .gsuiDragline-dropActive::before {
	left: calc( var( --gsuiDragline-dotSize ) / -2 - 2px );
}

/* .gsuiDragline-to */
/* .......................................................................... */
.gsuiPianoroll .gsuiBlocksManager-block:not( :hover ):not( .gsui-hover )
	.gsuiDragline:not( .gsuiDragline-dragging ) .gsuiDragline-to {
	background-color: transparent;
}
.gsuiPianoroll .gsuiBlocksManager-block:hover .gsuiDragline:not( .gsuiDragline-linked ) .gsuiDragline-to,
.gsuiPianoroll .gsuiBlocksManager-block.gsui-hover .gsuiDragline:not( .gsuiDragline-linked ) .gsuiDragline-to {
	left: calc( var( --gsuiDragline-dotSize ) / 2 );
}
.gsuiPianoroll .gsuiBlocksManager-block:hover .gsuiDragline-linked .gsuiDragline-to,
.gsuiPianoroll .gsuiBlocksManager-block.gsui-hover .gsuiDragline-linked .gsuiDragline-to {
	right: calc( var( --gsuiDragline-dotSize ) / 2 );
}