/*  Theme colour variables */
:root {
    --baseR: 127; --baseG: 127; --baseB:127;
    --color1: #191919;
    --color2: #333333;
    --color3: #4c4c4c;
    --color4: #666666;
    --color5: #7f7f7f;
    --color6: #999999;
    --color7: #b2b2b2;
    --color8: #cccccc;
    --color9: #e5e5e5;
    --modal: rgba(var(--baseR), var(--baseG), var(--baseB), 0.3);
    --menu:  rgba( var(--baseR), var(--baseG), var(--baseB), 0.8);
    --shadow1: 0 0.3em 0.3em -1px var(--color5);
    --shadow2: 0.2em 0.2em rgb(var(--baseR), var(--baseG), var(--baseB), 80%), 0.6em 0.6em 0.6em rgb(var(--baseR), var(--baseG), var(--baseB), 50%);
    
    --gradient-down: linear-gradient( 0deg, var(--color7), var(--color5));
    --gradient-up: linear-gradient( 0deg,  var(--color5), var(--color7));
    --gradient-ltr: linear-gradient( 90deg,  var(--color7), var(--color5));
    --gradient-rtl: linear-gradient( 90deg,  var(--color5), var(--color7));
    --gradient-databar: linear-gradient( var(--color5) 0%, transparent 20%, transparent 80%, var(--color5) 100%);

}

/*  Combination colours foreground/background */
.ows-theme0 { color: inherit; background: inherit;}
.ows-theme1, .ows-theme1-hvr:hover { color: var(--color9); background-color: var(--color1)!important;}
.ows-theme2, .ows-theme2-hvr:hover { color: var(--color9); background-color: var(--color2)!important;}
.ows-theme3, .ows-theme3-hvr:hover { color: var(--color9); background-color: var(--color3)!important;}
.ows-theme4, .ows-theme4-hvr:hover { color: var(--color9); background-color: var(--color4)!important;}
.ows-theme5, .ows-theme5-hvr:hover { color: var(--color9); background-color: var(--color5)!important;}
.ows-theme6, .ows-theme6-hvr:hover { color: var(--color1); background-color: var(--color6)!important;}
.ows-theme7, .ows-theme7-hvr:hover { color: var(--color1); background-color: var(--color7)!important;}
.ows-theme8, .ows-theme8-hvr:hover { color: var(--color1); background-color: var(--color8)!important;}
.ows-theme9, .ows-theme9-hvr:hover { color: var(--color1); background-color: var(--color9)!important}

/* Gradients ~ You may wish to adjust the foreground colours used */
.ows-theme-grad-down            { background-color: var(--gradient-down);color: var(--color1)!important}
.ows-theme-grad-down-hvr:hover  { background-color: var(--gradient-down);color: var(--color9)!important}
.ows-theme-grad-up              { background-color: var(--gradient-up);color: var(--color1)!important}
.ows-theme-grad-up-hvr:hover    { background-color: var(--gradient-up);color: var(--color9)!important}
.ows-theme-grad-ltr             { background-color: var(--gradient-ltr);color: var(--color1)!important}
.ows-theme-grad-ltr-hvr:hover   { background-color: var(--gradient-ltr);color: var(--color9)!important}
.ows-theme-grad-rtl             { background-color: var(--gradient-rtl);color: var(--color1)!important}
.ows-theme-grad-rtl-hvr:hover   { background-color: var(--gradient-rtl);color: var(--color9)!important}

/*  Gradients */
.ows-theme-grad-down, .ows-theme-grad-down-hvr:hover { background: var(--gradient-down)!important; color: var(--color2)!important;}
.ows-theme-grad-up, .ows-theme-grad-up-hvr:hover { background: var(--gradient-up)!important; color: var(--color2)!important;}
.ows-theme-grad-rtl, .ows-theme-grad-rtl-hvr:hover { background: var(--gradient-rtl)!important; color: var(--color2)!important;}
.ows-theme-grad-ltr, .ows-theme-grad-ltr-hvr:hover { background: var(--gradient-ltr)!important; color: var(--color2)!important;}