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 #previewContainer > #preview
{
    align-items:center;
}

MaterialNodeView #previewContainer > #preview > #collapse {
    background-color: #000;
    border-color: #F0F0F0;
    width: 20;
    height: 20;
    border-radius: 1;
    border-top-width: 1;
    border-bottom-width: 1;
    border-left-width: 1;
    border-right-width: 1;
    margin-top: 4;
    opacity: 0.6;
    align-items:center;
    justify-content:center;
}


MaterialNodeView #previewContainer > #preview > #collapse > #icon
{
    background-image : resource("GraphView/Nodes/PreviewCollapse.png"); 
    width: 16;
    height: 16;
}
MaterialNodeView #previewContainer > #preview > #collapse:hover {
    opacity: 1.0;
}

MaterialNodeView #previewContainer.collapsed > #preview > #collapse {
    height: 0;
}

MaterialNodeView #previewContainer > #expand {
    align-self: center;
    width: 56;
    height: 16;
    flex-direction: row;
    justify-content:center;
}

MaterialNodeView #previewContainer > #expand > #icon {
    align-self: center;
    background-image : resource("GraphView/Nodes/PreviewExpand.png"); 
    width: 16;
    height: 16;
}

MaterialNodeView #previewContainer.collapsed > #expand:hover {
    background-color: #2B2B2B;
}

MaterialNodeView #previewContainer.expanded > #expand {
    height: 0;
}

MaterialNodeView > #resize {
    background-color: rgb(0, 0, 255);
    position-type: absolute;
    position-right: 5;
    position-bottom: 5;
    width: 10;
    height: 10;
}

MaterialNodeView > #resize:hover {
    background-color: rgb(0, 127, 127);
}

MaterialNodeView > #resize:active {
    background-color: rgb(0, 225, 25);
}

PortInputView {
    width: 212;
    height: 22;
    padding-top: 1;
    flex-direction: row;
    justify-content: flex-end;
}

PortInputView > #container > #slot {
    width: 8;
    height: 8;
    background-color: #2B2B2B;
    border-color: #232323;
    border-top-width: 1;
    border-bottom-width: 1;
    border-left-width: 1;
    border-right-width: 1;
    border-radius: 4;
    margin-left: 6;
    margin-right: 6;
    align-items: center;
    justify-content: center;
}

PortInputView > #edge {
    position-type: absolute;
    position-right: 0;
    position-top: 10.5;
    height: 2;
    width: 20;
    background-color: #ff0000;
}

PortInputView > #container > #slot > #dot {
    width: 4;
    height: 4;
    background-color: #ff0000;
    border-radius: 4;
}

PortInputView.typeMatrix4 > #container > #slot > #dot,
PortInputView.typeMatrix3 > #container > #slot > #dot,
PortInputView.typeMatrix2 > #container > #slot > #dot {
    background-color: #8FC1DF;
}

PortInputView.typeMatrix4,
PortInputView.typeMatrix3,
PortInputView.typeMatrix2 {
    edge-color: #8FC1DF;
}

PortInputView.typeTexture2D > #container > #slot > #dot {
    background-color: #FF8B8B;
}

PortInputView.typeTexture2D {
    edge-color: #FF8B8B;
}

PortInputView.typeVector4 > #container > #slot > #dot {
    background-color: #FBCBF4;
}

PortInputView.typeVector4 {
    edge-color: #FBCBF4;
}

PortInputView.typeVector3 > #container > #slot > #dot {
    background-color: #F6FF9A;
}

PortInputView.typeVector3 {
    edge-color: #F6FF9A;
}

PortInputView.typeVector2 > #container > #slot > #dot {
    background-color: #9AEF92;
}

PortInputView.typeVector2 {
    edge-color: #9AEF92;
}

PortInputView.typeVector1 > #container > #slot > #dot {
    background-color: #84E4E7;
}

PortInputView.typeVector1 {
    edge-color: #84E4E7;
}

PortInputView > #container {
    background-color: #393939;
    flex-direction: row;
    align-items: center;
    padding-left: 8;
    margin-right: 10;
    border-left-width: 1;
    border-top-width: 1;
    border-right-width: 1;
    border-bottom-width: 1;
    border-color: rgba(25, 25, 25, 0.8);
    border-radius: 2;
}

TextureSlotControlView {
    flex-direction: row;
    align-items: center;
}

TextureSlotControlView > ObjectField {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100;
}

MultiFloatSlotControlView {
    flex-direction: row;
    align-items: center;
}

MultiFloatSlotControlView > Label {
    margin-left: 0;
    margin-right: 0;
}

MultiFloatSlotControlView > DoubleField {
    width: 30;
    margin-left: 0;
    margin-right: 0;
}

UVSlotControlView > EnumField {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    width: 40;
}

ColorSlotControlView {
    flex-direction: row;
    align-items: center;
}

ColorSlotControlView > ColorField {
    width: 50;
}

.edge.fromMatrix4, .edge.fromMatrix3, .edge.fromMatrix2 {
    edge-output-color: #8FC1DF;
}
.edge.toMatrix4, .edge.toMatrix3, .edge.toMatrix2 {
    edge-input-color: #8FC1DF;
}

.edge.fromTexture2D {
    edge-output-color: #FF8B8B;
}
.edge.toTexture2D {
    edge-input-color: #FF8B8B;
}

.edge.fromVector4 {
    edge-output-color: #FBCBF4;
}
.edge.toVector4 {
    edge-input-color: #FBCBF4;
}

.edge.fromVector3 {
    edge-output-color: #F6FF9A;
}
.edge.toVector3 {
    edge-input-color: #F6FF9A;
}

.edge.fromVector2 {
    edge-output-color: #9AEF92;
}
.edge.toVector2 {
    edge-input-color: #9AEF92;
}

.edge.fromVector1 {
    edge-output-color: #84E4E7;
}
.edge.toVector1 {
    edge-input-color: #84E4E7;
}

GraphInspectorView {
    background-color: rgb(56, 56, 56);
    flex-direction: column;
    justify-content: flex-start;
}
 
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);
}

ColorControlView {
    flex-direction: row;
}

MultiFloatControlView {
    flex-direction: row;
}

MultiFloatControlView > Label {
    margin-left: 0;
    margin-right: 0;
}

MultiFloatControlView > DoubleField {
    flex: 1;
    margin-left: 0;
    margin-right: 0;
}

ObjectControlView {
    flex-direction: row;
}

ObjectControlView > ObjectField {
    flex: 1;
}