html {

    --color-bg-0: #000;
    --color-fg-0: #fff;
    
    --color-fg-1: #384b65;
    
    --color-bg-1: #023262;
    --color-bg-2: #02274d;
    --color-bg-3: #041c33;
    --color-bg-4: #03101d;

    --color-accent: #0a62d4;
    --color-accent-alt: deeppink;

    --color-inputs: rgba(255,255,255,0.05);

    --scrollbars-color-thumb: var(--color-accent);
    --scrollbars-color-bg: transparent;

    /* --color-runtime-toolbar-shadow: rgba(255, 255, 255, 0.25); */

    --color-notice-bg-alert: #e41b1b;
    --color-notice-fg-alert: var(--color-fg-0);
    --color-notice-bg-warning: #ffb000;
    --color-notice-fg-warning: var(--color-bg-0);
    --color-notice-bg-normal: #23bb2f;    
    --color-notice-fg-normal: var(--color-fg-0);
    --color-notice-inputs: rgba(0,0,0,0.1);
    --color-notice-shadow: rgba(0,0,0,0.25);

    --color-list-item-delimiter: rgba(0,128,255,0.1);
    --color-list-item-highlight: #1c5084;
    --color-list-item-unavailable: rgba(255,255,255,0.5);

    --color-tree-icon: deepskyblue;
    --color-tree-property-icon: goldenrod;
    --color-tree-property-bg: var(--color-tree-property-icon);
    --color-tree-property-fg: var(--color-bg-0);
    --color-tree-hint-property-icon: var(--color-fg-0);
    --color-tree-hint-property-name-bg: var(--color-inputs);
    --color-tree-hint-property-name-fg: var(--color-fg-0);
    /* --color-tree-hint-property-value-bg: var(--color-inputs);
    --color-tree-hint-property-value-fg: var(--color-fg-0); */
    --color-tree-id-bg: var(--color-inputs);
    --color-tree-id-fg: var(--color-fg-0);

    --color-tree-selected-item-bg: var(--color-list-item-highlight);
    --color-tree-selected-item-fg: var(--color-fg-0);
    --color-tree-selected-item-outline: var(--color-fg-0);

    --color-preloader-bg: rgba(0,0,0,0.5);
    --color-preloader-fg: var(--color-fg-0);

    /* components */

    --color-component-foreground: var(--color-fg-0);
    --color-component-background: rgba(2, 39, 77, 1);
    --color-component-transparent: rgba(0, 0, 0, 0);

    --color-root-component-foreground: var(--color-component-foreground);
    --color-root-component-background: var(--color-bg-1);
    --color-root-component-border: rgba(255,255,255,0.05);
    --color-root-component-grid: rgba(255,255,255,0.05);
    --color-root-component-axes: rgba(255,255,255,0.15);

    --color-audio-component-foreground: var(--color-component-foreground);
    --color-audio-component-background: var(--color-component-transparent);
    --color-audio-component-border: var(--color-audio-component-foreground);

    --color-button-component-foreground: var(--color-component-background);
    --color-button-component-background: var(--color-component-foreground);
    --color-button-component-border: var(--color-button-component-background);

    --color-chart-component-foreground: var(--color-component-foreground);
    --color-chart-component-background: var(--color-component-background);
    --color-chart-component-border: var(--color-chart-component-foreground);
    --color-chart-component-area: rgba(255,255,255,0.4);
    --color-chart-component-tooltip-foreground: var(--color-bg-0);
    --color-chart-component-tooltip-background: var(--color-fg-0);

    --color-container-component-foreground: var(--color-component-foreground);
    --color-container-component-background: rgba(35, 108, 177, 0.75);
    --color-container-component-border: var(--color-container-component-foreground);

    --color-detour-component-foreground: var(--color-component-foreground);
    --color-detour-component-background: var(--color-component-transparent);
    --color-detour-component-border: var(--color-detour-component-foreground);

    --color-hline-component-foreground: var(--color-component-foreground);
    --color-hline-component-background: var(--color-component-transparent);
    --color-hline-component-border: var(--color-hline-component-foreground);

    --color-iframe-component-foreground: var(--color-component-foreground);
    --color-iframe-component-background: var(--color-component-background);
    --color-iframe-component-border: var(--color-iframe-component-foreground);

    --color-image-component-foreground: var(--color-component-foreground);
    --color-image-component-background: var(--color-component-transparent);
    --color-image-component-border: var(--color-image-component-foreground);

    --color-sprite-animation-component-foreground: var(--color-component-foreground);
    --color-sprite-animation-component-background: var(--color-component-transparent);
    --color-sprite-animation-component-border: var(--color-sprite-animation-component-foreground);

    --color-indicator-component-foreground: var(--color-component-foreground);
    --color-indicator-component-background: var(--color-component-background);
    --color-indicator-component-border: var(--color-detour-component-foreground);

    --color-input-component-foreground: var(--color-component-background);
    --color-input-component-background: var(--color-component-foreground);
    --color-input-component-border: var(--color-input-component-foreground);

    --color-map-component-foreground: var(--color-accent);
    --color-map-component-background: var(--color-component-transparent);
    --color-map-component-border: var(--color-component-foreground);

    --color-parameters-tree-component-foreground: var(--color-component-foreground);
    --color-parameters-tree-component-background: var(--color-component-background);
    --color-parameters-tree-component-border: var(--color-parameters-tree-component-foreground);
    --color-parameters-tree-component-selected-item-fg: var(--color-tree-selected-item-fg);
    --color-parameters-tree-component-selected-item-bg: var(--color-tree-selected-item-bg);
    --color-parameters-tree-component-selected-item-outline: var(--color-tree-selected-item-outline);

    --color-rcorner-component-foreground: var(--color-component-foreground);
    --color-rcorner-component-background: var(--color-component-transparent);
    --color-rcorner-component-border: var(--color-rcorner-component-foreground);

    --color-switch-component-foreground: var(--color-component-foreground);
    --color-switch-component-background: var(--color-component-background);
    --color-switch-component-border: var(--color-switch-component-foreground);

    --color-table-component-foreground: var(--color-component-foreground);
    --color-table-component-background: var(--color-component-background);
    --color-table-component-border: #183a5d;
    --color-table-component-header-foreground: var(--color-component-foreground);
    --color-table-component-header-background: #021F3E;
    --color-table-component-button-foreground: var(--color-component-background);
    --color-table-component-button-background: var(--color-component-foreground);

    --color-text-component-foreground: var(--color-component-foreground);
    --color-text-component-background: var(--color-component-transparent);
    --color-text-component-border: var(--color-text-component-foreground);

    --color-vline-component-foreground: var(--color-component-foreground);
    --color-vline-component-background: var(--color-component-transparent);
    --color-vline-component-border: var(--color-vline-component-foreground);

    --color-video-component-foreground: var(--color-component-foreground);
    --color-video-component-background: var(--color-component-transparent);
    --color-video-component-border: var(--color-video-component-foreground);

    --color-notices-list-component-foreground: var(--color-component-foreground);
    --color-notices-list-component-background: var(--color-component-background);
    --color-notices-list-component-border: var(--color-notices-list-component-foreground);

    --color-listview-component-head-item-foreground: inherit;
    --color-listview-component-head-item-background: rgba(255,255,255,0.15);
    --color-listview-component-head-disabled-item-foreground: rgba(0,0,0,0.5);
    --color-listview-component-head-disabled-item-background: rgba(255,255,255,0.05);
    --color-listview-component-item-background: rgba(0,0,0,0.5);
    --color-listview-component-item-filename-background: transparent;
    --color-listview-component-message-foreground: inherit;
    --color-listview-component-message-background: rgba(0,0,0,0.15);
    --color-listview-component-contextmenu-actions-background: rgba(255,255,255,0.075);

    --color-composite-state-component-foreground: var(--color-component-foreground);
    --color-composite-state-component-background: var(--color-component-transparent);
    --color-composite-state-component-border: var(--color-audio-component-foreground);

    --color-datasets-list-component-foreground: var(--color-component-foreground);
    --color-datasets-list-component-background: var(--color-component-background);
    --color-datasets-list-component-border: var(--color-datasets-list-component-foreground);
}

