:root {
	--bar-size: 58px;
	--border: 1px solid #D7D7D7;
	--border-color: #D7D7D7;
	--bg-color: #EEEEEE;
	--active-lightblue-bg-color: #F1FCFF;
	--active-lightblue-border-color: #B5CFDD;
}

.gstateeditor.objectWrapper div {
}


.gstateeditor .editorWrapper {
	border: var(--border);
}


.gstateeditor .header, .gstateeditor .seeditor, .gstateeditor .sesidebar, .gstateeditor .statebar {
	width: var(--bar-size);
	height: var(--bar-size);
	box-sizing: border-box;
	float: left;
	padding: 4px;
}

.gstateeditor .sesidebar {
	width: calc(var(--bar-size) - 24px);
}

.gstateeditor .header {
	background-color: var(--gray-bg-color);
	width: 100%;
	border-bottom: var(--border);
}

.gstateeditor .statebar {
	background-color: var(--bg-color);
	width: calc(100% - var(--bar-size) + 24px);
	overflow: hidden;
}

.gstateeditor .statebar .state_types {
	list-style: none;
	margin: 0px;
	padding: 0px;
	margin-left: -4px;
	display: inline-flex;
}

.gstateeditor .statebar .state_types li {
	display: inline-block;
	margin: 0px;
	padding: 0px;
	border: var(--border);
	margin-right: 4px;
	background-color: transparent;
	height: 48px;
	width: 48px;
}

.gstateeditor .statebar .state_types li img {
	height: 48px;
	width: 48px;
}


.gstateeditor .sesidebar .actions li:hover {
	cursor: pointer;
	background-color: var(--active-lightblue-bg-color);
}

.gstateeditor .statebar .state_types li:hover {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
	background-color: var(--active-lightblue-bg-color);
}


.gstateeditor .sesidebar {
	background-color: var(--bg-color);;
	height: 100%;
}

.gstateeditor .sesidebar .actions {
	list-style: none;
	margin: 0px;
	padding: 0px;
	margin-top: calc(var(--bar-size) - 4px);
}
.gstateeditor .sesidebar .actions li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	border: var(--border);
	background-color: transparent;
	height: 24px;
	width: 24px;
	margin-bottom: 4px;
}

.gstateeditor .sesidebar .actions li img {
	height: 24px;
	width: 24px;
}



.gstateeditor .seeditor {
	background-color: white;
	padding: 0px;
	border-left: var(--border);
	border-top: var(--border);
	height: calc(100% - var(--bar-size));
	width: calc(100% - var(--bar-size) + 24px);
	overflow: auto;
}

.gstateeditor .sesidebar .actions li.selected, .gstateeditor .statebar .state_types li.selected  {
	background-color: var(--active-lightblue-bg-color);
	border: 1px solid var(--active-lightblue-border-color);
}

.gstateeditor .diagram {
	
}

.gstateeditor .diagram .state {
	position: relative;
	width: 56px;
	height: 56px;
	background-color: white;
	box-sizing: border-box;
	border: 1px solid whitesmoke;
}

.gstateeditor .diagram .state img {
	display: block;
	width: 48px;
	height: 48px;
	/*background-color: lightgray;*/

	position: relative;
	/* center div horizontally and vertically */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

.gstateeditor .diagram .state:hover {
	border: 1px dashed gray;
	border-radius: 3px;
	cursor: pointer;
}