.controlElementsContainer {
	padding-left: 5px;
	user-select: none;
}

.controlHeader {
	height: 40px;
	padding-left: 10px;
	background-color: #7e7e7e;
	transition: margin 200ms ease-out, opacity 200ms ease-out;
	position: relative;
	border-bottom: 1px solid #959595;
	box-sizing: border-box;
}

.controlHeader h2 {
	margin-top: 0px;
	line-height: 40px;
}

.controlElementContainer {
	height: 30px;
	transition: margin 200ms ease-out;
}

.controlElementContainer .controlLabel {
	line-height: 30px;
	text-transform: capitalize;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-right: 5px;
}

.compact .controlElementContainer .controlLabel {
	margin-right: 0px;
}

.controlDisplaySpaceBetween {
	display: flex;
	justify-content: space-between;
}

.controlElement {
	width: calc(100% - 75px);
	border: none;
	max-height: calc(100% - 2px);
	margin-bottom: 0px !important;
	padding: 0px !important;
}

.controlHeader .controlAddButton {
	overflow: hidden;
	font-size: 1em !important;
	margin-left: 5px;
	text-align: right;
	padding: 0px 5px;
	height: calc(100% - 10px);
	vertical-align: middle;
	line-height: 1;
}

.controlContainer.controlCollapsed .controlElementsContainer .controlElementContainer {
	margin-top: -30px;
}

.controlContainer.controlCollapsed .controlElementsContainer .controlHeader {
	margin-top: -40px;
	opacity: 0;
	pointer-events: none;
}

.controlContainer.controlCollapsed .customontrolElement {
	opacity: 0;
	pointer-events: none;
}


button.controlCollapsor {
	background: none;
	box-shadow: none;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #333;
	border-top: none;
	padding: 0px;
	transition: transform 200ms ease-out;
	margin: 10px;
}

.controlContainer.controlCollapsed .controlCollapsor {
	transform: rotate(180deg)
}

input.controlInverse {
	direction: rtl
}

.customontrolElement.rangeSlider {
	width: calc(100% - 83px);
	position: relative;
	margin-right: 8px;
}

.sliderRail {
	width: 100%;
	height: 6px;
	transform: translate(0px, -50%);
	top: 50%;
	position: absolute;
	background-color: #eee;
	border-radius: 4px;
}

.rangeSliderHandle {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: grey;
}

input.colorHandle.rangeSliderHandle {
	background: none;
	padding: 0px;
	height: 22px;
	border: 0px;
	width: 18px;
}

input.controlElement[type="number"] {
	width: 80px;
}

input.controlElement {
	text-align: right;
}

input.controlElement[type="checkbox"] {
	width: 20px;
}

.controlContainer.compact>.controlElementsContainer {
	display: flex;
	padding-left: 0px;
	justify-content: space-between;
}

.controlContainer.compact>.controlElementsContainer>.controlElementContainer {
	display: inline-block;
	justify-content: left;
}

.controlContainer.compact>.controlElementsContainer>.controlElementContainer>* {
	width: 45px;
	float: left;
	display: block;
	overflow: hidden;
	height: calc(100% - 4px);
	margin-top: 2px;
}

.controlContainer.compact>.controlElementsContainer>.controlElementContainer>label {
	width: 30px;
}

.controlContainer.compact>.controlHeader {
	display: none;
}

.compact>.controlElementsContainer>button.controlAddButton {
	width: 20px;
	height: 26px;
	letter-spacing: 0px;
	padding: 0px;
	text-indent: 0px;
	display: inline-block;
	line-height: 0;
	margin-top: 2px;
}

.controlCollapsed .controlElementsContainer>button.controlAddButton {
	margin-top: -30px;
	box-shadow: none;
}

.disabled {
	background: #b7b7b7;
	color: #727272;
	cursor: not-allowed !important;
}

.disabled label {
	cursor: not-allowed;
}

.disabled input,
.disabled select {
	pointer-events: none;
	background-color: #d1d1d1;
}