#divider {
    background-color: rgba(35,35,35,0.8);
    border-color: rgba(35,35,35,0.8);
}

#collapse-button >#icon
{

    visibility: visible;
}


#divider.horizontal {
    height: 0.01px;
    border-bottom-width: 1px;
}

#divider.horizontal.hidden {
    height:0;
    border-bottom-width: 0;
}

#divider.vertical {
    width: 0.01px;
    border-right-width: 1px;
}

#divider.vertical.hidden {
    width:0;
    border-right-width: 0;
}

.VFXNodeUI.node #node-border > #title
{
    justify-content:flex-start;
}

.VFXNodeUI.node #node-border > #title > #title-label
{
    flex:1 1 auto;
    overflow:hidden;
}


.VFXNodeUI #contents
{
    background-color: rgba(63,63,63,0.8);
}


.VFXNodeUI #settings
{
    margin-top: 8px;
    margin-bottom: 8px;
    margin-right: 4px;
    margin-left: 16px; /* this is meant to compense for data anchors connector, so that settings labels are aligned with input labels. */
    padding-right: 4px;
    overflow:hidden;
}

.VFXNodeUI.collapsed #settings
{
    display:none;
}

.VFXNodeUI #settings.nosettings
{
    display:none;
}

.VFXNodeUI.collapsed #settings
{
    max-height:0;
    height:0;
}
.node.collapsed > #node-border > #title > #collapse-button > #icon {
    background-image: resource("GraphView/Nodes/NodeChevronLeft.png");
}

.node.expanded > #node-border > #title > #collapse-button > #icon {
    background-image : resource("GraphView/Nodes/NodeChevronDown.png");
}

.VFXNodeUI.node #contents > #top > #input
{
    padding-top: 6px;
    padding-bottom: 6px;
    flex: 1 1 auto;
    background-color: rgba(0,0,0,0.0);
}

.VFXNodeUI.node #contents > #top > #output
{
    padding-top: 6px;
    padding-bottom: 6px;
    flex: 1 1 auto;
}

#line
{
    background-color:#4c4c4c;
}

#settings-divider
{
    background-color: rgba(35,35,35,0.8);
    border-color: rgba(35,35,35,0.8);
    height: 0.01px;
    border-bottom-width: 1px;
}

#settings-divider.hidden
{
    height:0;
    border-bottom-width: 0;
}

.VFXNodeUI.collapsed #settings-divider
{
    height:0;
    border-bottom-width: 0;
}