/* Builder styling */

h3 {
	padding: 5px;
	border-radius: 5px;
	background-color: transparent;
	
	transition: background-color 600ms;
}

h3:hover {
	background-color: #666;
	cursor: pointer;
}

.triggerLabel:before {
	content: "Trigger: ";
	color: red;
}

.conditionLabel:before {
	content: "Condition: ";
	color: blue;
}

.targetLabel:before {	
	content: "Target: ";
	color: #080;
}

.mechanicLabel:before {
	content: "Mechanic: ";
	color: #f0f;
}

.componentWrapper {
    float: left;
	max-width: calc(100% - 24px);
}

.component {
	padding: 5px;
	margin: 5px;
	border: 2px solid #333;
	border-radius: 10px;
	font: 18px Sertig-Web;
	background-color: #181818;
    width: 260px;
    height: 90px;
}

.componentChildren {
    margin-left: 20px;
}

.builderButton {
	float: left;
	background-color: #043;
	width: 90px;
    height: 32px;
	font: 16px Sertig-Web;
	border-radius: 5px;
	padding: 5px;
	padding-left: 10px;
	color: white;
	cursor: pointer;
	margin: 5px;
	
	transition: background-color 600ms;
}

.smallButton {
    width: 32px;
}

.builderButton:hover {
	background-color: #666;
}

/* Form styling */