:root {
	--gsuiBlocksManager-bgColor: #3a5158;
	--gsuiBlocksManager-borderColor: #111;
	--gsuiBlocksManager-side-bgColor: #555;
	--gsuiBlocksManager-timeline-height: 32px;
	--gsuiBlocksManager-selection-bgColor: rgba( 189, 38, 38, .4 );
	--gsuiBlocksManager-selection-borderColor: #f44;
	--gsuiBlocksManager-blockColor: rgba( 85, 170, 204, .8 );
	--gsuiBlocksManager-blockSelectedColor: rgba( 255, 136, 136, .8 );
}

.gsuiBlocksManager-sidePanel {
	position: relative;
	min-width: 68px;
	max-width: 104px;
	width: 104px;
	background-color: var( --gsuiBlocksManager-side-bgColor );
}
.gsuiBlocksManager-sidePanel .gsui-opacityHover {
	color: #fff;
	cursor: pointer;
	opacity: .35;
	transition: .2s opacity;
}
.gsuiBlocksManager-sidePanel .gsui-opacityHover:hover {
	opacity: .7;
}
.gsuiBlocksManager-gridPanel {
	--gsuiSliderGroup-currentTime-color: #ff9;
	--gsuiSliderGroup-slider-width: 6px;
	--gsuiSliderGroup-slider-bg: rgba( 0, 0, 0, .1 );
	--gsuiSliderGroup-slider-color: var( --gsuiBlocksManager-blockColor );
	--gsuiSliderGroup-slider-color-selected: var( --gsuiBlocksManager-blockSelectedColor );
	--gsuiSliderGroup-loop-color: rgba( 0, 0, 0, .3 );

	flex: 1;
	display: flex;
	flex-direction: column;
	border-left-width: 1px !important;
}

.gsuiBlocksManager-sidePanelMenu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	box-sizing: border-box;
	padding: 4px;
	height: var( --gsuiBlocksManager-timeline-height );
}

/* .......................................................................... */
.gsuiBlocksManager-magnet {
	display: flex;
	align-items: center;
	padding: 4px;
	border-radius: 4px;
	font-size: 0px;
}
.gsuiBlocksManager-magnetValue {
	font-size: 11px;
	white-space: nowrap;
	margin-right: 6px;
}
.gsuiBlocksManager-magnet::after {
	content: "\f076";
	font: 16px "FontAwesome";
	opacity: .7;
}

/* .......................................................................... */
.gsuiBlocksManager-rows,
.gsuiBlocksManager-sidePanelContent {
	position: absolute;
	overflow: scroll;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.gsuiBlocksManager-sidePanelContent {
	top: var( --gsuiBlocksManager-timeline-height );
	box-shadow: 0 -1px 0 var( --gsuiBlocksManager-borderColor );
}
.gsuiBlocksManager-gridPanel .gsuiPanels-extend {
	margin-top: var( --gsuiBlocksManager-timeline-height );
}

.gsuiBlocksManager-timelineWrap {
	height: var( --gsuiBlocksManager-timeline-height );
	border-bottom: 1px solid var( --gsuiBlocksManager-borderColor );
	box-sizing: border-box;
}
.gsuiBlocksManager-timelineWrap .gsuiTimeline {
	height: 100%;
}

.gsuiBlocksManager-rowsWrapout {
	flex: 1;
	position: relative;
	background-color: var( --gsuiBlocksManager-bgColor );
}
.gsuiBlocksManager-rowsWrapin {
	position: absolute;
}
.gsuiBlocksManager-rows .gsui-row {
	width: 1000000px;
}

.gsuiBlocksManager-gridPanel .gsuiBeatlines {
	background-color: var( --gsuiBlocksManager-bgColor );
}

/* .......................................................................... */
.gsuiBlocksManager-selection {
	position: absolute;
	box-sizing: border-box;
	top: 0;
	z-index: 2;
	border: 2px solid var( --gsuiBlocksManager-selection-borderColor );
	border-radius: 4px;
	background-color: var( --gsuiBlocksManager-selection-bgColor );
	transition: .2s;
	transition-property: opacity, visibility;
}
.gsuiBlocksManager-selection-hidden {
	opacity: 0;
	visibility: hidden;
}

/* .......................................................................... */
.gsuiBlocksManager-block {
	position: absolute;
	z-index: 1;
	height: 100%;
	border-radius: 2px;
	background-color: var( --gsuiBlocksManager-blockColor );
	transition: .1s;
	transition-property: opacity, background-color;
}
.gsuiBlocksManager-block-selected {
	--gsuiBlocksManager-blockColor: var( --gsuiBlocksManager-blockSelectedColor );
}
.gsuiBlocksManager-block-hidden {
	z-index: 0;
	opacity: .3;
}
.gsuiBlocksManager-block-crop {
	position: absolute;
	z-index: 2;
	width: 50%;
	height: 100%;
	max-width: 8px;
	border-radius: inherit;
	background-color: #000;
	opacity: 0;
	transition: .1s opacity;
}
.gsuiBlocksManager-block-cropA {
	left: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.gsuiBlocksManager-block-cropB {
	right: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.gsuiBlocksManager-block:hover .gsuiBlocksManager-block-crop,
.gsuiBlocksManager-block.gsui-hover .gsuiBlocksManager-block-crop {
	opacity: .12;
}
.gsuiBlocksManager-block .gsuiBlocksManager-block-crop:hover,
.gsuiBlocksManager-block .gsuiBlocksManager-block-crop.gsui-hover {
	opacity: .25;
}

/* .......................................................................... */
.gsuiBlocksManager-loop,
.gsuiBlocksManager-currentTime {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	pointer-events: none;
}
.gsuiBlocksManager-currentTime {
	width: 1px;
	background-color: #ffa;
	box-shadow: -1px 0 2px #ffa;
}
.gsuiBlocksManager-loop {
	opacity: 0;
	background-color: #000;
	transition: .2s opacity;
}
.gsuiBlocksManager-loopA { left: 0; }
.gsuiBlocksManager-loopB { right: 0; }
.gsuiBlocksManager-loopOn {
	opacity: .3;
}