html {
    background-color: var(--color-bg-0);
    color: var(--color-fg-0);
}

/*
    Basic inputs controls
*/

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="email"],
textarea,
select {
    background: var(--color-inputs);
}

select option {
    background: var(--color-bg-0);
}

/*
    Input range
*/

input[type="range"]::-webkit-slider-runnable-track {
    background: var(--color-bg-3);
}

input[type=range]::-webkit-slider-thumb {
    background: var(--color-fg-0);
    color: var(--color-accent);
}

input[type=range]::-moz-range-track {
	background-color: var(--color-bg-3);
}

input[type=range]::-moz-range-progress{
	background-color: var(--color-accent);
}

input[type=range]::-moz-range-thumb {
	background-color: var(--color-fg-0);
}


/*
    Button
*/

button {
    background-color: var(--color-bg-0);
}

button.primary {
    background-color: var(--color-accent);
}

button.secondary {
    background-color: rgba(255,255,255,0.25);
}

/*
    Form
*/

form > .message {
    color: var(--color-accent-alt);
}

/*
    Scrollbars
*/

::-webkit-scrollbar-thumb {
    background: var(--scrollbars-color-thumb);
}

::-webkit-scrollbar-corner {
    background: var(--scrollbars-color-bg);
}

::-webkit-scrollbar-track {
    background: var(--scrollbars-color-bg);
}

