:root {
    --brand: #978876;
    --brand-dark: #776856;
    --brand-nocturno: #473826;
    --brand-light: #f5f4f0;

    --brand-green: #608068;

    --brand-warning: #fef8f8;
    --brand-warning-dark: #c00000;

    --cp-brand-purple: purple;

    --brand-1: white;
    --brand-2: white;
    --brand-3: white;

    --workspace: #101010;
    --panel: #3e4240;
    --panel-header: #909090;

    --border-outer: #202020;
    --border-inner: #080808;

    --text-active: #c0c0c0;
    --text-muted: #b0b0b0;

    --text-info: #606060;
    --text-info-reverse: #e0e0e0;

    --option-hover: #4e5250;
    /*--option-selected: #2e3230;*/
    --option-selected: #101010;

    --text-1: white;
    --text-2: black;
    --text-3: silver;
    --text-4: silver;
    --text-5: silver;

    --outer-border: purple;
    --dragger-color: white;
    --dragger-opacity: 15%;

    --active-input-field: lightyellow;
}

.flt-brand {filter: brightness(0) saturate(100%) invert(60%) sepia(7%) saturate(995%) hue-rotate(352deg) brightness(90%) contrast(86%);}
.flt-brand-dark {filter: brightness(0) saturate(100%) invert(40%) sepia(38%) saturate(239%) hue-rotate(353deg) brightness(94%) contrast(90%);}
.flt-brand-nocturno {filter: brightness(0) saturate(100%) invert(24%) sepia(4%) saturate(4092%) hue-rotate(352deg) brightness(98%) contrast(80%);}
.flt-brand-light {filter: brightness(0) saturate(100%) invert(99%) sepia(4%) saturate(3552%) hue-rotate(296deg) brightness(115%) contrast(92%);}

.text-brand { color: var(--brand); }
.text-brand-dark { color: var(--brand-dark); }
.text-brand-light { color: var(--brand-light); }
.text-brand-nocturno { color: var(--brand-nocturno); }
.text-brand-green { color: var(--brand-green);}

.bg-brand { background-color: var(--brand); }
.bg-brand-dark { background-color: var(--brand-dark); }
.bg-brand-light { background-color: var(--brand-light);  }
.bg-brand-light.hover:hover { background-color: var(--brand-nocturno); color: var(--brand-light); }
.bg-brand-nocturno { background-color: var(--brand-nocturno);}
.bg-brand-warning { background-color: var(--brand-warning) !important;}
.bg-brand-green { background-color: var(--brand-green) !important;}

.border-brand-warning { border-color: var(--brand-warning-dark) !important;}
.border-brand { border-color: var(--brand) !important;}
.border-brand-nocturno { border-color: var(--brand-nocturno) !important;}
.bg-hover-brand-light:hover { background-color: var(--brand-light) !important; }
.bg-hover-brand-dark:hover { background-color: var(--brand-dark) !important; }
.bg-hover-brand-nocturno:hover { background-color: var(--brand-nocturno) !important; }