GraphEditorView {
    flex-direction: column;
    background: #f00;
    flex: 1;
}

GraphEditorView #TitleBar {

}

GraphEditorView > #content {
    flex: 1;
    flex-direction: row;
}

GraphEditorView > #content > #GraphView {
    flex: 1;
}

GraphEditorView > #content > #inspector {
    width: 400;
}

MaterialNodeView > .mainContainer > #left > #preview.active {
    width: 200;
}

MaterialNodeView > .mainContainer > #left > #preview.visible {
	height: 200;
}

MaterialNodeView > .mainContainer > #left > #toggle {
    text-color: rgb(153, 153, 153);
    text-alignment: middle-center;
}

MaterialNodeView > .mainContainer > #left > #toggle.inactive {
    height: 0;
}

MaterialNodeView > .mainContainer > #left > #toggle:hover {
	background-color: rgba(0, 0, 0, 0.33);
}

MaterialNodeView > .mainContainer > #left > #toggle:active {
	background-color: rgba(0, 0, 0, 0.66);
}

GridBackground {
	grid-background-color: rgb(20, 21, 21);
	line-color: rgb(20, 21, 21);
	thick-line-color: rgb(20, 21, 21);
	spacing: 75.0;
	thick-lines: 10;
}

GraphInspectorView {
    background-color: rgb(56, 56, 56);
    flex-direction: column;
    justify-content: space-between;
}

GraphInspectorView > #top > #header {
    background-color: rgb(64, 64, 64);
    border-color: rgb(79, 79, 79);
    border-bottom-width: 1;
}

GraphInspectorView > #top > #header > #title {
    text-color: rgb(180, 180, 180);
    font-style: bold;
    padding-left: 16;
    padding-right: 16;
    padding-top: 10;
    padding-bottom: 10;
}

GraphInspectorView > #top > #content > #selectionCount {
    text-color: rgb(180, 180, 180);
    padding-left: 16;
    padding-right: 16;
    padding-top: 10;
    padding-bottom: 10;
}

GraphInspectorView > #bottom > #preview {
    height: 400;
    background-color: rgb(79, 79, 79);
}

GraphInspectorView > #bottom > #properties {
    border-color: rgb(41, 41, 41);
    border-top-width: 1;
    border-bottom-width: 1;
    border-left-width: 1;
    border-right-width: 1;
    margin-top: 8;
    margin-bottom: 8;
    margin-left: 8;
    margin-right: 8;
}

GraphInspectorView > #bottom > #properties > #header {
    border-color: rgb(41, 41, 41);
    border-bottom-width: 1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

GraphInspectorView > #bottom > #properties > #header > #title {
    text-color: rgb(180, 180, 180);
    font-style: bold;
    padding-top: 8;
    padding-bottom: 8;
    padding-left: 8;
    padding-right: 8;
}

GraphInspectorView > #bottom > #properties > #header > #addButton {
    height: 24;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 8;
}

GraphInspectorView > #bottom > #properties > #items {
    padding-bottom: 4;
}

ShaderPropertyView {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 8;
    padding-bottom: 4;
    padding-left: 8;
    padding-right: 8;
}

ShaderPropertyView > #displayName {
    flex: 1;
    margin-right: 8;
}

ShaderPropertyView > #value {
    flex: 2;
    margin-right: 8;
}

ShaderPropertyView > #remove {
    font-size: 9;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1;
    padding-right: 1;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}

.nodeEditor {
    border-color: rgb(79, 79, 79);
    border-bottom-width: 1;
    padding-top: 10;
}

NodeEditorHeaderView {
    padding-left: 16;
    padding-right: 16;
    padding-bottom: 10;
    flex-direction: row;
}

NodeEditorHeaderView > #preType {
    margin-left: 10;
}

NodeEditorHeaderView > #preType,
NodeEditorHeaderView > #postType,
NodeEditorHeaderView > #type {
    text-color: rgb(180, 180, 180);
}

NodeEditorHeaderView > #title {
    text-color: rgb(180, 180, 180);
    font-style: bold;
}

.nodeEditor > .section {
    padding-bottom: 10;
}

.nodeEditor > .section.hidden {
    height: 0;
    padding-bottom: 0;
}

.nodeEditor > .section > .title {
    text-color: rgb(180, 180, 180);
    font-style: bold;
    padding-left: 16;
    padding-right: 16;
    padding-bottom: 2;
}

.nodeEditor > .section > #slots {
    flex-direction: column;
    padding-left: 15;
    padding-right: 15;
}

.nodeEditor > .section#surfaceOptions {
    padding-left: 15;
    padding-right: 15;
}

IMGUISlotEditorView {
    flex-direction: column;
    padding-bottom: 2;
}


ToolbarView {
    flex-direction: row;
    border-color: rgb(32, 32, 32);
    border-bottom-width: 1;
}

ToolbarSeparatorView {
    background-color: rgb(32, 32, 32);
    width: 1;
}

ToolbarSpaceView {
    width: 5;
}

ToolbarButtonView {
    font-size: 10;
    text-color: rgb(180, 180, 180);
    padding-top: 3;
    padding-bottom: 3;
    padding-left: 4;
    padding-right: 4;
}

ToolbarButtonView:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

ToolbarButtonView:active {
    background-color: rgba(0, 0, 0, 0.25);
}