::-webkit-scrollbar-track-piece {
    background: var(--scrollbars-color-bg);
}

.firefox, .firefox body {
    scrollbar-color: var(--scrollbars-color-thumb) var(--scrollbars-color-bg);
}

/*
    Preloader
*/

.is-loading > .preloader {
    background: var(--color-preloader-bg);
    color: var(--color-preloader-fg);
}

/*
    Tree
*/

.tree .node > .title > .icon {
    color: var(--color-tree-icon);
}

.tree .node > .content > .property > .icon {
    color: var(--color-tree-property-icon);
}

.tree .node .id, .tree .node .prefix {
    color: var(--color-tree-id-fg);
    background-color: var(--color-tree-id-bg);
}

.tree .node > .content > .property .value {
    color: var(--color-tree-property-fg);
    background: var(--color-tree-property-bg);
}

.tree .node > .content > .hint-property .hint-name {
    color: var(--color-tree-hint-property-name-fg);
    background: var(--color-tree-hint-property-name-bg);
}

/* .tree .node > .content > .hint-property .hint-value {
    color: var(--color-tree-hint-property-value-fg);
    background: var(--color-tree-hint-property-value-bg);
} */

.tree .is-selected {
    background-color: var(--color-tree-selected-item-bg);
    color: var(--color-tree-selected-item-fg);
    outline-color: var(--color-tree-selected-item-outline);
}

/*
    List
*/

.list > .item {
    border-bottom-color: var(--color-list-item-delimiter);
}

.list > .item:hover {
    background-color: var(--color-list-item-highlight);
}

.list > .item.is-unavailable,
.list > .item.is-unavailable:hover {
    color: var(--color-list-item-unavailable);
}

/*
    Sidebar
*/

.sidebar {
    background: var(--color-bg-3);
}

.sidebar .subdivision {
    background: var(--color-bg-2);
}

.sidebar .subdivision > .subdivision {
    border-color: var(--color-bg-1);
}

.sidebar .subdivision > .title {
    background: var(--color-bg-1);
}

.sidebar .subdivision > .title .id {
    background: var(--color-bg-2);
}

/*---------------------------------------
    UI
----------------------------------------/

/*
    Toolbar
*/

.toolbar {
    background: var(--color-bg-4);
}

.toolbar > .group {
    background: var(--color-bg-0);
}

.toolbar > .group > div:hover {
    background-color: var(--color-bg-2);
}

.toolbar > .group > div.is-disabled,
.toolbar > .group > div.is-disabled:hover,
.toolbar.is-locked > .group > div,
.toolbar.is-locked > .group > div:hover {
    color: var(--color-bg-1);
}

.toolbar > .group > div.is-active,
.toolbar > .group > div.is-active:hover {
    background-color: var(--color-accent);
}

/*
    Runtime Toolbar
*/

/* .runtime.toolbar {
    box-shadow: 0 0 5rem var(--color-runtime-toolbar-shadow);
} */

/*
    PropertiesBar
*/

.properties-bar .subdivision.special > .title {
    background: var(--color-bg-0);
}

.properties-bar .subdivision.special {
    background: var(--color-bg-4);
}

.properties-bar .subdivision.actions > .title {
    background: var(--color-accent);
}

.properties-bar .subdivision.actions {
    background: var(--color-bg-1);
}

.properties-bar .subdivision.worksurface-controls > .title {
    background: var(--color-bg-4);
}

.properties-bar .subdivision.worksurface-controls {
    background: var(--color-bg-0);
}

.properties-bar .subdivision.worksurface-controls button {
    background: var(--color-bg-3);
}

/*
    Notice
*/

.notice {
    background: var(--color-fg-0);
    color: var(--color-bg-0);
    box-shadow: 0 0 5rem var(--color-notice-shadow);
}

.notice .title > .title-buttons button {
    background: var(--color-notice-inputs);
}

.notice .id,
.notice .timestamp,
.notice .value,
.notice .parameter {
    background: var(--color-notice-inputs);
}

.notice textarea {
    background: var(--color-notice-inputs);
}

.notice .buttons {
    color: var(--color-fg-0);
}

.notice.notice-alert {
    background: var(--color-notice-bg-alert);
    color: var(--color-notice-fg-alert);
}

.notice.notice-warning {
    background: var(--color-notice-bg-warning);
    color: var(--color-notice-fg-warning);
}

.notice.notice-normal {
    background: var(--color-notice-bg-normal);
    color: var(--color-notice-fg-normal);
}

.notice .ack {
    background: var(--color-notice-inputs);
}

/*
    NoticeBar
*/

.notices-bar .notices-controls .buttons button:hover {
    background-color: var(--color-bg-2);
}

.notices-bar .notices-controls .buttons button.is-active {
    background-color: var(--color-accent);
}

.notices-bar.is-shown .settings {
    background: var(--color-bg-3);
    border-bottom-color: var(--color-accent);
}

.notices-bar .btn-show-notices-bar.dot:after {
    background-color: var(--color-notice-bg-alert);
}


/*
    NoticeList
*/

.notices-list {
    background: var(--color-bg-3);
}

.notices-list .notice {
    border-bottom-color: var(--color-list-item-delimiter);
}

.notices-list .notice.notice-alert .title:before {
    background: var(--color-notice-bg-alert);
}

.notices-list .notice.notice-warning .title:before {
    background: var(--color-notice-bg-warning);
}

.notices-list .notice.notice-normal .title:before {
    background: var(--color-notice-bg-normal);
}

.notices-list .notice.is-popped-up {
    color: var(--color-fg-1);
    background-color: var(--color-bg-0);
}

.notices-list .loader button {
    background: var(--color-accent);
}

.notices-list .notice + .loader {
    border-top-color: var(--color-accent);
}

.notices-list .notice .ack {
    background: var(--color-bg-4);
}


/*
    ListView
*/

/*
.listview {
    background-color: var(--color-bg-2);
}

.listview > .item,
.listview > .upload {
    background-color: var(--color-bg-2);
    filter: brightness(0.9);
}

.listview > .item:hover {
    filter: brightness(1.2);
}

.listview > .item.actions-is-shown > .content {
    filter: grayscale(0.1) blur(3px);
}

.listview > .item.actions-is-shown > .actions {
    background-color: var(--color-preloader-bg);
}

.listview > .item.actions-is-shown > .actions button {
    box-shadow: 0 0 1rem rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255);
    color: var(--color-bg-4);
    background: var(--color-fg-0);
}

.listview > .upload {
    background-color: var(--color-fg-1);
    color: var(--color-bg-3);
}

.listview > .upload:hover {
    background-color: var(--color-fg-0);
}

.audio.listview > .item {
    background: var(--color-inputs);
}

.audio.listview > .item > .content > .filename {
    background-color: var(--color-inputs);
}
*/

.listview {
    --listview-list-item-background: rgba(0,0,0,0.5);
    --listview-list-item-filename-background: rgba(0,0,0,0.5);
}

.listview > .list,
.listview > .head {
    background-color: var(--color-bg-2);
}

.listview > .head {
    border-bottom-color: rgba(255,255,255,0.05);
}

.listview > .list > .item,
.listview > .head > .item {
    background-color: var(--color-bg-2);
}

.listview > .list > .item.actions-is-shown > .actions {
    background-color: var(--color-preloader-bg);
}

.listview > .list > .item.actions-is-shown > .actions .btn {

    box-shadow: 0 0 1rem rgba(255,255,255,0.3);
    border-color: rgb(255,255,255);
    color: #000;
    background-color: rgb(255,255,255);
}

.listview .head .item {
    background-color: var(--color-fg-1);
    color: var(--color-bg-3);
}

.listview .head .item:hover {
    background-color: var(--color-fg-0);
}

.listview .head .item.is-disabled,
.listview .head .item.is-disabled:hover {
    background-color: var(--color-fg-1);
    color: var(--color-bg-3);
}

.listview > .list > .message {
    background-color: var(--color-bg-3);
}

.listview > .list > .item,
.listview > .list > .item:hover {
    background: var(--listview-list-item-background);
}

.listview > .list > .item > .content.default > .filename {
    background: var(--listview-list-item-filename-background);
}




/*
    Stripes
*/

/*.stripes {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.05) 20px,
        rgba(255,255,255,0) 20px,
        rgba(255,255,255,0) 40px
    );
}

.stripes.is-loading {
    background-image: none;
}*/

/*
    Gridded
*/

.gridded {
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px)
    ;
    background-size: 10px 10px, 10px 10px, 40px 40px, 40px 40px;
    background-repeat: repeat;
    background-position: 0 0;
}


/*---------------------------------------
    Activities
---------------------------------------*/

.activity {
    background-color: var(--color-bg-1);
}

.activity .panel {
    background-color: var(--color-bg-2);
}