/*
getvar function - returns a variable
arguments:
$var - initial var name.  required
$suffix - appended to varname - default null
$fallback - provides a fallback in case the variable resolves to null
*/
/*
alphavar function
mixes a given variable with transparent black
arguments
$var - css variable to mix
$amount - strength of opacity
*/
/* 	
mixVar function
mixes a two variables
arguments : 
$var - css variable to mix
$amount - strength of opacity
*/
/*
varname function
returns the variable name with a given suffix, not the variable itself
arguments:
$var - variable name
$suffix 
*/
.sd-button {
  --button-color:var(--cv-link);
  --button-hover:var(--cv-link-shade);
  --button-text:var(--cv-link-contrast);
  --button-light:color-mix(in hsl, var(--button-color) 10%, rgba(0, 0, 0, 0));
  --button-mid:color-mix(in hsl, var(--button-color) 20%, rgba(0, 0, 0, 0));
}

.sd-button.alert {
  --button-color:var(--cv-red);
  --button-text:var(--cv-red-contrast);
  --button-hover:var(--cv-red-shade);
  --button-light:color-mix(in hsl, var(--cv-red) 10%, rgba(0, 0, 0, 0));
}
.sd-button.pending {
  --button-color:var(--cv-orange);
  --button-text:var(--cv-orange-contrast);
  --button-hover:var(--cv-orange-shade);
  --button-light:color-mix(in hsl, var(--cv-orange) 10%, rgba(0, 0, 0, 0));
}
.sd-button.success {
  --button-color:var(--cv-green);
  --button-text:var(--cv-green-contrast);
  --button-hover:var(--cv-green-shade);
  --button-light:color-mix(in hsl, var(--cv-green) 10%, rgba(0, 0, 0, 0));
}
.sd-button.notification {
  --button-color:var(--cv-babyblue);
  --button-text:var(--cv-babyblue-contrast);
  --button-hover:var(--cv-babyblue-shade);
  --button-light:color-mix(in hsl, var(--cv-babyblue) 10%, rgba(0, 0, 0, 0));
}
.sd-button.link {
  --button-color:var(--cv-babyblue);
  --button-text:var(--cv-babyblue-contrast);
  --button-hover:var(--cv-babyblue-shade);
  --button-light:color-mix(in hsl, var(--cv-babyblue) 10%, rgba(0, 0, 0, 0));
}

.striped-button.striped-button {
  background-image: repeating-linear-gradient(135deg, var(--button-color), var(--button-color) 10px, var(--button-hover) 10px, var(--button-hover) 20px);
  overflow: hidden;
  box-shadow: 0 0 0 1px inset var(--button-mid);
}
.striped-button.striped-button:hover {
  --temp:70%;
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--button-color) var(--temp), var(--cv-g-500)), color-mix(in srgb, var(--button-color) var(--temp), var(--cv-g-500)) 10px, color-mix(in srgb, var(--button-color) calc(var(--temp) / 1.5), var(--cv-g-500)) 10px, color-mix(in srgb, var(--button-color) calc(var(--temp) / 1.5), var(--cv-g-500)) 20px);
}

.striped-thin-button.striped-thin-button {
  --temp:80%;
  background-image: repeating-linear-gradient(135deg, var(--button-color), var(--button-color) 4px, color-mix(in srgb, var(--button-color) calc(var(--temp)), var(--cv-w)) 4px, color-mix(in srgb, var(--button-color) calc(var(--temp)), var(--cv-w)) 8px);
  overflow: hidden;
}
.striped-thin-button.striped-thin-button:hover {
  --temp:70%;
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--button-color) var(--temp), var(--button-hover)), color-mix(in srgb, var(--button-color) var(--temp), var(--button-hover)) 4px, color-mix(in srgb, var(--button-color) calc(var(--temp) / 1.25), var(--button-hover)) 4px, color-mix(in srgb, var(--button-color) calc(var(--temp) / 1.25), var(--button-hover)) 8px);
}

.sd-button.on-dark.on-dark {
  --button-color:var(--cv-w);
  --button-text:var(--cv-w-contrast);
  --button-hover:var(--cv-w-shade);
  --button-light:color-mix(in hsl, var(--cv-w) 10%, rgba(0, 0, 0, 0));
}
.sd-button.on-dark.on-dark.quarterly {
  --button-color:var(--cv-w);
  --button-hover:var(--cv-link) ;
}

.on-dark.on-dark:not(button, .sd-button) .secondary {
  --button-color:white;
  --button-text:white;
  --button-hover:color-mix(in hsl, var(--cv-w) 10%, rgba(0, 0, 0, 0));
  --button-light:color-mix(in hsl, var(--cv-w) 10%, rgba(0, 0, 0, 0));
}
.on-dark.on-dark:not(button, .sd-button) .quarterly {
  color: white;
}
.on-dark.on-dark:not(button, .sd-button) .secondary:hover,
.on-dark.on-dark:not(button, .sd-button) .quarterly:hover {
  background-color: color-mix(in hsl, var(--cv-link) 0.4, rgba(0, 0, 0, 0));
}

.zebra-button.zebra-button {
  background: repeating-linear-gradient(45deg, tint(var(--cv-orange), 20%), tint(var(--cv-orange), 20%) 5px, var(--cv-orange) 5px, var(--cv-orange) 10px);
}

:root {
  --body-font-family:"inter";
  --header-font-family:"inter";
}

body {
  --body-font-stack:var(--body-font-family),"Helvetica",Arial,sans-serif;
  --header-font-stack:var(--header-font-family),"Helvetica",Arial,sans-serif;
  color: var(--body-font-color, var(--cv-g-400));
  accent-color: var(--primary-color);
  font-family: var(--body-font-stack);
}

hr {
  border-color: var(--cv-border);
  width: 100%;
}

:where(h1, h2, h3, h4, h5, h6, .sd-heading) {
  font-family: var(--header-font-stack);
}
:where(h1, h2, h3, h4, h5, h6, .sd-heading) body:not(:has[data-theme]), :where([data-theme=light]) :where(h1, h2, h3, h4, h5, h6, .sd-heading) {
  color: var(--primary-color);
}
:where([data-theme=dark]) :where(h1, h2, h3, h4, h5, h6, .sd-heading) {
  color: var(--cv-g-350);
}

:where(a, .clickable, .isClickable) {
  color: var(--darkLink, var(--cv-g-500));
}
:where(a, .clickable, .isClickable):hover {
  color: var(--cv-link);
}

@font-face {
  font-family: "inter";
  src: url("../resources/font/Inter/inter-light.eot");
  src: url("../resources/font/Inter/inter-light.eot?#iefix") format("embedded-opentype"), url("../resources/font/Inter/inter-light.woff") format("woff"), url("../resources/font/Inter/inter-light.woff") format("woff2"), url("../resources/font/Inter/inter-light.ttf") format("truetype"), url("../resources/font/Inter/inter-light.svg#inter") format("svg");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "inter";
  src: url("../resources/font/Inter/inter-lightitalic.eot");
  src: url("../resources/font/Inter/inter-lightitalic.eot?#iefix") format("embedded-opentype"), url("../resources/font/Inter/inter-lightitalic.woff") format("woff"), url("../resources/font/Inter/inter-lightitalic.woff") format("woff2"), url("../resources/font/Inter/inter-lightitalic.ttf") format("truetype"), url("../resources/font/Inter/inter-lightitalic.svg#inter") format("svg");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "inter";
  src: url("../resources/font/Inter/inter-regular.eot");
  src: url("../resources/font/Inter/inter-regular.eot?#iefix") format("embedded-opentype"), url("../resources/font/Inter/inter-regular.woff") format("woff"), url("../resources/font/Inter/inter-regular.woff") format("woff2"), url("../resources/font/Inter/inter-regular.ttf") format("truetype"), url("../resources/font/Inter/inter-regular.svg#inter") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "inter";
  src: url("../resources/font/Inter/inter-medium.eot");
  src: url("../resources/font/Inter/inter-medium.eot?#iefix") format("embedded-opentype"), url("../resources/font/Inter/inter-medium.woff") format("woff"), url("../resources/font/Inter/inter-medium.woff") format("woff2"), url("../resources/font/Inter/inter-medium.ttf") format("truetype"), url("../resources/font/Inter/inter-medium.svg#inter") format("svg");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "inter";
  src: url("../resources/font/Inter/inter-mediumitalic.eot");
  src: url("../resources/font/Inter/inter-mediumitalic.eot?#iefix") format("embedded-opentype"), url("../resources/font/Inter/inter-mediumitalic.woff") format("woff"), url("../resources/font/Inter/inter-mediumitalic.woff") format("woff2"), url("../resources/font/Inter/inter-mediumitalic.ttf") format("truetype"), url("../resources/font/Inter/inter-mediumitalic.svg#inter") format("svg");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "inter";
  src: url("../resources/font/Inter/inter-semibold.eot");
  src: url("../resources/font/Inter/inter-semibold.eot?#iefix") format("embedded-opentype"), url("../resources/font/Inter/inter-semibold.woff") format("woff"), url("../resources/font/Inter/inter-semibold.woff") format("woff2"), url("../resources/font/Inter/inter-semibold.ttf") format("truetype"), url("../resources/font/Inter/inter-semibold.svg#inter") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "inter";
  src: url("../resources/font/Inter/inter-bold.eot");
  src: url("../resources/font/Inter/inter-bold.eot?#iefix") format("embedded-opentype"), url("../resources/font/Inter/inter-bold.woff") format("woff"), url("../resources/font/Inter/inter-bold.woff") format("woff2"), url("../resources/font/Inter/inter-bold.ttf") format("truetype"), url("../resources/font/Inter/inter-bold.svg#inter") format("svg");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "inter";
  src: url("../resources/font/Inter/inter-bolditalic.eot");
  src: url("../resources/font/Inter/inter-bolditalic.eot?#iefix") format("embedded-opentype"), url("../resources/font/Inter/inter-bolditalic.woff") format("woff"), url("../resources/font/Inter/inter-bolditalic.woff") format("woff2"), url("../resources/font/Inter/inter-bolditalic.ttf") format("truetype"), url("../resources/font/Inter/inter-bolditalic.svg#inter") format("svg");
  font-weight: 700;
  font-style: italic;
}
/*
I'm leaving this here as a remonider, this is how we need to write the font's in json
    "body-font-family":"inter",
    "header-font-family":"inter",
 "font":{
        "name":"inter",
        "path":"/resources/font/inter/static",
        "weights":[
            {"name":"thin","weight":200,"style":"normal"},
            {"name":"regular","weight":400,"style":"normal"},
            {"name":"medium","weight":500,"style":"normal"},
            {"name":"semibold","weight":600,"style":"normal"},
            {"name":"bold","weight":700,"style":"normal"}
        ]

    }     
    */
a,
.clickable,
.isClickable {
  transition: all 0.3 ease;
  color: var(--cv-g-500);
}
a:hover,
.clickable:hover,
.isClickable:hover {
  color: var(--cv-link);
  text-decoration: none;
}

hr {
  border-color: var(--cv-g-200);
}

.formItemLabel,
.likeFormItemLabel {
  color: var(--cv-g-400);
}

.tab-button-group button.selected {
  background-color: var(--cv-w);
  border-top-color: var(--cv-link);
  color: var(--cv-link);
}

.cv-g-500-bg .cv-w-bg a {
  color: var(--cv-w-contrast);
}

body {
  --cv-p: var(--primary-color);
  --cv-p-shade: var(--primary-color-shade);
  --cv-p-light: var(--primary-color-light);
  --cv-p-contrast: var(--primary-color-contrast);
  --cv-s: var(--secondary-color);
  --cv-s-shade: var(--secondary-color-shade);
  --cv-s-light: var(--secondary-color-light);
  --cv-s-contrast: var(--secondary-color-contrast);
  --cv-t: var(--tertiary-color);
  --cv-t-shade: var(--tertiary-color-shade);
  --cv-t-light: var(--tertiary-color-light);
  --cv-t-contrast: var(--tertiary-color-contrast);
  --cv-q: var(--quaternary-color);
  --cv-q-shade: var(--quaternary-color-shade);
  --cv-q-light: var(--quaternary-color-light);
  --cv-q-contrast: var(--quaternary-color-contrast);
  --cv-alert: var(--cv-red);
  --cv-alert-shade: var(--cv-red-shade);
  --cv-alert-light: var(--cv-red-light);
  --cv-alert-contrast: var(--cv-red-contrast);
  --cv-pending: var(--cv-orange);
  --cv-pending-shade: var(--cv-orange-shade);
  --cv-pending-light: var(--cv-orange-light);
  --cv-pending-contrast: var(--cv-orange-contrast);
  --cv-success: var(--cv-green);
  --cv-success-shade: var(--cv-green-shade);
  --cv-success-light: var(--cv-green-light);
  --cv-success-contrast: var(--cv-green-contrast);
  --cv-notification: var(--cv-babyblue);
  --cv-notification-shade: var(--cv-babyblue-shade);
  --cv-notification-light: var(--cv-babyblue-light);
  --cv-notification-contrast: var(--cv-babyblue-contrast);
  --cv-border: var(--cv-g-200);
  --cv-border-contrast: var(--cv-g-200-contrast);
  --cv-primary: var(--primary-color);
  --cv-primary-contrast: var(--primary-color-contrast);
  --cv-p: var(--primary-color);
  --cv-p-contrast: var(--primary-color-contrast);
  --cv-secondary: var(--secondary-color);
  --cv-secondary-contrast: var(--secondary-color-contrast);
  --cv-secondary-contrast: var(--secondary-color-contrast);
  --cv-secondary-contrast-contrast: var(--secondary-color-contrast-contrast);
  --cv-secondary-light: var(--secondary-color-light);
  --cv-secondary-light-contrast: var(--secondary-color-light-contrast);
  --cv-secondary-shade: var(--secondary-color-shade);
  --cv-secondary-shade-contrast: var(--secondary-color-shade-contrast);
  --cv-tertiary: var(--tertiary-color);
  --cv-tertiary-contrast: var(--tertiary-color-contrast);
  --cv-tertiary-contrast: var(--tertiary-color-contrast);
  --cv-tertiary-contrast-contrast: var(--tertiary-color-contrast-contrast);
  --cv-tertiary-light: var(--tertiary-color-light);
  --cv-tertiary-light-contrast: var(--tertiary-color-light-contrast);
  --cv-tertiary-shade: var(--tertiary-color-shade);
  --cv-tertiary-shade-contrast: var(--tertiary-color-shade-contrast);
  --cv-quarterly: var(--quaternary-color);
  --cv-quarterly-contrast: var(--quaternary-color-contrast);
  --cv-quarterly-contrast: var(--quaternary-color-contrast);
  --cv-quarterly-contrast-contrast: var(--quaternary-color-contrast-contrast);
  --cv-quaternary-color-light: var(--quaternary-color-light);
  --cv-quaternary-color-light-contrast: var(--quaternary-color-light-contrast);
  --cv-quaternary-color-shade: var(--quaternary-color-shade);
  --cv-quaternary-color-shade-contrast: var(--quaternary-color-shade-contrast);
  --cv-q: var(--quaternary-color);
  --cv-q-contrast: var(--quaternary-color-contrast);
  --cv-q-contrast: var(--quaternary-color-contrast);
  --cv-q-contrast-contrast: var(--quaternary-color-contrast-contrast);
  --cv-q-light: var(--quaternary-color-light);
  --cv-q-light-contrast: var(--quaternary-color-light-contrast);
  --cv-q-shade: var(--quaternary-color-shade);
  --cv-q-shade-contrast: var(--quaternary-color-shade-contrast);
  --modal-mix: color-mix(in srgb, var(--primary-color) 50%, var(--cv-g-400));
}

:root {
  --cv-p: var(--primary-color);
  --cv-p-shade: var(--primary-color-shade);
  --cv-p-light: var(--primary-color-light);
  --cv-p-contrast: var(--primary-color-contrast);
  --cv-s: var(--secondary-color);
  --cv-s-shade: var(--secondary-color-shade);
  --cv-s-light: var(--secondary-color-light);
  --cv-s-contrast: var(--secondary-color-contrast);
  --cv-t: var(--tertiary-color);
  --cv-t-shade: var(--tertiary-color-shade);
  --cv-t-light: var(--tertiary-color-light);
  --cv-t-contrast: var(--tertiary-color-contrast);
  --cv-q: var(--quaternary-color);
  --cv-q-shade: var(--quaternary-color-shade);
  --cv-q-light: var(--quaternary-color-light);
  --cv-q-contrast: var(--quaternary-color-contrast);
  --cv-alert: var(--cv-red);
  --cv-alert-shade: var(--cv-red-shade);
  --cv-alert-light: var(--cv-red-light);
  --cv-alert-contrast: var(--cv-red-contrast);
  --cv-pending: var(--cv-orange);
  --cv-pending-shade: var(--cv-orange-shade);
  --cv-pending-light: var(--cv-orange-light);
  --cv-pending-contrast: var(--cv-orange-contrast);
  --cv-success: var(--cv-green);
  --cv-success-shade: var(--cv-green-shade);
  --cv-success-light: var(--cv-green-light);
  --cv-success-contrast: var(--cv-green-contrast);
  --cv-notification: var(--cv-babyblue);
  --cv-notification-shade: var(--cv-babyblue-shade);
  --cv-notification-light: var(--cv-babyblue-light);
  --cv-notification-contrast: var(--cv-babyblue-contrast);
}

:where(.cv-p-bg) a {
  color: var(--primary-color-contrast);
}
:where(.cv-p-bg) a:hover {
  color: var(--cv-link);
}

.cv-p-bg {
  background-color: var(--primary-color);
  color: var(--primary-color-contrast);
}
.cv-p-border {
  border-color: var(--primary-color);
}
.cv-p-text {
  color: var(--primary-color);
}
:where([data-theme=light]) .cv-p-tag.cv-p-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--primary-color));
  background-color: color-mix(in srgb, var(--primary-color) var(--bgmix), var(--primary-color-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) var(--bormix), var(--primary-color-light));
}
:where([data-theme=light]) .cv-p-tag.cv-p-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--primary-color) var(--bgmix), var(--primary-color-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--primary-color));
}
:where([data-theme=dark]) .cv-p-tag.cv-p-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--primary-color));
  background-color: color-mix(in srgb, var(--primary-color) var(--bgmix), var(--primary-color-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) var(--bormix), var(--primary-color-shade));
}
:where([data-theme=dark]) .cv-p-tag.cv-p-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--primary-color) var(--bgmix), var(--primary-color-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--primary-color));
}
.cv-p-tag.cv-p-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--primary-color-contrast);
}

:where(.cv-s-bg) a {
  color: var(--secondary-color-contrast);
}
:where(.cv-s-bg) a:hover {
  color: var(--cv-link);
}

.cv-s-bg {
  background-color: var(--secondary-color);
  color: var(--secondary-color-contrast);
}
.cv-s-border {
  border-color: var(--secondary-color);
}
.cv-s-text {
  color: var(--secondary-color);
}
:where([data-theme=light]) .cv-s-tag.cv-s-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--secondary-color));
  background-color: color-mix(in srgb, var(--secondary-color) var(--bgmix), var(--secondary-color-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--secondary-color) var(--bormix), var(--secondary-color-light));
}
:where([data-theme=light]) .cv-s-tag.cv-s-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--secondary-color) var(--bgmix), var(--secondary-color-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--secondary-color));
}
:where([data-theme=dark]) .cv-s-tag.cv-s-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--secondary-color));
  background-color: color-mix(in srgb, var(--secondary-color) var(--bgmix), var(--secondary-color-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--secondary-color) var(--bormix), var(--secondary-color-shade));
}
:where([data-theme=dark]) .cv-s-tag.cv-s-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--secondary-color) var(--bgmix), var(--secondary-color-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--secondary-color));
}
.cv-s-tag.cv-s-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--secondary-color-contrast);
}

:where(.cv-t-bg) a {
  color: var(--tertiary-color-contrast);
}
:where(.cv-t-bg) a:hover {
  color: var(--cv-link);
}

.cv-t-bg {
  background-color: var(--tertiary-color);
  color: var(--tertiary-color-contrast);
}
.cv-t-border {
  border-color: var(--tertiary-color);
}
.cv-t-text {
  color: var(--tertiary-color);
}
:where([data-theme=light]) .cv-t-tag.cv-t-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--tertiary-color));
  background-color: color-mix(in srgb, var(--tertiary-color) var(--bgmix), var(--tertiary-color-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tertiary-color) var(--bormix), var(--tertiary-color-light));
}
:where([data-theme=light]) .cv-t-tag.cv-t-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--tertiary-color) var(--bgmix), var(--tertiary-color-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--tertiary-color));
}
:where([data-theme=dark]) .cv-t-tag.cv-t-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--tertiary-color));
  background-color: color-mix(in srgb, var(--tertiary-color) var(--bgmix), var(--tertiary-color-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tertiary-color) var(--bormix), var(--tertiary-color-shade));
}
:where([data-theme=dark]) .cv-t-tag.cv-t-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--tertiary-color) var(--bgmix), var(--tertiary-color-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--tertiary-color));
}
.cv-t-tag.cv-t-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--tertiary-color-contrast);
}

:where(.cv-q-bg) a {
  color: var(--quaternary-color-contrast);
}
:where(.cv-q-bg) a:hover {
  color: var(--cv-link);
}

.cv-q-bg {
  background-color: var(--quaternary-color);
  color: var(--quaternary-color-contrast);
}
.cv-q-border {
  border-color: var(--quaternary-color);
}
.cv-q-text {
  color: var(--quaternary-color);
}
:where([data-theme=light]) .cv-q-tag.cv-q-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--quaternary-color));
  background-color: color-mix(in srgb, var(--quaternary-color) var(--bgmix), var(--quaternary-color-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--quaternary-color) var(--bormix), var(--quaternary-color-light));
}
:where([data-theme=light]) .cv-q-tag.cv-q-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--quaternary-color) var(--bgmix), var(--quaternary-color-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--quaternary-color));
}
:where([data-theme=dark]) .cv-q-tag.cv-q-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--quaternary-color));
  background-color: color-mix(in srgb, var(--quaternary-color) var(--bgmix), var(--quaternary-color-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--quaternary-color) var(--bormix), var(--quaternary-color-shade));
}
:where([data-theme=dark]) .cv-q-tag.cv-q-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--quaternary-color) var(--bgmix), var(--quaternary-color-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--quaternary-color));
}
.cv-q-tag.cv-q-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--quaternary-color-contrast);
}

:where(.cv-alert-bg) a {
  color: var(--cv-red-contrast);
}
:where(.cv-alert-bg) a:hover {
  color: var(--cv-link);
}

.cv-alert-bg {
  background-color: var(--cv-red);
  color: var(--cv-red-contrast);
}
.cv-alert-border {
  border-color: var(--cv-red);
}
.cv-alert-text {
  color: var(--cv-red);
}
:where([data-theme=light]) .cv-alert-tag.cv-alert-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-red));
  background-color: color-mix(in srgb, var(--cv-red) var(--bgmix), var(--cv-red-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-red) var(--bormix), var(--cv-red-light));
}
:where([data-theme=light]) .cv-alert-tag.cv-alert-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-red) var(--bgmix), var(--cv-red-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-red));
}
:where([data-theme=dark]) .cv-alert-tag.cv-alert-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-red));
  background-color: color-mix(in srgb, var(--cv-red) var(--bgmix), var(--cv-red-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-red) var(--bormix), var(--cv-red-shade));
}
:where([data-theme=dark]) .cv-alert-tag.cv-alert-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-red) var(--bgmix), var(--cv-red-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-red));
}
.cv-alert-tag.cv-alert-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-red-contrast);
}

:where(.cv-pending-bg) a {
  color: var(--cv-orange-contrast);
}
:where(.cv-pending-bg) a:hover {
  color: var(--cv-link);
}

.cv-pending-bg {
  background-color: var(--cv-orange);
  color: var(--cv-orange-contrast);
}
.cv-pending-border {
  border-color: var(--cv-orange);
}
.cv-pending-text {
  color: var(--cv-orange);
}
:where([data-theme=light]) .cv-pending-tag.cv-pending-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-orange));
  background-color: color-mix(in srgb, var(--cv-orange) var(--bgmix), var(--cv-orange-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-orange) var(--bormix), var(--cv-orange-light));
}
:where([data-theme=light]) .cv-pending-tag.cv-pending-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-orange) var(--bgmix), var(--cv-orange-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-orange));
}
:where([data-theme=dark]) .cv-pending-tag.cv-pending-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-orange));
  background-color: color-mix(in srgb, var(--cv-orange) var(--bgmix), var(--cv-orange-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-orange) var(--bormix), var(--cv-orange-shade));
}
:where([data-theme=dark]) .cv-pending-tag.cv-pending-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-orange) var(--bgmix), var(--cv-orange-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-orange));
}
.cv-pending-tag.cv-pending-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-orange-contrast);
}

:where(.cv-success-bg) a {
  color: var(--cv-green-contrast);
}
:where(.cv-success-bg) a:hover {
  color: var(--cv-link);
}

.cv-success-bg {
  background-color: var(--cv-green);
  color: var(--cv-green-contrast);
}
.cv-success-border {
  border-color: var(--cv-green);
}
.cv-success-text {
  color: var(--cv-green);
}
:where([data-theme=light]) .cv-success-tag.cv-success-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-green));
  background-color: color-mix(in srgb, var(--cv-green) var(--bgmix), var(--cv-green-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-green) var(--bormix), var(--cv-green-light));
}
:where([data-theme=light]) .cv-success-tag.cv-success-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-green) var(--bgmix), var(--cv-green-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-green));
}
:where([data-theme=dark]) .cv-success-tag.cv-success-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-green));
  background-color: color-mix(in srgb, var(--cv-green) var(--bgmix), var(--cv-green-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-green) var(--bormix), var(--cv-green-shade));
}
:where([data-theme=dark]) .cv-success-tag.cv-success-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-green) var(--bgmix), var(--cv-green-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-green));
}
.cv-success-tag.cv-success-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-green-contrast);
}

:where(.cv-notification-bg) a {
  color: var(--cv-babyblue-contrast);
}
:where(.cv-notification-bg) a:hover {
  color: var(--cv-link);
}

.cv-notification-bg {
  background-color: var(--cv-babyblue);
  color: var(--cv-babyblue-contrast);
}
.cv-notification-border {
  border-color: var(--cv-babyblue);
}
.cv-notification-text {
  color: var(--cv-babyblue);
}
:where([data-theme=light]) .cv-notification-tag.cv-notification-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-babyblue));
  background-color: color-mix(in srgb, var(--cv-babyblue) var(--bgmix), var(--cv-babyblue-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-babyblue) var(--bormix), var(--cv-babyblue-light));
}
:where([data-theme=light]) .cv-notification-tag.cv-notification-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-babyblue) var(--bgmix), var(--cv-babyblue-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-babyblue));
}
:where([data-theme=dark]) .cv-notification-tag.cv-notification-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-babyblue));
  background-color: color-mix(in srgb, var(--cv-babyblue) var(--bgmix), var(--cv-babyblue-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-babyblue) var(--bormix), var(--cv-babyblue-shade));
}
:where([data-theme=dark]) .cv-notification-tag.cv-notification-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-babyblue) var(--bgmix), var(--cv-babyblue-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-babyblue));
}
.cv-notification-tag.cv-notification-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-babyblue-contrast);
}

:where(.cv-w-bg) a {
  color: var(--cv-w-contrast);
}
:where(.cv-w-bg) a:hover {
  color: var(--cv-link);
}

.cv-w-bg {
  background-color: var(--cv-w);
  color: var(--cv-w-contrast);
}
.cv-w-border {
  border-color: var(--cv-w);
}
.cv-w-text {
  color: var(--cv-w);
}
:where([data-theme=light]) .cv-w-tag.cv-w-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-w));
  background-color: color-mix(in srgb, var(--cv-w) var(--bgmix), var(--cv-w-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-w) var(--bormix), var(--cv-w-light));
}
:where([data-theme=light]) .cv-w-tag.cv-w-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-w) var(--bgmix), var(--cv-w-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-w));
}
:where([data-theme=dark]) .cv-w-tag.cv-w-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-w));
  background-color: color-mix(in srgb, var(--cv-w) var(--bgmix), var(--cv-w-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-w) var(--bormix), var(--cv-w-shade));
}
:where([data-theme=dark]) .cv-w-tag.cv-w-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-w) var(--bgmix), var(--cv-w-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-w));
}
.cv-w-tag.cv-w-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-w-contrast);
}

:where(.cv-g-100-bg) a {
  color: var(--cv-g-100-contrast);
}
:where(.cv-g-100-bg) a:hover {
  color: var(--cv-link);
}

.cv-g-100-bg {
  background-color: var(--cv-g-100);
  color: var(--cv-g-100-contrast);
}
.cv-g-100-border {
  border-color: var(--cv-g-100);
}
.cv-g-100-text {
  color: var(--cv-g-100);
}
:where([data-theme=light]) .cv-g-100-tag.cv-g-100-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-100));
  background-color: color-mix(in srgb, var(--cv-g-100) var(--bgmix), var(--cv-g-100-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-100) var(--bormix), var(--cv-g-100-light));
}
:where([data-theme=light]) .cv-g-100-tag.cv-g-100-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-100) var(--bgmix), var(--cv-g-100-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-100));
}
:where([data-theme=dark]) .cv-g-100-tag.cv-g-100-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-100));
  background-color: color-mix(in srgb, var(--cv-g-100) var(--bgmix), var(--cv-g-100-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-100) var(--bormix), var(--cv-g-100-shade));
}
:where([data-theme=dark]) .cv-g-100-tag.cv-g-100-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-100) var(--bgmix), var(--cv-g-100-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-100));
}
.cv-g-100-tag.cv-g-100-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-g-100-contrast);
}

:where(.cv-g-110-bg) a {
  color: var(--cv-g-110-contrast);
}
:where(.cv-g-110-bg) a:hover {
  color: var(--cv-link);
}

.cv-g-110-bg {
  background-color: var(--cv-g-110);
  color: var(--cv-g-110-contrast);
}
.cv-g-110-border {
  border-color: var(--cv-g-110);
}
.cv-g-110-text {
  color: var(--cv-g-110);
}
:where([data-theme=light]) .cv-g-110-tag.cv-g-110-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-110));
  background-color: color-mix(in srgb, var(--cv-g-110) var(--bgmix), var(--cv-g-110-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-110) var(--bormix), var(--cv-g-110-light));
}
:where([data-theme=light]) .cv-g-110-tag.cv-g-110-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-110) var(--bgmix), var(--cv-g-110-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-110));
}
:where([data-theme=dark]) .cv-g-110-tag.cv-g-110-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-110));
  background-color: color-mix(in srgb, var(--cv-g-110) var(--bgmix), var(--cv-g-110-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-110) var(--bormix), var(--cv-g-110-shade));
}
:where([data-theme=dark]) .cv-g-110-tag.cv-g-110-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-110) var(--bgmix), var(--cv-g-110-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-110));
}
.cv-g-110-tag.cv-g-110-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-g-110-contrast);
}

:where(.cv-g-120-bg) a {
  color: var(--cv-g-120-contrast);
}
:where(.cv-g-120-bg) a:hover {
  color: var(--cv-link);
}

.cv-g-120-bg {
  background-color: var(--cv-g-120);
  color: var(--cv-g-120-contrast);
}
.cv-g-120-border {
  border-color: var(--cv-g-120);
}
.cv-g-120-text {
  color: var(--cv-g-120);
}
:where([data-theme=light]) .cv-g-120-tag.cv-g-120-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-120));
  background-color: color-mix(in srgb, var(--cv-g-120) var(--bgmix), var(--cv-g-120-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-120) var(--bormix), var(--cv-g-120-light));
}
:where([data-theme=light]) .cv-g-120-tag.cv-g-120-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-120) var(--bgmix), var(--cv-g-120-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-120));
}
:where([data-theme=dark]) .cv-g-120-tag.cv-g-120-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-120));
  background-color: color-mix(in srgb, var(--cv-g-120) var(--bgmix), var(--cv-g-120-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-120) var(--bormix), var(--cv-g-120-shade));
}
:where([data-theme=dark]) .cv-g-120-tag.cv-g-120-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-120) var(--bgmix), var(--cv-g-120-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-120));
}
.cv-g-120-tag.cv-g-120-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-g-120-contrast);
}

:where(.cv-g-130-bg) a {
  color: var(--cv-g-130-contrast);
}
:where(.cv-g-130-bg) a:hover {
  color: var(--cv-link);
}

.cv-g-130-bg {
  background-color: var(--cv-g-130);
  color: var(--cv-g-130-contrast);
}
.cv-g-130-border {
  border-color: var(--cv-g-130);
}
.cv-g-130-text {
  color: var(--cv-g-130);
}
:where([data-theme=light]) .cv-g-130-tag.cv-g-130-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-130));
  background-color: color-mix(in srgb, var(--cv-g-130) var(--bgmix), var(--cv-g-130-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-130) var(--bormix), var(--cv-g-130-light));
}
:where([data-theme=light]) .cv-g-130-tag.cv-g-130-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-130) var(--bgmix), var(--cv-g-130-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-130));
}
:where([data-theme=dark]) .cv-g-130-tag.cv-g-130-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-130));
  background-color: color-mix(in srgb, var(--cv-g-130) var(--bgmix), var(--cv-g-130-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-130) var(--bormix), var(--cv-g-130-shade));
}
:where([data-theme=dark]) .cv-g-130-tag.cv-g-130-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-130) var(--bgmix), var(--cv-g-130-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-130));
}
.cv-g-130-tag.cv-g-130-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-g-130-contrast);
}

:where(.cv-g-200-bg) a {
  color: var(--cv-g-200-contrast);
}
:where(.cv-g-200-bg) a:hover {
  color: var(--cv-link);
}

.cv-g-200-bg {
  background-color: var(--cv-g-200);
  color: var(--cv-g-200-contrast);
}
.cv-g-200-border {
  border-color: var(--cv-g-200);
}
.cv-g-200-text {
  color: var(--cv-g-200);
}
:where([data-theme=light]) .cv-g-200-tag.cv-g-200-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-200));
  background-color: color-mix(in srgb, var(--cv-g-200) var(--bgmix), var(--cv-g-200-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-200) var(--bormix), var(--cv-g-200-light));
}
:where([data-theme=light]) .cv-g-200-tag.cv-g-200-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-200) var(--bgmix), var(--cv-g-200-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-200));
}
:where([data-theme=dark]) .cv-g-200-tag.cv-g-200-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-200));
  background-color: color-mix(in srgb, var(--cv-g-200) var(--bgmix), var(--cv-g-200-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-200) var(--bormix), var(--cv-g-200-shade));
}
:where([data-theme=dark]) .cv-g-200-tag.cv-g-200-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-200) var(--bgmix), var(--cv-g-200-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-200));
}
.cv-g-200-tag.cv-g-200-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-g-200-contrast);
}

:where(.cv-g-300-bg) a {
  color: var(--cv-g-300-contrast);
}
:where(.cv-g-300-bg) a:hover {
  color: var(--cv-link);
}

.cv-g-300-bg {
  background-color: var(--cv-g-300);
  color: var(--cv-g-300-contrast);
}
.cv-g-300-border {
  border-color: var(--cv-g-300);
}
.cv-g-300-text {
  color: var(--cv-g-300);
}
:where([data-theme=light]) .cv-g-300-tag.cv-g-300-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-300));
  background-color: color-mix(in srgb, var(--cv-g-300) var(--bgmix), var(--cv-g-300-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-300) var(--bormix), var(--cv-g-300-light));
}
:where([data-theme=light]) .cv-g-300-tag.cv-g-300-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-300) var(--bgmix), var(--cv-g-300-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-300));
}
:where([data-theme=dark]) .cv-g-300-tag.cv-g-300-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-300));
  background-color: color-mix(in srgb, var(--cv-g-300) var(--bgmix), var(--cv-g-300-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-300) var(--bormix), var(--cv-g-300-shade));
}
:where([data-theme=dark]) .cv-g-300-tag.cv-g-300-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-300) var(--bgmix), var(--cv-g-300-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-300));
}
.cv-g-300-tag.cv-g-300-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-g-300-contrast);
}

:where(.cv-g-350-bg) a {
  color: var(--cv-g-350-contrast);
}
:where(.cv-g-350-bg) a:hover {
  color: var(--cv-link);
}

.cv-g-350-bg {
  background-color: var(--cv-g-350);
  color: var(--cv-g-350-contrast);
}
.cv-g-350-border {
  border-color: var(--cv-g-350);
}
.cv-g-350-text {
  color: var(--cv-g-350);
}
:where([data-theme=light]) .cv-g-350-tag.cv-g-350-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-350));
  background-color: color-mix(in srgb, var(--cv-g-350) var(--bgmix), var(--cv-g-350-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-350) var(--bormix), var(--cv-g-350-light));
}
:where([data-theme=light]) .cv-g-350-tag.cv-g-350-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-350) var(--bgmix), var(--cv-g-350-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-350));
}
:where([data-theme=dark]) .cv-g-350-tag.cv-g-350-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-350));
  background-color: color-mix(in srgb, var(--cv-g-350) var(--bgmix), var(--cv-g-350-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-350) var(--bormix), var(--cv-g-350-shade));
}
:where([data-theme=dark]) .cv-g-350-tag.cv-g-350-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-350) var(--bgmix), var(--cv-g-350-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-350));
}
.cv-g-350-tag.cv-g-350-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-g-350-contrast);
}

:where(.cv-g-400-bg) a {
  color: var(--cv-g-400-contrast);
}
:where(.cv-g-400-bg) a:hover {
  color: var(--cv-link);
}

.cv-g-400-bg {
  background-color: var(--cv-g-400);
  color: var(--cv-g-400-contrast);
}
.cv-g-400-border {
  border-color: var(--cv-g-400);
}
.cv-g-400-text {
  color: var(--cv-g-400);
}
:where([data-theme=light]) .cv-g-400-tag.cv-g-400-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-400));
  background-color: color-mix(in srgb, var(--cv-g-400) var(--bgmix), var(--cv-g-400-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-400) var(--bormix), var(--cv-g-400-light));
}
:where([data-theme=light]) .cv-g-400-tag.cv-g-400-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-400) var(--bgmix), var(--cv-g-400-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-400));
}
:where([data-theme=dark]) .cv-g-400-tag.cv-g-400-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-400));
  background-color: color-mix(in srgb, var(--cv-g-400) var(--bgmix), var(--cv-g-400-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-400) var(--bormix), var(--cv-g-400-shade));
}
:where([data-theme=dark]) .cv-g-400-tag.cv-g-400-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-400) var(--bgmix), var(--cv-g-400-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-400));
}
.cv-g-400-tag.cv-g-400-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-g-400-contrast);
}

:where(.cv-g-500-bg) a {
  color: var(--cv-g-500-contrast);
}
:where(.cv-g-500-bg) a:hover {
  color: var(--cv-link);
}

.cv-g-500-bg {
  background-color: var(--cv-g-500);
  color: var(--cv-g-500-contrast);
}
.cv-g-500-border {
  border-color: var(--cv-g-500);
}
.cv-g-500-text {
  color: var(--cv-g-500);
}
:where([data-theme=light]) .cv-g-500-tag.cv-g-500-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-500));
  background-color: color-mix(in srgb, var(--cv-g-500) var(--bgmix), var(--cv-g-500-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-500) var(--bormix), var(--cv-g-500-light));
}
:where([data-theme=light]) .cv-g-500-tag.cv-g-500-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-500) var(--bgmix), var(--cv-g-500-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-500));
}
:where([data-theme=dark]) .cv-g-500-tag.cv-g-500-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-g-500));
  background-color: color-mix(in srgb, var(--cv-g-500) var(--bgmix), var(--cv-g-500-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-g-500) var(--bormix), var(--cv-g-500-shade));
}
:where([data-theme=dark]) .cv-g-500-tag.cv-g-500-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-g-500) var(--bgmix), var(--cv-g-500-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-g-500));
}
.cv-g-500-tag.cv-g-500-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-g-500-contrast);
}

:where(.cv-b-bg) a {
  color: var(--cv-b-contrast);
}
:where(.cv-b-bg) a:hover {
  color: var(--cv-link);
}

.cv-b-bg {
  background-color: var(--cv-b);
  color: var(--cv-b-contrast);
}
.cv-b-border {
  border-color: var(--cv-b);
}
.cv-b-text {
  color: var(--cv-b);
}
:where([data-theme=light]) .cv-b-tag.cv-b-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-b));
  background-color: color-mix(in srgb, var(--cv-b) var(--bgmix), var(--cv-b-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-b) var(--bormix), var(--cv-b-light));
}
:where([data-theme=light]) .cv-b-tag.cv-b-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-b) var(--bgmix), var(--cv-b-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-b));
}
:where([data-theme=dark]) .cv-b-tag.cv-b-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-b));
  background-color: color-mix(in srgb, var(--cv-b) var(--bgmix), var(--cv-b-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-b) var(--bormix), var(--cv-b-shade));
}
:where([data-theme=dark]) .cv-b-tag.cv-b-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-b) var(--bgmix), var(--cv-b-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-b));
}
.cv-b-tag.cv-b-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-b-contrast);
}

:where(.cv-sg-100-bg) a {
  color: var(--cv-sg-100-contrast);
}
:where(.cv-sg-100-bg) a:hover {
  color: var(--cv-link);
}

.cv-sg-100-bg {
  background-color: var(--cv-sg-100);
  color: var(--cv-sg-100-contrast);
}
.cv-sg-100-border {
  border-color: var(--cv-sg-100);
}
.cv-sg-100-text {
  color: var(--cv-sg-100);
}
:where([data-theme=light]) .cv-sg-100-tag.cv-sg-100-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-sg-100));
  background-color: color-mix(in srgb, var(--cv-sg-100) var(--bgmix), var(--cv-sg-100-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-sg-100) var(--bormix), var(--cv-sg-100-light));
}
:where([data-theme=light]) .cv-sg-100-tag.cv-sg-100-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-sg-100) var(--bgmix), var(--cv-sg-100-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-sg-100));
}
:where([data-theme=dark]) .cv-sg-100-tag.cv-sg-100-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-sg-100));
  background-color: color-mix(in srgb, var(--cv-sg-100) var(--bgmix), var(--cv-sg-100-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-sg-100) var(--bormix), var(--cv-sg-100-shade));
}
:where([data-theme=dark]) .cv-sg-100-tag.cv-sg-100-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-sg-100) var(--bgmix), var(--cv-sg-100-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-sg-100));
}
.cv-sg-100-tag.cv-sg-100-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-sg-100-contrast);
}

:where(.cv-sg-200-bg) a {
  color: var(--cv-sg-200-contrast);
}
:where(.cv-sg-200-bg) a:hover {
  color: var(--cv-link);
}

.cv-sg-200-bg {
  background-color: var(--cv-sg-200);
  color: var(--cv-sg-200-contrast);
}
.cv-sg-200-border {
  border-color: var(--cv-sg-200);
}
.cv-sg-200-text {
  color: var(--cv-sg-200);
}
:where([data-theme=light]) .cv-sg-200-tag.cv-sg-200-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-sg-200));
  background-color: color-mix(in srgb, var(--cv-sg-200) var(--bgmix), var(--cv-sg-200-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-sg-200) var(--bormix), var(--cv-sg-200-light));
}
:where([data-theme=light]) .cv-sg-200-tag.cv-sg-200-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-sg-200) var(--bgmix), var(--cv-sg-200-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-sg-200));
}
:where([data-theme=dark]) .cv-sg-200-tag.cv-sg-200-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-sg-200));
  background-color: color-mix(in srgb, var(--cv-sg-200) var(--bgmix), var(--cv-sg-200-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-sg-200) var(--bormix), var(--cv-sg-200-shade));
}
:where([data-theme=dark]) .cv-sg-200-tag.cv-sg-200-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-sg-200) var(--bgmix), var(--cv-sg-200-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-sg-200));
}
.cv-sg-200-tag.cv-sg-200-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-sg-200-contrast);
}

:where(.cv-sg-300-bg) a {
  color: var(--cv-sg-300-contrast);
}
:where(.cv-sg-300-bg) a:hover {
  color: var(--cv-link);
}

.cv-sg-300-bg {
  background-color: var(--cv-sg-300);
  color: var(--cv-sg-300-contrast);
}
.cv-sg-300-border {
  border-color: var(--cv-sg-300);
}
.cv-sg-300-text {
  color: var(--cv-sg-300);
}
:where([data-theme=light]) .cv-sg-300-tag.cv-sg-300-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-sg-300));
  background-color: color-mix(in srgb, var(--cv-sg-300) var(--bgmix), var(--cv-sg-300-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-sg-300) var(--bormix), var(--cv-sg-300-light));
}
:where([data-theme=light]) .cv-sg-300-tag.cv-sg-300-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-sg-300) var(--bgmix), var(--cv-sg-300-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-sg-300));
}
:where([data-theme=dark]) .cv-sg-300-tag.cv-sg-300-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-sg-300));
  background-color: color-mix(in srgb, var(--cv-sg-300) var(--bgmix), var(--cv-sg-300-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-sg-300) var(--bormix), var(--cv-sg-300-shade));
}
:where([data-theme=dark]) .cv-sg-300-tag.cv-sg-300-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-sg-300) var(--bgmix), var(--cv-sg-300-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-sg-300));
}
.cv-sg-300-tag.cv-sg-300-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-sg-300-contrast);
}

:where(.cv-sg-400-bg) a {
  color: var(--cv-sg-400-contrast);
}
:where(.cv-sg-400-bg) a:hover {
  color: var(--cv-link);
}

.cv-sg-400-bg {
  background-color: var(--cv-sg-400);
  color: var(--cv-sg-400-contrast);
}
.cv-sg-400-border {
  border-color: var(--cv-sg-400);
}
.cv-sg-400-text {
  color: var(--cv-sg-400);
}
:where([data-theme=light]) .cv-sg-400-tag.cv-sg-400-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-sg-400));
  background-color: color-mix(in srgb, var(--cv-sg-400) var(--bgmix), var(--cv-sg-400-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-sg-400) var(--bormix), var(--cv-sg-400-light));
}
:where([data-theme=light]) .cv-sg-400-tag.cv-sg-400-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-sg-400) var(--bgmix), var(--cv-sg-400-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-sg-400));
}
:where([data-theme=dark]) .cv-sg-400-tag.cv-sg-400-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-sg-400));
  background-color: color-mix(in srgb, var(--cv-sg-400) var(--bgmix), var(--cv-sg-400-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-sg-400) var(--bormix), var(--cv-sg-400-shade));
}
:where([data-theme=dark]) .cv-sg-400-tag.cv-sg-400-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-sg-400) var(--bgmix), var(--cv-sg-400-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-sg-400));
}
.cv-sg-400-tag.cv-sg-400-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-sg-400-contrast);
}

:where(.cv-red-bg) a {
  color: var(--cv-red-contrast);
}
:where(.cv-red-bg) a:hover {
  color: var(--cv-link);
}

.cv-red-bg {
  background-color: var(--cv-red);
  color: var(--cv-red-contrast);
}
.cv-red-border {
  border-color: var(--cv-red);
}
.cv-red-text {
  color: var(--cv-red);
}
:where([data-theme=light]) .cv-red-tag.cv-red-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-red));
  background-color: color-mix(in srgb, var(--cv-red) var(--bgmix), var(--cv-red-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-red) var(--bormix), var(--cv-red-light));
}
:where([data-theme=light]) .cv-red-tag.cv-red-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-red) var(--bgmix), var(--cv-red-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-red));
}
:where([data-theme=dark]) .cv-red-tag.cv-red-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-red));
  background-color: color-mix(in srgb, var(--cv-red) var(--bgmix), var(--cv-red-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-red) var(--bormix), var(--cv-red-shade));
}
:where([data-theme=dark]) .cv-red-tag.cv-red-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-red) var(--bgmix), var(--cv-red-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-red));
}
.cv-red-tag.cv-red-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-red-contrast);
}

:where(.cv-redorange-bg) a {
  color: var(--cv-redorange-contrast);
}
:where(.cv-redorange-bg) a:hover {
  color: var(--cv-link);
}

.cv-redorange-bg {
  background-color: var(--cv-redorange);
  color: var(--cv-redorange-contrast);
}
.cv-redorange-border {
  border-color: var(--cv-redorange);
}
.cv-redorange-text {
  color: var(--cv-redorange);
}
:where([data-theme=light]) .cv-redorange-tag.cv-redorange-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-redorange));
  background-color: color-mix(in srgb, var(--cv-redorange) var(--bgmix), var(--cv-redorange-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-redorange) var(--bormix), var(--cv-redorange-light));
}
:where([data-theme=light]) .cv-redorange-tag.cv-redorange-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-redorange) var(--bgmix), var(--cv-redorange-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-redorange));
}
:where([data-theme=dark]) .cv-redorange-tag.cv-redorange-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-redorange));
  background-color: color-mix(in srgb, var(--cv-redorange) var(--bgmix), var(--cv-redorange-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-redorange) var(--bormix), var(--cv-redorange-shade));
}
:where([data-theme=dark]) .cv-redorange-tag.cv-redorange-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-redorange) var(--bgmix), var(--cv-redorange-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-redorange));
}
.cv-redorange-tag.cv-redorange-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-redorange-contrast);
}

:where(.cv-darkorange-bg) a {
  color: var(--cv-darkorange-contrast);
}
:where(.cv-darkorange-bg) a:hover {
  color: var(--cv-link);
}

.cv-darkorange-bg {
  background-color: var(--cv-darkorange);
  color: var(--cv-darkorange-contrast);
}
.cv-darkorange-border {
  border-color: var(--cv-darkorange);
}
.cv-darkorange-text {
  color: var(--cv-darkorange);
}
:where([data-theme=light]) .cv-darkorange-tag.cv-darkorange-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-darkorange));
  background-color: color-mix(in srgb, var(--cv-darkorange) var(--bgmix), var(--cv-darkorange-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-darkorange) var(--bormix), var(--cv-darkorange-light));
}
:where([data-theme=light]) .cv-darkorange-tag.cv-darkorange-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-darkorange) var(--bgmix), var(--cv-darkorange-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-darkorange));
}
:where([data-theme=dark]) .cv-darkorange-tag.cv-darkorange-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-darkorange));
  background-color: color-mix(in srgb, var(--cv-darkorange) var(--bgmix), var(--cv-darkorange-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-darkorange) var(--bormix), var(--cv-darkorange-shade));
}
:where([data-theme=dark]) .cv-darkorange-tag.cv-darkorange-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-darkorange) var(--bgmix), var(--cv-darkorange-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-darkorange));
}
.cv-darkorange-tag.cv-darkorange-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-darkorange-contrast);
}

:where(.cv-orange-bg) a {
  color: var(--cv-orange-contrast);
}
:where(.cv-orange-bg) a:hover {
  color: var(--cv-link);
}

.cv-orange-bg {
  background-color: var(--cv-orange);
  color: var(--cv-orange-contrast);
}
.cv-orange-border {
  border-color: var(--cv-orange);
}
.cv-orange-text {
  color: var(--cv-orange);
}
:where([data-theme=light]) .cv-orange-tag.cv-orange-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-orange));
  background-color: color-mix(in srgb, var(--cv-orange) var(--bgmix), var(--cv-orange-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-orange) var(--bormix), var(--cv-orange-light));
}
:where([data-theme=light]) .cv-orange-tag.cv-orange-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-orange) var(--bgmix), var(--cv-orange-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-orange));
}
:where([data-theme=dark]) .cv-orange-tag.cv-orange-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-orange));
  background-color: color-mix(in srgb, var(--cv-orange) var(--bgmix), var(--cv-orange-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-orange) var(--bormix), var(--cv-orange-shade));
}
:where([data-theme=dark]) .cv-orange-tag.cv-orange-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-orange) var(--bgmix), var(--cv-orange-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-orange));
}
.cv-orange-tag.cv-orange-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-orange-contrast);
}

:where(.cv-yellow-bg) a {
  color: var(--cv-yellow-contrast);
}
:where(.cv-yellow-bg) a:hover {
  color: var(--cv-link);
}

.cv-yellow-bg {
  background-color: var(--cv-yellow);
  color: var(--cv-yellow-contrast);
}
.cv-yellow-border {
  border-color: var(--cv-yellow);
}
.cv-yellow-text {
  color: var(--cv-yellow);
}
:where([data-theme=light]) .cv-yellow-tag.cv-yellow-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-yellow));
  background-color: color-mix(in srgb, var(--cv-yellow) var(--bgmix), var(--cv-yellow-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-yellow) var(--bormix), var(--cv-yellow-light));
}
:where([data-theme=light]) .cv-yellow-tag.cv-yellow-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-yellow) var(--bgmix), var(--cv-yellow-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-yellow));
}
:where([data-theme=dark]) .cv-yellow-tag.cv-yellow-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-yellow));
  background-color: color-mix(in srgb, var(--cv-yellow) var(--bgmix), var(--cv-yellow-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-yellow) var(--bormix), var(--cv-yellow-shade));
}
:where([data-theme=dark]) .cv-yellow-tag.cv-yellow-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-yellow) var(--bgmix), var(--cv-yellow-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-yellow));
}
.cv-yellow-tag.cv-yellow-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-yellow-contrast);
}

:where(.cv-yellowgreen-bg) a {
  color: var(--cv-yellowgreen-contrast);
}
:where(.cv-yellowgreen-bg) a:hover {
  color: var(--cv-link);
}

.cv-yellowgreen-bg {
  background-color: var(--cv-yellowgreen);
  color: var(--cv-yellowgreen-contrast);
}
.cv-yellowgreen-border {
  border-color: var(--cv-yellowgreen);
}
.cv-yellowgreen-text {
  color: var(--cv-yellowgreen);
}
:where([data-theme=light]) .cv-yellowgreen-tag.cv-yellowgreen-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-yellowgreen));
  background-color: color-mix(in srgb, var(--cv-yellowgreen) var(--bgmix), var(--cv-yellowgreen-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-yellowgreen) var(--bormix), var(--cv-yellowgreen-light));
}
:where([data-theme=light]) .cv-yellowgreen-tag.cv-yellowgreen-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-yellowgreen) var(--bgmix), var(--cv-yellowgreen-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-yellowgreen));
}
:where([data-theme=dark]) .cv-yellowgreen-tag.cv-yellowgreen-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-yellowgreen));
  background-color: color-mix(in srgb, var(--cv-yellowgreen) var(--bgmix), var(--cv-yellowgreen-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-yellowgreen) var(--bormix), var(--cv-yellowgreen-shade));
}
:where([data-theme=dark]) .cv-yellowgreen-tag.cv-yellowgreen-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-yellowgreen) var(--bgmix), var(--cv-yellowgreen-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-yellowgreen));
}
.cv-yellowgreen-tag.cv-yellowgreen-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-yellowgreen-contrast);
}

:where(.cv-lime-bg) a {
  color: var(--cv-lime-contrast);
}
:where(.cv-lime-bg) a:hover {
  color: var(--cv-link);
}

.cv-lime-bg {
  background-color: var(--cv-lime);
  color: var(--cv-lime-contrast);
}
.cv-lime-border {
  border-color: var(--cv-lime);
}
.cv-lime-text {
  color: var(--cv-lime);
}
:where([data-theme=light]) .cv-lime-tag.cv-lime-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-lime));
  background-color: color-mix(in srgb, var(--cv-lime) var(--bgmix), var(--cv-lime-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-lime) var(--bormix), var(--cv-lime-light));
}
:where([data-theme=light]) .cv-lime-tag.cv-lime-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-lime) var(--bgmix), var(--cv-lime-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-lime));
}
:where([data-theme=dark]) .cv-lime-tag.cv-lime-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-lime));
  background-color: color-mix(in srgb, var(--cv-lime) var(--bgmix), var(--cv-lime-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-lime) var(--bormix), var(--cv-lime-shade));
}
:where([data-theme=dark]) .cv-lime-tag.cv-lime-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-lime) var(--bgmix), var(--cv-lime-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-lime));
}
.cv-lime-tag.cv-lime-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-lime-contrast);
}

:where(.cv-limegreen-bg) a {
  color: var(--cv-limegreen-contrast);
}
:where(.cv-limegreen-bg) a:hover {
  color: var(--cv-link);
}

.cv-limegreen-bg {
  background-color: var(--cv-limegreen);
  color: var(--cv-limegreen-contrast);
}
.cv-limegreen-border {
  border-color: var(--cv-limegreen);
}
.cv-limegreen-text {
  color: var(--cv-limegreen);
}
:where([data-theme=light]) .cv-limegreen-tag.cv-limegreen-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-limegreen));
  background-color: color-mix(in srgb, var(--cv-limegreen) var(--bgmix), var(--cv-limegreen-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-limegreen) var(--bormix), var(--cv-limegreen-light));
}
:where([data-theme=light]) .cv-limegreen-tag.cv-limegreen-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-limegreen) var(--bgmix), var(--cv-limegreen-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-limegreen));
}
:where([data-theme=dark]) .cv-limegreen-tag.cv-limegreen-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-limegreen));
  background-color: color-mix(in srgb, var(--cv-limegreen) var(--bgmix), var(--cv-limegreen-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-limegreen) var(--bormix), var(--cv-limegreen-shade));
}
:where([data-theme=dark]) .cv-limegreen-tag.cv-limegreen-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-limegreen) var(--bgmix), var(--cv-limegreen-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-limegreen));
}
.cv-limegreen-tag.cv-limegreen-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-limegreen-contrast);
}

:where(.cv-green-bg) a {
  color: var(--cv-green-contrast);
}
:where(.cv-green-bg) a:hover {
  color: var(--cv-link);
}

.cv-green-bg {
  background-color: var(--cv-green);
  color: var(--cv-green-contrast);
}
.cv-green-border {
  border-color: var(--cv-green);
}
.cv-green-text {
  color: var(--cv-green);
}
:where([data-theme=light]) .cv-green-tag.cv-green-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-green));
  background-color: color-mix(in srgb, var(--cv-green) var(--bgmix), var(--cv-green-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-green) var(--bormix), var(--cv-green-light));
}
:where([data-theme=light]) .cv-green-tag.cv-green-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-green) var(--bgmix), var(--cv-green-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-green));
}
:where([data-theme=dark]) .cv-green-tag.cv-green-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-green));
  background-color: color-mix(in srgb, var(--cv-green) var(--bgmix), var(--cv-green-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-green) var(--bormix), var(--cv-green-shade));
}
:where([data-theme=dark]) .cv-green-tag.cv-green-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-green) var(--bgmix), var(--cv-green-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-green));
}
.cv-green-tag.cv-green-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-green-contrast);
}

:where(.cv-greenblue-bg) a {
  color: var(--cv-greenblue-contrast);
}
:where(.cv-greenblue-bg) a:hover {
  color: var(--cv-link);
}

.cv-greenblue-bg {
  background-color: var(--cv-greenblue);
  color: var(--cv-greenblue-contrast);
}
.cv-greenblue-border {
  border-color: var(--cv-greenblue);
}
.cv-greenblue-text {
  color: var(--cv-greenblue);
}
:where([data-theme=light]) .cv-greenblue-tag.cv-greenblue-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-greenblue));
  background-color: color-mix(in srgb, var(--cv-greenblue) var(--bgmix), var(--cv-greenblue-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-greenblue) var(--bormix), var(--cv-greenblue-light));
}
:where([data-theme=light]) .cv-greenblue-tag.cv-greenblue-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-greenblue) var(--bgmix), var(--cv-greenblue-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-greenblue));
}
:where([data-theme=dark]) .cv-greenblue-tag.cv-greenblue-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-greenblue));
  background-color: color-mix(in srgb, var(--cv-greenblue) var(--bgmix), var(--cv-greenblue-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-greenblue) var(--bormix), var(--cv-greenblue-shade));
}
:where([data-theme=dark]) .cv-greenblue-tag.cv-greenblue-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-greenblue) var(--bgmix), var(--cv-greenblue-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-greenblue));
}
.cv-greenblue-tag.cv-greenblue-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-greenblue-contrast);
}

:where(.cv-cyan-bg) a {
  color: var(--cv-cyan-contrast);
}
:where(.cv-cyan-bg) a:hover {
  color: var(--cv-link);
}

.cv-cyan-bg {
  background-color: var(--cv-cyan);
  color: var(--cv-cyan-contrast);
}
.cv-cyan-border {
  border-color: var(--cv-cyan);
}
.cv-cyan-text {
  color: var(--cv-cyan);
}
:where([data-theme=light]) .cv-cyan-tag.cv-cyan-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-cyan));
  background-color: color-mix(in srgb, var(--cv-cyan) var(--bgmix), var(--cv-cyan-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-cyan) var(--bormix), var(--cv-cyan-light));
}
:where([data-theme=light]) .cv-cyan-tag.cv-cyan-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-cyan) var(--bgmix), var(--cv-cyan-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-cyan));
}
:where([data-theme=dark]) .cv-cyan-tag.cv-cyan-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-cyan));
  background-color: color-mix(in srgb, var(--cv-cyan) var(--bgmix), var(--cv-cyan-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-cyan) var(--bormix), var(--cv-cyan-shade));
}
:where([data-theme=dark]) .cv-cyan-tag.cv-cyan-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-cyan) var(--bgmix), var(--cv-cyan-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-cyan));
}
.cv-cyan-tag.cv-cyan-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-cyan-contrast);
}

:where(.cv-babyblue-bg) a {
  color: var(--cv-babyblue-contrast);
}
:where(.cv-babyblue-bg) a:hover {
  color: var(--cv-link);
}

.cv-babyblue-bg {
  background-color: var(--cv-babyblue);
  color: var(--cv-babyblue-contrast);
}
.cv-babyblue-border {
  border-color: var(--cv-babyblue);
}
.cv-babyblue-text {
  color: var(--cv-babyblue);
}
:where([data-theme=light]) .cv-babyblue-tag.cv-babyblue-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-babyblue));
  background-color: color-mix(in srgb, var(--cv-babyblue) var(--bgmix), var(--cv-babyblue-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-babyblue) var(--bormix), var(--cv-babyblue-light));
}
:where([data-theme=light]) .cv-babyblue-tag.cv-babyblue-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-babyblue) var(--bgmix), var(--cv-babyblue-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-babyblue));
}
:where([data-theme=dark]) .cv-babyblue-tag.cv-babyblue-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-babyblue));
  background-color: color-mix(in srgb, var(--cv-babyblue) var(--bgmix), var(--cv-babyblue-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-babyblue) var(--bormix), var(--cv-babyblue-shade));
}
:where([data-theme=dark]) .cv-babyblue-tag.cv-babyblue-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-babyblue) var(--bgmix), var(--cv-babyblue-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-babyblue));
}
.cv-babyblue-tag.cv-babyblue-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-babyblue-contrast);
}

:where(.cv-blue-bg) a {
  color: var(--cv-blue-contrast);
}
:where(.cv-blue-bg) a:hover {
  color: var(--cv-link);
}

.cv-blue-bg {
  background-color: var(--cv-blue);
  color: var(--cv-blue-contrast);
}
.cv-blue-border {
  border-color: var(--cv-blue);
}
.cv-blue-text {
  color: var(--cv-blue);
}
:where([data-theme=light]) .cv-blue-tag.cv-blue-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-blue));
  background-color: color-mix(in srgb, var(--cv-blue) var(--bgmix), var(--cv-blue-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-blue) var(--bormix), var(--cv-blue-light));
}
:where([data-theme=light]) .cv-blue-tag.cv-blue-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-blue) var(--bgmix), var(--cv-blue-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-blue));
}
:where([data-theme=dark]) .cv-blue-tag.cv-blue-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-blue));
  background-color: color-mix(in srgb, var(--cv-blue) var(--bgmix), var(--cv-blue-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-blue) var(--bormix), var(--cv-blue-shade));
}
:where([data-theme=dark]) .cv-blue-tag.cv-blue-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-blue) var(--bgmix), var(--cv-blue-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-blue));
}
.cv-blue-tag.cv-blue-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-blue-contrast);
}

:where(.cv-violet-bg) a {
  color: var(--cv-violet-contrast);
}
:where(.cv-violet-bg) a:hover {
  color: var(--cv-link);
}

.cv-violet-bg {
  background-color: var(--cv-violet);
  color: var(--cv-violet-contrast);
}
.cv-violet-border {
  border-color: var(--cv-violet);
}
.cv-violet-text {
  color: var(--cv-violet);
}
:where([data-theme=light]) .cv-violet-tag.cv-violet-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-violet));
  background-color: color-mix(in srgb, var(--cv-violet) var(--bgmix), var(--cv-violet-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-violet) var(--bormix), var(--cv-violet-light));
}
:where([data-theme=light]) .cv-violet-tag.cv-violet-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-violet) var(--bgmix), var(--cv-violet-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-violet));
}
:where([data-theme=dark]) .cv-violet-tag.cv-violet-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-violet));
  background-color: color-mix(in srgb, var(--cv-violet) var(--bgmix), var(--cv-violet-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-violet) var(--bormix), var(--cv-violet-shade));
}
:where([data-theme=dark]) .cv-violet-tag.cv-violet-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-violet) var(--bgmix), var(--cv-violet-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-violet));
}
.cv-violet-tag.cv-violet-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-violet-contrast);
}

:where(.cv-purple-bg) a {
  color: var(--cv-purple-contrast);
}
:where(.cv-purple-bg) a:hover {
  color: var(--cv-link);
}

.cv-purple-bg {
  background-color: var(--cv-purple);
  color: var(--cv-purple-contrast);
}
.cv-purple-border {
  border-color: var(--cv-purple);
}
.cv-purple-text {
  color: var(--cv-purple);
}
:where([data-theme=light]) .cv-purple-tag.cv-purple-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-purple));
  background-color: color-mix(in srgb, var(--cv-purple) var(--bgmix), var(--cv-purple-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-purple) var(--bormix), var(--cv-purple-light));
}
:where([data-theme=light]) .cv-purple-tag.cv-purple-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-purple) var(--bgmix), var(--cv-purple-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-purple));
}
:where([data-theme=dark]) .cv-purple-tag.cv-purple-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-purple));
  background-color: color-mix(in srgb, var(--cv-purple) var(--bgmix), var(--cv-purple-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-purple) var(--bormix), var(--cv-purple-shade));
}
:where([data-theme=dark]) .cv-purple-tag.cv-purple-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-purple) var(--bgmix), var(--cv-purple-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-purple));
}
.cv-purple-tag.cv-purple-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-purple-contrast);
}

:where(.cv-crimson-bg) a {
  color: var(--cv-crimson-contrast);
}
:where(.cv-crimson-bg) a:hover {
  color: var(--cv-link);
}

.cv-crimson-bg {
  background-color: var(--cv-crimson);
  color: var(--cv-crimson-contrast);
}
.cv-crimson-border {
  border-color: var(--cv-crimson);
}
.cv-crimson-text {
  color: var(--cv-crimson);
}
:where([data-theme=light]) .cv-crimson-tag.cv-crimson-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-crimson));
  background-color: color-mix(in srgb, var(--cv-crimson) var(--bgmix), var(--cv-crimson-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-crimson) var(--bormix), var(--cv-crimson-light));
}
:where([data-theme=light]) .cv-crimson-tag.cv-crimson-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-crimson) var(--bgmix), var(--cv-crimson-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-crimson));
}
:where([data-theme=dark]) .cv-crimson-tag.cv-crimson-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-crimson));
  background-color: color-mix(in srgb, var(--cv-crimson) var(--bgmix), var(--cv-crimson-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-crimson) var(--bormix), var(--cv-crimson-shade));
}
:where([data-theme=dark]) .cv-crimson-tag.cv-crimson-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-crimson) var(--bgmix), var(--cv-crimson-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-crimson));
}
.cv-crimson-tag.cv-crimson-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-crimson-contrast);
}

:where(.cv-pink-bg) a {
  color: var(--cv-pink-contrast);
}
:where(.cv-pink-bg) a:hover {
  color: var(--cv-link);
}

.cv-pink-bg {
  background-color: var(--cv-pink);
  color: var(--cv-pink-contrast);
}
.cv-pink-border {
  border-color: var(--cv-pink);
}
.cv-pink-text {
  color: var(--cv-pink);
}
:where([data-theme=light]) .cv-pink-tag.cv-pink-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-pink));
  background-color: color-mix(in srgb, var(--cv-pink) var(--bgmix), var(--cv-pink-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-pink) var(--bormix), var(--cv-pink-light));
}
:where([data-theme=light]) .cv-pink-tag.cv-pink-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-pink) var(--bgmix), var(--cv-pink-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-pink));
}
:where([data-theme=dark]) .cv-pink-tag.cv-pink-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-pink));
  background-color: color-mix(in srgb, var(--cv-pink) var(--bgmix), var(--cv-pink-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-pink) var(--bormix), var(--cv-pink-shade));
}
:where([data-theme=dark]) .cv-pink-tag.cv-pink-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-pink) var(--bgmix), var(--cv-pink-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-pink));
}
.cv-pink-tag.cv-pink-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-pink-contrast);
}

:where(.br-red-bg) a {
  color: var(--br-red-contrast);
}
:where(.br-red-bg) a:hover {
  color: var(--cv-link);
}

.br-red-bg {
  background-color: var(--br-red);
  color: var(--br-red-contrast);
}
.br-red-border {
  border-color: var(--br-red);
}
.br-red-text {
  color: var(--br-red);
}
:where([data-theme=light]) .br-red-tag.br-red-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-red));
  background-color: color-mix(in srgb, var(--br-red) var(--bgmix), var(--br-red-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-red) var(--bormix), var(--br-red-light));
}
:where([data-theme=light]) .br-red-tag.br-red-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-red) var(--bgmix), var(--br-red-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-red));
}
:where([data-theme=dark]) .br-red-tag.br-red-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-red));
  background-color: color-mix(in srgb, var(--br-red) var(--bgmix), var(--br-red-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-red) var(--bormix), var(--br-red-shade));
}
:where([data-theme=dark]) .br-red-tag.br-red-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-red) var(--bgmix), var(--br-red-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-red));
}
.br-red-tag.br-red-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--br-red-contrast);
}

:where(.br-orange-bg) a {
  color: var(--br-orange-contrast);
}
:where(.br-orange-bg) a:hover {
  color: var(--cv-link);
}

.br-orange-bg {
  background-color: var(--br-orange);
  color: var(--br-orange-contrast);
}
.br-orange-border {
  border-color: var(--br-orange);
}
.br-orange-text {
  color: var(--br-orange);
}
:where([data-theme=light]) .br-orange-tag.br-orange-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-orange));
  background-color: color-mix(in srgb, var(--br-orange) var(--bgmix), var(--br-orange-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-orange) var(--bormix), var(--br-orange-light));
}
:where([data-theme=light]) .br-orange-tag.br-orange-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-orange) var(--bgmix), var(--br-orange-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-orange));
}
:where([data-theme=dark]) .br-orange-tag.br-orange-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-orange));
  background-color: color-mix(in srgb, var(--br-orange) var(--bgmix), var(--br-orange-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-orange) var(--bormix), var(--br-orange-shade));
}
:where([data-theme=dark]) .br-orange-tag.br-orange-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-orange) var(--bgmix), var(--br-orange-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-orange));
}
.br-orange-tag.br-orange-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--br-orange-contrast);
}

:where(.br-yellow-bg) a {
  color: var(--br-yellow-contrast);
}
:where(.br-yellow-bg) a:hover {
  color: var(--cv-link);
}

.br-yellow-bg {
  background-color: var(--br-yellow);
  color: var(--br-yellow-contrast);
}
.br-yellow-border {
  border-color: var(--br-yellow);
}
.br-yellow-text {
  color: var(--br-yellow);
}
:where([data-theme=light]) .br-yellow-tag.br-yellow-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-yellow));
  background-color: color-mix(in srgb, var(--br-yellow) var(--bgmix), var(--br-yellow-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-yellow) var(--bormix), var(--br-yellow-light));
}
:where([data-theme=light]) .br-yellow-tag.br-yellow-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-yellow) var(--bgmix), var(--br-yellow-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-yellow));
}
:where([data-theme=dark]) .br-yellow-tag.br-yellow-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-yellow));
  background-color: color-mix(in srgb, var(--br-yellow) var(--bgmix), var(--br-yellow-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-yellow) var(--bormix), var(--br-yellow-shade));
}
:where([data-theme=dark]) .br-yellow-tag.br-yellow-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-yellow) var(--bgmix), var(--br-yellow-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-yellow));
}
.br-yellow-tag.br-yellow-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--br-yellow-contrast);
}

:where(.br-teal-bg) a {
  color: var(--br-teal-contrast);
}
:where(.br-teal-bg) a:hover {
  color: var(--cv-link);
}

.br-teal-bg {
  background-color: var(--br-teal);
  color: var(--br-teal-contrast);
}
.br-teal-border {
  border-color: var(--br-teal);
}
.br-teal-text {
  color: var(--br-teal);
}
:where([data-theme=light]) .br-teal-tag.br-teal-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-teal));
  background-color: color-mix(in srgb, var(--br-teal) var(--bgmix), var(--br-teal-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-teal) var(--bormix), var(--br-teal-light));
}
:where([data-theme=light]) .br-teal-tag.br-teal-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-teal) var(--bgmix), var(--br-teal-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-teal));
}
:where([data-theme=dark]) .br-teal-tag.br-teal-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-teal));
  background-color: color-mix(in srgb, var(--br-teal) var(--bgmix), var(--br-teal-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-teal) var(--bormix), var(--br-teal-shade));
}
:where([data-theme=dark]) .br-teal-tag.br-teal-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-teal) var(--bgmix), var(--br-teal-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-teal));
}
.br-teal-tag.br-teal-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--br-teal-contrast);
}

:where(.br-darkteal-bg) a {
  color: var(--br-darkteal-contrast);
}
:where(.br-darkteal-bg) a:hover {
  color: var(--cv-link);
}

.br-darkteal-bg {
  background-color: var(--br-darkteal);
  color: var(--br-darkteal-contrast);
}
.br-darkteal-border {
  border-color: var(--br-darkteal);
}
.br-darkteal-text {
  color: var(--br-darkteal);
}
:where([data-theme=light]) .br-darkteal-tag.br-darkteal-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-darkteal));
  background-color: color-mix(in srgb, var(--br-darkteal) var(--bgmix), var(--br-darkteal-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-darkteal) var(--bormix), var(--br-darkteal-light));
}
:where([data-theme=light]) .br-darkteal-tag.br-darkteal-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-darkteal) var(--bgmix), var(--br-darkteal-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-darkteal));
}
:where([data-theme=dark]) .br-darkteal-tag.br-darkteal-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-darkteal));
  background-color: color-mix(in srgb, var(--br-darkteal) var(--bgmix), var(--br-darkteal-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-darkteal) var(--bormix), var(--br-darkteal-shade));
}
:where([data-theme=dark]) .br-darkteal-tag.br-darkteal-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-darkteal) var(--bgmix), var(--br-darkteal-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-darkteal));
}
.br-darkteal-tag.br-darkteal-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--br-darkteal-contrast);
}

:where(.br-green-bg) a {
  color: var(--br-green-contrast);
}
:where(.br-green-bg) a:hover {
  color: var(--cv-link);
}

.br-green-bg {
  background-color: var(--br-green);
  color: var(--br-green-contrast);
}
.br-green-border {
  border-color: var(--br-green);
}
.br-green-text {
  color: var(--br-green);
}
:where([data-theme=light]) .br-green-tag.br-green-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-green));
  background-color: color-mix(in srgb, var(--br-green) var(--bgmix), var(--br-green-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-green) var(--bormix), var(--br-green-light));
}
:where([data-theme=light]) .br-green-tag.br-green-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-green) var(--bgmix), var(--br-green-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-green));
}
:where([data-theme=dark]) .br-green-tag.br-green-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-green));
  background-color: color-mix(in srgb, var(--br-green) var(--bgmix), var(--br-green-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-green) var(--bormix), var(--br-green-shade));
}
:where([data-theme=dark]) .br-green-tag.br-green-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-green) var(--bgmix), var(--br-green-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-green));
}
.br-green-tag.br-green-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--br-green-contrast);
}

:where(.br-midgreen-bg) a {
  color: var(--br-midgreen-contrast);
}
:where(.br-midgreen-bg) a:hover {
  color: var(--cv-link);
}

.br-midgreen-bg {
  background-color: var(--br-midgreen);
  color: var(--br-midgreen-contrast);
}
.br-midgreen-border {
  border-color: var(--br-midgreen);
}
.br-midgreen-text {
  color: var(--br-midgreen);
}
:where([data-theme=light]) .br-midgreen-tag.br-midgreen-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-midgreen));
  background-color: color-mix(in srgb, var(--br-midgreen) var(--bgmix), var(--br-midgreen-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-midgreen) var(--bormix), var(--br-midgreen-light));
}
:where([data-theme=light]) .br-midgreen-tag.br-midgreen-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-midgreen) var(--bgmix), var(--br-midgreen-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-midgreen));
}
:where([data-theme=dark]) .br-midgreen-tag.br-midgreen-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-midgreen));
  background-color: color-mix(in srgb, var(--br-midgreen) var(--bgmix), var(--br-midgreen-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-midgreen) var(--bormix), var(--br-midgreen-shade));
}
:where([data-theme=dark]) .br-midgreen-tag.br-midgreen-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-midgreen) var(--bgmix), var(--br-midgreen-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-midgreen));
}
.br-midgreen-tag.br-midgreen-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--br-midgreen-contrast);
}

:where(.br-darkgreen-bg) a {
  color: var(--br-darkgreen-contrast);
}
:where(.br-darkgreen-bg) a:hover {
  color: var(--cv-link);
}

.br-darkgreen-bg {
  background-color: var(--br-darkgreen);
  color: var(--br-darkgreen-contrast);
}
.br-darkgreen-border {
  border-color: var(--br-darkgreen);
}
.br-darkgreen-text {
  color: var(--br-darkgreen);
}
:where([data-theme=light]) .br-darkgreen-tag.br-darkgreen-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-darkgreen));
  background-color: color-mix(in srgb, var(--br-darkgreen) var(--bgmix), var(--br-darkgreen-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-darkgreen) var(--bormix), var(--br-darkgreen-light));
}
:where([data-theme=light]) .br-darkgreen-tag.br-darkgreen-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-darkgreen) var(--bgmix), var(--br-darkgreen-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-darkgreen));
}
:where([data-theme=dark]) .br-darkgreen-tag.br-darkgreen-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-darkgreen));
  background-color: color-mix(in srgb, var(--br-darkgreen) var(--bgmix), var(--br-darkgreen-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-darkgreen) var(--bormix), var(--br-darkgreen-shade));
}
:where([data-theme=dark]) .br-darkgreen-tag.br-darkgreen-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-darkgreen) var(--bgmix), var(--br-darkgreen-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-darkgreen));
}
.br-darkgreen-tag.br-darkgreen-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--br-darkgreen-contrast);
}

:where(.br-blue-bg) a {
  color: var(--br-blue-contrast);
}
:where(.br-blue-bg) a:hover {
  color: var(--cv-link);
}

.br-blue-bg {
  background-color: var(--br-blue);
  color: var(--br-blue-contrast);
}
.br-blue-border {
  border-color: var(--br-blue);
}
.br-blue-text {
  color: var(--br-blue);
}
:where([data-theme=light]) .br-blue-tag.br-blue-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-blue));
  background-color: color-mix(in srgb, var(--br-blue) var(--bgmix), var(--br-blue-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-blue) var(--bormix), var(--br-blue-light));
}
:where([data-theme=light]) .br-blue-tag.br-blue-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-blue) var(--bgmix), var(--br-blue-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-blue));
}
:where([data-theme=dark]) .br-blue-tag.br-blue-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-blue));
  background-color: color-mix(in srgb, var(--br-blue) var(--bgmix), var(--br-blue-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-blue) var(--bormix), var(--br-blue-shade));
}
:where([data-theme=dark]) .br-blue-tag.br-blue-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-blue) var(--bgmix), var(--br-blue-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-blue));
}
.br-blue-tag.br-blue-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--br-blue-contrast);
}

:where(.br-darkblue-bg) a {
  color: var(--br-darkblue-contrast);
}
:where(.br-darkblue-bg) a:hover {
  color: var(--cv-link);
}

.br-darkblue-bg {
  background-color: var(--br-darkblue);
  color: var(--br-darkblue-contrast);
}
.br-darkblue-border {
  border-color: var(--br-darkblue);
}
.br-darkblue-text {
  color: var(--br-darkblue);
}
:where([data-theme=light]) .br-darkblue-tag.br-darkblue-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-darkblue));
  background-color: color-mix(in srgb, var(--br-darkblue) var(--bgmix), var(--br-darkblue-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-darkblue) var(--bormix), var(--br-darkblue-light));
}
:where([data-theme=light]) .br-darkblue-tag.br-darkblue-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-darkblue) var(--bgmix), var(--br-darkblue-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-darkblue));
}
:where([data-theme=dark]) .br-darkblue-tag.br-darkblue-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-darkblue));
  background-color: color-mix(in srgb, var(--br-darkblue) var(--bgmix), var(--br-darkblue-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-darkblue) var(--bormix), var(--br-darkblue-shade));
}
:where([data-theme=dark]) .br-darkblue-tag.br-darkblue-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-darkblue) var(--bgmix), var(--br-darkblue-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-darkblue));
}
.br-darkblue-tag.br-darkblue-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--br-darkblue-contrast);
}

:where(.br-purple-bg) a {
  color: var(--br-purple-contrast);
}
:where(.br-purple-bg) a:hover {
  color: var(--cv-link);
}

.br-purple-bg {
  background-color: var(--br-purple);
  color: var(--br-purple-contrast);
}
.br-purple-border {
  border-color: var(--br-purple);
}
.br-purple-text {
  color: var(--br-purple);
}
:where([data-theme=light]) .br-purple-tag.br-purple-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-purple));
  background-color: color-mix(in srgb, var(--br-purple) var(--bgmix), var(--br-purple-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-purple) var(--bormix), var(--br-purple-light));
}
:where([data-theme=light]) .br-purple-tag.br-purple-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-purple) var(--bgmix), var(--br-purple-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-purple));
}
:where([data-theme=dark]) .br-purple-tag.br-purple-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-purple));
  background-color: color-mix(in srgb, var(--br-purple) var(--bgmix), var(--br-purple-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-purple) var(--bormix), var(--br-purple-shade));
}
:where([data-theme=dark]) .br-purple-tag.br-purple-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-purple) var(--bgmix), var(--br-purple-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-purple));
}
.br-purple-tag.br-purple-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--br-purple-contrast);
}

:where(.br-magneta-bg) a {
  color: var(--br-magneta-contrast);
}
:where(.br-magneta-bg) a:hover {
  color: var(--cv-link);
}

.br-magneta-bg {
  background-color: var(--br-magneta);
  color: var(--br-magneta-contrast);
}
.br-magneta-border {
  border-color: var(--br-magneta);
}
.br-magneta-text {
  color: var(--br-magneta);
}
:where([data-theme=light]) .br-magneta-tag.br-magneta-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-magneta));
  background-color: color-mix(in srgb, var(--br-magneta) var(--bgmix), var(--br-magneta-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-magneta) var(--bormix), var(--br-magneta-light));
}
:where([data-theme=light]) .br-magneta-tag.br-magneta-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-magneta) var(--bgmix), var(--br-magneta-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-magneta));
}
:where([data-theme=dark]) .br-magneta-tag.br-magneta-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--br-magneta));
  background-color: color-mix(in srgb, var(--br-magneta) var(--bgmix), var(--br-magneta-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--br-magneta) var(--bormix), var(--br-magneta-shade));
}
:where([data-theme=dark]) .br-magneta-tag.br-magneta-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--br-magneta) var(--bgmix), var(--br-magneta-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--br-magneta));
}
.br-magneta-tag.br-magneta-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--br-magneta-contrast);
}

:where(.cv-alert-bg) a {
  color: var(--cv-alert-contrast);
}
:where(.cv-alert-bg) a:hover {
  color: var(--cv-link);
}

.cv-alert-bg {
  background-color: var(--cv-alert);
  color: var(--cv-alert-contrast);
}
.cv-alert-border {
  border-color: var(--cv-alert);
}
.cv-alert-text {
  color: var(--cv-alert);
}
:where([data-theme=light]) .cv-alert-tag.cv-alert-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-alert));
  background-color: color-mix(in srgb, var(--cv-alert) var(--bgmix), var(--cv-alert-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-alert) var(--bormix), var(--cv-alert-light));
}
:where([data-theme=light]) .cv-alert-tag.cv-alert-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-alert) var(--bgmix), var(--cv-alert-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-alert));
}
:where([data-theme=dark]) .cv-alert-tag.cv-alert-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-alert));
  background-color: color-mix(in srgb, var(--cv-alert) var(--bgmix), var(--cv-alert-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-alert) var(--bormix), var(--cv-alert-shade));
}
:where([data-theme=dark]) .cv-alert-tag.cv-alert-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-alert) var(--bgmix), var(--cv-alert-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-alert));
}
.cv-alert-tag.cv-alert-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-alert-contrast);
}

:where(.cv-pending-bg) a {
  color: var(--cv-pending-contrast);
}
:where(.cv-pending-bg) a:hover {
  color: var(--cv-link);
}

.cv-pending-bg {
  background-color: var(--cv-pending);
  color: var(--cv-pending-contrast);
}
.cv-pending-border {
  border-color: var(--cv-pending);
}
.cv-pending-text {
  color: var(--cv-pending);
}
:where([data-theme=light]) .cv-pending-tag.cv-pending-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-pending));
  background-color: color-mix(in srgb, var(--cv-pending) var(--bgmix), var(--cv-pending-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-pending) var(--bormix), var(--cv-pending-light));
}
:where([data-theme=light]) .cv-pending-tag.cv-pending-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-pending) var(--bgmix), var(--cv-pending-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-pending));
}
:where([data-theme=dark]) .cv-pending-tag.cv-pending-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-pending));
  background-color: color-mix(in srgb, var(--cv-pending) var(--bgmix), var(--cv-pending-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-pending) var(--bormix), var(--cv-pending-shade));
}
:where([data-theme=dark]) .cv-pending-tag.cv-pending-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-pending) var(--bgmix), var(--cv-pending-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-pending));
}
.cv-pending-tag.cv-pending-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-pending-contrast);
}

:where(.cv-success-bg) a {
  color: var(--cv-success-contrast);
}
:where(.cv-success-bg) a:hover {
  color: var(--cv-link);
}

.cv-success-bg {
  background-color: var(--cv-success);
  color: var(--cv-success-contrast);
}
.cv-success-border {
  border-color: var(--cv-success);
}
.cv-success-text {
  color: var(--cv-success);
}
:where([data-theme=light]) .cv-success-tag.cv-success-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-success));
  background-color: color-mix(in srgb, var(--cv-success) var(--bgmix), var(--cv-success-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-success) var(--bormix), var(--cv-success-light));
}
:where([data-theme=light]) .cv-success-tag.cv-success-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-success) var(--bgmix), var(--cv-success-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-success));
}
:where([data-theme=dark]) .cv-success-tag.cv-success-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-success));
  background-color: color-mix(in srgb, var(--cv-success) var(--bgmix), var(--cv-success-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-success) var(--bormix), var(--cv-success-shade));
}
:where([data-theme=dark]) .cv-success-tag.cv-success-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-success) var(--bgmix), var(--cv-success-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-success));
}
.cv-success-tag.cv-success-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-success-contrast);
}

:where(.cv-notification-bg) a {
  color: var(--cv-notification-contrast);
}
:where(.cv-notification-bg) a:hover {
  color: var(--cv-link);
}

.cv-notification-bg {
  background-color: var(--cv-notification);
  color: var(--cv-notification-contrast);
}
.cv-notification-border {
  border-color: var(--cv-notification);
}
.cv-notification-text {
  color: var(--cv-notification);
}
:where([data-theme=light]) .cv-notification-tag.cv-notification-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-notification));
  background-color: color-mix(in srgb, var(--cv-notification) var(--bgmix), var(--cv-notification-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-notification) var(--bormix), var(--cv-notification-light));
}
:where([data-theme=light]) .cv-notification-tag.cv-notification-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-notification) var(--bgmix), var(--cv-notification-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-notification));
}
:where([data-theme=dark]) .cv-notification-tag.cv-notification-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-notification));
  background-color: color-mix(in srgb, var(--cv-notification) var(--bgmix), var(--cv-notification-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-notification) var(--bormix), var(--cv-notification-shade));
}
:where([data-theme=dark]) .cv-notification-tag.cv-notification-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-notification) var(--bgmix), var(--cv-notification-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-notification));
}
.cv-notification-tag.cv-notification-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-notification-contrast);
}

:where(.cv-header-bg) a {
  color: var(--cv-header-contrast);
}
:where(.cv-header-bg) a:hover {
  color: var(--cv-link);
}

.cv-header-bg {
  background-color: var(--cv-header);
  color: var(--cv-header-contrast);
}
.cv-header-border {
  border-color: var(--cv-header);
}
.cv-header-text {
  color: var(--cv-header);
}
:where([data-theme=light]) .cv-header-tag.cv-header-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-header));
  background-color: color-mix(in srgb, var(--cv-header) var(--bgmix), var(--cv-header-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-header) var(--bormix), var(--cv-header-light));
}
:where([data-theme=light]) .cv-header-tag.cv-header-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-header) var(--bgmix), var(--cv-header-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-header));
}
:where([data-theme=dark]) .cv-header-tag.cv-header-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-header));
  background-color: color-mix(in srgb, var(--cv-header) var(--bgmix), var(--cv-header-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-header) var(--bormix), var(--cv-header-shade));
}
:where([data-theme=dark]) .cv-header-tag.cv-header-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-header) var(--bgmix), var(--cv-header-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-header));
}
.cv-header-tag.cv-header-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-header-contrast);
}

:where(.cv-subheader-bg) a {
  color: var(--cv-subheader-contrast);
}
:where(.cv-subheader-bg) a:hover {
  color: var(--cv-link);
}

.cv-subheader-bg {
  background-color: var(--cv-subheader);
  color: var(--cv-subheader-contrast);
}
.cv-subheader-border {
  border-color: var(--cv-subheader);
}
.cv-subheader-text {
  color: var(--cv-subheader);
}
:where([data-theme=light]) .cv-subheader-tag.cv-subheader-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-subheader));
  background-color: color-mix(in srgb, var(--cv-subheader) var(--bgmix), var(--cv-subheader-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-subheader) var(--bormix), var(--cv-subheader-light));
}
:where([data-theme=light]) .cv-subheader-tag.cv-subheader-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-subheader) var(--bgmix), var(--cv-subheader-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-subheader));
}
:where([data-theme=dark]) .cv-subheader-tag.cv-subheader-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-subheader));
  background-color: color-mix(in srgb, var(--cv-subheader) var(--bgmix), var(--cv-subheader-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-subheader) var(--bormix), var(--cv-subheader-shade));
}
:where([data-theme=dark]) .cv-subheader-tag.cv-subheader-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-subheader) var(--bgmix), var(--cv-subheader-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-subheader));
}
.cv-subheader-tag.cv-subheader-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-subheader-contrast);
}

:where(.cv-link-bg) a {
  color: var(--cv-link-contrast);
}
:where(.cv-link-bg) a:hover {
  color: var(--cv-link);
}

.cv-link-bg {
  background-color: var(--cv-link);
  color: var(--cv-link-contrast);
}
.cv-link-border {
  border-color: var(--cv-link);
}
.cv-link-text {
  color: var(--cv-link);
}
:where([data-theme=light]) .cv-link-tag.cv-link-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-link));
  background-color: color-mix(in srgb, var(--cv-link) var(--bgmix), var(--cv-link-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-link) var(--bormix), var(--cv-link-light));
}
:where([data-theme=light]) .cv-link-tag.cv-link-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-link) var(--bgmix), var(--cv-link-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-link));
}
:where([data-theme=dark]) .cv-link-tag.cv-link-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-link));
  background-color: color-mix(in srgb, var(--cv-link) var(--bgmix), var(--cv-link-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-link) var(--bormix), var(--cv-link-shade));
}
:where([data-theme=dark]) .cv-link-tag.cv-link-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-link) var(--bgmix), var(--cv-link-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-link));
}
.cv-link-tag.cv-link-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-link-contrast);
}

:where(.cv-beerorange-bg) a {
  color: var(--cv-beerorange-contrast);
}
:where(.cv-beerorange-bg) a:hover {
  color: var(--cv-link);
}

.cv-beerorange-bg {
  background-color: var(--cv-beerorange);
  color: var(--cv-beerorange-contrast);
}
.cv-beerorange-border {
  border-color: var(--cv-beerorange);
}
.cv-beerorange-text {
  color: var(--cv-beerorange);
}
:where([data-theme=light]) .cv-beerorange-tag.cv-beerorange-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-beerorange));
  background-color: color-mix(in srgb, var(--cv-beerorange) var(--bgmix), var(--cv-beerorange-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-beerorange) var(--bormix), var(--cv-beerorange-light));
}
:where([data-theme=light]) .cv-beerorange-tag.cv-beerorange-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-beerorange) var(--bgmix), var(--cv-beerorange-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-beerorange));
}
:where([data-theme=dark]) .cv-beerorange-tag.cv-beerorange-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-beerorange));
  background-color: color-mix(in srgb, var(--cv-beerorange) var(--bgmix), var(--cv-beerorange-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-beerorange) var(--bormix), var(--cv-beerorange-shade));
}
:where([data-theme=dark]) .cv-beerorange-tag.cv-beerorange-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-beerorange) var(--bgmix), var(--cv-beerorange-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-beerorange));
}
.cv-beerorange-tag.cv-beerorange-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-beerorange-contrast);
}

:where(.cv-bluepearl-bg) a {
  color: var(--cv-bluepearl-contrast);
}
:where(.cv-bluepearl-bg) a:hover {
  color: var(--cv-link);
}

.cv-bluepearl-bg {
  background-color: var(--cv-bluepearl);
  color: var(--cv-bluepearl-contrast);
}
.cv-bluepearl-border {
  border-color: var(--cv-bluepearl);
}
.cv-bluepearl-text {
  color: var(--cv-bluepearl);
}
:where([data-theme=light]) .cv-bluepearl-tag.cv-bluepearl-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-bluepearl));
  background-color: color-mix(in srgb, var(--cv-bluepearl) var(--bgmix), var(--cv-bluepearl-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-bluepearl) var(--bormix), var(--cv-bluepearl-light));
}
:where([data-theme=light]) .cv-bluepearl-tag.cv-bluepearl-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-bluepearl) var(--bgmix), var(--cv-bluepearl-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-bluepearl));
}
:where([data-theme=dark]) .cv-bluepearl-tag.cv-bluepearl-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-bluepearl));
  background-color: color-mix(in srgb, var(--cv-bluepearl) var(--bgmix), var(--cv-bluepearl-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-bluepearl) var(--bormix), var(--cv-bluepearl-shade));
}
:where([data-theme=dark]) .cv-bluepearl-tag.cv-bluepearl-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-bluepearl) var(--bgmix), var(--cv-bluepearl-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-bluepearl));
}
.cv-bluepearl-tag.cv-bluepearl-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-bluepearl-contrast);
}

:where(.cv-camouflage-bg) a {
  color: var(--cv-camouflage-contrast);
}
:where(.cv-camouflage-bg) a:hover {
  color: var(--cv-link);
}

.cv-camouflage-bg {
  background-color: var(--cv-camouflage);
  color: var(--cv-camouflage-contrast);
}
.cv-camouflage-border {
  border-color: var(--cv-camouflage);
}
.cv-camouflage-text {
  color: var(--cv-camouflage);
}
:where([data-theme=light]) .cv-camouflage-tag.cv-camouflage-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-camouflage));
  background-color: color-mix(in srgb, var(--cv-camouflage) var(--bgmix), var(--cv-camouflage-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-camouflage) var(--bormix), var(--cv-camouflage-light));
}
:where([data-theme=light]) .cv-camouflage-tag.cv-camouflage-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-camouflage) var(--bgmix), var(--cv-camouflage-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-camouflage));
}
:where([data-theme=dark]) .cv-camouflage-tag.cv-camouflage-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-camouflage));
  background-color: color-mix(in srgb, var(--cv-camouflage) var(--bgmix), var(--cv-camouflage-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-camouflage) var(--bormix), var(--cv-camouflage-shade));
}
:where([data-theme=dark]) .cv-camouflage-tag.cv-camouflage-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-camouflage) var(--bgmix), var(--cv-camouflage-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-camouflage));
}
.cv-camouflage-tag.cv-camouflage-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-camouflage-contrast);
}

:where(.cv-candypink-bg) a {
  color: var(--cv-candypink-contrast);
}
:where(.cv-candypink-bg) a:hover {
  color: var(--cv-link);
}

.cv-candypink-bg {
  background-color: var(--cv-candypink);
  color: var(--cv-candypink-contrast);
}
.cv-candypink-border {
  border-color: var(--cv-candypink);
}
.cv-candypink-text {
  color: var(--cv-candypink);
}
:where([data-theme=light]) .cv-candypink-tag.cv-candypink-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-candypink));
  background-color: color-mix(in srgb, var(--cv-candypink) var(--bgmix), var(--cv-candypink-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-candypink) var(--bormix), var(--cv-candypink-light));
}
:where([data-theme=light]) .cv-candypink-tag.cv-candypink-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-candypink) var(--bgmix), var(--cv-candypink-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-candypink));
}
:where([data-theme=dark]) .cv-candypink-tag.cv-candypink-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-candypink));
  background-color: color-mix(in srgb, var(--cv-candypink) var(--bgmix), var(--cv-candypink-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-candypink) var(--bormix), var(--cv-candypink-shade));
}
:where([data-theme=dark]) .cv-candypink-tag.cv-candypink-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-candypink) var(--bgmix), var(--cv-candypink-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-candypink));
}
.cv-candypink-tag.cv-candypink-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-candypink-contrast);
}

:where(.cv-chocolate-bg) a {
  color: var(--cv-chocolate-contrast);
}
:where(.cv-chocolate-bg) a:hover {
  color: var(--cv-link);
}

.cv-chocolate-bg {
  background-color: var(--cv-chocolate);
  color: var(--cv-chocolate-contrast);
}
.cv-chocolate-border {
  border-color: var(--cv-chocolate);
}
.cv-chocolate-text {
  color: var(--cv-chocolate);
}
:where([data-theme=light]) .cv-chocolate-tag.cv-chocolate-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-chocolate));
  background-color: color-mix(in srgb, var(--cv-chocolate) var(--bgmix), var(--cv-chocolate-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-chocolate) var(--bormix), var(--cv-chocolate-light));
}
:where([data-theme=light]) .cv-chocolate-tag.cv-chocolate-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-chocolate) var(--bgmix), var(--cv-chocolate-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-chocolate));
}
:where([data-theme=dark]) .cv-chocolate-tag.cv-chocolate-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-chocolate));
  background-color: color-mix(in srgb, var(--cv-chocolate) var(--bgmix), var(--cv-chocolate-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-chocolate) var(--bormix), var(--cv-chocolate-shade));
}
:where([data-theme=dark]) .cv-chocolate-tag.cv-chocolate-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-chocolate) var(--bgmix), var(--cv-chocolate-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-chocolate));
}
.cv-chocolate-tag.cv-chocolate-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-chocolate-contrast);
}

:where(.cv-crimsonglory-bg) a {
  color: var(--cv-crimsonglory-contrast);
}
:where(.cv-crimsonglory-bg) a:hover {
  color: var(--cv-link);
}

.cv-crimsonglory-bg {
  background-color: var(--cv-crimsonglory);
  color: var(--cv-crimsonglory-contrast);
}
.cv-crimsonglory-border {
  border-color: var(--cv-crimsonglory);
}
.cv-crimsonglory-text {
  color: var(--cv-crimsonglory);
}
:where([data-theme=light]) .cv-crimsonglory-tag.cv-crimsonglory-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-crimsonglory));
  background-color: color-mix(in srgb, var(--cv-crimsonglory) var(--bgmix), var(--cv-crimsonglory-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-crimsonglory) var(--bormix), var(--cv-crimsonglory-light));
}
:where([data-theme=light]) .cv-crimsonglory-tag.cv-crimsonglory-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-crimsonglory) var(--bgmix), var(--cv-crimsonglory-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-crimsonglory));
}
:where([data-theme=dark]) .cv-crimsonglory-tag.cv-crimsonglory-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-crimsonglory));
  background-color: color-mix(in srgb, var(--cv-crimsonglory) var(--bgmix), var(--cv-crimsonglory-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-crimsonglory) var(--bormix), var(--cv-crimsonglory-shade));
}
:where([data-theme=dark]) .cv-crimsonglory-tag.cv-crimsonglory-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-crimsonglory) var(--bgmix), var(--cv-crimsonglory-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-crimsonglory));
}
.cv-crimsonglory-tag.cv-crimsonglory-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-crimsonglory-contrast);
}

:where(.cv-deepredpearl-bg) a {
  color: var(--cv-deepredpearl-contrast);
}
:where(.cv-deepredpearl-bg) a:hover {
  color: var(--cv-link);
}

.cv-deepredpearl-bg {
  background-color: var(--cv-deepredpearl);
  color: var(--cv-deepredpearl-contrast);
}
.cv-deepredpearl-border {
  border-color: var(--cv-deepredpearl);
}
.cv-deepredpearl-text {
  color: var(--cv-deepredpearl);
}
:where([data-theme=light]) .cv-deepredpearl-tag.cv-deepredpearl-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-deepredpearl));
  background-color: color-mix(in srgb, var(--cv-deepredpearl) var(--bgmix), var(--cv-deepredpearl-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-deepredpearl) var(--bormix), var(--cv-deepredpearl-light));
}
:where([data-theme=light]) .cv-deepredpearl-tag.cv-deepredpearl-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-deepredpearl) var(--bgmix), var(--cv-deepredpearl-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-deepredpearl));
}
:where([data-theme=dark]) .cv-deepredpearl-tag.cv-deepredpearl-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-deepredpearl));
  background-color: color-mix(in srgb, var(--cv-deepredpearl) var(--bgmix), var(--cv-deepredpearl-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-deepredpearl) var(--bormix), var(--cv-deepredpearl-shade));
}
:where([data-theme=dark]) .cv-deepredpearl-tag.cv-deepredpearl-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-deepredpearl) var(--bgmix), var(--cv-deepredpearl-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-deepredpearl));
}
.cv-deepredpearl-tag.cv-deepredpearl-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-deepredpearl-contrast);
}

:where(.cv-electricblue-bg) a {
  color: var(--cv-electricblue-contrast);
}
:where(.cv-electricblue-bg) a:hover {
  color: var(--cv-link);
}

.cv-electricblue-bg {
  background-color: var(--cv-electricblue);
  color: var(--cv-electricblue-contrast);
}
.cv-electricblue-border {
  border-color: var(--cv-electricblue);
}
.cv-electricblue-text {
  color: var(--cv-electricblue);
}
:where([data-theme=light]) .cv-electricblue-tag.cv-electricblue-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-electricblue));
  background-color: color-mix(in srgb, var(--cv-electricblue) var(--bgmix), var(--cv-electricblue-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-electricblue) var(--bormix), var(--cv-electricblue-light));
}
:where([data-theme=light]) .cv-electricblue-tag.cv-electricblue-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-electricblue) var(--bgmix), var(--cv-electricblue-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-electricblue));
}
:where([data-theme=dark]) .cv-electricblue-tag.cv-electricblue-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-electricblue));
  background-color: color-mix(in srgb, var(--cv-electricblue) var(--bgmix), var(--cv-electricblue-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-electricblue) var(--bormix), var(--cv-electricblue-shade));
}
:where([data-theme=dark]) .cv-electricblue-tag.cv-electricblue-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-electricblue) var(--bgmix), var(--cv-electricblue-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-electricblue));
}
.cv-electricblue-tag.cv-electricblue-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-electricblue-contrast);
}

:where(.cv-gentleplum-bg) a {
  color: var(--cv-gentleplum-contrast);
}
:where(.cv-gentleplum-bg) a:hover {
  color: var(--cv-link);
}

.cv-gentleplum-bg {
  background-color: var(--cv-gentleplum);
  color: var(--cv-gentleplum-contrast);
}
.cv-gentleplum-border {
  border-color: var(--cv-gentleplum);
}
.cv-gentleplum-text {
  color: var(--cv-gentleplum);
}
:where([data-theme=light]) .cv-gentleplum-tag.cv-gentleplum-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-gentleplum));
  background-color: color-mix(in srgb, var(--cv-gentleplum) var(--bgmix), var(--cv-gentleplum-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-gentleplum) var(--bormix), var(--cv-gentleplum-light));
}
:where([data-theme=light]) .cv-gentleplum-tag.cv-gentleplum-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-gentleplum) var(--bgmix), var(--cv-gentleplum-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-gentleplum));
}
:where([data-theme=dark]) .cv-gentleplum-tag.cv-gentleplum-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-gentleplum));
  background-color: color-mix(in srgb, var(--cv-gentleplum) var(--bgmix), var(--cv-gentleplum-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-gentleplum) var(--bormix), var(--cv-gentleplum-shade));
}
:where([data-theme=dark]) .cv-gentleplum-tag.cv-gentleplum-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-gentleplum) var(--bgmix), var(--cv-gentleplum-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-gentleplum));
}
.cv-gentleplum-tag.cv-gentleplum-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-gentleplum-contrast);
}

:where(.cv-emerald-bg) a {
  color: var(--cv-emerald-contrast);
}
:where(.cv-emerald-bg) a:hover {
  color: var(--cv-link);
}

.cv-emerald-bg {
  background-color: var(--cv-emerald);
  color: var(--cv-emerald-contrast);
}
.cv-emerald-border {
  border-color: var(--cv-emerald);
}
.cv-emerald-text {
  color: var(--cv-emerald);
}
:where([data-theme=light]) .cv-emerald-tag.cv-emerald-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-emerald));
  background-color: color-mix(in srgb, var(--cv-emerald) var(--bgmix), var(--cv-emerald-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-emerald) var(--bormix), var(--cv-emerald-light));
}
:where([data-theme=light]) .cv-emerald-tag.cv-emerald-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-emerald) var(--bgmix), var(--cv-emerald-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-emerald));
}
:where([data-theme=dark]) .cv-emerald-tag.cv-emerald-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-emerald));
  background-color: color-mix(in srgb, var(--cv-emerald) var(--bgmix), var(--cv-emerald-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-emerald) var(--bormix), var(--cv-emerald-shade));
}
:where([data-theme=dark]) .cv-emerald-tag.cv-emerald-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-emerald) var(--bgmix), var(--cv-emerald-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-emerald));
}
.cv-emerald-tag.cv-emerald-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-emerald-contrast);
}

:where(.cv-grannysmith-bg) a {
  color: var(--cv-grannysmith-contrast);
}
:where(.cv-grannysmith-bg) a:hover {
  color: var(--cv-link);
}

.cv-grannysmith-bg {
  background-color: var(--cv-grannysmith);
  color: var(--cv-grannysmith-contrast);
}
.cv-grannysmith-border {
  border-color: var(--cv-grannysmith);
}
.cv-grannysmith-text {
  color: var(--cv-grannysmith);
}
:where([data-theme=light]) .cv-grannysmith-tag.cv-grannysmith-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-grannysmith));
  background-color: color-mix(in srgb, var(--cv-grannysmith) var(--bgmix), var(--cv-grannysmith-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-grannysmith) var(--bormix), var(--cv-grannysmith-light));
}
:where([data-theme=light]) .cv-grannysmith-tag.cv-grannysmith-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-grannysmith) var(--bgmix), var(--cv-grannysmith-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-grannysmith));
}
:where([data-theme=dark]) .cv-grannysmith-tag.cv-grannysmith-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-grannysmith));
  background-color: color-mix(in srgb, var(--cv-grannysmith) var(--bgmix), var(--cv-grannysmith-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-grannysmith) var(--bormix), var(--cv-grannysmith-shade));
}
:where([data-theme=dark]) .cv-grannysmith-tag.cv-grannysmith-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-grannysmith) var(--bgmix), var(--cv-grannysmith-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-grannysmith));
}
.cv-grannysmith-tag.cv-grannysmith-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-grannysmith-contrast);
}

:where(.cv-fuschiapearl-bg) a {
  color: var(--cv-fuschiapearl-contrast);
}
:where(.cv-fuschiapearl-bg) a:hover {
  color: var(--cv-link);
}

.cv-fuschiapearl-bg {
  background-color: var(--cv-fuschiapearl);
  color: var(--cv-fuschiapearl-contrast);
}
.cv-fuschiapearl-border {
  border-color: var(--cv-fuschiapearl);
}
.cv-fuschiapearl-text {
  color: var(--cv-fuschiapearl);
}
:where([data-theme=light]) .cv-fuschiapearl-tag.cv-fuschiapearl-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-fuschiapearl));
  background-color: color-mix(in srgb, var(--cv-fuschiapearl) var(--bgmix), var(--cv-fuschiapearl-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-fuschiapearl) var(--bormix), var(--cv-fuschiapearl-light));
}
:where([data-theme=light]) .cv-fuschiapearl-tag.cv-fuschiapearl-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-fuschiapearl) var(--bgmix), var(--cv-fuschiapearl-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-fuschiapearl));
}
:where([data-theme=dark]) .cv-fuschiapearl-tag.cv-fuschiapearl-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-fuschiapearl));
  background-color: color-mix(in srgb, var(--cv-fuschiapearl) var(--bgmix), var(--cv-fuschiapearl-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-fuschiapearl) var(--bormix), var(--cv-fuschiapearl-shade));
}
:where([data-theme=dark]) .cv-fuschiapearl-tag.cv-fuschiapearl-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-fuschiapearl) var(--bgmix), var(--cv-fuschiapearl-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-fuschiapearl));
}
.cv-fuschiapearl-tag.cv-fuschiapearl-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-fuschiapearl-contrast);
}

:where(.cv-hotpink-bg) a {
  color: var(--cv-hotpink-contrast);
}
:where(.cv-hotpink-bg) a:hover {
  color: var(--cv-link);
}

.cv-hotpink-bg {
  background-color: var(--cv-hotpink);
  color: var(--cv-hotpink-contrast);
}
.cv-hotpink-border {
  border-color: var(--cv-hotpink);
}
.cv-hotpink-text {
  color: var(--cv-hotpink);
}
:where([data-theme=light]) .cv-hotpink-tag.cv-hotpink-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-hotpink));
  background-color: color-mix(in srgb, var(--cv-hotpink) var(--bgmix), var(--cv-hotpink-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-hotpink) var(--bormix), var(--cv-hotpink-light));
}
:where([data-theme=light]) .cv-hotpink-tag.cv-hotpink-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-hotpink) var(--bgmix), var(--cv-hotpink-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-hotpink));
}
:where([data-theme=dark]) .cv-hotpink-tag.cv-hotpink-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-hotpink));
  background-color: color-mix(in srgb, var(--cv-hotpink) var(--bgmix), var(--cv-hotpink-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-hotpink) var(--bormix), var(--cv-hotpink-shade));
}
:where([data-theme=dark]) .cv-hotpink-tag.cv-hotpink-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-hotpink) var(--bgmix), var(--cv-hotpink-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-hotpink));
}
.cv-hotpink-tag.cv-hotpink-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-hotpink-contrast);
}

:where(.cv-hotred-bg) a {
  color: var(--cv-hotred-contrast);
}
:where(.cv-hotred-bg) a:hover {
  color: var(--cv-link);
}

.cv-hotred-bg {
  background-color: var(--cv-hotred);
  color: var(--cv-hotred-contrast);
}
.cv-hotred-border {
  border-color: var(--cv-hotred);
}
.cv-hotred-text {
  color: var(--cv-hotred);
}
:where([data-theme=light]) .cv-hotred-tag.cv-hotred-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-hotred));
  background-color: color-mix(in srgb, var(--cv-hotred) var(--bgmix), var(--cv-hotred-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-hotred) var(--bormix), var(--cv-hotred-light));
}
:where([data-theme=light]) .cv-hotred-tag.cv-hotred-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-hotred) var(--bgmix), var(--cv-hotred-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-hotred));
}
:where([data-theme=dark]) .cv-hotred-tag.cv-hotred-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-hotred));
  background-color: color-mix(in srgb, var(--cv-hotred) var(--bgmix), var(--cv-hotred-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-hotred) var(--bormix), var(--cv-hotred-shade));
}
:where([data-theme=dark]) .cv-hotred-tag.cv-hotred-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-hotred) var(--bgmix), var(--cv-hotred-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-hotred));
}
.cv-hotred-tag.cv-hotred-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-hotred-contrast);
}

:where(.cv-leafgreen-bg) a {
  color: var(--cv-leafgreen-contrast);
}
:where(.cv-leafgreen-bg) a:hover {
  color: var(--cv-link);
}

.cv-leafgreen-bg {
  background-color: var(--cv-leafgreen);
  color: var(--cv-leafgreen-contrast);
}
.cv-leafgreen-border {
  border-color: var(--cv-leafgreen);
}
.cv-leafgreen-text {
  color: var(--cv-leafgreen);
}
:where([data-theme=light]) .cv-leafgreen-tag.cv-leafgreen-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-leafgreen));
  background-color: color-mix(in srgb, var(--cv-leafgreen) var(--bgmix), var(--cv-leafgreen-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-leafgreen) var(--bormix), var(--cv-leafgreen-light));
}
:where([data-theme=light]) .cv-leafgreen-tag.cv-leafgreen-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-leafgreen) var(--bgmix), var(--cv-leafgreen-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-leafgreen));
}
:where([data-theme=dark]) .cv-leafgreen-tag.cv-leafgreen-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-leafgreen));
  background-color: color-mix(in srgb, var(--cv-leafgreen) var(--bgmix), var(--cv-leafgreen-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-leafgreen) var(--bormix), var(--cv-leafgreen-shade));
}
:where([data-theme=dark]) .cv-leafgreen-tag.cv-leafgreen-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-leafgreen) var(--bgmix), var(--cv-leafgreen-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-leafgreen));
}
.cv-leafgreen-tag.cv-leafgreen-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-leafgreen-contrast);
}

:where(.cv-lemonade-bg) a {
  color: var(--cv-lemonade-contrast);
}
:where(.cv-lemonade-bg) a:hover {
  color: var(--cv-link);
}

.cv-lemonade-bg {
  background-color: var(--cv-lemonade);
  color: var(--cv-lemonade-contrast);
}
.cv-lemonade-border {
  border-color: var(--cv-lemonade);
}
.cv-lemonade-text {
  color: var(--cv-lemonade);
}
:where([data-theme=light]) .cv-lemonade-tag.cv-lemonade-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-lemonade));
  background-color: color-mix(in srgb, var(--cv-lemonade) var(--bgmix), var(--cv-lemonade-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-lemonade) var(--bormix), var(--cv-lemonade-light));
}
:where([data-theme=light]) .cv-lemonade-tag.cv-lemonade-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-lemonade) var(--bgmix), var(--cv-lemonade-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-lemonade));
}
:where([data-theme=dark]) .cv-lemonade-tag.cv-lemonade-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-lemonade));
  background-color: color-mix(in srgb, var(--cv-lemonade) var(--bgmix), var(--cv-lemonade-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-lemonade) var(--bormix), var(--cv-lemonade-shade));
}
:where([data-theme=dark]) .cv-lemonade-tag.cv-lemonade-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-lemonade) var(--bgmix), var(--cv-lemonade-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-lemonade));
}
.cv-lemonade-tag.cv-lemonade-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-lemonade-contrast);
}

:where(.cv-lightbluepearl-bg) a {
  color: var(--cv-lightbluepearl-contrast);
}
:where(.cv-lightbluepearl-bg) a:hover {
  color: var(--cv-link);
}

.cv-lightbluepearl-bg {
  background-color: var(--cv-lightbluepearl);
  color: var(--cv-lightbluepearl-contrast);
}
.cv-lightbluepearl-border {
  border-color: var(--cv-lightbluepearl);
}
.cv-lightbluepearl-text {
  color: var(--cv-lightbluepearl);
}
:where([data-theme=light]) .cv-lightbluepearl-tag.cv-lightbluepearl-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-lightbluepearl));
  background-color: color-mix(in srgb, var(--cv-lightbluepearl) var(--bgmix), var(--cv-lightbluepearl-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-lightbluepearl) var(--bormix), var(--cv-lightbluepearl-light));
}
:where([data-theme=light]) .cv-lightbluepearl-tag.cv-lightbluepearl-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-lightbluepearl) var(--bgmix), var(--cv-lightbluepearl-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-lightbluepearl));
}
:where([data-theme=dark]) .cv-lightbluepearl-tag.cv-lightbluepearl-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-lightbluepearl));
  background-color: color-mix(in srgb, var(--cv-lightbluepearl) var(--bgmix), var(--cv-lightbluepearl-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-lightbluepearl) var(--bormix), var(--cv-lightbluepearl-shade));
}
:where([data-theme=dark]) .cv-lightbluepearl-tag.cv-lightbluepearl-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-lightbluepearl) var(--bgmix), var(--cv-lightbluepearl-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-lightbluepearl));
}
.cv-lightbluepearl-tag.cv-lightbluepearl-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-lightbluepearl-contrast);
}

:where(.cv-midnightpurple-bg) a {
  color: var(--cv-midnightpurple-contrast);
}
:where(.cv-midnightpurple-bg) a:hover {
  color: var(--cv-link);
}

.cv-midnightpurple-bg {
  background-color: var(--cv-midnightpurple);
  color: var(--cv-midnightpurple-contrast);
}
.cv-midnightpurple-border {
  border-color: var(--cv-midnightpurple);
}
.cv-midnightpurple-text {
  color: var(--cv-midnightpurple);
}
:where([data-theme=light]) .cv-midnightpurple-tag.cv-midnightpurple-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-midnightpurple));
  background-color: color-mix(in srgb, var(--cv-midnightpurple) var(--bgmix), var(--cv-midnightpurple-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-midnightpurple) var(--bormix), var(--cv-midnightpurple-light));
}
:where([data-theme=light]) .cv-midnightpurple-tag.cv-midnightpurple-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-midnightpurple) var(--bgmix), var(--cv-midnightpurple-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-midnightpurple));
}
:where([data-theme=dark]) .cv-midnightpurple-tag.cv-midnightpurple-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-midnightpurple));
  background-color: color-mix(in srgb, var(--cv-midnightpurple) var(--bgmix), var(--cv-midnightpurple-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-midnightpurple) var(--bormix), var(--cv-midnightpurple-shade));
}
:where([data-theme=dark]) .cv-midnightpurple-tag.cv-midnightpurple-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-midnightpurple) var(--bgmix), var(--cv-midnightpurple-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-midnightpurple));
}
.cv-midnightpurple-tag.cv-midnightpurple-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-midnightpurple-contrast);
}

:where(.cv-stringbean-bg) a {
  color: var(--cv-stringbean-contrast);
}
:where(.cv-stringbean-bg) a:hover {
  color: var(--cv-link);
}

.cv-stringbean-bg {
  background-color: var(--cv-stringbean);
  color: var(--cv-stringbean-contrast);
}
.cv-stringbean-border {
  border-color: var(--cv-stringbean);
}
.cv-stringbean-text {
  color: var(--cv-stringbean);
}
:where([data-theme=light]) .cv-stringbean-tag.cv-stringbean-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-stringbean));
  background-color: color-mix(in srgb, var(--cv-stringbean) var(--bgmix), var(--cv-stringbean-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-stringbean) var(--bormix), var(--cv-stringbean-light));
}
:where([data-theme=light]) .cv-stringbean-tag.cv-stringbean-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-stringbean) var(--bgmix), var(--cv-stringbean-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-stringbean));
}
:where([data-theme=dark]) .cv-stringbean-tag.cv-stringbean-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-stringbean));
  background-color: color-mix(in srgb, var(--cv-stringbean) var(--bgmix), var(--cv-stringbean-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-stringbean) var(--bormix), var(--cv-stringbean-shade));
}
:where([data-theme=dark]) .cv-stringbean-tag.cv-stringbean-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-stringbean) var(--bgmix), var(--cv-stringbean-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-stringbean));
}
.cv-stringbean-tag.cv-stringbean-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-stringbean-contrast);
}

:where(.cv-sweetpotato-bg) a {
  color: var(--cv-sweetpotato-contrast);
}
:where(.cv-sweetpotato-bg) a:hover {
  color: var(--cv-link);
}

.cv-sweetpotato-bg {
  background-color: var(--cv-sweetpotato);
  color: var(--cv-sweetpotato-contrast);
}
.cv-sweetpotato-border {
  border-color: var(--cv-sweetpotato);
}
.cv-sweetpotato-text {
  color: var(--cv-sweetpotato);
}
:where([data-theme=light]) .cv-sweetpotato-tag.cv-sweetpotato-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-sweetpotato));
  background-color: color-mix(in srgb, var(--cv-sweetpotato) var(--bgmix), var(--cv-sweetpotato-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-sweetpotato) var(--bormix), var(--cv-sweetpotato-light));
}
:where([data-theme=light]) .cv-sweetpotato-tag.cv-sweetpotato-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-sweetpotato) var(--bgmix), var(--cv-sweetpotato-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-sweetpotato));
}
:where([data-theme=dark]) .cv-sweetpotato-tag.cv-sweetpotato-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-sweetpotato));
  background-color: color-mix(in srgb, var(--cv-sweetpotato) var(--bgmix), var(--cv-sweetpotato-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-sweetpotato) var(--bormix), var(--cv-sweetpotato-shade));
}
:where([data-theme=dark]) .cv-sweetpotato-tag.cv-sweetpotato-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-sweetpotato) var(--bgmix), var(--cv-sweetpotato-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-sweetpotato));
}
.cv-sweetpotato-tag.cv-sweetpotato-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-sweetpotato-contrast);
}

:where(.cv-tranquility-bg) a {
  color: var(--cv-tranquility-contrast);
}
:where(.cv-tranquility-bg) a:hover {
  color: var(--cv-link);
}

.cv-tranquility-bg {
  background-color: var(--cv-tranquility);
  color: var(--cv-tranquility-contrast);
}
.cv-tranquility-border {
  border-color: var(--cv-tranquility);
}
.cv-tranquility-text {
  color: var(--cv-tranquility);
}
:where([data-theme=light]) .cv-tranquility-tag.cv-tranquility-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-tranquility));
  background-color: color-mix(in srgb, var(--cv-tranquility) var(--bgmix), var(--cv-tranquility-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-tranquility) var(--bormix), var(--cv-tranquility-light));
}
:where([data-theme=light]) .cv-tranquility-tag.cv-tranquility-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-tranquility) var(--bgmix), var(--cv-tranquility-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-tranquility));
}
:where([data-theme=dark]) .cv-tranquility-tag.cv-tranquility-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-tranquility));
  background-color: color-mix(in srgb, var(--cv-tranquility) var(--bgmix), var(--cv-tranquility-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-tranquility) var(--bormix), var(--cv-tranquility-shade));
}
:where([data-theme=dark]) .cv-tranquility-tag.cv-tranquility-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-tranquility) var(--bgmix), var(--cv-tranquility-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-tranquility));
}
.cv-tranquility-tag.cv-tranquility-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-tranquility-contrast);
}

:where(.cv-turquoise-bg) a {
  color: var(--cv-turquoise-contrast);
}
:where(.cv-turquoise-bg) a:hover {
  color: var(--cv-link);
}

.cv-turquoise-bg {
  background-color: var(--cv-turquoise);
  color: var(--cv-turquoise-contrast);
}
.cv-turquoise-border {
  border-color: var(--cv-turquoise);
}
.cv-turquoise-text {
  color: var(--cv-turquoise);
}
:where([data-theme=light]) .cv-turquoise-tag.cv-turquoise-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-turquoise));
  background-color: color-mix(in srgb, var(--cv-turquoise) var(--bgmix), var(--cv-turquoise-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-turquoise) var(--bormix), var(--cv-turquoise-light));
}
:where([data-theme=light]) .cv-turquoise-tag.cv-turquoise-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-turquoise) var(--bgmix), var(--cv-turquoise-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-turquoise));
}
:where([data-theme=dark]) .cv-turquoise-tag.cv-turquoise-tag {
  color: color-mix(in srgb, var(--cv-g-500) 60%, var(--cv-turquoise));
  background-color: color-mix(in srgb, var(--cv-turquoise) var(--bgmix), var(--cv-turquoise-shade));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-turquoise) var(--bormix), var(--cv-turquoise-shade));
}
:where([data-theme=dark]) .cv-turquoise-tag.cv-turquoise-tag.clickableTag:hover {
  --bgmix:20%;
  background-color: color-mix(in srgb, var(--cv-turquoise) var(--bgmix), var(--cv-turquoise-shade));
  color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-turquoise));
}
.cv-turquoise-tag.cv-turquoise-tag:where(button):hover {
  --bgmix:100%;
  --bormix:30%;
  color: var(--cv-turquoise-contrast);
}

:root {
  --cv-subheader:var(--cv-header);
  --cv-subheader-contrast:var(--cv-header-contrast);
  --cv-subheader-shade:var(--cv-subheader-shade);
  --cv-subheader-light:var(--cv-subheader-light);
  --cv-search-placeholder:var(--cv-header-light);
  --cv-subheader-bg:var(--cv-header-contrast);
}

.mainHeader.mainHeader {
  background-color: var(--cv-header);
  color: var(--header-text-color, var(--cv-header-contrast));
  box-shadow: var(--header-box-shadow, none);
  background-repeat: no-repeat;
  background-size: var(--header-background-img-size, 100%), var(--header-background-img2-size, auto);
  background-position: var(--bg-img-pos, top), var(--bg-img2-pos, center) 0.5rem;
  background-image: var(--header-background-img, none), var(--header-background-img2, none), linear-gradient(var(--header-grad-rotation, 90deg), var(--header-grad-left, rgba(0, 0, 0, 0)) 0%, var(--header-grad-right, rgba(0, 0, 0, 0)) 100%);
}
.mainHeader.mainHeader a {
  color: var(--header-text-color, var(--cv-subheader-contrast, var(--cv-header-contrast)));
}
.mainHeader.mainHeader a:hover, .mainHeader.mainHeader a:focus {
  color: var(--header-text-color-hover, color-mix(in srgb, var(--cv-header-contrast) 80%, var(--cv-header)));
  background-color: var(--header-text-bgcolor-active, color-mix(in hsl, var(--cv-header-contrast) 10%, rgba(0, 0, 0, 0)));
}
.mainHeader.mainHeader button {
  color: var(--cv-header-contrast, var(--header-text-color));
}
.mainHeader.mainHeader .langSelect li a, .mainHeader.mainHeader .menu ul li {
  color: var(--cv-w-contrast);
}
.mainHeader.mainHeader .cs-menu-overflow-grad {
  display: none;
}
.mainHeader.mainHeader .lang-dropdown {
  background-color: color-mix(in hsl, var(--cv-header-contrast) 10%, rgba(0, 0, 0, 0));
}
.option4 .mainHeader.mainHeader .nav-_resous a, .option4 .mainHeader.mainHeader .menuButton button, .option1 .mainHeader.mainHeader .nav-_resous a, .option1 .mainHeader.mainHeader .menuButton button {
  color: color-mix(in srgb, var(--cv-header-contrast) 70%, var(--cv-header));
}
.option4 .mainHeader.mainHeader .nav-_resous a:hover, .option4 .mainHeader.mainHeader .menuButton button:hover, .option1 .mainHeader.mainHeader .nav-_resous a:hover, .option1 .mainHeader.mainHeader .menuButton button:hover {
  color: color-mix(in srgb, var(--cv-header-contrast) 99%, var(--cv-header));
  background-color: transparent;
}
.option5 .mainHeader.mainHeader .left-nav-home.left-nav-home {
  color: var(--cv-header-contrast);
  background-color: var(--cv-header);
}
.option5 .mainHeader.mainHeader .left-nav-home.left-nav-home:hover, .option5 .mainHeader.mainHeader .left-nav-home.left-nav-home .active {
  color: color-mix(in srgb, var(--cv-header-contrast) 90%, var(--cv-header));
  background-color: color-mix(in hsl, var(--cv-header-contrast) 10%, rgba(0, 0, 0, 0));
}
.mainHeader.mainHeader .dh .nav-actions button {
  color: color-mix(in SRGB, var(--cv-header-contrast) 70%, var(--cv-header));
}
.mainHeader.mainHeader .dh .nav-actions button:hover, .mainHeader.mainHeader .dh .nav-actions button .active {
  color: var(--cv-header-contrast);
  background: transparent;
}
.mainHeader.mainHeader .dh .toggleLeftMenu {
  color: var(--cv-g-500);
}
.mainHeader.mainHeader .cs-list-menu li, .mainHeader.mainHeader .cs-list-menu a {
  color: var(--subheader-text-color, var(--cv-w-contrast));
}
.mainHeader.mainHeader .cs-list-menu li:hover, .mainHeader.mainHeader .cs-list-menu li:hover a, .mainHeader.mainHeader .cs-list-menu a:hover, .mainHeader.mainHeader .cs-list-menu a:hover a {
  box-shadow: none;
}

.cs-menu-nav ul li a, .sub-nav-menu ul li a {
  color: var(--subheader-text-color, var(--header-text-color, var(--cv-w-contrast)));
}
.cs-menu-nav ul li a:hover, .cs-menu-nav ul li a:focus, .sub-nav-menu ul li a:hover, .sub-nav-menu ul li a:focus {
  color: var(--header-text-color-hover, color-mix(in srgb, var(--cv-header-contrast) 80%, var(--cv-header)));
  background-color: var(--header-text-bgcolor-active, color-mix(in hsl, var(--cv-header-contrast) 10%, rgba(0, 0, 0, 0)));
}

.sub-nav-menu {
  background-color: var(--cv-subheader);
  color: var(--subheader-text-color, var(--header-text-color, var(--cv-header-contrast)));
}
.sub-nav-menu li a {
  background-color: transparent;
}
.option1 .sub-nav-menu .cs-menu-overflow-grad.cs-menu-overflow-grad {
  background: linear-gradient(to left, var(--cv-header-shade), color-mix(in hsl, var(--cv-header-shade) 40%, rgba(0, 0, 0, 0)) 90%);
}
.option1 .sub-nav-menu .cs-menu-overflow-grad.cs-menu-overflow-grad, .option2 .sub-nav-menu .cs-menu-overflow-grad.cs-menu-overflow-grad {
  display: block;
  width: 1rem;
  position: relative;
  z-index: 1;
  left: -14px;
}
.option2 .sub-nav-menu .cs-menu-overflow-grad.cs-menu-overflow-grad {
  background: linear-gradient(to left, var(--cv-header), color-mix(in hsl, var(--cv-header) 40%, rgba(0, 0, 0, 0)) 90%);
}
.option4 .sub-nav-menu {
  background-color: var(--cv-header);
}
.option5 .sub-nav-menu .mainHeader.mainHeader .lang-dropdown {
  background: transparent;
}
.option5 .sub-nav-menu.sub-nav-menu.sub-nav-menu {
  background-color: var(--cv-header-shade);
}
.option5 .sub-nav-menu a,
.option5 .sub-nav-menu button, .option5 .sub-nav-menu.left-nav-home {
  color: var(--cv-header-contrast);
}
.option5 .sub-nav-menu a:hover, .option5 .sub-nav-menu a .active,
.option5 .sub-nav-menu button:hover,
.option5 .sub-nav-menu button .active, .option5 .sub-nav-menu.left-nav-home:hover, .option5 .sub-nav-menu.left-nav-home .active {
  color: color-mix(in srgb, var(--cv-header-contrast) 90%, var(--cv-header));
  background-color: color-mix(in hsl, var(--cv-header-contrast) 10%, rgba(0, 0, 0, 0));
}

.has-new:after {
  background-color: var(--cv-alert);
  border-color: var(--cv-header);
}

.searchCont.searchCont.searchCont button:hover {
  background: transparent;
  color: color-mix(in srgb, var(--cv-header) 40%, var(--cv-header-contrast));
}

.quick-search.quick-search {
  background-color: color-mix(in hsl, var(--cv-header-contrast) 10%, rgba(0, 0, 0, 0));
  border-color: color-mix(in hsl, var(--cv-header-contrast) 5%, rgba(0, 0, 0, 0));
  color: var(--cv-header-contrast);
}
.quick-search.quick-search input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--cv-search-placeholder);
}
.quick-search.quick-search input::-moz-placeholder { /* Firefox 19+ */
  color: var(--cv-search-placeholder);
}
.quick-search.quick-search input:-ms-input-placeholder { /* IE 10+ */
  color: var(--cv-search-placeholder);
}
.quick-search.quick-search input:-moz-placeholder { /* Firefox 18- */
  color: var(--cv-search-placeholder);
}
.quick-search.quick-search input:focus, .quick-search.quick-search .input-icon:focus-within {
  color: var(--cv-header-contrast);
  background: transparent;
}
.quick-search.quick-search.input-icon:focus-within {
  background-color: color-mix(in hsl, var(--cv-link) 5%, rgba(0, 0, 0, 0));
  border-color: color-mix(in srgb, var(--cv-header-contrast) 90%, var(--cv-header));
  color: var(--cv-header-contrast);
}

.dh .quick-search.quick-search.input-icon:focus-within {
  background-color: color-mix(in hsl, var(--cv-header-contrast) 20%, rgba(0, 0, 0, 0));
  border-color: color-mix(in srgb, var(--cv-header-contrast) 90%, var(--cv-header));
  color: var(--cv-header-contrast);
}

.hl-1 .sub-nav-menu li a:hover {
  box-shadow: 0 -2px var(--header-text-color-hover, var(--header-text-color-active), var(--cv-header-contrast)) inset;
  color: var(--header-text-color-hover, var(--header-text-color-active), var(--cv-header-contrast));
  background-color: var(--header-text-bgcolor-active);
}
.hl-1 .sub-nav-menu li.active > a {
  box-shadow: 0 -2px var(--header-text-color-active, var(--cv-header-contrast)) inset;
  color: var(--header-text-color-active, var(--cv-header-contrast));
  background-color: var(--header-text-bgcolor-active);
}
.hl-1 .sub-nav-menu li.active > svg {
  color: var(--header-text-color-active, var(--cv-header-contrast));
}

.hl-2 .sub-nav-menu li a:hover {
  background-color: transparent;
}
.hl-2 .sub-nav-menu li.active > a {
  background-color: var(--header-text-bgcolor-active, var(--cv-g-100));
  color: var(--header-text-color-active, var(--cv-header));
}
.hl-2 .sub-nav-menu li.active > svg {
  color: var(--header-svg-color-active, var(--header-text-color-active), var(--cv-header));
}

.hl-3 .sub-nav-menu li {
  margin: 0 calc(var(--gutterSize) / 6) 0 calc(var(--gutterSize) / 6);
}
.hl-3 .sub-nav-menu li.home_icon_header:hover, .hl-3 .sub-nav-menu li:hover > a,
.hl-3 .sub-nav-menu li button {
  color: var(--header-text-color-hover, var(--cv-link));
  background-color: transparent;
  cursor: pointer;
}
.hl-3 .sub-nav-menu li.home_icon_header:hover a, .hl-3 .sub-nav-menu li:hover > a a,
.hl-3 .sub-nav-menu li button a {
  color: inherit;
}
.hl-3 .sub-nav-menu li.active > a {
  background-color: var(--header-text-bgcolor-active, transparent);
  color: var(--header-text-color-active, var(--cv-link));
  cursor: pointer;
}
.hl-3 .sub-nav-menu li.home_icon_header.active {
  background-color: var(--header-svg-bgcolor-active, var(--header-text-bgcolor-active, transparent));
  color: var(--header-svg-color-active, var(--header-text-color-active, var(--cv-link)));
  cursor: pointer;
}
.hl-3 .actions button:hover {
  background-color: transparent;
  color: var(--cv-link);
}
.hl-3 .actions button:hover svg {
  color: inherit;
}

.mega-menu-nav {
  background-color: var(--mega-menu-bg, var(--cv-w));
}
.mega-menu-nav:before {
  color: var(--mega-menu-color, var(--cv-w-contrast));
}
.mega-menu-nav .mega-menu-body ul li {
  color: var(--mega-menu-color, var(--cv-w-contrast));
}
.mega-menu-nav .mega-menu-body ul li:hover {
  color: var(--mega-menu-color-active, var(--cv-link));
}
.mega-menu-nav .mega-menu-body h5 {
  color: var(--mega-menu-color, var(--cv-w-contrast));
}

.cs-listComponent {
  background-color: var(--cv-w);
}

.cs-listComponent .grid-head .cal-next-arrow:hover,
.cs-listComponent .grid-head .cal-prev-arrow:hover {
  color: var(--cv-link);
}

ul.f-dropdown,
.cs-list-menu.cs-list-menu,
.sd-dropdown-list {
  background-color: var(--cv-w);
  border-bottom-color: var(--cv-g-200);
}
ul.f-dropdown li,
.cs-list-menu.cs-list-menu li,
.sd-dropdown-list li {
  border-color: var(--cv-g-200);
  color: var(--cv-w-contrast);
  transition: background var(--animation-base) ease;
}
ul.f-dropdown li :where(a),
.cs-list-menu.cs-list-menu li :where(a),
.sd-dropdown-list li :where(a) {
  color: inherit;
}
ul.f-dropdown li:not(.no-hover):hover, ul.f-dropdown li.active, ul.f-dropdown li.selected,
.cs-list-menu.cs-list-menu li:not(.no-hover):hover,
.cs-list-menu.cs-list-menu li.active,
.cs-list-menu.cs-list-menu li.selected,
.sd-dropdown-list li:not(.no-hover):hover,
.sd-dropdown-list li.active,
.sd-dropdown-list li.selected {
  background-color: var(--cv-g-100);
  color: var(--cv-link);
}
ul.f-dropdown li:not(.no-hover):hover span, ul.f-dropdown li:not(.no-hover):hover a, ul.f-dropdown li.active span, ul.f-dropdown li.active a, ul.f-dropdown li.selected span, ul.f-dropdown li.selected a,
.cs-list-menu.cs-list-menu li:not(.no-hover):hover span,
.cs-list-menu.cs-list-menu li:not(.no-hover):hover a,
.cs-list-menu.cs-list-menu li.active span,
.cs-list-menu.cs-list-menu li.active a,
.cs-list-menu.cs-list-menu li.selected span,
.cs-list-menu.cs-list-menu li.selected a,
.sd-dropdown-list li:not(.no-hover):hover span,
.sd-dropdown-list li:not(.no-hover):hover a,
.sd-dropdown-list li.active span,
.sd-dropdown-list li.active a,
.sd-dropdown-list li.selected span,
.sd-dropdown-list li.selected a {
  color: inherit;
  background: transparent;
}
ul.f-dropdown li.adminActionLbl,
.cs-list-menu.cs-list-menu li.adminActionLbl,
.sd-dropdown-list li.adminActionLbl {
  background-color: var(--cv-g-100);
  pointer-events: none;
}
ul.f-dropdown li.adminActionLbl span,
.cs-list-menu.cs-list-menu li.adminActionLbl span,
.sd-dropdown-list li.adminActionLbl span {
  color: var(--cv-g-400);
}
ul.f-dropdown li:last-child,
.cs-list-menu.cs-list-menu li:last-child,
.sd-dropdown-list li:last-child {
  border-bottom-color: var(--cv-w);
}

.patPostActions:before, .patReplyActions:before {
  color: var(--cv-w);
}

.workflowActionsList.workflowActionsList {
  background-color: var(--cv-g-100);
}
.workflowActionsList.workflowActionsList li {
  background-color: var(--cv-w);
}
.workflowActionsList.workflowActionsList .no-hover {
  background-color: transparent;
}
.workflowActionsList.workflowActionsList .subworkflow li {
  border-left-color: var(--primary-color);
}

.workflowActionsList.workflowActionsList {
  background-color: var(--cv-g-100);
}
.workflowActionsList.workflowActionsList li {
  background-color: var(--cv-w);
}
.workflowActionsList.workflowActionsList .no-hover {
  background-color: transparent;
}
.workflowActionsList.workflowActionsList .subworkflow li {
  border-left-color: var(--primary-color);
}

.filters-projects {
  border-bottom-color: var(--cv-g-200);
}

select.cs-list-menu option[selected] {
  background: color-mix(in srgb, var(--cv-w) 90%, var(--cv-link));
  color: var(--cv-link);
  border-bottom: 1px solid var(--cv-w);
}

.filters-projects.filters-projects .saved-filter:before {
  color: var(--cv-link);
}

select.cs-list-menu option[selected] {
  background: color-mix(in srgb, var(--cv-w) 90%, var(--cv-link));
  color: var(--cv-link);
  border-bottom: 1px solid var(--cv-w);
}

.cs-list li {
  border-color: var(--cv-g-100);
  transition: all var(--animation-base) ease;
}
.cs-list li:hover, .cs-list li.active, .cs-list li.selected {
  color: var(--cv-link);
}
.cs-list li:hover span, .cs-list li.active span, .cs-list li.selected span {
  color: inherit;
}

.cs-list-menu li ul li {
  color: var(--cv-g-500);
  border-left-color: var(--cv-g-200);
}
.cs-list-menu li ul li:hover, .cs-list-menu li ul li.active, .cs-list-menu li ul li.selected {
  color: var(--cv-link);
}
.cs-list-menu li ul li:hover span, .cs-list-menu li ul li.active span, .cs-list-menu li ul li.selected span {
  color: inherit;
}

.cs-menu-nav.cs-menu-nav > ul {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 -2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 8px 8px rgba(0, 0, 0, 0.11), 0 16px 16px rgba(0, 0, 0, 0.11);
}
.cs-menu-nav.cs-menu-nav > ul li a:hover {
  color: var(--cv-link);
}

.sd-action-list {
  background-color: var(--cv-w);
}

.sdWidgetList tr {
  border-color: var(--cv-g-200);
}
.sdWidgetList tr:hover {
  background: color-mix(in srgb, var(--cv-w) 90%, var(--cv-link));
}

.projectFeature {
  border-bottom-color: var(--cv-g-100);
}
.projectFeature:hover {
  color: var(--cv-link);
}
.projectFeature.active {
  background-color: var(--cv-link);
  color: var(--cv-link-contrast);
}

.unityList__item input {
  border-color: var(--cv-g-300);
}

.cs-listComponent.cs-listComponent .grid-head:not(.cs-subHeader) .dataFilter,
.collab-header .dataFilter,
.workboxesListHeader .unityList__item .dataFilter,
.unityList table thead th .dataFilter {
  color: var(--cv-g-350);
}
.cs-listComponent.cs-listComponent .grid-head:not(.cs-subHeader) .dataFilter:hover, .cs-listComponent.cs-listComponent .grid-head:not(.cs-subHeader) .dataFilter:hover svg, .cs-listComponent.cs-listComponent .grid-head:not(.cs-subHeader) .dataFilter.on,
.collab-header .dataFilter:hover,
.collab-header .dataFilter:hover svg,
.collab-header .dataFilter.on,
.workboxesListHeader .unityList__item .dataFilter:hover,
.workboxesListHeader .unityList__item .dataFilter:hover svg,
.workboxesListHeader .unityList__item .dataFilter.on,
.unityList table thead th .dataFilter:hover,
.unityList table thead th .dataFilter:hover svg,
.unityList table thead th .dataFilter.on {
  color: var(--cv-link);
}

.cs-listComponent.cs-listComponent .grid-head,
.collab-header,
.workboxesListHeader .unityList__item,
.unityList table thead th,
.headerData, .headerActions {
  color: var(--cv-g-500);
  border-bottom-color: var(--cv-g-300);
}

.unityList table thead th p:hover {
  color: var(--cv-link);
}
.unityList table thead th p:hover.up {
  border-top-color: var(--cv-link);
}
.unityList table thead th p.up:after {
  border-top-color: var(--cv-g-400);
}
.unityList table thead th p.down:after {
  border-bottom-color: var(--cv-g-400);
}

.select-list li:hover {
  background-color: var(--cv-g-100);
}
.select-list li:hover label,
.select-list li:hover span::before,
.select-list li:hover label span {
  color: var(--cv-link);
}

.searchList .listRecord {
  border-bottom-color: var(--cv-g-200);
}

.star-ratings li {
  color: var(--cv-yellow);
}

.cs-emptyList .emptyFileList,
.emptysubListText {
  color: var(--cv-g-400);
}

.task-overdue input {
  border-color: var(--cv-alert);
  color: var(--cv-alert);
}

.cs-sdlRow > :first-child {
  border-left-color: var(--cv-w);
}

.projectTaskRow {
  border-bottom-color: var(--cv-g-300);
}

.cs-sdlRow.dirtyRead .cs-checkcell {
  background-image: linear-gradient(var(--cv-notification) 65%, rgba(255, 255, 255, 0) 0%);
}
.cs-sdlRow.dirtyRead .list-dropdown.disabled:before {
  color: var(--cv-notification);
}
.cs-sdlRow .sd-button.disabled, .cs-sdlRow .sd-button[disabled] {
  box-shadow: none;
  color: var(--cv-g-110-contrast);
  opacity: 0.7;
}
.cs-sdlRow .sd-button.disabled .dropdown, .cs-sdlRow .sd-button[disabled] .dropdown {
  background-color: var(--cv-g-100);
}
.cs-sdlRow [data-value=Cancelled] .list-dropdown:not([class$=-bg]) {
  box-shadow: 0 0 0 1px inset var(--cv-red);
}

.cs-subRow {
  background: var(--cv-g-100);
}
.cs-subRow.dirtyRead .cs-checkcell {
  border-left-color: var(--cv-notification) !important;
}
.cs-subRow.dirtyRead .list-dropdown.disabled:before {
  color: var(--cv-notification);
}
.cs-subRow > :first-child {
  border-left-color: var(--cv-g-100);
}

.cs-sdlRow:hover .grid-cell, .cs-sdlRow:hover .fixedCell.fixedCell.fixedCell, .cs-sdlRow:hover .cs-checkcell.cs-checkcell.cs-checkcell {
  transition: background-color 0.5s ease;
  background: color-mix(in srgb, var(--cv-w) 90%, var(--cv-link));
}
.cs-sdlRow:hover .grid-cell .clickable.clickable, .cs-sdlRow:hover .fixedCell.fixedCell.fixedCell .clickable.clickable, .cs-sdlRow:hover .cs-checkcell.cs-checkcell.cs-checkcell .clickable.clickable {
  color: var(--cv-link);
}
.cs-sdlRow:hover .grid-cell .list-dropdown .clickable.clickable, .cs-sdlRow:hover .fixedCell.fixedCell.fixedCell .list-dropdown .clickable.clickable, .cs-sdlRow:hover .cs-checkcell.cs-checkcell.cs-checkcell .list-dropdown .clickable.clickable {
  color: inherit;
}
.cs-sdlRow:hover .fixedCell:last-child .sd-button {
  color: var(--cv-link);
}
.cs-sdlRow:hover .cs-actionIcon .cs-actionIconLink {
  color: var(--cv-link);
}

.loadMore td.fixedCell {
  color: var(--cv-link) !important;
}
.loadMore td.fixedCell:hover {
  background-color: var(--cv-link) !important;
  color: var(--cv-w) !important;
}

.formThumbList .loadMore.loadMore.loadMore.loadMore {
  background: var(--cv-g-120);
  color: var(--cv-link);
  box-shadow: 0 0 0 1px inset var(--cv-link);
}
.formThumbList .loadMore.loadMore.loadMore.loadMore:hover {
  background: var(--cv-link);
  color: var(--cv-link-contrast);
}

.cs-sdlRow td[style*="color: rgb(209, 14, 14)"] .sd-button, .cs-sdlRow td[style*="color: rgb(209, 14, 14)"] span {
  color: var(--cv-red);
}

.cs-sdlRow td[style*="color: rgb(219, 43, 8)"] .sd-button, .cs-sdlRow td[style*="color: rgb(219, 43, 8)"] span {
  color: var(--cv-redorange);
}

.cs-sdlRow td[style*="color: rgb(230, 81, 0)"] .sd-button, .cs-sdlRow td[style*="color: rgb(230, 81, 0)"] span {
  color: var(--cv-darkorange);
}

.cs-sdlRow td[style*="color: rgb(241, 128, 0)"] .sd-button, .cs-sdlRow td[style*="color: rgb(241, 128, 0)"] span {
  color: var(--cv-orange);
}

.cs-sdlRow td[style*="color: rgb(253, 179, 2)"] .sd-button, .cs-sdlRow td[style*="color: rgb(253, 179, 2)"] span {
  color: var(--cv-yellow);
}

.cs-sdlRow td[style*="color: rgb(183, 184, 2)"] .sd-button, .cs-sdlRow td[style*="color: rgb(183, 184, 2)"] span {
  color: var(--cv-yellowgreen);
}

.cs-sdlRow td[style*="color: rgb(142, 187, 2)"] .sd-button, .cs-sdlRow td[style*="color: rgb(142, 187, 2)"] span {
  color: var(--cv-lime);
}

.cs-sdlRow td[style*="color: rgb(89, 151, 6)"] .sd-button, .cs-sdlRow td[style*="color: rgb(89, 151, 6)"] span {
  color: var(--cv-limegreen);
}

.cs-sdlRow td[style*="color: rgb(36, 114, 9)"] .sd-button, .cs-sdlRow td[style*="color: rgb(36, 114, 9)"] span {
  color: var(--cv-green);
}

.cs-sdlRow td[style*="color: rgb(35, 161, 109)"] .sd-button, .cs-sdlRow td[style*="color: rgb(35, 161, 109)"] span {
  color: var(--cv-greenblue);
}

.cs-sdlRow td[style*="color: rgb(34, 207, 209)"] .sd-button, .cs-sdlRow td[style*="color: rgb(34, 207, 209)"] span {
  color: var(--cv-cyan);
}

.cs-sdlRow td[style*="color: rgb(50, 145, 203)"] .sd-button, .cs-sdlRow td[style*="color: rgb(50, 145, 203)"] span {
  color: var(--cv-babyblue);
}

.cs-sdlRow td[style*="color: rgb(62, 98, 199)"] .sd-button, .cs-sdlRow td[style*="color: rgb(62, 98, 199)"] span {
  color: var(--cv-blue);
}

.cs-sdlRow td[style*="color: rgb(114, 72, 180)"] .sd-button, .cs-sdlRow td[style*="color: rgb(114, 72, 180)"] span {
  color: var(--cv-violet);
}

.cs-sdlRow td[style*="color: rgb(170, 43, 159)"] .sd-button, .cs-sdlRow td[style*="color: rgb(170, 43, 159)"] span {
  color: var(--cv-purple);
}

.cs-sdlRow td[style*="color: rgb(195, 34, 129)"] .sd-button, .cs-sdlRow td[style*="color: rgb(195, 34, 129)"] span {
  color: var(--cv-crimson);
}

.cs-sdlRow td[style*="color: rgb(224, 23, 97)"] .sd-button, .cs-sdlRow td[style*="color: rgb(224, 23, 97)"] span {
  color: var(--cv-pink);
}

.cs-sdlRow td[style*="color: rgb(114, 114, 114)"] .sd-button, .cs-sdlRow td[style*="color: rgb(114, 114, 114)"] span {
  color: var(--g-300);
}

.cs-sdlRow td[style*="color: rgb(97, 97, 97)"] .sd-button, .cs-sdlRow td[style*="color: rgb(97, 97, 97)"] span {
  color: var(--cv-g-400);
}

.cs-sdlRow td[style*="background-color: rgb(209, 14, 14)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(209, 14, 14)"] span {
  color: var(--cv-w);
}

.cs-sdlRow td[style*="background-color: rgb(219, 43, 8)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(219, 43, 8)"] span {
  color: var(--cv-w);
}

.cs-sdlRow td[style*="background-color: rgb(230, 81, 0)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(230, 81, 0)"] span {
  color: var(--cv-w);
}

.cs-sdlRow td[style*="background-color: rgb(241, 128, 0)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(241, 128, 0)"] span {
  color: var(--cv-w);
}

.cs-sdlRow td[style*="background-color: rgb(253, 179, 2)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(253, 179, 2)"] span {
  color: var(--cv-g-400);
}

.cs-sdlRow td[style*="background-color: rgb(183, 184, 2)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(183, 184, 2)"] span {
  color: var(--cv-w);
}

.cs-sdlRow td[style*="background-color: rgb(142, 187, 2)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(142, 187, 2)"] span {
  color: var(--cv-w);
}

.cs-sdlRow td[style*="background-color: rgb(89, 151, 6)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(89, 151, 6)"] span {
  color: var(--cv-w);
}

.cs-sdlRow td[style*="background-color: rgb(36, 114, 9)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(36, 114, 9)"] span {
  color: var(--cv-w);
}

.cs-sdlRow td[style*="background-color: rgb(35, 161, 109)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(35, 161, 109)"] span {
  color: var(--cv-w);
}

.cs-sdlRow td[style*="background-color: rgb(34, 207, 209)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(34, 207, 209)"] span {
  color: var(--cv-g-400);
}

.cs-sdlRow td[style*="background-color: rgb(50, 145, 203)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(50, 145, 203)"] span {
  color: var(--cv-w);
}

.cs-sdlRow td[style*="background-color: rgb(62, 98, 199)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(62, 98, 199)"] span {
  color: var(--cv-);
}

.cs-sdlRow td[style*="background-color: rgb(114, 72, 180)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(114, 72, 180)"] span {
  color: var(--cv-w);
}

.cs-sdlRow td[style*="background-color: rgb(170, 43, 159)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(170, 43, 159)"] span {
  color: var(--cv-w);
}

.cs-sdlRow td[style*="background-color: rgb(195, 34, 129)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(195, 34, 129)"] span {
  color: var(--cv-w);
}

.cs-sdlRow td[style*="background-color: rgb(224, 23, 97)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(224, 23, 97)"] span {
  color: var(--cv-w);
}

.cs-sdlRow td[style*="background-color: rgb(114, 114, 114)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(114, 114, 114)"] span {
  color: var(--cv-w);
}

.cs-sdlRow td[style*="background-color: rgb(97, 97, 97)"] .sd-button, .cs-sdlRow td[style*="background-color: rgb(97, 97, 97)"] span {
  color: var(--cv-w);
}

.fixedCell:last-child {
  border-left-color: var(--cv-g-100);
}
.fixedCell.cellDivider {
  border-right-color: var(--cv-g-100);
}

.cs-listComponent .cellDivider.cellDivider::before {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}

.cs-milestone.diamond {
  background-color: var(--cv-g-350);
  border-color: var(--cv-w);
}
.cs-milestone.diamond.complete {
  background-color: var(--cv-success);
}

.cs-milestone.diamond.rm {
  background-color: var(--cv-g-350);
  border-color: var(--cv-w);
}

.gantt_grid_data .gantt_cell .gantt_add:before {
  color: var(--cv-g-350);
}
.gantt_grid_data .gantt_cell .gantt_add:hover:before {
  color: var(--cv-link);
}

.gantt_task_line.gantt_milestone .gantt_task_content.gantt_task_content {
  background-color: var(--cv-g-350);
  border-color: var(--cv-w);
}

.gantt_task_line.gantt_milestone {
  background: transparent !important;
}
.gantt_task_line.gantt_milestone::before {
  color: var(--cv-green);
}

.asMilestone button svg {
  color: var(--cv-g-350);
}

.gantt_layout_cell.gantt_layout_cell .gantt_tree_icon.gantt_close:after {
  color: var(--cv-link);
}
.gantt_layout_cell.gantt_layout_cell .gantt_tree_icon.gantt_open:after {
  color: var(--cv-g-400);
}

.gantt_grid_data .gantt_row:hover, .gantt_grid_data .gantt_row.odd:hover, .gantt_task_row.gantt_selected, .gantt_grid_data .gantt_row.gantt_selected, .gantt_grid_data .gantt_row.odd.gantt_selected {
  background-color: color-mix(in srgb, var(--cv-link) 10%, var(--cv-w));
  color: var(--cv-link);
}

.gantt_task_row.gantt_selected .gantt_task_cell {
  border-right-color: var(--cv-link);
}

.gantt_grid_editor_placeholder input {
  font-size: 0.8rem;
  padding: 0.5rem;
}

.gantt_grid_editor_placeholder select {
  border-color: var(--cv-link);
}

[data-guid=asMilestone].complete .sd-button svg {
  color: var(--cv-success);
}

.milestoneContainer.complete .cs-milestone.diamond, .milestoneContainer.complete .cs-milestone.diamond.rm {
  background-color: var(--cv-success);
}

.grid-cell.complete .cs-milestone.diamond {
  background-color: var(--cv-success);
}

.gantt_bar_milestone.gantt_bar_milestone.complete .gantt_task_content.gantt_task_content {
  background-color: var(--cv-success);
}

.gantt_row[aria-level="2"] div,
.gantt_row[aria-level="4"] div,
.gantt_row[aria-level="3"] div {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-link)) !important;
}

#ganttContainer .weekend {
  background-image: repeating-linear-gradient(52deg, var(--cv-w), var(--cv-w) 4px, color-mix(in SRGB, var(--cv-w) 90%, var(--cv-w-contrast)) 4px, color-mix(in SRGB, var(--cv-w) 90%, var(--cv-w-contrast)) 8px);
}

.milestone .gantt_cell {
  background-color: var(--cv-w);
  color: var(--cv-g-500);
}

.gantt_task_line {
  background-color: var(--cv-turquoise) !important;
  border-color: var(--cv-turquoise) !important;
}
.gantt_task_line.gantt_milestone {
  background: transparent !important;
}

.gantt_task_overdue {
  background-color: var(--cv-red) !important;
  border-color: var(--cv-red) !important;
}

.gantt_task_complete {
  background-color: var(--cv-greenblue) !important;
  border-color: var(--cv-greenblue) !important;
}

.baseline .baseline {
  background-color: var(--cv-yellow) !important;
  border-color: var(--cv-yellow) !important;
}

/*context menu*/
.cs-listContextMenu.cs-listContextMenu.cs-listContextMenu.reverseMenu {
  background-color: var(--cv-g-500);
}
.cs-listContextMenu.cs-listContextMenu.cs-listContextMenu.reverseMenu li {
  color: color-mix(in SRGB, var(--cv-g-500-contrast) 60%, rgba(0, 0, 0, 0));
  border-bottom-color: color-mix(in SRGB, var(--cv-g-500-contrast) 20%, rgba(0, 0, 0, 0));
}
.cs-listContextMenu.cs-listContextMenu.cs-listContextMenu.reverseMenu li.disabled {
  color: color-mix(in SRGB, var(--cv-g-500-contrast) 80%, rgba(0, 0, 0, 0));
}
.cs-listContextMenu.cs-listContextMenu.cs-listContextMenu.reverseMenu li:hover {
  background-color: transparent;
  color: var(--cv-g-500-contrast);
}

.cs-listContextMenu li.disabled {
  color: var(--cv-g-350) !important;
  background-color: var(--cv-w) !important;
}

.cs-listComponent th.hiddenCol {
  border-color: var(--cv-notification);
}

.projectFeatureContainer .taskListHeader.taskListHeader {
  background-color: var(--cv-w);
}

.projectFeatureContainer .taskListHeader.taskListHeader,
.projectFeatureContainer .taskListHeaderKB.taskListHeaderKB {
  border-bottom-color: var(--cv-g-100);
}
.projectFeatureContainer .taskListHeader.taskListHeader .tasklistToggleView,
.projectFeatureContainer .taskListHeaderKB.taskListHeaderKB .tasklistToggleView {
  color: var(--cv-g-350);
}
.projectFeatureContainer .taskListHeader.taskListHeader .tasklistToggleView:hover,
.projectFeatureContainer .taskListHeaderKB.taskListHeaderKB .tasklistToggleView:hover {
  color: var(--cv-g-500);
}
.projectFeatureContainer .taskListHeader.taskListHeader .tasklistToggleView.active,
.projectFeatureContainer .taskListHeaderKB.taskListHeaderKB .tasklistToggleView.active {
  color: var(--cv-g-500);
}
.projectFeatureContainer .taskListHeader.taskListHeader .tasklistToggleView.active:after,
.projectFeatureContainer .taskListHeaderKB.taskListHeaderKB .tasklistToggleView.active:after {
  background-color: var(--cv-link);
}

.taskListMain.taskListMain .cs-dragColumn.cs-dragColumn,
.taskListMain.taskListMain [data-guid=dragColumn] {
  background: var(--cv-g-100);
}

.cs-sdlRow:hover .cs-dragItem {
  background: transparent;
}

.cs-kanban-container {
  background-color: var(--cv-w);
}

/*    gantt*/
#ganttContainer .gantt_row,
#ganttContainer .gantt_task_row,
#ganttContainer .gantt_scale_cell,
#ganttContainer .gantt_scale_line,
#ganttContainer .gantt_task_scale,
#ganttContainer .gantt_grid_scale,
#ganttContainer .gantt_container {
  background: var(--cv-w);
  color: var(--cv-w-contrast);
  border-color: var(--cv-g-200);
}
#ganttContainer .gantt_grid_scale .gantt_grid_head_cell {
  color: var(--cv-g-500);
  font-family: var(--body-font-stack);
}

.gantt_grid_scale .gantt_grid_column_resize_wrap .gantt_grid_column_resize {
  background-color: var(--cv-w);
  transition: 0.2s background ease;
}
.gantt_grid_scale:hover .gantt_grid_column_resize_wrap .gantt_grid_column_resize {
  background-color: var(--cv-g-200);
}

.gantt_grid_column_resize_wrap:hover .gantt_grid_column_resize.gantt_grid_column_resize.gantt_grid_column_resize {
  background-color: var(--cv-link);
}

.gantt_layout_cell_border_right.gantt_resizer {
  background-color: var(--cv-g-200);
}
.gantt_layout_cell_border_right.gantt_resizer:hover {
  background-color: var(--cv-link);
}

.sortDragList:before {
  background-color: var(--cv-g-100);
}

.cs-listComp .cs-sdlRow .cs-subsCell,
.cs-listComp .cs-sdlRow .grid-cell {
  border-bottom-color: var(--cv-g-200);
}
.cs-listComp .grid-cell[data-value=allocationIcon]:hover {
  color: var(--cv-link);
}
.cs-listComp .grid-cell[data-addnew=true],
.cs-listComp .grid-cell[data-value=Add] {
  color: var(--cv-green);
}
.cs-listComp .grid-cell[data-addnew=true] .flex,
.cs-listComp .grid-cell[data-value=Add] .flex {
  border-color: var(--cv-green);
}
.cs-listComp .grid-cell[data-addnew=true] .flex:hover,
.cs-listComp .grid-cell[data-value=Add] .flex:hover {
  background-color: var(--cv-green);
}
.cs-listComp .grid-cell[data-addnew=true] .flex:hover span, .cs-listComp .grid-cell[data-addnew=true] .flex:hover:before,
.cs-listComp .grid-cell[data-value=Add] .flex:hover span,
.cs-listComp .grid-cell[data-value=Add] .flex:hover:before {
  color: var(--cv-w);
}

.reports-wrap .cs-sdLtbody .cs-sdlRow .grid-cell[data-value=Completed] span {
  background-color: var(--cv-greenblue);
  color: var(--cv-w);
}

.reports-wrap .cs-sdLtbody .cs-sdlRow .grid-cell[data-value=Failed] span {
  background-color: var(--cv-red);
  color: var(--cv-w);
}

.reports-wrap .cs-sdLtbody .cs-sdlRow .grid-cell[data-value=Queued] span {
  background-color: var(--cv-redorange);
  color: var(--cv-w);
}

.compactList .grid-cell {
  border-bottom-color: var(--cv-g-200);
}

.cs-showSubsBtn.icon-hasKids {
  color: var(--cv-g-500);
}
.expand .cs-showSubsBtn.icon-hasKids:before, .cs-showSubsBtn.icon-hasKids:before:hover {
  color: var(--cv-link);
}
.expand .cs-showSubsBtn.icon-hasKids:before span, .cs-showSubsBtn.icon-hasKids:before:hover span {
  color: var(--cv-link);
}

.list-dropdown {
  border: none;
}
.list-dropdown > span, .list-dropdown > svg {
  color: inherit;
}

.list-dropdown {
  transition: unset;
}
.list-dropdown:hover {
  box-shadow: inset 0 0 0 50px rgba(0, 0, 0, 0.1);
}
.list-dropdown:hover span, .list-dropdown:hover a {
  color: inherit;
  background: transparent;
}

.cs-checkbox-wrapper[style="background-color: rgb(0, 128, 0);"] {
  background-color: var(--cv-success) !important;
  accent-color: var(--cv-success-contrast);
}

.cs-listComponent .cs-checkcell {
  border-left: 1px solid var(--cv-w) !important;
}

[data-value=inprogress] .list-dropdown:not([class$=-bg]) {
  background-color: var(--cv-orange);
  color: var(--cv-orange-contrast);
  border-color: var(--cv-orange);
  box-shadow: 0 0 0 1px inset var(--list-dropdown-border, var(--cv-orange));
}
[data-value=inprogress] .list-dropdown:not([class$=-bg]):hover {
  background-color: var(--cv-orange-shade);
}
[data-value=inprogress].cs-tag {
  background-color: var(--cv-orange);
  color: var(--cv-orange-contrast);
  border-color: var(--cv-orange);
}

.taskStatus-inprogress .cs-checkcell .cs-checkbox-wrapper {
  border-bottom-color: var(--cv-orange);
  accent-color: color-contrast(cv-orange);
}

[data-value="In Progress"] .list-dropdown:not([class$=-bg]) {
  background-color: var(--cv-orange);
  color: var(--cv-orange-contrast);
  border-color: var(--cv-orange);
  box-shadow: 0 0 0 1px inset var(--list-dropdown-border, var(--cv-orange));
}
[data-value="In Progress"] .list-dropdown:not([class$=-bg]):hover {
  background-color: var(--cv-orange-shade);
}
[data-value="In Progress"].cs-tag {
  background-color: var(--cv-orange);
  color: var(--cv-orange-contrast);
  border-color: var(--cv-orange);
}

.taskStatus-In Progress .cs-checkcell .cs-checkbox-wrapper {
  border-bottom-color: var(--cv-orange);
  accent-color: color-contrast(cv-orange);
}

[data-value=tobedone] .list-dropdown:not([class$=-bg]) {
  background-color: var(--cv-electricblue);
  color: var(--cv-electricblue-contrast);
  border-color: var(--cv-electricblue);
  box-shadow: 0 0 0 1px inset var(--list-dropdown-border, var(--cv-electricblue));
}
[data-value=tobedone] .list-dropdown:not([class$=-bg]):hover {
  background-color: var(--cv-electricblue-shade);
}
[data-value=tobedone].cs-tag {
  background-color: var(--cv-electricblue);
  color: var(--cv-electricblue-contrast);
  border-color: var(--cv-electricblue);
}

.taskStatus-tobedone .cs-checkcell .cs-checkbox-wrapper {
  border-bottom-color: var(--cv-electricblue);
}

[data-value=complete] .list-dropdown:not([class$=-bg]) {
  background-color: var(--cv-success);
  color: var(--cv-success-contrast);
  border-color: var(--cv-success);
  box-shadow: 0 0 0 1px inset var(--list-dropdown-border, var(--cv-success));
}
[data-value=complete] .list-dropdown:not([class$=-bg]):hover {
  background-color: var(--cv-success-shade);
}
[data-value=complete].cs-tag {
  background-color: var(--cv-success);
  color: var(--cv-success-contrast);
  border-color: var(--cv-success);
}

.taskStatus-complete .cs-checkcell .cs-checkbox-wrapper {
  border-bottom-color: var(--cv-success);
  accent-color: color-contrast(cv-success);
}

[data-value=Complete] .list-dropdown:not([class$=-bg]) {
  background-color: var(--cv-success);
  color: var(--cv-success-contrast);
  border-color: var(--cv-success);
  box-shadow: 0 0 0 1px inset var(--list-dropdown-border, var(--cv-success));
}
[data-value=Complete] .list-dropdown:not([class$=-bg]):hover {
  background-color: var(--cv-success-shade);
}
[data-value=Complete].cs-tag {
  background-color: var(--cv-success);
  color: var(--cv-success-contrast);
  border-color: var(--cv-success);
}

.taskStatus-Complete .cs-checkcell .cs-checkbox-wrapper {
  border-bottom-color: var(--cv-success);
  accent-color: color-contrast(cv-success);
}

[data-value=Closed] .list-dropdown:not([class$=-bg]) {
  background-color: var(--cv-crimsonglory);
  color: var(--cv-crimsonglory-contrast);
  border-color: var(--cv-crimsonglory);
  box-shadow: 0 0 0 1px inset var(--list-dropdown-border, var(--cv-crimsonglory));
}
[data-value=Closed] .list-dropdown:not([class$=-bg]):hover {
  background-color: var(--cv-crimsonglory-shade);
}
[data-value=Closed].cs-tag {
  background-color: var(--cv-crimsonglory);
  color: var(--cv-crimsonglory-contrast);
  border-color: var(--cv-crimsonglory);
}

.taskStatus-Closed .cs-checkcell .cs-checkbox-wrapper {
  border-bottom-color: var(--cv-crimsonglory);
  accent-color: color-contrast(cv-crimsonglory);
}

[data-value=closed] .list-dropdown:not([class$=-bg]) {
  background-color: var(--cv-crimsonglory);
  color: var(--cv-crimsonglory-contrast);
  border-color: var(--cv-crimsonglory);
  box-shadow: 0 0 0 1px inset var(--list-dropdown-border, var(--cv-crimsonglory));
}
[data-value=closed] .list-dropdown:not([class$=-bg]):hover {
  background-color: var(--cv-crimsonglory-shade);
}
[data-value=closed].cs-tag {
  background-color: var(--cv-crimsonglory);
  color: var(--cv-crimsonglory-contrast);
  border-color: var(--cv-crimsonglory);
}

.taskStatus-closed .cs-checkcell .cs-checkbox-wrapper {
  border-bottom-color: var(--cv-crimsonglory);
  accent-color: color-contrast(cv-crimsonglory);
}

[data-value=Cancelled] .list-dropdown:not([class$=-bg]) {
  background-color: var(--cv-alert);
  color: var(--cv-alert-contrast);
  border-color: var(--cv-alert);
  box-shadow: 0 0 0 1px inset var(--list-dropdown-border, var(--cv-alert));
}
[data-value=Cancelled] .list-dropdown:not([class$=-bg]):hover {
  background-color: var(--cv-alert-shade);
}
[data-value=Cancelled].cs-tag {
  background-color: var(--cv-alert);
  color: var(--cv-alert-contrast);
  border-color: var(--cv-alert);
}

.taskStatus-Cancelled .cs-checkcell .cs-checkbox-wrapper {
  border-bottom-color: var(--cv-alert);
  accent-color: color-contrast(cv-alert);
}

[data-value=cancelled] .list-dropdown:not([class$=-bg]) {
  background-color: var(--cv-alert);
  color: var(--cv-alert-contrast);
  border-color: var(--cv-alert);
  box-shadow: 0 0 0 1px inset var(--list-dropdown-border, var(--cv-alert));
}
[data-value=cancelled] .list-dropdown:not([class$=-bg]):hover {
  background-color: var(--cv-alert-shade);
}
[data-value=cancelled].cs-tag {
  background-color: var(--cv-alert);
  color: var(--cv-alert-contrast);
  border-color: var(--cv-alert);
}

.taskStatus-cancelled .cs-checkcell .cs-checkbox-wrapper {
  border-bottom-color: var(--cv-alert);
  accent-color: color-contrast(cv-alert);
}

[data-value=Hold] .list-dropdown:not([class$=-bg]) {
  background-color: var(--cv-beerorange);
  color: var(--cv-beerorange-contrast);
  border-color: var(--cv-beerorange);
  box-shadow: 0 0 0 1px inset var(--list-dropdown-border, var(--cv-beerorange));
}
[data-value=Hold] .list-dropdown:not([class$=-bg]):hover {
  background-color: var(--cv-beerorange-shade);
}
[data-value=Hold].cs-tag {
  background-color: var(--cv-beerorange);
  color: var(--cv-beerorange-contrast);
  border-color: var(--cv-beerorange);
}

.taskStatus-Hold .cs-checkcell .cs-checkbox-wrapper {
  border-bottom-color: var(--cv-beerorange);
  accent-color: color-contrast(cv-beerorange);
}

[data-value=hold] .list-dropdown:not([class$=-bg]) {
  background-color: var(--cv-beerorange);
  color: var(--cv-beerorange-contrast);
  border-color: var(--cv-beerorange);
  box-shadow: 0 0 0 1px inset var(--list-dropdown-border, var(--cv-beerorange));
}
[data-value=hold] .list-dropdown:not([class$=-bg]):hover {
  background-color: var(--cv-beerorange-shade);
}
[data-value=hold].cs-tag {
  background-color: var(--cv-beerorange);
  color: var(--cv-beerorange-contrast);
  border-color: var(--cv-beerorange);
}

.taskStatus-hold .cs-checkcell .cs-checkbox-wrapper {
  border-bottom-color: var(--cv-beerorange);
  accent-color: color-contrast(cv-beerorange);
}

[data-value=Active] .list-dropdown:not([class$=-bg]) {
  background-color: var(--cv-blue);
  color: var(--cv-blue-contrast);
  border-color: var(--cv-blue);
  box-shadow: 0 0 0 1px inset var(--list-dropdown-border, var(--cv-blue));
}
[data-value=Active] .list-dropdown:not([class$=-bg]):hover {
  background-color: var(--cv-blue-shade);
}
[data-value=Active].cs-tag {
  background-color: var(--cv-blue);
  color: var(--cv-blue-contrast);
  border-color: var(--cv-blue);
}

.taskStatus-Active .cs-checkcell .cs-checkbox-wrapper {
  border-bottom-color: var(--cv-blue);
  accent-color: color-contrast(cv-blue);
}

.unityFilterDropDown {
  background: var(--cv-w);
}

.dataSort .cs-list-head-label.cs-list-head-label:hover {
  color: var(--cv-link);
}

.cs-list-head-label.cs-list-head-label.cs-list-head-label span:before {
  border-bottom-color: var(--cv-g-300);
}
.up .cs-list-head-label.cs-list-head-label.cs-list-head-label span:before {
  border-bottom-color: var(--cv-link);
}
.down .cs-list-head-label.cs-list-head-label.cs-list-head-label span:before {
  border-bottom-color: var(--cv-g-300);
}
.cs-list-head-label.cs-list-head-label.cs-list-head-label span:after {
  border-top-color: var(--cv-g-300);
}
.down .cs-list-head-label.cs-list-head-label.cs-list-head-label span:after {
  border-top-color: var(--cv-link);
}
.up .cs-list-head-label.cs-list-head-label.cs-list-head-label span:after {
  border-top-color: var(--cv-g-300);
}

.cs-listComponent.cs-listComponent th.up,
.cs-listComponent.cs-listComponent th.down {
  border-bottom-color: var(--cv-link);
  box-shadow: var(--cv-link) 0 1px 0 0 inset;
}
.cs-listComponent.cs-listComponent th.up .cs-list-head-label,
.cs-listComponent.cs-listComponent th.down .cs-list-head-label {
  color: var(--cv-link);
}

.sd-action-list li.active {
  background-color: var(--var(--primary-color));
  color: var(--var(--primary-color)-contrast);
}
.sd-action-list li.active:hover {
  background-color: var(--var(--primary-color)-shade);
}
.sd-action-list li.active a,
.sd-action-list li.active div {
  color: inherit;
}

li.list-item {
  border-bottom-color: var(--cv-g-200);
}

.sd-item-list tr {
  border-color: var(--cv-g-200);
}

.sd-sort-list {
  border-top-color: var(--cv-g-300);
}

[data-section=accordion] .active .title a {
  color: var(--cv-link);
}

.metaFilterSection,
.metaFilterOption {
  border-bottom-color: var(--cv-g-200);
}

.budgetTable .budgetInnerTable tr,
.estimateTable .estimateInnerTable tr {
  border-bottom-color: var(--cv-g-200);
}

.toggleTable {
  background-color: var(--cv-g-100);
}

.cs-selectedDDRow {
  background-color: color-mix(in srgb, var(--cv-link) 10%, var(--cv-w));
  color: var(--cv-link);
}
.cs-selectedDDRow span {
  color: var(--cv-link);
}

.discussionListHeader .unityList__item {
  box-shadow: rgba(0, 0, 0, 0.175) 0 2px 0 0;
  background-color: var(--var(--cv-w));
  color: var(--var(--cv-w)-contrast);
  color: var(--cv-g-500);
}

.project-budget-tabs .cs-listComponent .cs-stickyRow.cs-stickyRow .grid-cell {
  border-top-color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}
.project-budget-tabs .cs-listComponent .cs-stickyRow.cs-stickyRow .grid-cell:first-child {
  border-left-color: var(--primary-color);
}
.project-budget-tabs .cs-listComponent .cs-stickyRow.cs-stickyRow .grid-cell:last-child {
  border-right-color: var(--primary-color);
}
.project-budget-tabs .totalsItem svg:hover {
  opacity: 0.7;
}
.project-budget-tabs .cs-listComponent .grid-cell.expand.expand {
  color: var(--cv-link);
  border-right-color: var(--cv-w);
  border-bottom-color: var(--cv-g-200);
}
.project-budget-tabs .cs-listComponent .grid-cell * {
  color: inherit;
}
.project-budget-tabs .icon-hasKids,
.project-budget-tabs .icon-hasKids + span {
  color: var(--cv-g-500);
}
.project-budget-tabs .icon-hasKids:hover,
.project-budget-tabs .icon-hasKids + span:hover {
  color: var(--cv-link);
}

.budgetTable tr,
.budgetTable thead, .estimateTable tr,
.estimateTable thead {
  border-bottom: 1px solid var(--cv-g-100);
}

.cs-listComponent.cs-cellGrid .cs-sdlRow .grid-cell {
  border-color: var(--cv-g-120);
}

.cs-listComponent .cs-sdlRow .grid-cell.cs-cellShade1 {
  background-color: var(--cv-g-100);
}

.cs-listComponent .cs-sdlRow.cs-subRow .grid-cell.cs-cellShade1 {
  background-color: var(--cv-g-120);
}

.cs-listComponent .cs-sdlRow.cs-subRow .grid-cell.cs-cellShade2 {
  background-color: var(--cv-g-110);
}

.cs-listComponent.cs-cellGrid .cs-sdlRow .grid-cell.cs-list-darkerBB {
  border-bottom-color: var(--cv-g-200);
}
.cs-listComponent.cs-cellGrid .cs-sdlRow .grid-cell.cs-list-darkerBB + .cs-subsCell {
  border-bottom-color: var(--cv-g-200);
}

.cs-cellGrid .cs-sdlRow.cs-SubLevel1 > .grid-cell:first-child {
  border-left-color: var(--cv-link);
}

.project-budget-tabs .gt-panel {
  border-left: 0.5rem solid var(--cv-g-100);
}

.project-budget-tabs .cs-listComponent .editable-text > div {
  border-color: var(--cv-g-300);
  background: rgba(255, 255, 255, 0.2);
}

.project-budget-tabs [class*=preHeader-] :first-child {
  color: var(--cv-g-350);
}

#allocateTaskBulk .editable-text > div > span {
  border-color: var(--cv-g-200);
}

#allocateTaskBulk .editable-text.focusCell {
  outline-width: 0px;
}
#allocateTaskBulk .editable-text.focusCell span {
  border-color: var(--cv-notification);
}

.right-overview .progress {
  box-shadow: inset 0 0 1px 1px shade(var(--cv-g-300), 5%);
}

.list-dropdown.no-actions:not(.disabled):hover {
  color: var(--cv-g-100);
}

.cs-listComponent .cellDivider.cellDivider:before {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}

.cs-listComponent .cellDivider.cellDivider ~ .fixedCell:before {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}

.reports-wrap .cs-sdLtbody .cs-sdlRow .grid-cell td[data-value=Completed] span {
  background-color: var(--var(--cv-green));
  color: var(--var(--cv-green)-contrast);
}
.reports-wrap .cs-sdLtbody .cs-sdlRow .grid-cell td[data-value=Queued] span {
  background-color: var(--var(--cv-babyblue));
  color: var(--var(--cv-babyblue)-contrast);
}
.reports-wrap .cs-sdLtbody .cs-sdlRow .grid-cell td[data-value=Failed] span {
  background-color: var(--var(--cv-redorange));
  color: var(--var(--cv-redorange)-contrast);
}

.cs-sdLtbody .cs-sdlRow .grid-cell {
  border-bottom-color: var(--listBorder, var(--cv-g-120));
  transition: 0.5s;
  background-color: var(--listBg, var(--cv-w));
}
.cs-sdLtbody .cs-sdlRow .grid-cell.cs-savedCell {
  border: 1px solid var(--cv-notification) !important;
}
.cs-sdLtbody .cs-sdlRow .grid-cell > span {
  color: var(--cv-g-500);
}
.cs-sdLtbody .cs-sdlRow .grid-cell.expand .cs-showSubsBtn.icon-hasKids::before {
  color: var(--cv-link);
}
.cs-sdLtbody .cs-sdlRow:hover .grid-cell:not(.js-showSubsBtn),
.cs-sdLtbody .cs-sdlRow:hover [data-guid=workflowAsset] {
  background: color-mix(in srgb, var(--cv-w) 90%, var(--cv-link));
  transition: 0.5s;
}
.cs-sdLtbody .cs-sdlRow.cs-subRow .grid-cell, .cs-sdLtbody .cs-sdlRow.cs-subRow [data-guid=workflowAsset] {
  background: color-mix(in srgb, var(--cv-w) 95%, var(--cv-link));
}
.cs-sdLtbody .cs-sdlRow.cs-subRow:hover .grid-cell, .cs-sdLtbody .cs-sdlRow.cs-subRow:hover [data-guid=workflowAsset] {
  background: color-mix(in srgb, var(--cv-w) 90%, var(--cv-link));
  transition: 0.5s;
}
.cs-sdLtbody .cs-sdlRow.cs-checked .grid-cell, .cs-sdLtbody .cs-sdlRow.cs-checked [data-guid=workflowAsset] {
  background: color-mix(in srgb, var(--cv-w) 95%, var(--cv-link));
  transition: 0.5s;
}
.cs-sdLtbody .cs-sdlRow.cs-checked .clickable.clickable {
  color: var(--cv-link);
}
.cs-sdLtbody .cs-sdlRow.cs-checked .list-dropdown .clickable.clickable {
  color: inherit;
}
.cs-sdLtbody .cs-sdlRow.cs-checked .js-sdListDD.sd-button.quarterly {
  color: var(--cv-link);
}
.cs-sdLtbody .cs-sdlRow.cs-checked .grid-cell, .cs-sdLtbody .cs-sdlRow.cs-checked .cs-checkbox-wrapper {
  border-bottom-color: var(--cv-g-200);
}
.cs-sdLtbody .cs-sdlRow.cs-checked .list-dropdown.list-dropdown a {
  color: inherit;
}
.cs-sdLtbody .cs-sdlRow.cs-checked:hover .grid-cell {
  background: color-mix(in srgb, var(--cv-w) 95%, var(--cv-link));
  transition: 0.5s;
}
.cs-sdLtbody .cs-sdlRow.cs-subRow.cs-checked .grid-cell {
  background-color: var(--cv-g-200);
}
.cs-sdLtbody .cs-sdlRow.cs-checked.cv-g-100-bg .cs-checkbox-wrapper {
  border-bottom-color: var(--cv-w);
}
.cs-sdLtbody .cs-sdlRow .editable-text.editable-text, .cs-sdLtbody .cs-sdlRow [data-guid=workflowAsset] {
  border-color: var(--cv-g-200);
}
.cs-sdLtbody .cs-sdlRow .editable-text.editable-text:hover.cs-tag, .cs-sdLtbody .cs-sdlRow [data-guid=workflowAsset]:hover.cs-tag {
  border-color: inherit;
}

/*issue U631-80*/
.progress.success .meter {
  background: var(--cv-success);
  color: white;
}

.progress {
  background: var(--cv-g-100);
}

.cs-list-filter-area {
  border-top-color: var(--cv-g-200);
}

.sd-button.quarterly.taskFlag.alert {
  color: var(--cv-alert);
}

.headerText {
  color: var(--cv-g-500);
}
.headerText:before, .headerText:after {
  color: var(--cv-w);
}
.headerText.up {
  color: var(--cv-link);
}
.headerText.up:before {
  color: var(--cv-link);
}
.headerText.down {
  color: var(--cv-link);
}
.headerText.down:before {
  color: var(--cv-link);
}

.unityList.highlightSearch .hightlightSearch span {
  background-color: var(--cv-yellow);
}

.headerText.up:after {
  color: var(--cv-link);
}
.headerText.up:before {
  color: var(--cv-g-300);
}
.headerText.down:after {
  color: var(--cv-g-300);
}
.headerText.down:before {
  color: var(--cv-link);
}

.qandaDetails :not(.promotionDetails) span.label-header + div,
.promotionDetails :not(.promotionDetails) span.label-header + div {
  border-bottom-color: #efefef;
}
.qandaDetails .tags,
.qandaDetails .attachmentsRow,
.promotionDetails .tags,
.promotionDetails .attachmentsRow {
  border-bottom-color: #efefef;
}

/*
<https://tomi2internal.screendragon.com/index.aspx?section=1328#>
Tomi2 - project requests - projects - table filters all appearing with highlight  select
*/
a.dataFilter.off {
  color: var(--cv-g-350);
}
a.dataFilter.off:hover {
  color: var(--cv-g-500);
}
.cs-filtered a.dataFilter.off {
  color: var(--cv-g-500);
}

.cs-listComponent.cs-listComponent th span.userImage {
  background-color: var(--cv-g-350);
  color: var(--cv-w);
}

.sideBarFilter .js-filterGroup.expanded {
  color: var(--cv-notification);
  border-left-color: var(--cv-notification);
}

.chatbubble {
  --chat-bg:func.getVar(cv-notification);
  --chat-contrast:func.getVar(cv-notification-contrast);
}
.chatbubble.inactive {
  --chat-bg:func.getVar(cv-g-300);
  --chat-contrast:func.getVar(cv-g-400);
}

.cs_filterDropdown {
  background-color: var(--listBg, var(--cv-w));
}

body,
html,
#mainSection,
#sectionContainer,
.reveal-modal {
  background-color: var(--cv-g-100);
}

.gt-panel {
  background-color: var(--cv-w);
}

.f-dropdown,
.cs-listComponent,
.filters-menu,
.cs-sdSidePanel {
  background-color: var(--cv-w);
}

.empty-list-text {
  color: var(--cv-g-350);
}

.empty-list {
  border: 1px solid var(--cv-border);
}

.viewMode .formField .value {
  color: var(--cv-g-400);
}

.viewMode .formField .noValue {
  color: var(--cv-g-350);
}

body {
  scrollbar-base-color: var(--cv-w);
  scrollbar-face-color: #c8c8c8;
  scrollbar-shadow-color: var(--cv-w);
  scrollbar-highlight-color: var(--cv-w);
  scrollbar-3dlight-color: var(--cv-w);
  scrollbar-darkshadow-color: var(--cv-w);
  scrollbar-track-color: var(--cv-w);
  scrollbar-arrow-color: var(--cv-w);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--cv-g-300) var(--cv-w);
}

::-webkit-scrollbar {
  height: 18px;
  width: 18px;
}

::-webkit-scrollbar-button {
  background-color: transparent;
  background-repeat: no-repeat;
  cursor: pointer;
}

::-webkit-scrollbar-corner {
  background-color: var(--cv-w);
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  border: solid 6px var(--cv-w);
  background-color: var(--cv-g-350);
  min-height: 1.5rem;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--cv-g-350);
}

.scroller::-webkit-scrollbar-thumb:vertical:hover {
  background-color: var(--cv-link);
}

::-webkit-scrollbar-track {
  background-color: var(--cv-w);
}

::-webkit-scrollbar-button:horizontal:increment {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowQzU1NDExQUNFQTExMUUwODVCRDlGMjgxNTUwOTY0MSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowQzU1NDExOUNFQTExMUUwODVCRDlGMjgxNTUwOTY0MSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENDZGQ0I5RkQzQ0RFMDExQTgyMjkyMjdERUQwRkIxRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnbliksAAAAGUExURczT1v///w6Zot4AAAACdFJOU/8A5bcwSgAAACFJREFUCFtj/M/ACEd/mRj/MDP+aWb84wxGzSAuUBBJDQCreRGBIU9zHQAAAABJRU5ErkJggg==);
}

::-webkit-scrollbar-button:horizontal:increment:hover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNjMxOTJDNkNFQTAxMUUwOTEwQThBOUQ3OTU2MDhBRCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNjMxOTJDNUNFQTAxMUUwOTEwQThBOUQ3OTU2MDhBRCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENDZGQ0I5RkQzQ0RFMDExQTgyMjkyMjdERUQwRkIxRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnVIpeYAAAAGUExURZ20xP///xhJTcUAAAACdFJOU/8A5bcwSgAAACFJREFUCFtj/M/ACEd/mRj/MDP+aWb84wxGzSAuUBBJDQCreRGBIU9zHQAAAABJRU5ErkJggg==);
}

::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyOTQ1MTFBOUNFQTExMUUwQjFCMUQ0QTY5Nzg0NkM4MyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyOTQ1MTFBOENFQTExMUUwQjFCMUQ0QTY5Nzg0NkM4MyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENDZGQ0I5RkQzQ0RFMDExQTgyMjkyMjdERUQwRkIxRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhHC5VgAAAAGUExURczT1v///w6Zot4AAAACdFJOU/8A5bcwSgAAACBJREFUCFtj+P+fAYH2M/y3Z/hnz/AHjIAMIBckiFADAIcKGtnX/NNJAAAAAElFTkSuQmCC);
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRDlGMzQxNUNFQTExMUUwOUQ1RUMzMDcwNkI3NzQ4OSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRDlGMzQxNENFQTExMUUwOUQ1RUMzMDcwNkI3NzQ4OSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENDZGQ0I5RkQzQ0RFMDExQTgyMjkyMjdERUQwRkIxRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Piwt9IAAAAAGUExURZ20xP///xhJTcUAAAACdFJOU/8A5bcwSgAAACBJREFUCFtj+P+fAYH2M/y3Z/hnz/AHjIAMIBckiFADAIcKGtnX/NNJAAAAAElFTkSuQmCC);
}

::-webkit-scrollbar-button:vertical:increment {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCQUVGMjQ0M0NFQTAxMUUwODVFRkVGMkEyMDYzQjNCOSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCQUVGMjQ0MkNFQTAxMUUwODVFRkVGMkEyMDYzQjNCOSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENDZGQ0I5RkQzQ0RFMDExQTgyMjkyMjdERUQwRkIxRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pi1r31IAAAAGUExURczT1v///w6Zot4AAAACdFJOU/8A5bcwSgAAABxJREFUCNdj/M/AiIY+yDP+UGf848z4r5ERQxYAnBUQ8bRhSzUAAAAASUVORK5CYII=);
}

::-webkit-scrollbar-button:vertical:increment:hover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBODk4RUE4QUNFQTAxMUUwQjI0MUFCODBCNTk2MzdFMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBODk4RUE4OUNFQTAxMUUwQjI0MUFCODBCNTk2MzdFMSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENDZGQ0I5RkQzQ0RFMDExQTgyMjkyMjdERUQwRkIxRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrzuktcAAAAGUExURZ20xP///xhJTcUAAAACdFJOU/8A5bcwSgAAABxJREFUCNdj/M/AiIY+yDP+UGf848z4r5ERQxYAnBUQ8bRhSzUAAAAASUVORK5CYII=);
}

::-webkit-scrollbar-button:vertical:decrement {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFMzVEMjUyMkNFQTAxMUUwQTc0NzgzNTNCNkQ3RkNFRCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFMzVEMjUyMUNFQTAxMUUwQTc0NzgzNTNCNkQ3RkNFRCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENDZGQ0I5RkQzQ0RFMDExQTgyMjkyMjdERUQwRkIxRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psti8fgAAAAGUExURczT1v///w6Zot4AAAACdFJOU/8A5bcwSgAAABxJREFUCNdj/M/AiIb+NTL+cWb8oc74QZ4RQxYAoGUQ8fkWopYAAAAASUVORK5CYII=);
}

::-webkit-scrollbar-button:vertical:decrement:hover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEM0ZDNDlGQ0NFQTAxMUUwQUY5RkJGN0ZBNEREREEyMiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEM0ZDNDlGQkNFQTAxMUUwQUY5RkJGN0ZBNEREREEyMiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENDZGQ0I5RkQzQ0RFMDExQTgyMjkyMjdERUQwRkIxRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRUZGQzk4NEE1Q0FFMDExOUI2OUQ1NEZFODhFQjY5MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhWCNEUAAAAGUExURZ20xP///xhJTcUAAAACdFJOU/8A5bcwSgAAABxJREFUCNdj/M/AiIb+NTL+cWb8oc74QZ4RQxYAoGUQ8fkWopYAAAAASUVORK5CYII=);
}

::-webkit-scrollbar-button:start:increment,
::-webkit-scrollbar-button:end:decrement {
  display: none;
}

.loaderBg, .loaderMessage {
  background-color: var(--cv-w);
}

.lds-ellipsis div {
  background-color: var(--primary-color);
}

.border-right.border-right {
  border-style: none solid none none;
}
.border-right.border-right.cv-p-border {
  border-color: var(--primary-color);
}

.border-left.border-left {
  border-style: none none none solid;
}

.border-top.border-top {
  border-style: solid none none none;
}

.border-bottom.border-bottom {
  border-style: none none solid none;
  border-width: 2px;
}

.border-all.border-all {
  border-style: solid solid solid solid;
}

.fineUploader,
.cs-uploader-bar,
.qq-upload-list-selector.qq-upload-list li {
  color: var(--cv-w);
  border: none;
  background-color: var(--cv-g-400);
}

.cs-attachedfiles {
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.cs-attachedfiles.qq-upload-drop-area-active {
  border: 2px dashed var(--cv-g-400);
  background-color: var(--cv-g-100);
}

.dashboardContent .sd-card.cv-orange-bg .sd-card-body-text span {
  color: inherit;
}

.dashboardContent .grid-item {
  box-shadow: 0 0 0 1px inset var(--cv-g-300);
}

.messageDisplay .closeBtn {
  color: var(--cv-w);
}

.messageDisplay .text .clickText {
  padding: 0.5rem;
  border-radius: var(--form-border-radius);
  cursor: pointer;
}

.formDetailsTools .sd-discussion-comment-wrapper {
  background-color: var(--cv-w);
  background: linear-gradient(to bottom, color-mix(in hsl, var(--cv-w) 100%, rgba(0, 0, 0, 0)) 80%, color-mix(in hsl, var(--cv-w) 0%, rgba(0, 0, 0, 0)) 100%);
}

.formListTimeLine .cs-timeline-status {
  border-color: var(--cv-w);
}

.formListTimeLine .cs-metaTags .metaTag {
  background: color-mix(in hsl, var(--cv-blue) 60%, rgba(0, 0, 0, 0));
  color: var(--cv-blue);
}

.formListTimeLine .cs-bottomCir {
  background-color: var(--cv-w);
}

.cs-large-list-input:focus-within {
  border-bottom-color: var(--cv-g-300);
}

.cs-large-list-input {
  border-bottom-color: transparent;
}

.dashboardContent .sd-pagination li.disabled button {
  color: inherit;
}

.tooltip.tooltip.tooltip {
  background-color: var(--cv-b);
  color: var(--cv-b-contrast);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 -2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 8px 8px rgba(0, 0, 0, 0.11), 0 16px 16px rgba(0, 0, 0, 0.11);
}

.sd-user-assign-userList ol li .sd-check .cv-link-text {
  color: var(--cv-link);
}
.sd-user-assign-userList ol li .sd-check .cv-link-text svg {
  color: var(--cv-link);
}

.bdr-1-solid.bdr-1-solid {
  border-color: var(--cv-g-500);
}

.bdr-1999-solid.bdr-1999-solid {
  border-color: var(--cv-g-300);
}

.bdr-1red-solid.bdr-1red-solid {
  border-color: var(--cv-redorange);
}

.bdr-1-r-9fa1a3.bdr-1-r-9fa1a3 {
  border-right-color: var(--cv-g-300);
}

.cv-red-text.cv-red-text {
  color: var(--cv-redorange);
}

.cv-blue-text.cv-blue-text {
  color: var(--cv-blue);
}

.calendarUnity td:first-child {
  border-left-color: var(--cv-g-300) !important;
}

.VueCarousel-navigation button {
  color: rgba(0, 0, 0, 0.5);
}
.VueCarousel-navigation button:before, .VueCarousel-navigation button:after {
  background-color: #1d1e20;
}

.VueCarousel-navigation-next.VueCarousel-navigation-next,
.VueCarousel-navigation-prev.VueCarousel-navigation-prev {
  background-color: var(--cv-w);
}

.VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation-button {
  color: var(--cv-w);
  background: var(--cv-g-200);
  border-color: var(--cv-g-300);
}

.baseline .baseline {
  background: #ffd180;
  border-color: rgb(255, 153, 0);
}

.channel-post-admin-actions-filter {
  border-color: #e2e2e2;
}

.gantt_task_overdue {
  background-color: var(--cv-redorange) !important;
}

.gantt_task_complete {
  background-color: var(--cv-greenblue) !important;
}

.workspaceContent .content-article {
  background-color: var(--cv-w);
}

.bulkHelp1 {
  color: var(--cv-notification);
}

.dhx_timeline_label_wrapper, .dhx_timeline_scale_header.dhx_timeline_second_scale {
  background-color: var(--cv-g-100);
}

.sd-modal {
  background-color: var(--cv-w);
}

.sdModalBase:has(.isOpen):before {
  background-color: color-mix(in hsl, var(--cv-g-500) 30%, rgba(0, 0, 0, 0));
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  z-index: 33;
  pointer-events: none;
}

.cs-savedComment {
  background-color: color-mix(in hsl, var(--cv-w) 60%, rgba(0, 0, 0, 0));
  border-bottom-color: var(--cv-g-200);
}
.cs-savedComment .cs-contentReply {
  border-left-color: var(--primary-color);
  background-color: var(--cv-g-200);
}

.safari ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.safari ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

.safari ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

.safari ::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(0, 0, 0, 0.05);
}

:root {
  --offset: 187;
  --duration: 1.4s;
}

.initialspinner.initialspinner {
  animation: rotator var(--duration) linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
.loaderpath {
  stroke-dasharray: var(--offset);
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: dash var(--duration) ease-in-out infinite, colors 16s ease-in-out infinite;
}

@keyframes colors {
  0% {
    stroke: #3e62c7;
  }
  25% {
    stroke: #e51837;
  }
  50% {
    stroke: #fdb302;
  }
  75% {
    stroke: #23a16d;
  }
  100% {
    stroke: #3e62c7;
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: var(--offset);
  }
  50% {
    stroke-dashoffset: var(--offset)/4;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: var(--offset);
    transform: rotate(450deg);
  }
}
.cv-notification-tag svg {
  cursor: help;
}
.cv-notification-tag svg:hover {
  color: inherit;
}

a:has(use[*|href="#info"]) {
  cursor: help;
}

.select-list input[type=checkbox]:checked + span::before {
  color: var(--cv-link);
}

input,
select,
textarea,
.colorItem,
.js_projectColour,
.cs-project-symbol {
  border-color: var(--cv-g-300);
}
input:focus,
select:focus,
textarea:focus,
.colorItem:focus,
.js_projectColour:focus,
.cs-project-symbol:focus {
  border-color: var(--cv-link);
}
input.checked:after,
select.checked:after,
textarea.checked:after,
.colorItem.checked:after,
.js_projectColour.checked:after,
.cs-project-symbol.checked:after {
  color: var(--cv-success);
}

.colorItem:hover,
.js_projectColour:hover,
.cs-project-symbol:hover {
  border-color: var(--cv-link);
}

select {
  background-color: var(--cv-w);
}

.input-icon {
  border-color: var(--cv-g-300);
  color: var(--cv-g-400);
  background-color: var(--cv-w);
}
.input-icon:focus-within {
  border-color: var(--cv-notification);
  color: var(--cv-notification);
  background-color: var(--cv-w);
}
.input-icon:focus-within input {
  box-shadow: none;
}
.cs-large-list-input .input-icon {
  background-color: transparent;
}
.cs-large-list-input .input-icon input {
  color: var(--cv-g-500);
}
.cs-large-list-input .input-icon :not(input) {
  color: var(--cv-g-400);
}
.input-icon.error, .error .input-icon {
  border-color: var(--cv-alert);
}
.input-icon.error a, .error .input-icon a {
  color: var(--cv-alert);
}
.formElement .input-icon {
  background-color: var(--cv-w);
}

.formElement .error {
  color: var(--cv-alert);
}
.formElement.error a,
.formElement.error span,
.formElement.error input,
.formElement.error small,
.formElement.error .error {
  border-color: var(--cv-alert);
  color: var(--cv-alert);
}

span.required:after {
  background-color: var(--cv-alert);
}

.groupElements .groupElementEntry .ui-draggable-handle:hover i {
  color: var(--cv-w);
}
.groupElements .groupElementEntry .formElement .cs-attachedfiles .fi-title:hover {
  color: initial;
}
.groupElements .groupElementEntry .fi-title:hover {
  color: var(--cv-link);
}
.groupElements .groupElementEntry .childrenElements {
  background-color: var(--cv-g-100);
  border-left-color: var(--cv-primary);
  box-shadow: 0 0 0 1px inset var(--cv-g-200);
}
.groupElements .groupElementEntry .childrenElements .childrenElements {
  background-color: color-mix(in srgb, var(--cv-g-100) 50%, var(--cv-w));
}

.groupElementEntry .childrenElements {
  border-color: var(--cv-g-100);
  border-left-color: var(--cv-primary);
}
.groupElementEntry .childrenElements .formTypeFile .header-titles {
  background-color: transparent;
}
.groupElementEntry .childrenElements .formTypeFile .header-titles:hover {
  color: inherit;
}

.formGroup .gridContainer {
  background-color: var(--cv-g-100);
  border-color: var(--cv-g-100);
}
.formGroup .gridContainer tbody {
  border-left-color: var(--cv-primary);
}

.gridContainer td {
  border-color: var(--cv-g-100);
  border-bottom-color: var(--cv-w);
}
.gridContainer th {
  background-color: var(--cv-w);
  border-color: var(--cv-g-100);
  border-bottom-color: var(--cv-g-300);
  box-shadow: var(--cv-g-300) 0 1px 0 0;
}

.has-drag {
  background-color: var(--cv-g-200);
}
.has-drag:hover {
  background-color: var(--cv-link);
  color: var(--cv-link-contrast);
}
.has-drag:hover i {
  color: inherit;
}

.ui-datepicker-calendar.ui-datepicker,
#ui-datepicker-div.ui-datepicker {
  background: var(--cv-w);
  border-color: var(--cv-g-100);
}

.ui-datepicker-calendar .ui-state-active,
#ui-datepicker-div .ui-state-active {
  background-color: var(--cv-notification) !important;
}

.ui-datepicker-calendar td.ui-datepicker-today.ui-datepicker-today a.ui-state-default.ui-state-highlight,
.ui-datepicker-calendar td.ui-datepicker-today.ui-datepicker-today a.ui-datepicker-current-day,
#ui-datepicker-div td.ui-datepicker-today.ui-datepicker-today a.ui-state-default.ui-state-highlight,
#ui-datepicker-div td.ui-datepicker-today.ui-datepicker-today a.ui-datepicker-current-day {
  background-color: color-mix(in srgb, var(--cv-w) 50%, var(--cv-notification));
}
.ui-datepicker-calendar td.ui-datepicker-today.ui-datepicker-today > a,
#ui-datepicker-div td.ui-datepicker-today.ui-datepicker-today > a {
  color: var(--cv-notification-contrast);
  background-color: color-mix(in hsl, var(--cv-notification) 50%, rgba(0, 0, 0, 0));
}
.ui-datepicker-calendar td.ui-datepicker-today.ui-datepicker-today > a:hover,
#ui-datepicker-div td.ui-datepicker-today.ui-datepicker-today > a:hover {
  color: var(--cv-w) !important;
  background-color: color-mix(in hsl, var(--cv-notification) 90, rgba(0, 0, 0, 0));
}

.ui-datepicker-calendar thead {
  border-bottom-color: var(--cv-g-200);
}

#ui-datepicker-div td.ui-datepicker-current-day #recurDate .ui-datepicker-calendar .ui-datepicker-current-day a,
#splitDate .ui-datepicker-calendar .ui-datepicker-current-day a {
  color: var(--cv-w);
}

.ui-widget-content .ui-state-default.ui-state-default.ui-state-default.ui-state-active {
  color: var(--cv-w) !important;
  background-color: var(--cv-notification) !important;
}

.cs-drag-rows__handle {
  background-color: var(--cv-g-200);
  color: var(--cv-g-400);
}
.cs-drag-rows__handle:hover {
  background-color: var(--cv-link);
  color: var(--cv-link-contrast);
}

input[type=text][disabled],
select[disabled],
.disabled:not(.sd-button) input,
.disabled select,
.disabled textarea,
.disabled:not(.sd-button) a:not[class*=-text],
.disabled .input-icon {
  background-color: var(--cv-g-200);
  color: var(--cv-g-350);
  border-color: var(--cv-g-300);
  box-shadow: none;
}

select.secondary {
  border: none;
  box-shadow: 0 0 0 1px inset var(--cv-link);
  background-color: transparent;
  color: var(--cv-link);
  background-image: var(--selectlinkbg);
  background-position: right 0.5rem center;
  -moz-appearance: none;
  background-size: 1.25rem;
  padding-right: 1.5rem;
}
select.secondary:hover {
  background-color: var(--cv-link);
  color: var(--cv-link-contrast);
  background-image: var(--selectlinkcontrastbg);
}
select.secondary option {
  background-color: transparent;
  color: var(--cv-g-500);
}
select.secondary option[disabled] {
  background-color: var(--cv-g-100);
  color: var(--cv-g-400);
  border-color: var(--cv-g-200);
}
select.secondary option:hover {
  background-color: var(--cv-link);
  color: var(--cv-link-contrast);
}

.toggle-cp .slider {
  background-color: var(--cv-g-300);
}
.toggle-cp .slider:before {
  background-color: var(--cv-w);
}
.toggle-cp input:checked + .slider {
  background-color: var(--cv-green);
}

.formGroup .input-icon:has(.result),
.fake-input,
.formElement .result,
.formElement [readonly] {
  border-color: var(--cv-g-200);
  background-color: var(--cv-g-200);
}
.viewMode .formViewCell .formGroup .input-icon:has(.result),
.viewMode .formViewCell .fake-input,
.viewMode .formViewCell .formElement .result,
.viewMode .formViewCell .formElement [readonly] {
  background-color: transparent;
  border: none;
}

.cs-center-element {
  border-color: var(--cv-g-200);
}

.custom.checkbox,
.custom.radio {
  border-color: var(--cv-g-350);
  background-color: var(--cv-w);
}
.custom.checkbox.checked,
.custom.radio.checked {
  border-color: var(--cv-notification);
  box-shadow: 0 0 3px var(--cv-notification);
}
.custom.checkbox.checked:before,
.custom.radio.checked:before {
  background-color: var(--cv-notification);
}

.formElement label.checkbox,
.formElement label.radio {
  color: var(--cv-g-400);
}

.error .formFileInputHeader {
  border-color: var(--cv-alert);
}

.error .formFileInput .cs-thumb-attached {
  border-color: var(--cv-alert);
}

.atwho-view {
  background-color: var(--cv-w);
  color: var(--cv-g-500);
  border-color: var(--cv-g-200);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 -2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 8px 8px rgba(0, 0, 0, 0.11), 0 16px 16px rgba(0, 0, 0, 0.11);
}

.atwho-view .cur {
  background-color: var(--cv-g-100);
  color: var(--cv-link);
}

.atwho-view .cur small {
  color: var(--cv-link);
}

.atwho-view strong {
  color: var(--cv-link);
}

.atwho-view .cur strong {
  color: var(--cv-link);
}

.atwho-view ul li {
  border-bottom-color: var(--cv-g-200);
  border-top-color: var(--cv-g-200);
}

.atwho-view small {
  color: var(--cv-g-400);
}

.projectSubTaskRow .jsCompleteChk input[type=checkbox]:checked + label {
  background-color: var(--cv-success);
  color: var(--cv-success-contrast);
}

.projectRowOptions .taskFlag.priorityTask,
.projectField .taskFlag.priorityTask {
  background-color: var(--cv-alert);
  color: var(--cv-alert-contrast);
}
.projectRowOptions .taskFlag.priorityTask:hover,
.projectField .taskFlag.priorityTask:hover {
  background-color: var(--cv-alert);
  color: var(--cv-alert-contrast);
  color: var(--cv-w);
}

select[multiple] {
  background: var(--cv-w);
}

.formField .switch span:last-child {
  border-color: var(--cv-success);
}

.toggle-cp .slider {
  background-color: var(--cv-g-200);
}
.toggle-cp .slider:before {
  background-color: var(--cv-w);
}

form.custom .custom.checkbox,
input[type=text],
input[type=password],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=month],
input[type=week],
input[type=email],
input[type=number],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
textarea,
select {
  border-color: var(--cv-g-300);
  background-color: var(--cv-w);
  color: var(--cv-w-contrast);
}
form.custom .custom.checkbox::-webkit-input-placeholder,
input[type=text]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=date]::-webkit-input-placeholder,
input[type=datetime]::-webkit-input-placeholder,
input[type=datetime-local]::-webkit-input-placeholder,
input[type=month]::-webkit-input-placeholder,
input[type=week]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=search]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=time]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
  font-weight: 500;
}
form.custom .custom.checkbox:-ms-input-placeholder,
input[type=text]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=date]:-ms-input-placeholder,
input[type=datetime]:-ms-input-placeholder,
input[type=datetime-local]:-ms-input-placeholder,
input[type=month]:-ms-input-placeholder,
input[type=week]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=search]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=time]:-ms-input-placeholder,
input[type=url]:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder {
  font-weight: 500;
}
form.custom .custom.checkbox:-o-input-placeholder,
input[type=text]:-o-input-placeholder,
input[type=password]:-o-input-placeholder,
input[type=date]:-o-input-placeholder,
input[type=datetime]:-o-input-placeholder,
input[type=datetime-local]:-o-input-placeholder,
input[type=month]:-o-input-placeholder,
input[type=week]:-o-input-placeholder,
input[type=email]:-o-input-placeholder,
input[type=number]:-o-input-placeholder,
input[type=search]:-o-input-placeholder,
input[type=tel]:-o-input-placeholder,
input[type=time]:-o-input-placeholder,
input[type=url]:-o-input-placeholder,
textarea:-o-input-placeholder,
select:-o-input-placeholder {
  font-weight: 500;
}
form.custom .custom.checkbox:focus, form.custom .custom.checkbox:active,
input[type=text]:focus,
input[type=text]:active,
input[type=password]:focus,
input[type=password]:active,
input[type=date]:focus,
input[type=date]:active,
input[type=datetime]:focus,
input[type=datetime]:active,
input[type=datetime-local]:focus,
input[type=datetime-local]:active,
input[type=month]:focus,
input[type=month]:active,
input[type=week]:focus,
input[type=week]:active,
input[type=email]:focus,
input[type=email]:active,
input[type=number]:focus,
input[type=number]:active,
input[type=search]:focus,
input[type=search]:active,
input[type=tel]:focus,
input[type=tel]:active,
input[type=time]:focus,
input[type=time]:active,
input[type=url]:focus,
input[type=url]:active,
textarea:focus,
textarea:active,
select:focus,
select:active {
  border-color: var(--cv-notification);
}

select:focus,
select:active {
  border-color: var(--cv-notification);
  box-shadow: 0 0 3px var(--cv-notification);
}

.multipleSelect.multipleSelect option {
  border-color: var(--cv-g-200);
}
.multipleSelect.multipleSelect option span, .multipleSelect.multipleSelect option a {
  color: inherit;
}
.multipleSelect.multipleSelect option:checked {
  border-color: var(--cv-g-200);
  background-color: color-mix(in srgb, var(--cv-link) 10%, var(--cv-w));
  color: var(--cv-link);
}
.multipleSelect.multipleSelect option:checked span, .multipleSelect.multipleSelect option:checked a {
  color: inherit;
}

.ms-drop ul > li.selected {
  background-color: color-mix(in srgb, var(--cv-link) 10%, var(--cv-w));
  color: var(--cv-link);
  border-color: var(--cv-g-200);
}
.ms-drop ul > li.selected span, .ms-drop ul > li.selected a {
  color: inherit;
}

.iconinput ::placeholder {
  color: var(--cv-g-350);
}

.sd-item-list {
  border-color: var(--cv-g-200);
}
.sd-item-list table thead {
  box-shadow: 0 4px 3px 0 rgba(0, 0, 0, 0.05);
}

#workspace .adaptive-card-grid {
  background-color: transparent;
}
#workspace .adaptive-card-grid .details-wrap, #workspace .adaptive-card-grid .profile-border {
  background-color: var(--cv-w);
}

.workspace-main .listView .adaptive-card-grid .details .details-wrap, .workspace-main .listView .adaptive-card-grid .profile-wrap {
  border-color: var(--cv-g-300);
}
.workspace-main .listView .adaptiveCard .adaptive-card-grid .profile-wrap .profile-border:before {
  color: var(--cv-w);
}
.workspace-main .listView .adaptiveCard.cv-notification-border .adaptive-card-grid .details .details-wrap, .workspace-main .listView .adaptiveCard.cv-notification-border .adaptive-card-grid .profile-wrap {
  border-color: var(--cv-notification);
}
.workspace-main .listView .adaptiveCard.cv-notification-border .adaptive-card-grid .profile-wrap .profile-border:before {
  color: var(--cv-notification);
}

.cs-timesheet-total .cs-time-header, .cs-timesheet-panel.cs-timesheet-panel, .fly-out.fly-out {
  border: none;
  box-shadow: 0 0 0 1px inset var(--cv-g-300);
}

.sd-pagination .selected {
  background-color: var(--cv-link);
  color: var(--cv-link-contrast);
}
.sd-pagination .selected:hover {
  background-color: var(--cv-link-shade);
}
.sd-pagination .selected a {
  color: inherit;
}
.sd-pagination .disabled a {
  color: var(--cv-g-200);
  opacity: 0.5;
}

.sd-modal.isOpen {
  background-color: var(--cv-w);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 -2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 8px 8px rgba(0, 0, 0, 0.11), 0 16px 16px rgba(0, 0, 0, 0.11);
}
.sd-modal.isOpen.sd-modal-fullscreen {
  background-color: var(--cv-g-100);
}

.pop-out.pop-out {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 -2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 8px 8px rgba(0, 0, 0, 0.11), 0 16px 16px rgba(0, 0, 0, 0.11);
}

.portlet {
  background-color: var(--cv-g-110);
}

.cs-kanban .sd-adaptive-card-lite {
  border-color: var(--cv-g-200);
}

.hasBg:not(.no-bg):not(.cv-g-200-bg) .sdWidgetList .clickable {
  color: getVar(var(--cv-w));
  transition: color var(--animation-base) ease;
}
.hasBg:not(.no-bg):not(.cv-g-200-bg) .sdWidgetList .clickable:hover, .hasBg:not(.no-bg):not(.cv-g-200-bg) .sdWidgetList .clickable:focus, .hasBg:not(.no-bg):not(.cv-g-200-bg) .sdWidgetList .clickable:active {
  color: getVar(var(--cv-w), shade);
}
.hasBg:not(.no-bg):not(.cv-g-200-bg) .sdWidgetList tr:hover {
  background-color: color-mix(in hsl, var(--cv-w) 10%, rgba(0, 0, 0, 0));
}

.VueCarousel-dot {
  background-color: var(--cv-g-300) !important;
}
.VueCarousel-dot.VueCarousel-dot--active {
  background-color: var(--cv-link) !important;
}

.section-container > section.active > .title {
  border-top-color: var(--cv-link);
}

.hasBg:not(.no-bg):not(.cv-g-200-bg) .sdWidgetList .clickable {
  color: getVar(var(--cv-w));
  transition: color var(--animation-base) ease;
}
.hasBg:not(.no-bg):not(.cv-g-200-bg) .sdWidgetList .clickable:hover, .hasBg:not(.no-bg):not(.cv-g-200-bg) .sdWidgetList .clickable:focus, .hasBg:not(.no-bg):not(.cv-g-200-bg) .sdWidgetList .clickable:active {
  color: getVar(var(--cv-w), shade);
}
.hasBg:not(.no-bg):not(.cv-g-200-bg) .sdWidgetList tr:hover {
  background-color: color-mix(in hsl, var(--cv-w) 20%, rgba(0, 0, 0, 0));
}

.sdIconBar .active {
  background-color: var(--cv-link);
  color: inherit;
  padding: 0.2rem;
  border-radius: 0.25rem;
}

.listWrap .cs-sdlRow .cellFlag.cs-savedCell::after {
  border-right-color: var(--cv-green);
  border-top-color: var(--cv-green);
}

.listWrap .cs-sdlRow .cellFlag.cs-errorCell::after {
  border-right-color: var(--cv-red);
  border-top-color: var(--cv-red);
}

.allocationCont {
  background-color: var(--cv-w);
}

.cs_subRowTwo td {
  background: var(--cv-g-200) !important;
}

.section-container > section.active > .title {
  border-top: 3px solid var(--cv-link);
}

.sd-card-body-text.sd-card-body-text .mention {
  color: var(--cv-g-500);
}
.sd-card-body-text.sd-card-body-text .mention:hover {
  color: var(--cv-link);
}

.listWrap .cs-sdlRow .cellFlag.cs-savedCell::after {
  border-right-color: var(--cv-green);
  border-top-color: var(--cv-green);
}

.listWrap .cs-sdlRow .cellFlag.cs-errorCell::after {
  border-right-color: var(--cv-red);
  border-top-color: var(--cv-red);
}

.allocationCont {
  background-color: var(--cv-w);
}

.section-container > section.active > .title {
  border-top: 3px solid var(--cv-link);
}

.apexcharts-canvas ::-webkit-scrollbar-track {
  background: inherit;
}

.sd-card-body-text.sd-card-body-text .mention {
  color: var(--cv-g-500);
}
.sd-card-body-text.sd-card-body-text .mention:hover {
  color: var(--cv-link);
}

.sd-notification-card.sd-notification-card.unread {
  border-color: var(--cv-notification);
}

.fullscreen {
  background: var(--cv-g-100);
}
.fullscreen .sd-tabs {
  background-color: var(--tabsBg, var(--cv-w));
}

.section-container.tabs > section > .title a,
.section-container.tabs > .section > .title a {
  color: var(--cv-g-500);
}
.isMobile .section-container.tabs > section > .title a,
.isMobile .section-container.tabs > .section > .title a {
  color: inherit;
}
.section-container.tabs > section > .title span i,
.section-container.tabs > .section > .title span i {
  color: var(--cv-g-500);
}
.section-container.tabs > section > .title:hover,
.section-container.tabs > .section > .title:hover {
  box-shadow: inset 0 -2px 8px -5px color-mix(in hsl, var(--0) 25%, rgba(0, 0, 0, 0));
  background-color: color-mix(in hsl, var(--0) 15%, rgba(0, 0, 0, 0));
}

.tabs-details.tabs-details {
  background-color: var(--tabsBg, var(--cv-w));
}

.sd-tabs.sd-tabs .slideGroup .slideGroup__content li {
  border-top: 2px solid var(--cv-g-100);
}
.sd-tabs.sd-tabs .slideGroup .slideGroup__content li.is-active {
  background: var(--tabsBg, var(--cv-w));
}
.sd-tabs.sd-tabs .slideGroup .slideGroup__content li.is-active, .sd-tabs.sd-tabs .slideGroup .slideGroup__content li:hover {
  border-top: 2px solid var(--cv-link);
  border-bottom: none;
}
.sd-tabs.sd-tabs .slideGroup .slideGroup__content li.is-active a, .sd-tabs.sd-tabs .slideGroup .slideGroup__content li:hover a {
  color: var(--cv-link);
}
.sd-tabs.sd-tabs .slideGroup .slideGroup__content li.is-errored {
  color: var(--cv-red);
}
.sd-tabs.sd-tabs .slideGroup .slideGroup__content li.is-errored span,
.sd-tabs.sd-tabs .slideGroup .slideGroup__content li.is-errored a {
  color: inherit;
}

.apexcharts-text {
  fill: var(--contrast-color);
}

.apexcharts-legend-text {
  color: var(--contrast-color) !important;
}

section.sd-card {
  background-color: var(--color);
}
section.sd-card .details-wrap {
  background-color: var(--color);
}
section.sd-card :where(p, label, div) {
  color: var(--contrast-color);
}
section.sd-card figure {
  display: contents;
}
section.sd-card .kpi :where(p, span, label, div) {
  color: var(--color);
}

.collabList.window {
  background-color: var(--cv-w);
}

.fullScreenButton.fullScreenButton,
.closeWindow.closeWindow {
  border: none;
}

.WindowManagerContainer .collabHeader {
  background: var(--cv-header);
  color: var(--cv-header-contrast);
}
.WindowManagerContainer .collabHeader input {
  color: var(--cv-header-contrast);
}
.WindowManagerContainer .collabHeader input::placeholder {
  color: var(--cv-header-contrast);
  opacity: 1;
}
.WindowManagerContainer .collabHeader input:-ms-input-placeholder {
  color: var(--cv-header-contrast);
}
.WindowManagerContainer .collabHeader input::-ms-input-placeholder {
  color: var(--cv-header-contrast);
}
.WindowManagerContainer .collabHeader .suffix label small {
  color: var(--cv-header-contrast);
}
.WindowManagerContainer .collabHeader .breadcrumb .sd-heading a,
.WindowManagerContainer .collabHeader .vue-input svg,
.WindowManagerContainer .collabHeader .fullScreenButton,
.WindowManagerContainer .collabHeader .closeWindow {
  color: var(--cv-header-contrast);
  color: var(--cv-header-contrast);
}
.WindowManagerContainer .collabHeader .breadcrumb .sd-heading a:hover,
.WindowManagerContainer .collabHeader .vue-input svg:hover,
.WindowManagerContainer .collabHeader .fullScreenButton:hover,
.WindowManagerContainer .collabHeader .closeWindow:hover {
  color: var(--cv-header-contrast);
}
.WindowManagerContainer .collabHeader .vue-input .sd-button.secondary {
  color: var(--cv-header-contrast);
  box-shadow: 0 0 0 1px inset var(--cv-header-contrast);
}
.WindowManagerContainer .collabHeader .vue-input .sd-button.secondary span svg {
  color: inherit;
}
.WindowManagerContainer .collabHeader .vue-input .sd-button.secondary:hover {
  color: var(--cv-link);
}
.WindowManagerContainer .collabHeader .vue-input .sd-button.secondary:focus {
  background-color: transparent;
}

.cs-project .projectFeaturePage .collabHeader {
  background: var(--cv-g-100);
  color: var(--cv-g-100);
}

.folderRollover {
  background-color: var(--cv-w);
}

.dropValid {
  border-left-color: var(--cv-success);
}

.rowWorkflow.overdue {
  color: var(--cv-w);
}

.collabHeader .iconinput,
.collabHeader .suffix,
.collabHeader .suffix small {
  color: inherit;
}

.projectDetails__statusDetails .activity-record {
  border-color: var(--cv-g-300);
}
.projectDetails__statusDetails .activity-record span {
  color: var(--cv-g-350);
}

.addProjectCommentCont .activity-record span {
  color: var(--cv-g-400);
}

.patReply {
  background-color: var(--cv-g-100);
  border-left-color: var(--cv-g-300);
  color: var(--cv-g-400);
}
.patReply h6, .patReply span {
  color: var(--cv-g-400);
}
.patReply .patReplyRow {
  background-color: var(--cv-w);
  border-left-color: var(--cv-primary);
}

.patIcon {
  background-color: var(--commentHighlight);
  color: var(--commentHighlightContrast);
}
.patIcon:before {
  color: inherit;
}

.projectComment {
  --commentHighlight:var(--cv-g-300);
  --commentHighlightContrast:var(--cv-g-300-contrast);
  box-shadow: 0 0 0 1px inset var(--cv-g-300);
  border-left-color: var(--commentHighlight);
  background-color: var(--cv-w);
}
.projectComment.annotation {
  --commentHighlight: var(--br-orange);
  --commentHighlightContrast: var(--br-orange-contrast);
}
.projectComment.file, .projectComment.pat-upload {
  --commentHighlight: var(--br-darkblue);
  --commentHighlightContrast: var(--br-darkblue-contrast);
}
.projectComment.task {
  --commentHighlight: var(--cv-green);
  --commentHighlightContrast: var(--cv-green-contrast);
}
.projectComment.taskcomment {
  --commentHighlight: var(--cv-limegreen);
  --commentHighlightContrast: var(--cv-limegreen-contrast);
}
.projectComment.complete, .projectComment.approve {
  --commentHighlight: var(--cv-green);
  --commentHighlightContrast: var(--cv-green-contrast);
}
.projectComment.rollback {
  --commentHighlight: var(--cv-violet);
  --commentHighlightContrast: var(--cv-violet-contrast);
}
.projectComment.workflowCreate, .projectComment.workflow {
  --commentHighlight: var(--cv-blue);
  --commentHighlightContrast: var(--cv-blue-contrast);
}
.projectComment.comment {
  --commentHighlight: var(--br-blue);
  --commentHighlightContrast: var(--br-blue-contrast);
}

.budgetGraph .graph-bar-bg {
  background-color: var(--cv-g-120);
}
.budgetGraph .graph-bar-bg .graphBar.estimateBar {
  background-color: var(--cv-blue);
  color: var(--cv-blue-contrast);
}
.budgetGraph .graph-bar-bg .graphBar.totalResourcedBar {
  background-color: var(--cv-orange);
  color: var(--cv-orange-contrast);
}
.budgetGraph .graph-bar-bg .graphBar.resourcedBar {
  background-color: color-mix(in srgb, var(--cv-orange) 50%, var(--cv-yellow));
}
.budgetGraph .graph-bar-bg .graphBar.scheduledBar {
  background-color: color-mix(in srgb, var(--cv-orange) 50%, var(--cv-redorange));
}
.budgetGraph .graph-bar-bg .graphBar.burnedBar {
  background-color: var(--cv-cyan);
  color: var(--cv-cyan-contrast);
}

.psa {
  border-color: #eee;
}

.billable-task {
  border-color: #eee;
}

.projectMilestones .moveLeft, .projectMilestones .moveRight {
  opacity: 0.6;
}
.projectMilestones .moveLeft:hover, .projectMilestones .moveRight:hover {
  opacity: 1;
}

#workflowDetails .mainDetails {
  background-color: var(--cv-w);
}

#workflowDetails.reveal-modal {
  background-color: var(--cv-g-120);
}

.workflowCurrentStepStatusItem {
  background-color: var(--cv-w);
}

.tasksRightLoader .loaderBg .loaderImage {
  background-color: var(--cv-w);
  color: var(--cv-w-contrast);
}

.dependency-header .border-right {
  border-color: var(--cv-g-100);
}

.taskFailedTest {
  border-color: var(--cv-red);
}

.projectSubTaskRow {
  border-left-color: var(--primary-color);
}

#projectTaskInfoDetails .projectTaskDetails .row,
#projectTaskInfoDetails .projectTaskDetailsRight .row {
  border-bottom-color: var(--cv-g-100);
}

#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour0 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-red)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour0.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-red)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour1 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-green)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour1.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-green)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour2 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-yellow)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour2.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-yellow)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour3 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-blue)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour3.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-blue)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour4 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-orange)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour4.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-orange)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour5 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-purple)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour5.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-purple)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour6 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-cyan)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour6.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-cyan)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour7 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-crimson)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour7.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-crimson)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour8 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-lime)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour8.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-lime)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour9 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-candypink)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour9.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-candypink)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour10 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-emerald)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour10.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-emerald)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour11 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-fuschiapearl)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour11.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-fuschiapearl)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour12 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-sweetpotato)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour12.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-sweetpotato)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour13 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-beerorange)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour13.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-beerorange)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour14 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-chocolate)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour14.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-chocolate)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour15 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-grannysmith)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour15.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-grannysmith)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour16 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-camouflage)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour16.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-camouflage)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour17 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-deepredpearl)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour17.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-deepredpearl)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour18 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-bluepearl)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour18.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-bluepearl)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour19 {
  background-color: color-mix(in srgb, var(--cv-w) 90%, var(--cv-g-400)) !important;
}
#dvGantt.cs-showSubs .gantt_task_cell.cs-gantt-RowColour19.weekend {
  background-color: color-mix(in srgb, var(--cv-w) 95%, var(--cv-g-400)) !important;
}

.projectTaskHistoryList .projectTaskRow .unityList__item.changed {
  border-color: var(--cv-success);
  color: var(--cv-success);
  background-color: color-mix(in hsl, var(--cv-success) 15%, rgba(0, 0, 0, 0));
}

@media (min-width: 73.143em) and (max-width: 317.143em) {
  .tasksRight .userGroupFilter .filterToggle,
  .tasksRight .userGroupFilter .filterToggle {
    border-bottom-color: var(--cv-g-100);
  }
}
.inlineHolder:before, .inlineHolder:after {
  text-shadow: 0 -1px 3px var(--cv-g-100);
}
.inlineHolder:after {
  text-shadow: 0 2px 3px var(--cv-g-100);
}

.formDetailsTools.formDetailsTools {
  border-bottom-color: var(--cv-w);
}

.colourPicker .colourDisplay {
  border-color: var(--cv-w);
}

.formField .unity-message {
  background: color-mix(in hsl, var(--cv-babyblue) 15%, rgba(0, 0, 0, 0));
  color: color-mix(in srgb, var(--cv-babyblue) 20%, var(--cv-babyblue-shade));
}

#discussionItemContainer .sectionTitle {
  border-bottom-color: var(--cv-g-100);
}
#discussionItemContainer .sectionTitle:first-child {
  border-bottom-color: var(--primary-color);
}

.attach-file {
  border-right-color: var(--cv-w);
}

.project_select_list {
  border-color: var(--cv-g-400);
}

.formElement .sd-icon-picker, .error input:not([type=checkbox]),
.error .formElement .input-icon,
.patternError input:not([type=checkbox]),
.patternError input, .error textarea,
.patternError textarea,
.patternError textarea,
.error select, .patternError select,
.patternError select,
.error .ms-parent button,
.error .ms-choice,
.error .sd-select .sd-user-select-selected-users {
  border-color: var(--cv-alert) !important;
}

.budgetResultsTable thead tr:last-child,
.budgetResultsTable tfoot tr {
  background-color: var(--cv-g-200);
}

.budgetResultsTable td.has-border {
  border-right-color: var(--cv-w);
}

.budgetResultsTable thead {
  background-color: var(--cv-g-100);
}

.budgetResultsTable tbody tr:nth-child(even) {
  background: var(--cv-g-100);
}

.budgetResultsTable {
  border-color: var(--cv-g-300);
}

.projectFeaturePage .taskBar.taskBar {
  background-color: var(--cv-w);
  color: var(--cv-w-contrast);
}

.projectFeature {
  border-bottom-color: color-mix(in hsl, var(--cv-g-100) var(--hover-varience), rgba(0, 0, 0, 0));
}
.projectFeature:last-child {
  border-bottom-color: var(--cv-g-100);
}

.border-bottom-snap {
  border-bottom-color: var(--cv-g-200);
}

#previewContainer #previewer .sd-toolbar li.active,
#previewContainer #previewer .sd-toolbar li:hover {
  background-color: var(--cv-link);
}

#previewContainer #previewCompareHolder {
  border-left-color: var(--cv-sg-200);
}
#previewContainer #previewer .cs-action-header {
  background-color: var(--cv-sg-300);
}
#previewContainer #previewer .cs-main-can {
  background-color: var(--cv-sg-400);
}
#previewContainer #previewer .cs-notes-panel {
  background-color: color-mix(in hsl, var(--cv-w) 5%, rgba(0, 0, 0, 0));
}
#previewContainer #previewer .cs-notes-panel .quarterly {
  color: inherit;
}
#previewContainer #previewer .sd-pagination input[type=number] {
  background-color: var(--cv-sg-200);
  color: var(--cv-w);
}
#previewContainer #previewer .sd-pagination li button {
  color: var(--cv-sg-200-contrast);
}

#div_annotationsDrawCanvas {
  border-color: var(--cv-blue);
}

#previewContainer .cs-previewer-main {
  height: 100%;
  background-color: var(--cv-sg-300);
}
#previewContainer .cs-previewer-main .cs-top-header,
#previewContainer .cs-previewer-main .cs-previewer-footer,
#previewContainer .cs-previewer-main .cs-previewer-toolbar,
#previewContainer .cs-previewer-main .cs-compare-note-panel,
#previewContainer .cs-previewer-main .cs-note-panel {
  background-color: var(--cv-sg-200);
  color: var(--cv-sg-200-contrast);
}
#previewContainer .cs-previewer-main .cs-top-header .quarterly,
#previewContainer .cs-previewer-main .cs-previewer-footer .quarterly,
#previewContainer .cs-previewer-main .cs-previewer-toolbar .quarterly,
#previewContainer .cs-previewer-main .cs-compare-note-panel .quarterly,
#previewContainer .cs-previewer-main .cs-note-panel .quarterly {
  color: inherit;
}
#previewContainer .cs-previewer-main .cs-top-header .details-wrap .sd-dropdown a,
#previewContainer .cs-previewer-main .cs-previewer-footer .details-wrap .sd-dropdown a,
#previewContainer .cs-previewer-main .cs-previewer-toolbar .details-wrap .sd-dropdown a,
#previewContainer .cs-previewer-main .cs-compare-note-panel .details-wrap .sd-dropdown a,
#previewContainer .cs-previewer-main .cs-note-panel .details-wrap .sd-dropdown a {
  color: var(----cv-w-contrast);
}
#previewContainer .cs-previewer-main .cs-top-header .details-wrap .sd-dropdown a:hover,
#previewContainer .cs-previewer-main .cs-previewer-footer .details-wrap .sd-dropdown a:hover,
#previewContainer .cs-previewer-main .cs-previewer-toolbar .details-wrap .sd-dropdown a:hover,
#previewContainer .cs-previewer-main .cs-compare-note-panel .details-wrap .sd-dropdown a:hover,
#previewContainer .cs-previewer-main .cs-note-panel .details-wrap .sd-dropdown a:hover {
  background-color: var(----cv-g-500-contrast);
}
#previewContainer .cs-previewer-main .cs-action-header .previewer-filters .sd-button:hover {
  color: var(--cv-w);
  background-color: var(--cv-link);
  box-shadow: 0 0 0 1px inset var(--cv-link);
}
#previewContainer .cs-previewer-main .cs-action-header .previewer-filters .js_print:hover {
  background-color: var(--button-hover);
  color: var(--button-text);
}
#previewContainer .cs-previewer-main .cs-note-panel ::-webkit-scrollbar-thumb, #previewContainer .cs-previewer-main .cs-previewer-thumbs ::-webkit-scrollbar-thumb {
  border: solid 6px var(--cv-sg-200);
}
#previewContainer .cs-previewer-main .cs-note-panel ::-webkit-scrollbar-track, #previewContainer .cs-previewer-main .cs-previewer-thumbs ::-webkit-scrollbar-track {
  background-color: var(--cv-sg-200);
}

#previewer .sd-modal ::-webkit-scrollbar-thumb {
  border: solid 6px var(--cv-w);
}
#previewer .sd-modal ::-webkit-scrollbar-track {
  background-color: var(--cv-w);
}
#previewer .sd-modal header a {
  color: var(--cv-g-500);
}
#previewer .sd-modal header a:hover {
  color: var(--cv-link);
  background: transparent;
}
#previewer .sd-discussion .sd-discussion-comment-wrapper {
  background-color: var(--cv-w);
}
#previewer .cs-previewer-thumbs {
  background-color: var(--cv-sg-400);
}
#previewer .cs-previewer-thumbs .js_thumb {
  border: 2px solid var(--cv-sg-400);
  cursor: pointer;
}
#previewer .cs-previewer-thumbs .js_thumb:hover, #previewer .cs-previewer-thumbs .js_thumb.active {
  border-color: var(--cv-notification);
}

.isMobile #previewer .sd-modal .sd-discussion .sd-discussion-comment-wrapper {
  background-color: var(--cv-g-100);
}

.cs-previewer-main .sd-modal,
.previewerFileMeta {
  color: var(--cv-g-500);
}

.selected-note * div:not(.count) {
  background-color: var(--cv-g-200);
}

.selected-note * div:not(.sd-notification-count) {
  background-color: var(--cv-g-200);
}

.previewer .mask.dark-mode {
  background-color: var(--cv-g-400);
}

#previewerNoRender h5 {
  color: var(--cv-w);
}
#previewerNoRender span {
  color: var(--cv-g-350);
}

.formDetailsTools .details-wrap {
  background-color: var(--cv-g-100);
}

.sd-profile-notification {
  background-color: var(--cv-notification);
  color: var(--cv-notification-contrast);
}

.sd-card-replies .profile-border {
  background-color: var(--cv-g-100);
  color: var(--cv-g-100-contrast);
}

.user-no-image {
  border-color: var(--cv-w);
}

.sd-card-body-text span[style] * {
  color: inherit;
}

.login-container,
.switchPanel {
  background-color: var(--login-form-background-color, var(--cv-w));
  color: var(--login-form-text-color, var(--cv-g-500));
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 -2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 8px 8px rgba(0, 0, 0, 0.11), 0 16px 16px rgba(0, 0, 0, 0.11);
}
.login-container :where(h1, h2, h3, h4, h5, h6, a),
.switchPanel :where(h1, h2, h3, h4, h5, h6, a) {
  color: var(--login-form-text-color, var(--cv-g-500)) !important;
}
.login-container :where(a:hover, a:focus),
.switchPanel :where(a:hover, a:focus) {
  color: var(--login-form-link-color, var(--cv-g-500)) !important;
}

input[type=text],
input[type=password] {
  background-color: var(--cv-w);
}

.form-login.form-login {
  background-color: var(--login-background-color, var(--cv-w));
}

.login-style-left .form-login.form-login {
  background-color: var(--cv-w);
}

#mainLoader .loader.loader.loader {
  border-color: #EEE;
}

.filter-sidebar {
  background-color: var(--cv-w);
}

.wiz-table table td {
  background-color: var(--cv-w);
}

.wiz-table.wiz-table tr td {
  border-bottom-color: var(--cv-g-200);
}

.cs-report-wizard .filterList li,
.cs-report-wizard .column-wrap .fieldRec {
  border-bottom-color: var(--cv-g-100);
}

.report-list-row {
  border-bottom-color: var(--cv-g-200);
}

.jsStdRow {
  background-color: var(--cv-w);
}

.listWrap table tr td {
  border-bottom-color: var(--cv-g-200);
}

.cs-report-wizard .preview-reports .groupHeader {
  color: var(--cv-primary);
}

.cs-wizard-buttons li {
  box-shadow: 0 0 0 1px inset var(--cv-g-300);
}

.dhx_cal_container.dhx_cal_container {
  background-color: var(--cv-g-100);
}

.completionBar {
  background-color: var(--cv-greenblue);
}
.completionBar[style="background: red none repeat scroll 0% 0%;"] {
  background-color: var(--br-red);
}
.completionBar.cv-alert-bg {
  background-color: var(--cv-alert);
}

.filterRM {
  background-color: var(--cv-g-400);
  color: var(--cv-g-350-contrast);
}

.expanded .filterOptionsWrapper {
  background-color: var(--cv-w);
}

.dhx_second_scale_bar.dhx_second_scale_bar {
  background-color: var(--cv-g-100);
  border-left-color: var(--cv-g-100);
}

.dhx_matrix_cell.weekend, .roleCells.roleWeekend {
  background: repeating-linear-gradient(45deg, var(--cv-w), var(--cv-w) 4px, var(--cv-g-120) 4px, var(--cv-g-120) 8px) !important;
}

.dhx_matrix_cell.noUserWorkDay div {
  background: repeating-linear-gradient(45deg, var(--cv-w), var(--cv-w) 4px, var(--cv-g-120) 4px, var(--cv-g-120) 8px) !important;
}
.today .dhx_matrix_cell.noUserWorkDay div {
  background: repeating-linear-gradient(45deg, var(--cv-g-120), var(--cv-g-120) 4px, color-mix(in srgb, var(--cv-g-120) 80%, var(--cv-notification)) 4px, color-mix(in srgb, var(--cv-g-120) 80%, var(--cv-notification)) 9px) !important;
}

.dhx_matrix_cell.weekend.today {
  background: repeating-linear-gradient(45deg, var(--cv-g-120), var(--cv-g-120) 4px, color-mix(in srgb, var(--cv-g-120) 80%, var(--cv-notification)) 4px, color-mix(in srgb, var(--cv-g-120) 80%, var(--cv-notification)) 8px) !important;
}
.dhx_matrix_cell.weekend.today .headerBlockItemInline.noUserWorkDay div {
  background: repeating-linear-gradient(45deg, var(--cv-g-120), var(--cv-g-120) 4px, color-mix(in srgb, var(--cv-g-120) 80%, var(--cv-notification)) 4px, color-mix(in srgb, var(--cv-g-120) 80%, var(--cv-notification)) 9px) !important;
}

.dhx_matrix_cell.dhx_matrix_cell,
.dhx_matrix_scell.dhx_matrix_scell {
  color: var(--cv-g-400);
}

.resourceFilters {
  background-color: var(--cv-w);
  border-left-color: var(--cv-g-100);
}
.resourceFilters .sub-filterHead.expandedFilter {
  background-color: color-mix(in srgb, var(--cv-link) 10%, var(--cv-w));
}
.resourceFilters .sub-filterHead.expandedFilter label {
  color: var(--cv-link);
}
.resourceFilters .sub-filterBody.expandedFilter {
  background-color: var(--cv-w);
}
.resourceFilters .sub-filterBody.expandedFilter label {
  color: var(--cv-g-500);
}

#rmFilterWindow .cs-filterGroupLabel {
  border-bottom-color: var(--cv-g-100);
}
#rmFilterWindow .cs-filterGroupLabel.expanded {
  color: var(--cv-link);
}

.cs-resourceManager .peopleEvent {
  background-color: var(--cv-notification);
}

.js-inlineFilterCont .cs-filterResults .loader {
  background-color: var(--cv-w);
}

.dashboard .dhx_cal_container.dhx_cal_container.dhx_cal_container .cs-navline {
  background-color: var(--color);
}
.dashboard .dhx_cal_container.dhx_cal_container.dhx_cal_container .cs-navline .headerNavCenter .today a {
  color: var(--contrast-color);
}
.dashboard .dhx_cal_container.dhx_cal_container.dhx_cal_container .cs-navline .headerNavCenter .today a:hover {
  background-color: transparent;
  color: var(--cv-link);
}
.dashboard .dhx_cal_container.dhx_cal_container.dhx_cal_container .cs-navline .dhx_cal_date {
  color: inherit;
}
.dashboard .dhx_cal_container.dhx_cal_container.dhx_cal_container .cs-navline .sd-button.quarterly {
  color: var(--contrast-color);
}
.dashboard .dhx_cal_container.dhx_cal_container.dhx_cal_container .cs-navline .sd-button.dark-outline {
  color: var(--color-contrast);
  box-shadow: 0 0 0 1px inset color-mix(in SRGB, var(--contrast-color) 50%, var(--color));
  background-color: transparent;
}
.dashboard #resourceManager .rmCalNavCont .rmCalNav {
  color: var(--color);
}
.dashboard .dhx_scale_bar.dhx_scale_bar {
  background-color: var(--color);
}
.dashboard .dhx_scale_bar.dhx_scale_bar div {
  color: var(--contrast-color);
}
.dashboard .cs-resourceManager .dhx_scale_bar .headerMainRow.headerMainRow {
  border-color: color-mix(in SRGB, var(--contrast-color) 20%, var(--color));
  color: var(--contrast-color);
}
.dashboard .dhx_cal_header.dhx_cal_header,
.dashboard .dhx_timeline_scale_header.dhx_timeline_scale_header,
.dashboard .dhx_timeline_label_wrapper.dhx_timeline_label_wrapper,
.dashboard .cs-resourceManager .dhx_cal_header.dhx_second_cal_header {
  border-color: transparent;
}
.dashboard .dhx_bottom_scale_container > :first-child div {
  border-left: 1px solid color-mix(in SRGB, var(--contrast-color) 20%, var(--color)) !important;
  margin-left: 4px;
}
.dashboard .dhx_bottom_scale_container > :last-child div {
  border-right: 1px solid color-mix(in SRGB, var(--contrast-color) 20%, var(--color)) !important;
  right: -8px;
  min-width: calc(100% + 8px);
}

#resourceManager .dhx_timeline_data_wrapper .project, #resourceManagerLite .dhx_timeline_data_wrapper .project,
#resourceManager .dhx_timeline_data_wrapper .role, #resourceManagerLite .dhx_timeline_data_wrapper .role {
  background-color: var(--cv-g-100);
}
#resourceManager .dhx_timeline_data_wrapper .project.today, #resourceManagerLite .dhx_timeline_data_wrapper .project.today,
#resourceManager .dhx_timeline_data_wrapper .role.today, #resourceManagerLite .dhx_timeline_data_wrapper .role.today {
  background-color: color-mix(in srgb, var(--cv-w) 70%, var(--cv-notification));
}
#resourceManager .dhx_timeline_data_wrapper .project.weekend, #resourceManagerLite .dhx_timeline_data_wrapper .project.weekend,
#resourceManager .dhx_timeline_data_wrapper .role.weekend, #resourceManagerLite .dhx_timeline_data_wrapper .role.weekend {
  background-color: var(--cv-g-120);
}
#resourceManager .dhx_timeline_data_wrapper .project.weekend.today, #resourceManagerLite .dhx_timeline_data_wrapper .project.weekend.today,
#resourceManager .dhx_timeline_data_wrapper .role.weekend.today, #resourceManagerLite .dhx_timeline_data_wrapper .role.weekend.today {
  background-color: color-mix(in srgb, var(--cv-g-120) 50%, var(--cv-notification));
}
#resourceManager .dhx_timeline_data_wrapper .project.nonDay, #resourceManagerLite .dhx_timeline_data_wrapper .project.nonDay,
#resourceManager .dhx_timeline_data_wrapper .role.nonDay, #resourceManagerLite .dhx_timeline_data_wrapper .role.nonDay {
  background: repeating-linear-gradient(45deg, var(--cv-w), var(--cv-w) 4px, var(--cv-g-120) 4px, var(--cv-g-120) 8px) !important;
}

.dhx_matrix_cell.today {
  background-color: color-mix(in srgb, var(--cv-w) 80%, var(--cv-notification));
}

.dhtmlXTooltip.tooltip.tooltip.tooltip {
  border-left-color: var(--cv-primary);
}

.dhx_matrix_scell .peopleYItem, .dhx_matrix_scell .roleYItem, .dhx_matrix_scell .projectYItem {
  border-right-color: var(--cv-g-300);
}

.dhx_matrix_scell .peopleYItem.user.roleOpen,
.dhx_matrix_scell .roleYItem.user.roleOpen,
.dhx_matrix_scell .projectYItem.user.roleOpen {
  border-left-color: color-mix(in srgb, var(--cv-g-300) 50%, var(--cv-primary));
}

.dhx_matrix_scell .peopleYItem .role.role,
.dhx_matrix_scell .peopleYItem .role.role,
.dhx_matrix_scell .roleYItem .role.role, .dhx_matrix_scell .projectYItem .role.role {
  background-color: var(--cv-primary);
}
.dhx_matrix_scell .peopleYItem .user,
.dhx_matrix_scell .peopleYItem .user,
.dhx_matrix_scell .roleYItem .user, .dhx_matrix_scell .projectYItem .user {
  background-color: var(--cv-w);
}
.dhx_matrix_scell .peopleYItem .role.role,
.dhx_matrix_scell .peopleYItem .role.role,
.dhx_matrix_scell .roleYItem .role.role, .dhx_matrix_scell .projectYItem .role.role {
  background-color: var(--cv-purple);
}

.customFilterBody {
  background-color: var(--cv-w);
}

.sub-filterHead {
  border-bottom-color: var(--cv-g-100);
}
.sub-filterHead label {
  color: var(--cv-g-500);
}

.filterList .filterRow {
  border-bottom-color: var(--cv-g-100);
}

.cs-resourceManager .dhx_cal_data {
  border-top-color: var(--cv-g-100);
}

.filterBody .cs-bg-color {
  border-color: var(--cv-link);
}

.dhx_matrix_scell {
  border-bottom-color: var(--cv-g-100);
}
.dhx_matrix_scell .peopleYItem.user.roleOpen,
.dhx_matrix_scell .roleYItem.user.roleOpen,
.dhx_matrix_scell .projectYItem.user.roleOpen {
  border-left-color: var(--cv-g-200);
}

.dhx_cal_header.dhx_cal_header,
.dhx_timeline_scale_header.dhx_timeline_scale_header,
.dhx_timeline_label_wrapper.dhx_timeline_label_wrapper {
  background: transparent;
  border-color: var(--cv-g-100);
}

.dhx_cal_data .dhx_timeline_label_wrapper .roleOpen {
  background-color: color-mix(in srgb, var(--cv-primary) 5%, var(--cv-g-120));
  border-left-color: var(--cv-primary);
}
.dhx_cal_data .dhx_timeline_label_wrapper .roleOpen.peopleYItem.user.roleOpen {
  background-color: var(--cv-w);
  border-left-color: var(--cv-g-300);
  border-right-color: var(--cv-g-300);
}
.dhx_cal_data .dhx_timeline_label_wrapper .roleOpen.peopleYItem.user.roleOpen:hover .next-icon, .dhx_cal_data .dhx_timeline_label_wrapper .roleOpen.peopleYItem.user.roleOpen:hover .userName {
  color: var(--cv-link);
}

.dhx_cal_data .dhx_timeline_label_wrapper .resourceProjectView.project {
  background-color: color-mix(in srgb, var(--cv-purple) 5%, var(--cv-w));
  border-left-color: var(--cv-purple);
}
.dhx_cal_data .dhx_timeline_label_wrapper .resourceProjectView.project .userName {
  color: var(--cv-purple);
}

.dhx_cal_data .dhx_timeline_label_wrapper .resourceProjectView.user {
  border-left-color: var(--cv-purple);
}

.dhx_cal_data .dhx_timeline_label_wrapper .resourceProjectView.role {
  border-left-color: var(--cv-primary);
}

.subMenu .subBody {
  background-color: var(--cv-w);
  color: var(--cv-w-contrast);
}
.subMenu .subBody label {
  color: var(--cv-g-400);
}

.rmFilterBtn.hasFilters::after {
  background-color: var(--cv-alert);
}

.cs-filterGroupLabel.hasFilters.hasFilters::after {
  background-color: var(--cv-alert);
}

.sideBarFilter .js-secondList {
  background-color: var(--cv-w);
  box-shadow: 7px 9px 6px 0 rgba(0, 0, 0, 0.1);
}

.sideBarFilter .filterLabel span:hover {
  color: var(--cv-link);
}

#formListTimeLine .timline.compactMode .cs-timeline-title {
  color: var(--cv-g-500);
}
#formListTimeLine .timline.compactMode .cs-timeline-title:hover {
  color: var(--cv-link);
}

#formListTimeLine .dhx_cal_header .dhx_scale_bar.dhx_second_scale_bar {
  border-color: var(--cv-g-100);
}
#formListTimeLine .dhx_cal_data {
  border-color: var(--cv-g-100);
}
#formListTimeLine .mcCalNav {
  background-color: var(--cv-g-100);
  border-color: var(--cv-g-100);
  color: var(--cv-g-500);
}
#formListTimeLine .mcCalNav:hover, #formListTimeLine .mcCalNav:focus, #formListTimeLine .mcCalNav input:hover {
  border-color: var(--cv-g-100);
  color: var(--cv-link);
  outline-style: none;
}

.calendar.cs-event-expand .cs-timeline-title {
  color: var(--cv-w);
}

.formListTimeLine .new-panel {
  border-left-color: var(--cv-g-100);
}

#formListTimeLine .sideBarFilter {
  border-left-color: var(--cv-g-100);
  border-right-color: var(--cv-g-100);
}

.dhx_month_link.dhx_month_link a {
  color: var(--cv-g-500);
}

.allocationRow .largeCheck .checkBox-cover:before, .allocationRowAllChecks .largeCheck .checkBox-cover:before {
  background-color: var(--var(--cv-g-100));
  color: var(--var(--cv-g-100)-contrast);
}
.allocationRow .largeCheck .checkBox-cover:after, .allocationRowAllChecks .largeCheck .checkBox-cover:after {
  background-color: var(--var(--cv-w));
  color: var(--var(--cv-w)-contrast);
}
.allocationRow .largeCheck .checkBox-cover:hover:before, .allocationRowAllChecks .largeCheck .checkBox-cover:hover:before {
  background-color: var(--var(--cv-primary));
  color: var(--var(--cv-primary)-contrast);
}
.allocationRow .largeCheck input[type=radio]:checked ~ .checkBox-cover:before, .allocationRowAllChecks .largeCheck input[type=radio]:checked ~ .checkBox-cover:before {
  background-color: var(--var(--cv-primary));
  color: var(--var(--cv-primary)-contrast);
}
.allocationRow .largeCheck input[type=radio]:checked ~ .checkBox-cover:after, .allocationRowAllChecks .largeCheck input[type=radio]:checked ~ .checkBox-cover:after {
  background-color: var(--var(--cv-primary));
  color: var(--var(--cv-primary)-contrast);
}

.rm-header.expanded {
  background: var(--cv-w);
}

.rm-switchGroup {
  background: var(--cv-g-100);
}

.cs-standaloneFilter {
  background: var(--cv-g-200);
}

.cs-filterBorderBottom {
  border-bottom: 1px solid var(--cv-g-100);
}

.calendarUnity .dhx_cal_header {
  border-color: var(--cv-g-100);
}

#formListTimeLine .dhx_cal_navline .dhx_cal_today_button a {
  color: var(--cv-link);
}
#formListTimeLine .dhx_cal_header {
  color: var(--cv-g-500);
}
#formListTimeLine .dhx_cal_header div div .currentDay:first-child {
  border-top-color: var(--cv-notification);
}
#formListTimeLine .currentDay {
  background-color: color-mix(in hsl, var(--cv-notification) 2%, rgba(0, 0, 0, 0)) !important;
  border-top-color: var(--cv-notification);
}
#formListTimeLine .dhx_cal_data {
  background-color: var(--cv-w);
}
#formListTimeLine .dhx_cal_data .unityList table tbody tr td {
  border-bottom-color: var(--cv-g-200);
}
#formListTimeLine .dhx_cal_data .dhx_cal_event_line div.cs-tag-list, #formListTimeLine .dhx_cal_data .dhx_cal_event_clear div.cs-tag-list {
  background-color: transparent;
}
#formListTimeLine .dhx_cal_data .dhx_cal_event_line div.cs-tag-list .cs-tag a, #formListTimeLine .dhx_cal_data .dhx_cal_event_clear div.cs-tag-list .cs-tag a {
  color: var(--cv-w);
}
#formListTimeLine .dhx_cal_data .dhx_matrix_scell {
  border-right-color: var(--cv-primary);
  background-color: var(--cv-w);
}
#formListTimeLine .dhx_cal_data .dhx_matrix_scell:hover {
  border-left-color: var(--cv-primary) !important;
}
#formListTimeLine .dhx_cal_data .dhx_matrix_scell .cs-matrix-title {
  color: var(--cv-link);
}
#formListTimeLine .dhx_cal_data .dhx_matrix_scell #css_displayInfo {
  color: var(--cv-g-500);
}
#formListTimeLine .dhx_cal_data .dhx_matrix_scell .sectionCount {
  color: var(--cv-primary);
}
#formListTimeLine .dhx_cal_data .dhx_matrix_cell {
  background-color: var(--cv-w);
  border-color: var(--cv-g-300);
}

.dhx_now .dhx_month_body, .dhx_now .dhx_month_head {
  background-color: color-mix(in hsl, var(--cv-notification) 2%, rgba(0, 0, 0, 0)) !important;
  color: var(--cv-primary);
}

.peopleViewCont .sd-button, .projectsViewCont .sd-button {
  border-top-color: var(--cv-g-100);
}
.peopleViewCont .sd-button:hover, .peopleViewCont .sd-button:active, .peopleViewCont .sd-button:focus, .projectsViewCont .sd-button:hover, .projectsViewCont .sd-button:active, .projectsViewCont .sd-button:focus {
  color: var(--cv-primary);
  background-color: var(--cv-w);
}
.peopleViewCont.selected .sd-button, .projectsViewCont.selected .sd-button {
  border-top-color: var(--cv-primary);
  color: var(--cv-primary);
  background-color: var(--cv-w);
}

#resourceManager .rmCalNavCont .input-icon, #resourceManagerLite .rmCalNavCont .input-icon {
  background-color: var(--cv-g-100);
}
#resourceManager .rmCalNavCont .dhx_cal_date, #resourceManagerLite .rmCalNavCont .dhx_cal_date {
  border-color: var(--cv-g-100) !important;
  background-color: var(--cv-g-100) !important;
}
#resourceManager .rmCalNavCont .dhx_cal_date:hover, #resourceManagerLite .rmCalNavCont .dhx_cal_date:hover {
  color: var(--cv-link);
}

.dhx_cal_date {
  background-color: var(--cv-w);
}
.dhx_cal_date:hover {
  color: var(--cv-link);
}

.resource.resource .rmCalNavCont .input-icon {
  background-color: var(--cv-w) !important;
}

.dhx_cal_data .dhx_timeline_label_wrapper .roleOpen.peopleYItem.user.roleOpen {
  border-color: var(--cv-g-300);
}

.dhx_matrix_scell {
  background-color: var(--cv-w);
}

.dhx_cal_header .headerMainRow {
  border-color: var(--cv-primary);
}
.dhx_cal_header .xaxisClickable:hover {
  background-color: color-mix(in srgb, var(--var(--cv-notification)) 60%, var(--var(--cv-w)));
}

.rmFilterBtn.hasFilters:after {
  border-color: var(--cv-w);
}

#resourceManagerTentativeDialog .rmList .rmListResizeDiv {
  border-bottom-color: var(--cv-g-200);
}
#resourceManagerTentativeDialog .rmList .unityList__row .editTentativeButton:before {
  color: var(--cv-g-350);
}
#resourceManagerTentativeDialog .rmList .unityList__row .rmActionsFront:before {
  color: var(--cv-g-350);
}
#resourceManagerTentativeDialog .rmList .unityList__row .rmActionsFront:before:hover {
  color: var(--cv-g-350);
}
#resourceManagerTentativeDialog .rmList .unityList__row.deletedRow, #resourceManagerTentativeDialog .rmList .unityList__row.savedRow {
  background: var(--cv-g-130);
  color: var(--cv-g-350);
}

.rmBreadcrumb .breadcrumbTxt {
  color: var(--cv-w);
  border-color: var(--primary-color);
}
.rmBreadcrumb .breadcrumbTxt:after {
  color: var(--cv-w);
}
.rmBreadcrumb .breadcrumbTxt:after:hover {
  color: var(--cv-g-130);
}

.dhx_cal_navline.dhx_cal_navline .rmCalNavCont .input-icon {
  background: none !important;
}
.dhx_cal_navline.dhx_cal_navline .rmCalNavCont .input-icon .rmCalNav {
  border-color: var(--cv-g-100) !important;
  background: var(--cv-g-100) !important;
}

.allocationTab .roleAssign.open {
  background-color: var(--cv-w);
}

.allocationRow.assigned {
  background-color: var(--cv-g-100);
}
.allocationRow.datesError {
  border-color: var(--cv-crimsonglory) !important;
}

#resourceManagerTentativeDialog .errorTentative {
  color: var(--cv-crimsonglory) !important;
}
#resourceManagerTentativeDialog .hiddenList.openList {
  background-color: var(--cv-g-100);
}

.reveal-modal.hasSlider .rmfooter .footerDot {
  border-color: var(--cv-bluepearl);
}
.reveal-modal.hasSlider .rmfooter .footerDot.active {
  background: var(--cv-electricblue);
}

.dhx_matrix_line .headerRowBlock .headerBlockItem.over {
  background: color-mix(in hsl, var(--cv-g-350) 2%, rgba(0, 0, 0, 0));
}
.dhx_matrix_line .headerRowBlock .headerBlockItem.over div {
  background: var(--cv-red);
}
.dhx_matrix_line .headerRowBlock .headerBlockItem.under {
  background: color-mix(in hsl, var(--cv-g-350) 2%, rgba(0, 0, 0, 0));
}
.dhx_matrix_line .headerRowBlock .headerBlockItem.under div {
  background: var(--cv-yellow);
}
.dhx_matrix_line .headerRowBlock .headerBlockItem.even {
  background: color-mix(in hsl, var(--cv-g-350) 2%, rgba(0, 0, 0, 0));
}
.dhx_matrix_line .headerRowBlock .headerBlockItem.even div {
  background: var(--cv-lime);
}
.dhx_matrix_line .headerRowBlock .headerBlockItem.noUserWorkDay {
  background: color-mix(in hsl, var(--cv-g-350) 2%, rgba(0, 0, 0, 0));
}
.dhx_matrix_line .headerRowBlock .headerBlockItem.dayView.hasData {
  background: color-mix(in hsl, var(--cv-g-350) 2%, rgba(0, 0, 0, 0));
}
.dhx_matrix_line .headerRowBlock .headerBlockItem.dayView .over {
  background: var(--cv-red);
}
.dhx_matrix_line .headerRowBlock .headerBlockItem.dayView .blank {
  background: initial;
  background: auto;
}
.dhx_matrix_line .headerRowBlock .headerBlockItem.dayView .even {
  background: var(--cv-lime);
}

#contextMenuRM {
  background-color: var(--cv-w);
  color: var(--cv-w-contrast);
}
#contextMenuRM .topLvlOption .subMenu .subBody .ui-datepicker-calendar tr td[data-handler=selectDay] {
  background-color: color-mix(in hsl, var(--cv-notification) 10%, rgba(0, 0, 0, 0));
}

#contextMenuRM .subMenu.subMenu.subMenu > button {
  color: var(--cv-w);
}

.loadMore.eventWindow {
  color: var(--cv-w);
}

#myDashboard .dhx_cal_event .dhx_title {
  color: var(--cv-electricblue);
}
#myDashboard .dhx_cal_event .dhx_header, #myDashboard .dhx_cal_event .dhx_title, #myDashboard .dhx_cal_event .dhx_body {
  background-color: initial;
}
#myDashboard .personalCalendarOptions .dhx_cal_tab {
  background-color: var(--cv-link);
}
#myDashboard .personalCalendarOptions .dhx_cal_tab.active {
  background-color: color-mix(in srgb, var(--cv-link) 20%, var(--cv-g-500));
}

.resource .resourceWidget #resourceManager {
  background: transparent;
}

#rmReassignPop ul {
  border-color: var(--cv-g-200);
  background-color: var(--cv-w);
}
#rmReassignPop ul li.selected {
  background: color-mix(in srgb, var(--cv-primary) 10%, var(--cv-g-500));
  color: var(--cv-w);
}

.ui-datepicker-inline table {
  border-color: var(--cv-primary) !important;
}

#ui-datepicker-div .ui-datepicker thead {
  background-color: var(--cv-primary) !important;
}
#ui-datepicker-div .ui-datepicker thead tr th {
  background-color: var(--cv-primary) !important;
}
#ui-datepicker-div .ui-datepicker table {
  border-color: var(--cv-primary) !important;
  background-color: var(--cv-primary);
}

#resourceManagerChartsReveal .drawChart:before {
  color: color-mix(in srgb, var(--cv-success) 60%, var(--cv-w));
}
#resourceManagerChartsReveal .drawChart:hover {
  color: color-mix(in srgb, var(--cv-success) 70%, var(--cv-w));
}
#resourceManagerChartsReveal .drawChart:hover:before {
  color: color-mix(in srgb, var(--cv-success) 70%, var(--cv-w));
}

#resourceTimesheetReport .sectionTitle__resourceTimesheetReportFilters .filterOptions {
  background-color: var(--cv-g-130);
}

#resourceManagerTimesheetFiltersReveal .resourceManagerTimesheetFiltersContent .timesheet_report_buttons .runReport:hover {
  color: var(--cv-w) !important;
}

.cs-resourceManager .peopleEvent:not(.customColour) {
  background-color: color-mix(in srgb, var(--cv-blue) 50%, var(--cv-cyan));
  color: inherit;
}
.cs-resourceManager .peopleEvent:not(.customColour) a {
  color: var(--cv-w);
}
.cs-resourceManager .peopleEvent:not(.customColour) .mainText,
.cs-resourceManager .peopleEvent:not(.customColour) .totalHrsText, .cs-resourceManager .peopleEvent:not(.customColour) .eventRow, .cs-resourceManager .peopleEvent:not(.customColour) i,
.cs-resourceManager .peopleEvent:not(.customColour) .moreOptionsBtn {
  color: inherit;
}
.cs-resourceManager .peopleEvent:not(.customColour) .eventIcon:before {
  color: var(--cv-w);
}
.cs-resourceManager .peopleEvent:not(.customColour) .dhx_event_resize {
  color: var(--cv-w);
  background-color: var(--cv-w);
}
.cs-resourceManager .peopleEvent:not(.customColour).roleBlocked {
  background-color: var(--cv-g-350);
}
.cs-resourceManager .peopleEvent:not(.customColour).pencilEvent {
  background-color: color-mix(in srgb, var(--cv-w) 70%, var(--cv-blue));
}
.cs-resourceManager .peopleEvent:not(.customColour).pencilEvent .mainText, .cs-resourceManager .peopleEvent:not(.customColour).pencilEvent .totalHrsText, .cs-resourceManager .peopleEvent:not(.customColour).pencilEvent .moreOptionsBtn, .cs-resourceManager .peopleEvent:not(.customColour).pencilEvent .billable {
  color: var(--cv-blue);
}
.cs-resourceManager .peopleEvent:not(.customColour) .peopleEventCont.cs-checked .bulkActionCheck input[type=checkbox] {
  accent-color: color-mix(in srgb, var(--cv-blue) 50%, var(--cv-cyan));
}

.cs-resourceManager .peopleEvent.phaseItem .mainText {
  top: 16px;
  font-size: 1.1rem;
}

.cs-resourceManager .peopleEvent.customColour .dhx_event_resize {
  background: var(--cv-w);
}
.cs-resourceManager .peopleEvent.tentativeEvent {
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--cv-blue) 95%, var(--cv-w)), color-mix(in srgb, var(--cv-blue) 95%, var(--cv-w)) 4px, var(--cv-blue) 4px, var(--cv-blue) 8px) !important;
}
.cs-resourceManager .peopleEvent.tentativeEvent .peopleEventCont.cs-checked .bulkActionCheck input[type=checkbox] {
  accent-color: var(--cv-blue);
}
.cs-resourceManager .peopleEvent.coloredEvent {
  color: var(--cv-w);
}
.cs-resourceManager .peopleEvent.coloredEvent .mainText,
.cs-resourceManager .peopleEvent.coloredEvent .totalHrsText, .cs-resourceManager .peopleEvent.coloredEvent .eventRow {
  color: var(--cv-w);
}
.cs-resourceManager .peopleEvent.coloredEvent .eventIcon:before {
  color: var(--cv-w);
}
.cs-resourceManager .peopleEvent.coloredEvent .dhx_event_resize {
  color: var(--cv-w);
  background: var(--cv-w);
}
.cs-resourceManager .peopleEvent.coloredEvent .dhx_body {
  background-color: initial !important;
}
.cs-resourceManager .peopleEvent.oldEvent .dhx_event_resize {
  background: var(--cv-g-100) !important;
}
.cs-resourceManager .peopleEvent.oldEvent .eventIcon:before,
.cs-resourceManager .peopleEvent.oldEvent .mainText,
.cs-resourceManager .peopleEvent.oldEvent .totalHrsText, .cs-resourceManager .peopleEvent.oldEvent .eventRow {
  color: var(--cv-g-100) !important;
}
.cs-resourceManager .peopleEvent.pipelineProject, .cs-resourceManager .peopleEvent.noDrag.peopleEvent.noDrag.inActive_event.pipelineProject {
  background: var(--cv-yellow) !important;
  border-color: color-mix(in srgb, var(--cv-yellow) 55%, var(--cv-chocolate));
}
.cs-resourceManager .peopleEvent.pipelineProject .mainText,
.cs-resourceManager .peopleEvent.pipelineProject .totalHrsText, .cs-resourceManager .peopleEvent.pipelineProject .eventRow, .cs-resourceManager .peopleEvent.noDrag.peopleEvent.noDrag.inActive_event.pipelineProject .mainText,
.cs-resourceManager .peopleEvent.noDrag.peopleEvent.noDrag.inActive_event.pipelineProject .totalHrsText, .cs-resourceManager .peopleEvent.noDrag.peopleEvent.noDrag.inActive_event.pipelineProject .eventRow {
  color: var(--cv-chocolate) !important;
}
.cs-resourceManager .peopleEvent.pipelineProject .eventIcon:before, .cs-resourceManager .peopleEvent.noDrag.peopleEvent.noDrag.inActive_event.pipelineProject .eventIcon:before {
  color: var(--cv-chocolate) !important;
}
.cs-resourceManager .peopleEvent.pipelineProject .dhx_event_resize, .cs-resourceManager .peopleEvent.noDrag.peopleEvent.noDrag.inActive_event.pipelineProject .dhx_event_resize {
  color: var(--cv-w) !important;
  background: var(--cv-yellow) !important;
}
.cs-resourceManager .peopleEvent.pipelineProject .peopleEventCont.cs-checked .bulkActionCheck input[type=checkbox], .cs-resourceManager .peopleEvent.noDrag.peopleEvent.noDrag.inActive_event.pipelineProject .peopleEventCont.cs-checked .bulkActionCheck input[type=checkbox] {
  accent-color: var(--cv-chocolate);
}
.cs-resourceManager .peopleEvent.pipelineProject.tentativeEvent, .cs-resourceManager .peopleEvent.noDrag.peopleEvent.noDrag.inActive_event.pipelineProject.tentativeEvent {
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--cv-yellow) 85%, var(--cv-w)), color-mix(in srgb, var(--cv-yellow) 85%, var(--cv-w)) 4px, var(--cv-yellow) 4px, var(--cv-yellow) 8px) !important;
}
.cs-resourceManager .peopleEvent.pipelineProject.tentativeEvent .peopleEventCont.cs-checked .bulkActionCheck input[type=checkbox], .cs-resourceManager .peopleEvent.noDrag.peopleEvent.noDrag.inActive_event.pipelineProject.tentativeEvent .peopleEventCont.cs-checked .bulkActionCheck input[type=checkbox] {
  accent-color: var(--cv-chocolate);
}

#rmReportListDropdown .f-dropdown li > a:hover {
  background-color: color-mix(in srgb, var(--cv-primary) 70%, var(--cv-w));
}

#resourceManager .rmCalNavCont .rmCalNav, #resourceManagerLite .rmCalNavCont .rmCalNav {
  color: var(--cv-w);
}

.dividerLinerm {
  border-top-color: var(--cv-g-130);
}

.dhx_marked_timespan {
  background: var(--cv-g-300);
}

#myDashboard .rmDash #resourceManager .dhx_cal_navline {
  background-color: var(--cv-w);
}

.projectListMain {
  background: var(--cv-g-100);
}
.projectListMain .projectRow {
  border-bottom-color: var(--cv-g-300);
}

.largeCheck .inputItem {
  border-color: var(--cv-g-300);
  background-color: var(--cv-w);
}

.workingDays .day {
  background-color: var(--cv-w);
  border-color: var(--cv-g-200);
  border-top-color: var(--cv-greenblue);
}

#rmFilterWindow .filterRM:hover {
  background-color: color-mix(in srgb, var(--cv-blue) 8%, var(--cv-g-500));
}

#rmFilterWindow .filterOptions .filterRow label {
  color: var(--cv-w);
}

.calendarUnity .peopleEventCont .mainText {
  color: var(--cv-w);
}

.cs-resourceManager .dhx_scale_bar .headerMainRow {
  border-color: var(--cv-g-200);
}
.cs-resourceManager .dhx_scale_bar .headerMainRow.today {
  border-top-color: var(--cv-notification);
  color: var(--cv-notification);
}
.cs-resourceManager .dhx_cal_header.dhx_second_cal_header {
  border-left-color: var(--cv-g-200);
}

.viewPanel .count {
  color: var(--cv-w);
}
.viewPanel .count label {
  color: var(--cv-w);
}

.resource-manager .white_cell {
  background-color: var(--cv-w);
}
.resource-manager .green_cell {
  background: linear-gradient(to bottom, var(--cv-greenblue), color-mix(in srgb, var(--cv-greenblue) 90%, var(--cv-g-500)));
  background-color: var(--cv-greenblue);
}
.resource-manager .yellow_cell {
  background: linear-gradient(to bottom, var(--cv-yellow), color-mix(in srgb, var(--cv-yellow) 90%, var(--cv-g-500)));
  background-color: var(--cv-yellow);
}
.resource-manager .red_cell {
  background: linear-gradient(to bottom, var(--cv-red), color-mix(in srgb, var(--cv-red) 90%, var(--cv-g-500)));
  background-color: var(--cv-red);
}

.dhx_matrix_scell .peopleYItem .roleImage span,
.dhx_matrix_scell .roleYItem .roleImage span,
.dhx_matrix_scell .projectYItem .roleImage span {
  color: var(--cv-w);
}
.dhx_matrix_scell .peopleYItem .userImage,
.dhx_matrix_scell .peopleYItem .user-no-image,
.dhx_matrix_scell .roleYItem .userImage,
.dhx_matrix_scell .roleYItem .user-no-image,
.dhx_matrix_scell .projectYItem .userImage,
.dhx_matrix_scell .projectYItem .user-no-image {
  color: var(--cv-w);
}
.dhx_matrix_scell .peopleYItem .userImage,
.dhx_matrix_scell .peopleYItem .roleImage,
.dhx_matrix_scell .roleYItem .userImage,
.dhx_matrix_scell .roleYItem .roleImage,
.dhx_matrix_scell .projectYItem .userImage,
.dhx_matrix_scell .projectYItem .roleImage {
  border-color: var(--cv-w);
}
.dhx_matrix_scell .projectYItem .ddProjectListSub:before {
  color: var(--cv-w);
}

.cs-resourceManager .peopleEvent {
  background-color: var(--cv-lightbluepearl);
  color: var(--cv-electricblue);
}
.cs-resourceManager .peopleEvent.oldEvent .dhx_event_resize {
  background: var(--cv-g-350) !important;
}
.cs-resourceManager .peopleEvent.oldEvent .eventIcon:before,
.cs-resourceManager .peopleEvent.oldEvent .mainText,
.cs-resourceManager .peopleEvent.oldEvent .totalHrsText, .cs-resourceManager .peopleEvent.oldEvent .eventRow {
  color: var(--cv-g-350) !important;
}
.cs-resourceManager .peopleEvent.oldEvent.inActive_event {
  background-color: color-mix(in srgb, var(--cv-lightbluepearl) 20%, var(--cv-w)) !important;
  color: color-mix(in srgb, var(--cv-gentleplum) 20%, var(--cv-w)) !important;
}
.cs-resourceManager .peopleEvent.oldEvent.inActive_event .dhx_event_resize {
  background: var(--cv-g-350) !important;
}
.cs-resourceManager .peopleEvent.oldEvent.inActive_event .eventIcon:before,
.cs-resourceManager .peopleEvent.oldEvent.inActive_event .mainText,
.cs-resourceManager .peopleEvent.oldEvent.inActive_event .totalHrsText, .cs-resourceManager .peopleEvent.oldEvent.inActive_event .eventRow {
  color: var(--cv-g-350) !important;
}
.cs-resourceManager .peopleEvent.newEventHighLight {
  background-color: color-mix(in hsl, var(--cv-turquoise) 3%, rgba(0, 0, 0, 0));
}
.cs-resourceManager .peopleEvent.noColorEvent {
  background-color: var(--cv-grannysmith);
}
.cs-resourceManager .peopleEvent.noColorEvent:hover {
  background-color: color-mix(in srgb, var(--cv-grannysmith) 10%, var(--cv-w));
}
.cs-resourceManager .peopleEvent.sickDay {
  background-color: color-mix(in srgb, var(--cv-beerorange) 20%, var(--cv-w));
}
.cs-resourceManager .peopleEvent.sickDay:hover {
  background-color: color-mix(in srgb, var(--cv-beerorange) 40%, var(--cv-w));
}
.cs-resourceManager .peopleEvent.holiday {
  background-color: color-mix(in srgb, var(--cv-emerald) 20%, var(--cv-w));
}
.cs-resourceManager .peopleEvent.holiday:hover {
  background-color: color-mix(in srgb, var(--cv-emerald) 40%, var(--cv-w));
}
.cs-resourceManager .peopleEvent.coloredEvent {
  background-color: var(--cv-tranquility);
  color: var(--cv-w);
}
.cs-resourceManager .peopleEvent.away {
  background-color: color-mix(in srgb, var(--cv-lightbluepearl) 50%, var(--cv-g-300));
}
.cs-resourceManager .peopleEvent.away:hover {
  background-color: color-mix(in srgb, var(--cv-lightbluepearl) 50%, var(--cv-g-200));
}
.cs-resourceManager .dhx_event_resize {
  background: var(--cv-g-500);
}
.cs-resourceManager .peopleEventCont .eventRow {
  color: var(--cv-bluepearl);
}
.cs-resourceManager .peopleEventCont .eventRow a {
  color: getVar(var(--cv-w));
  transition: color var(--animation-base) ease;
}
.cs-resourceManager .peopleEventCont .eventRow a:hover, .cs-resourceManager .peopleEventCont .eventRow a:focus, .cs-resourceManager .peopleEventCont .eventRow a:active {
  color: getVar(var(--cv-w), shade);
}
.cs-resourceManager .peopleEventCont.threerows .titleText {
  color: var(--cv-w);
}
.cs-resourceManager .userHomeView {
  background-color: color-mix(in srgb, var(--cv-lightbluepearl) 50%, var(--cv-electricblue));
  color: var(--cv-w);
}
.cs-resourceManager .userHomeView:hover {
  background-color: var(--cv-lightbluepearl);
}
.cs-resourceManager .red_event {
  background-color: var(--cv-crimsonglory);
  color: var(--cv-w);
}
.cs-resourceManager .red_event:hover {
  background-color: color-mix(in srgb, var(--cv-crimsonglory) 20%, var(--cv-w));
}
.cs-resourceManager .roleCells.roleWeekend {
  background-color: var(--cv-g-130);
}
.cs-resourceManager .roleCells:hover .red_cell {
  background-color: color-mix(in srgb, var(--cv-alert) 10%, var(--cv-w));
}
.cs-resourceManager .roleCells:hover .green_cell {
  background-color: color-mix(in srgb, var(--cv-green) 10%, var(--cv-w));
}
.cs-resourceManager .roleCells.tentativeCell div {
  color: var(--cv-g-350);
}
.cs-resourceManager .roleCells.tentativeCell:hover:before {
  color: var(--cv-w);
}
.cs-resourceManager .roleCells.tentativeCell.red_cell div {
  color: var(--cv-w);
}
.cs-resourceManager .roleCells.tentativeCell.green_cell div {
  color: var(--cv-w);
}
.cs-resourceManager .roleCells.white_cell {
  background-color: var(--cv-w);
}
.cs-resourceManager .roleCells.green_cell {
  background-color: var(--cv-greenblue);
  color: var(--cv-w);
}
.cs-resourceManager .roleCells.green_cell div {
  color: var(--cv-w);
}
.cs-resourceManager .roleCells.green_cell .hours {
  color: var(--cv-w) !important;
}
.cs-resourceManager .roleCells.yellow_cell {
  background-color: var(--cv-yellow);
}
.cs-resourceManager .roleCells.red_cell {
  background-color: var(--cv-alert);
  color: var(--cv-w);
}
.cs-resourceManager .roleCells.red_cell div, .cs-resourceManager .roleCells.red_cell span, .cs-resourceManager .roleCells.red_cell small {
  color: inherit;
}

.cs-resourceManager .inActive_event {
  background: var(--cv-g-350) !important;
  color: var(--cv-w);
}
.cs-resourceManager .inActive_event:hover {
  background: var(--cv-g-300) !important;
}

#projectFeatureContainerPlanner .cs-resourceManager .peopleEvent.inActive_event.inActive_event.inActive_event {
  background: var(--cv-g-350) !important;
  color: var(--cv-g-350-contrast) !important;
}
#projectFeatureContainerPlanner .cs-resourceManager .peopleEvent.inActive_event.inActive_event.inActive_event:hover {
  background: var(--cv-g-300) !important;
  color: var(--cv-g-300-contrast) !important;
}

#projectFeatureContainerPlanner .cs-resourceManager .peopleEvent.noDrag.peopleEvent.noDrag.inActive_event.holidayBooking, .cs-resourceManager .peopleEvent.noDrag.peopleEvent.noDrag.inActive_event.holidayBooking {
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--cv-orange) 80%, var(--cv-w)), color-mix(in srgb, var(--cv-orange) 80%, var(--cv-w)) 4px, var(--cv-orange) 4px, var(--cv-orange) 8px) !important;
  color: var(--cv-w) !important;
}

.filterRowCustom {
  background-color: var(--cv-g-100);
}

#rmFilterWindow .loader.fullSize {
  background-color: var(--cv-w);
}

input #rmFilterWindow .sideBarHeader .filterSearch:focus {
  background-color: var(--cv-w);
}

#rmFilterWindow .projectListFilters h6 {
  color: color-mix(in hsl, var(--cv-w) 1%, rgba(0, 0, 0, 0));
}
#rmFilterWindow .footer {
  background: inherit;
}
#rmFilterWindow .secondList {
  background: var(--cv-w);
  border-right-color: var(--cv-g-100);
}
#rmFilterWindow .typeFilter .projectTypeListGen span:before,
#rmFilterWindow .statusFilter .projectTypeListGen span:before,
#rmFilterWindow .metaFilter .projectTypeListGen span:before {
  border-color: var(--cv-w) transparent transparent transparent;
}
#rmFilterWindow .header {
  background: color-mix(in srgb, var(--cv-primary) 20%, var(--cv-g-500));
}
#rmFilterWindow .header label {
  color: var(--cv-w);
}
#rmFilterWindow .filterMainBody .filterDivider,
#rmFilterWindow .secondList .filterDivider {
  background-color: var(--cv-g-100);
}
#rmFilterWindow .filterMainBody .filterBody .filterSwitch.joinedSwitchTop .toggle-cp:before,
#rmFilterWindow .filterMainBody .sub-filterBody .filterSwitch.joinedSwitchTop .toggle-cp:before,
#rmFilterWindow .secondList .filterBody .filterSwitch.joinedSwitchTop .toggle-cp:before,
#rmFilterWindow .secondList .sub-filterBody .filterSwitch.joinedSwitchTop .toggle-cp:before {
  background: color-mix(in srgb, var(--cv-primary) 10%, var(--cv-w));
}
#rmFilterWindow .filterMainBody .filterBody .filterSwitch.joinedSwitchBottom .toggle-cp:before,
#rmFilterWindow .filterMainBody .sub-filterBody .filterSwitch.joinedSwitchBottom .toggle-cp:before,
#rmFilterWindow .secondList .filterBody .filterSwitch.joinedSwitchBottom .toggle-cp:before,
#rmFilterWindow .secondList .sub-filterBody .filterSwitch.joinedSwitchBottom .toggle-cp:before {
  background: color-mix(in srgb, var(--cv-primary) 10%, var(--cv-w));
}

.cs-resourceManager .personalCalendarFiltersBtn {
  background: var(--cv-w);
}
.cs-resourceManager .personalCalendarFiltersBtn .rmCalFilterBtn.active {
  background-color: var(--cv-link);
}
.cs-resourceManager .personalCalendarFiltersBtn .rmCalFilterBtn.active:hover {
  background: color-mix(in srgb, var(--cv-link) 20%, var(--cv-w)) !important;
}
.cs-resourceManager .personalCalendarFiltersBtn .rmCalFilterBtn.hasFilters:after {
  border-color: var(--cv-w);
}

.resourceManagerInfoDialog .hiddenList .listContainer .sideCont li.active {
  color: var(--cv-w);
}
.resourceManagerInfoDialog .allocationBlock .rmtotalHours.overB,
.resourceManagerInfoDialog .allocationBlock .rmAverageHrs.overB,
.resourceManagerInfoDialog .allocationBlock .rmPercent.overB {
  border-color: var(--cv-red);
  color: var(--cv-red);
}

.resourceManagerInfoDialog .allocationTab .content.row .roleAssign.open {
  background-color: var(--cv-g-200);
}

.resourceManagerInfoDialog .tentativeBookText {
  color: var(--crimsonglory);
  border-bottom-color: var(--cv-g-200);
}
.resourceManagerInfoDialog .errorDateText {
  color: var(--crimsonglory);
}
.resourceManagerInfoDialog .formSection .tabLoader {
  background-color: color-mix(in hsl, var(--cv-g-350) 30%, rgba(0, 0, 0, 0));
}

.no-varient:empty:before {
  color: var(--cv-g-300);
}

.rmServerQueue.rmServerQueue {
  background-color: var(--cv-primary);
  border-color: 1px solid var(--cv-primary);
}
.rmServerQueue.rmServerQueue label, .rmServerQueue.rmServerQueue:before {
  color: var(--cv-primary-contrast);
}

#resourceManager .dhx_matrix_cell .headerBlockItemInline.over, #resourceManagerLite .dhx_matrix_cell .headerBlockItemInline.over {
  background-color: color-mix(in hsl, var(--cv-g-400) 20%, rgba(0, 0, 0, 0));
}
#resourceManager .dhx_matrix_cell .headerBlockItemInline.over div, #resourceManagerLite .dhx_matrix_cell .headerBlockItemInline.over div {
  background-color: var(--cv-red);
}
#resourceManager .dhx_matrix_cell .headerBlockItemInline.under, #resourceManagerLite .dhx_matrix_cell .headerBlockItemInline.under {
  background-color: color-mix(in hsl, var(--cv-g-400) 20%, rgba(0, 0, 0, 0));
}
#resourceManager .dhx_matrix_cell .headerBlockItemInline.under div, #resourceManagerLite .dhx_matrix_cell .headerBlockItemInline.under div {
  background-color: var(--cv-yellow);
}
#resourceManager .dhx_matrix_cell .headerBlockItemInline.even, #resourceManagerLite .dhx_matrix_cell .headerBlockItemInline.even {
  background-color: color-mix(in hsl, var(--cv-g-400) 20%, rgba(0, 0, 0, 0));
}
#resourceManager .dhx_matrix_cell .headerBlockItemInline.even div, #resourceManagerLite .dhx_matrix_cell .headerBlockItemInline.even div {
  background: var(--cv-greenblue);
}
#resourceManager .dhx_matrix_cell .headerBlockItemInline.dayView.hasData, #resourceManagerLite .dhx_matrix_cell .headerBlockItemInline.dayView.hasData {
  background-color: color-mix(in hsl, var(--cv-g-400) 20%, rgba(0, 0, 0, 0));
}
#resourceManager .dhx_matrix_cell .headerBlockItemInline.dayView .over, #resourceManagerLite .dhx_matrix_cell .headerBlockItemInline.dayView .over {
  background: var(--cv-red);
}
#resourceManager .dhx_matrix_cell .headerBlockItemInline.dayView .blank, #resourceManagerLite .dhx_matrix_cell .headerBlockItemInline.dayView .blank {
  background: initial;
  background: auto;
}
#resourceManager .dhx_matrix_cell .headerBlockItemInline.dayView .even, #resourceManagerLite .dhx_matrix_cell .headerBlockItemInline.dayView .even {
  background: var(--cv-greenblue);
}

.dhx_timeline_scale_header {
  background-color: inherit;
}

.cs-eventEdit .custom-border {
  border-color: var(--cv-g-300);
}

#contextMenuRM .topLvlOption .subMenu .subBody .ui-datepicker {
  background-color: var(--cv-w);
}

.ui-widget-content.ui-widget-content,
.ui-datepicker .ui-datepicker-title.ui-datepicker-title.ui-datepicker-title {
  color: var(--cv-w-contrast);
}

#rmFilterWindow .roleFilterItem.filterRow.pipeline label {
  color: var(--cv-yellow) !important;
}

#rmInlineFilter .roleFilterItem.filterRow.pipeline label {
  color: var(--cv-yellow) !important;
}

.cs-inlineFilterCont input.clickable::-webkit-input-placeholder {
  color: var(--cv-g-500);
}
.cs-inlineFilterCont input.clickable::-moz-placeholder {
  color: var(--cv-g-500);
}
.cs-inlineFilterCont input.clickable::-ms-input-placeholder {
  color: var(--cv-g-500);
}

.pencilRank1.pencilRank1 .pencilRankIcon.pencilRankIcon span {
  background-color: var(--cv-greenblue);
}

.pencilRank2.pencilRank2 .pencilRankIcon.pencilRankIcon span {
  background-color: var(--cv-lime);
}

.pencilRank3.pencilRank3 .pencilRankIcon.pencilRankIcon span {
  background-color: var(--cv-orange);
}

.pencilRank4.pencilRank4 .pencilRankIcon.pencilRankIcon span {
  background-color: var(--cv-red);
}

.pencilRank5.pencilRank5 .pencilRankIcon.pencilRankIcon span {
  background-color: var(--cv-crimson);
}

.pencilRank6.pencilRank6 .pencilRankIcon.pencilRankIcon span {
  background-color: var(--cv-violet);
}

.pencilRank7.pencilRank7 .pencilRankIcon.pencilRankIcon span {
  background-color: var(--cv-midnightpurple);
}

.pencilRank8.pencilRank8 .pencilRankIcon.pencilRankIcon span {
  background-color: var(--cv-bluepearl);
}

.wildcard-heading {
  border-bottom-color: var(--cv-g-100);
}

.searchList .unityList__row--header {
  border-bottom-color: var(--cv-g-300);
}

.thumbResults li.expired:after, .listResults li.expired:after {
  color: var(--cv-alert);
}

#searchContainer .metaFiltersLabel {
  border-top-color: var(--cv-g-100);
}

.unityList__item.expired:before {
  color: var(--cv-alert);
}

.quickSearchRecord {
  border-bottom-color: var(--cv-g-200);
}

.quickSearchDropDown .results {
  background-color: var(--cv-w);
}

.profileWorkingDays .day {
  border-top-color: var(--cv-success);
  border-left-color: var(--cv-g-300);
  border-right-color: var(--cv-g-300);
  border-bottom-color: var(--cv-g-300);
}
.profileWorkingDays .day:empty {
  border-top-color: var(--cv-w);
  border-left-color: var(--cv-w);
  border-right-color: var(--cv-w);
  border-bottom-color: var(--cv-w);
}

.people-thumb-wrap.people-thumb-wrap {
  box-shadow: 0 0 0 1px inset var(--cv-g-200);
}
.people-thumb-wrap.people-thumb-wrap a:hover {
  background-color: transparent;
}

.gridContainer tbody tr input, .gridContainer tbody tr select {
  background-color: var(--cv-w);
}
.gridContainer tbody tr .Style1 {
  background-color: color-mix(in hsl, var(--cv-green) 60%, rgba(0, 0, 0, 0)) !important;
  border-bottom-color: color-mix(in hsl, var(--cv-green) 60%, rgba(0, 0, 0, 0)) !important;
  color: var(--cv-w);
}
.gridContainer tbody tr .Style1 input,
.gridContainer tbody tr .Style1 select,
.gridContainer tbody tr .Style1 .custom,
.gridContainer tbody tr .Style1 .fake-input,
.gridContainer tbody tr .Style1 .result {
  border-color: var(--cv-green);
}
.gridContainer tbody tr .Style2 {
  background-color: color-mix(in hsl, var(--cv-green) 30%, rgba(0, 0, 0, 0)) !important;
  border-bottom-color: color-mix(in hsl, var(--cv-green) 30%, rgba(0, 0, 0, 0)) !important;
  color: var(--cv-w);
}
.gridContainer tbody tr .Style2 input,
.gridContainer tbody tr .Style2 select,
.gridContainer tbody tr .Style2 .custom,
.gridContainer tbody tr .Style2 .fake-input,
.gridContainer tbody tr .Style2 .result {
  border-color: var(--cv-green);
}
.gridContainer tbody tr .Style3 {
  background-color: color-mix(in hsl, var(--cv-blue) 60%, rgba(0, 0, 0, 0)) !important;
  border-bottom-color: color-mix(in hsl, var(--cv-blue) 60%, rgba(0, 0, 0, 0)) !important;
  color: var(--cv-w);
}
.gridContainer tbody tr .Style3 input,
.gridContainer tbody tr .Style3 select,
.gridContainer tbody tr .Style3 .custom,
.gridContainer tbody tr .Style3 .fake-input,
.gridContainer tbody tr .Style3 .result {
  border-color: var(--cv-blue);
}
.gridContainer tbody tr .Style4 {
  background-color: color-mix(in hsl, var(--cv-blue) 30%, rgba(0, 0, 0, 0)) !important;
  border-bottom-color: color-mix(in hsl, var(--cv-blue) 30%, rgba(0, 0, 0, 0)) !important;
  color: var(--cv-w);
}
.gridContainer tbody tr .Style4 input,
.gridContainer tbody tr .Style4 select,
.gridContainer tbody tr .Style4 .custom,
.gridContainer tbody tr .Style4 .fake-input,
.gridContainer tbody tr .Style4 .result {
  border-color: var(--cv-blue);
}
.gridContainer tbody tr .Style5 {
  background-color: color-mix(in hsl, var(--cv-red) 60%, rgba(0, 0, 0, 0)) !important;
  border-bottom-color: color-mix(in hsl, var(--cv-red) 60%, rgba(0, 0, 0, 0)) !important;
  color: var(--cv-w);
}
.gridContainer tbody tr .Style5 input,
.gridContainer tbody tr .Style5 select,
.gridContainer tbody tr .Style5 .custom,
.gridContainer tbody tr .Style5 .fake-input,
.gridContainer tbody tr .Style5 .result {
  border-color: var(--cv-red);
}
.gridContainer tbody tr .Style6 {
  background-color: color-mix(in hsl, var(--cv-red) 30%, rgba(0, 0, 0, 0)) !important;
  border-bottom-color: color-mix(in hsl, var(--cv-red) 30%, rgba(0, 0, 0, 0)) !important;
  color: var(--cv-w);
}
.gridContainer tbody tr .Style6 input,
.gridContainer tbody tr .Style6 select,
.gridContainer tbody tr .Style6 .custom,
.gridContainer tbody tr .Style6 .fake-input,
.gridContainer tbody tr .Style6 .result {
  border-color: var(--cv-red);
}
.gridContainer tbody tr .Style7 {
  background-color: color-mix(in hsl, var(--cv-purple) 60%, rgba(0, 0, 0, 0)) !important;
  border-bottom-color: color-mix(in hsl, var(--cv-purple) 60%, rgba(0, 0, 0, 0)) !important;
  color: var(--cv-w);
}
.gridContainer tbody tr .Style7 input,
.gridContainer tbody tr .Style7 select,
.gridContainer tbody tr .Style7 .custom,
.gridContainer tbody tr .Style7 .fake-input,
.gridContainer tbody tr .Style7 .result {
  border-color: var(--cv-purple);
}
.gridContainer tbody tr .Style8 {
  background-color: color-mix(in hsl, var(--cv-purple) 30%, rgba(0, 0, 0, 0)) !important;
  border-bottom-color: color-mix(in hsl, var(--cv-purple) 30%, rgba(0, 0, 0, 0)) !important;
  color: var(--cv-w);
}
.gridContainer tbody tr .Style8 input,
.gridContainer tbody tr .Style8 select,
.gridContainer tbody tr .Style8 .custom,
.gridContainer tbody tr .Style8 .fake-input,
.gridContainer tbody tr .Style8 .result {
  border-color: var(--cv-purple);
}
.gridContainer tbody tr .Style1 .tab-value,
.gridContainer tbody tr .Style1 p,
.gridContainer tbody tr .Style2 .tab-value,
.gridContainer tbody tr .Style2 p,
.gridContainer tbody tr .Style3 .tab-value,
.gridContainer tbody tr .Style3 p,
.gridContainer tbody tr .Style4 .tab-value,
.gridContainer tbody tr .Style4 p,
.gridContainer tbody tr .Style5 .tab-value,
.gridContainer tbody tr .Style5 p,
.gridContainer tbody tr .Style6 .tab-value,
.gridContainer tbody tr .Style6 p,
.gridContainer tbody tr .Style7 .tab-value,
.gridContainer tbody tr .Style7 p,
.gridContainer tbody tr .Style8 .tab-value,
.gridContainer tbody tr .Style8 p {
  color: inherit;
}
.gridContainer tbody tr .Style1 .fake-input,
.gridContainer tbody tr .Style2 .fake-input,
.gridContainer tbody tr .Style3 .fake-input,
.gridContainer tbody tr .Style4 .fake-input,
.gridContainer tbody tr .Style5 .fake-input,
.gridContainer tbody tr .Style6 .fake-input,
.gridContainer tbody tr .Style7 .fake-input,
.gridContainer tbody tr .Style8 .fake-input {
  color: inherit;
  background-color: inherit;
}
.gridContainer tbody tr .Style1 .result,
.gridContainer tbody tr .Style2 .result,
.gridContainer tbody tr .Style3 .result,
.gridContainer tbody tr .Style4 .result,
.gridContainer tbody tr .Style5 .result,
.gridContainer tbody tr .Style6 .result,
.gridContainer tbody tr .Style7 .result,
.gridContainer tbody tr .Style8 .result {
  background-color: inherit;
}

.formGroup .grid-header {
  border-bottom-color: var(--cv-g-100);
}

.groupElementEntry .cs-file-headers, .formElement .cs-file-headers {
  border-bottom-color: var(--cv-g-100);
}
.groupElementEntry .cs-file-headers span, .formElement .cs-file-headers span {
  color: var(--cv-g-350);
}

.cs-large-search-list-input {
  border-bottom-color: var(--cv-g-200);
}

.cs_subWorkflowFilter.cs_subWorkflowFilter button {
  background-color: var(--cv-g-100);
  color: var(--cv-g-500);
}
.cs_subWorkflowFilter.cs_subWorkflowFilter button.active {
  background-color: var(--cv-link);
  color: var(--cv-w);
}

.formField.changed {
  border-color: color-mix(in hsl, var(--cv-blue) 70%, rgba(0, 0, 0, 0)) !important;
}
.formField.changed label {
  color: var(--cv-blue);
}
.formField.changed label:before {
  background-color: var(--cv-blue);
}

.tab-value.changed {
  border-color: color-mix(in hsl, var(--cv-blue) 70%, rgba(0, 0, 0, 0)) !important;
}

ins {
  text-decoration: none;
  background-color: color-mix(in hsl, var(--cv-green) 20%, rgba(0, 0, 0, 0));
  color: var(--cv-g-500);
}

del {
  text-decoration: line-through;
  background-color: color-mix(in hsl, var(--cv-red) 20%, rgba(0, 0, 0, 0));
  color: var(--cv-g-500);
}

.activity-add-post--text-wrap textarea {
  border-bottom-color: var(--cv-g-300);
}
.activity-add-post--text-wrap textarea:focus {
  border-bottom-color: var(--cv-link);
}

.formFileInput.cs-attachedfiles .noValue {
  color: var(--cv-g-350);
}
.formFileInput.cs-attachedfiles .noValue span {
  color: var(--cv-g-350);
}
.formFileInput.cs-attachedfiles .cs-thumb-attached {
  background-color: var(--cv-g-100);
}

.noValue {
  color: var(--cv-g-350);
}
.noValue span {
  color: var(--cv-g-350);
}

.sideBarFilter .adaptiveCard .profile-thumb {
  background: var(--cv-g-100);
}

.ms-choice, .formElement .ms-parent button {
  border-color: var(--cv-g-300);
}

.box {
  position: relative;
}
.box__title {
  border-color: var(--cv-g-350);
}
.box__description::before {
  border-bottom-color: var(--cv-g-350);
}
.box__description::after {
  border-bottom-color: var(--cv-g-350);
}

.allocationHoursPanel .dayInputCont input {
  background-color: var(--cv-g-200);
  border-color: var(--cv-g-300);
  box-shadow: none;
}
.allocationHoursPanel .dayInputCont input input[type=number]::-webkit-inner-spin-button,
.allocationHoursPanel .dayInputCont input input[type=number]::-webkit-outer-spin-button {
  opacity: 0;
}
.allocationHoursPanel .dayInputCont.enabledDay input {
  background-color: var(--cv-w);
}

.budgetEstimatesTable {
  border-bottom-color: var(--cv-g-300);
}
.budgetEstimatesTable .estimateHeader {
  background-color: var(--cv-g-100);
}
.budgetEstimatesTable td, .budgetEstimatesTable th {
  border-color: var(--cv-g-300);
}

.reveal-modal .formDetails .cs-attachedfiles {
  background-color: var(--cv-g-100);
}
.reveal-modal .formDetails .childrenElements .cs-attachedfiles, .reveal-modal .formDetails .childrenElements .cs-thumb-attached {
  background-color: var(--cv-w);
}

.message,
.calloutPanel {
  border-color: var(--cv-g-300);
}
.message span, .message label,
.calloutPanel span,
.calloutPanel label {
  color: inherit;
}
.message.message-warning,
.calloutPanel.message-warning {
  background-color: color-mix(in hsl, var(--cv-yellow) 10%, rgba(0, 0, 0, 0));
  border-color: color-mix(in srgb, var(--cv-yellow) 50%, var(--cv-w));
}
.message.message-warning span, .message.message-warning label,
.calloutPanel.message-warning span,
.calloutPanel.message-warning label {
  color: color-mix(in srgb, var(--cv-yellow) 50%, var(--cv-g-500));
}
.message.message-simple,
.calloutPanel.message-simple {
  background-color: color-mix(in hsl, var(--cv-blue) 10%, rgba(0, 0, 0, 0));
  border-color: color-mix(in srgb, var(--cv-blue) 40%, var(--cv-w));
  color: color-mix(in srgb, var(--cv-blue) 60%, var(--cv-g-500));
}
.message.message-simple span, .message.message-simple label, .message.message-simple svg,
.calloutPanel.message-simple span,
.calloutPanel.message-simple label,
.calloutPanel.message-simple svg {
  color: color-mix(in srgb, var(--cv-blue) 60%, var(--cv-g-500));
}
.message.message-danger,
.calloutPanel.message-danger {
  background-color: color-mix(in hsl, var(--cv-red) 10%, rgba(0, 0, 0, 0));
  border-color: color-mix(in srgb, var(--cv-red) 50%, var(--cv-w));
  color: color-mix(in srgb, var(--cv-red) 60%, var(--cv-g-500));
}
.message.message-danger span, .message.message-danger label, .message.message-danger svg,
.calloutPanel.message-danger span,
.calloutPanel.message-danger label,
.calloutPanel.message-danger svg {
  color: color-mix(in srgb, var(--cv-red) 60%, var(--cv-g-500));
}
.message .version-amount.version-amount.version-amount,
.calloutPanel .version-amount.version-amount.version-amount {
  color: var(--cv-w);
}
.message .version-no.version-no,
.calloutPanel .version-no.version-no {
  color: var(--cv-w);
}

.cv-striped-bg {
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--primary-color) 95%, var(--cv-w)), color-mix(in srgb, var(--primary-color) 95%, var(--cv-w)) 8px, var(--primary-color) 8px, var(--primary-color) 16px);
}

#exportReportDropdown .optionHover .sd-button {
  padding-left: 1rem;
}
#exportReportDropdown .optionHover .sd-button:hover {
  color: var(--button-text);
  background-color: var(--button-hover);
}

.isMobile body, .isMobilehtml, .isMobile #mainSection, .isMobile #sectionContainer, .isMobile .reveal-modal {
  background-color: var(--cv-g-130);
}
.isMobile .dashboard {
  padding: 0;
}
.isMobile .top-bar-mobile {
  background-color: var(--cv-header);
  color: var(--cv-header-contrast);
}
.isMobile .top-bar-mobile li a {
  background-color: var(--cv-header);
  color: var(--cv-header-contrast);
}
.isMobile .nav-toggle span {
  background-color: var(--cv-link);
}
.isMobile .nav-toggle span:before, .isMobile .nav-toggle span:after {
  background-color: inherit;
}
.expanded .isMobile .nav-toggle span {
  background-color: transparent;
}
.expanded .isMobile .nav-toggle span:before, .expanded .isMobile .nav-toggle span:after {
  background-color: var(--cv-link);
}
.isMobile .cs-sdlRow {
  border-bottom-color: var(--cv-g-200);
}
.isMobile .cs-sdlRow.cs_subRowOne, .isMobile .cs-sdlRow.cs_subRowTwo {
  background-color: var(--cv-g-120);
}
.isMobile .cs-sdlRow.js-showSubsBtn:hover {
  background-color: var(--cv-w);
}
.isMobile .WindowManagerContainer .collabHeader {
  background-color: var(--cv-w);
  color: var(--primary-color);
}
.isMobile .cs-flex-list li {
  border-bottom-color: color-mix(in hsl, var(--cv-header-contrast) 10%, rgba(0, 0, 0, 0));
}
.isMobile .expanded .nav-toggle span {
  background-color: transparent;
}
.isMobile .expanded .nav-toggle span:before, .isMobile .expanded .nav-toggle span:after {
  background-color: var(--cv-header-contrast);
}
.isMobile #previewHolder .annotationItemNum, .isMobile #previewHolder .annotationDetails {
  color: var(--cv-w);
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2039215686);
}
.isMobile .cs-previewer-main .sd-toolbar li, .isMobile .cs-previewer-main .sdIconBar {
  color: var(--cv-w);
}
.isMobile .cs-previewer-footer .sd-pagination.sd-pagination {
  color: var(--cv-w);
}
.isMobile .cs-top-header .js_close {
  color: var(--cv-w);
}

.top-bar-mobile.top-bar-mobile.top-bar-mobile .logo {
  background-image: url(../img/mobile-logo.png);
}

body {
  accent-color: var(--cv-notification);
}

tr span.required:after {
  border-color: var(--cv-red-shade);
}

.searchInput a.searchBut:before {
  border-left-color: var(--cv-g-100);
}

.hasDatepicker img {
  background-color: var(--cv-w);
}

#taskDetails hr {
  border-color: var(--cv-g-300);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 -2px 2px rgba(0, 0, 0, 0.05), 0 4px 4px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.05), 0 16px 16px rgba(0, 0, 0, 0.05);
}
#taskDetails .taskDetailsFooter .delete:after {
  border-color: var(--cv-g-300);
}

.patternError a {
  color: var(--cv-w);
}

.tabMove li {
  border-right-color: var(--cv-w);
}

.ui-datepicker .ui-datepicker-prev:before {
  border-color: transparent var(--cv-g-500);
}
.ui-datepicker .ui-datepicker-next:before {
  border-color: transparent var(--cv-g-500);
}

#ui-datepicker-div td.ui-datepicker-today > a {
  border-color: var(--cv-primary-light);
}

.globallyUniqueIndicator.globallyUniqueIndicator {
  color: var(--cv-notification);
}
.globallyUniqueIndicator.globallyUniqueIndicator.verified {
  color: var(--cv-success);
}
.globallyUniqueIndicator.globallyUniqueIndicator.verificationFailed {
  color: var(--cv-alert);
}

.formGroupTotalItem .totalMessage {
  border-left-color: shade(red, 10%);
}

#formDetails .changed:not(section) {
  border-left-color: orange;
}

.request-block-grid .request-tools-tab .panel {
  border-color: #6EC76E;
}
.request-block-grid .request-tools-tab .panel:hover {
  border-color: var(--cv-primary);
}

#gwo_eventRequests {
  background: var(--cv-w);
}

#gwo_eventRequests ul li {
  border-bottom-color: var(--cv-g-300);
}

.request-wrap {
  border-color: var(--cv-primary);
}

.formElement input:focus, .formElement input:active,
.formElement textarea:focus,
.formElement textarea:active {
  border-color: var(--cv-notification);
  background-color: var(--cv-w);
  box-shadow: 0 0 3px var(--cv-notification);
}
.formElement .input-icon.input-icon input:focus + a, .formElement .input-icon.input-icon input:focus + span, .formElement .input-icon.input-icon input:focus + span + span, .formElement .input-icon.input-icon input:focus + span + a, .formElement .input-icon.input-icon input:focus + span + a, .formElement .input-icon.input-icon input:focus + a + a, .formElement .input-icon.input-icon input:active + a, .formElement .input-icon.input-icon input:active + span, .formElement .input-icon.input-icon input:active + span + span, .formElement .input-icon.input-icon input:active + span + a, .formElement .input-icon.input-icon input:active + span + a, .formElement .input-icon.input-icon input:active + a + a {
  border-color: #4f4f50;
}
.formElement .ms-parent button:hover {
  background-color: var(--cv-w) !important;
  border-color: var(--cv-primary) !important;
  color: inherit;
}

.viewMode .childrenElements .formField {
  border-bottom-color: var(--cv-g-200);
}

.colourPicker .colourDisplay {
  background-color: var(--cv-g-200);
}

.colourPickerRing {
  border-color: var(--cv-w);
}

.cs-panel:hover {
  border-color: var(--cv-primary);
}

.gjs-cv-canvas__tools .gjs-toolbar .fa-arrow-up:hover:after, .gjs-cv-canvas__tools .gjs-toolbar .fa-arrows:hover:after, .gjs-cv-canvas__tools .gjs-toolbar .fa-clone:hover:after, .gjs-cv-canvas__tools .gjs-toolbar .fa-trash-o:hover:after {
  background-color: #307bb9;
  color: var(--cv-w);
}

.sdEditorStyles .gjs-clm-new, .sdEditorLayers .gjs-clm-new {
  border-bottom-color: var(--cv-notification);
}
.sdEditorStyles .gjs-layer-count, .sdEditorLayers .gjs-layer-count {
  color: var(--cv-w);
}

.gjs-two-color.gjs-two-color {
  color: #000;
}

.gjs-layer.gjs-layer {
  background-color: transparent;
}

.gjs-rte-action {
  color: var(--cv-w);
}

input:focus:-ms-input-placeholder {
  color: transparent;
}

.sdContentEditorCanvas.gjs-editor-cont {
  background-color: var(--cv-w);
}

.gjs-category-title, .gjs-sm-sector .gjs-sm-title, .gjs-clm-tags .gjs-sm-title, .gjs-block-category .gjs-title, .gjs-layer-title {
  border-bottom-color: var(--cv-g-100);
}

[class*=pip-]:before {
  border-color: transparent transparent var(--cv-w) transparent;
}
[class*=pip-]:after {
  border-color: transparent transparent var(--cv-g-300) transparent;
}

.drop-up-menu {
  background: var(--cv-w);
}

.cs-option-menu input {
  background: transparent;
}
.cs-option-menu input:focus {
  color: var(--cv-w);
  background: transparent;
}

ul.f-dropdown > li.alert:hover {
  color: var(--cv-red-shade);
}

.formButtons hr {
  border-left-color: var(--cv-g-200);
}

.dd-header {
  background: var(--cv-w);
}

.dd-header-sml {
  background: var(--cv-w);
}

.filterToggle {
  border-color: transparent;
}

.fileDetailSections .formElementInput .input-wrapper label:not(.checkbox) {
  border-bottom-color: var(--cv-g-300);
}

#workflowDetails .mainDetails .workflowDetailsOtherWorkflows ul li {
  border-bottom-color: var(--cv-g-200);
}
#workflowDetails .mainDetails .workflowDetailsOtherWorkflows ul li:hover {
  border-left-color: var(--primary-color);
}
#workflowDetails .mainDetails .profilePic .user-no-image-big {
  color: var(--cv-w);
}

.icons-set li {
  border-color: var(--cv-w);
}

.task-details-date {
  border-bottom-color: var(--cv-g-300);
}

.itemIcon {
  color: var(--cv-w);
}

#projectListLinkedProjects ul,
#skuChecker ul {
  background-color: var(--cv-w);
}

#workflowRequestDetails .content .description {
  background-color: var(--cv-blue);
  color: var(--cv-blue-contrast);
}

.formListRollover {
  border-color: var(--cv-g-200);
}
.formListRollover .heading {
  border-bottom-color: var(--cv-g-200);
}

.searchInput a.searchBut:before {
  border-left-color: var(--cv-g-100);
}

#projectBudgetResourceDialog .tableRow {
  border-bottom-color: var(--cv-g-300);
}
#projectBudgetResourceDialog .tableFooter,
#projectBudgetResourceDialog .tableRow {
  border-left-color: var(--cv-g-300);
}
#projectBudgetResourceDialog .tableFooter .tableCell.actualResourceCost, #projectBudgetResourceDialog .tableFooter .tableCell.actualResourceHours, #projectBudgetResourceDialog .tableFooter .tableCell.scheduledResourceCost, #projectBudgetResourceDialog .tableFooter .tableCell.scheduledResourceHours, #projectBudgetResourceDialog .tableFooter .tableCell.scheduledResourceRate,
#projectBudgetResourceDialog .tableFooter .totalItem.actualResourceCost,
#projectBudgetResourceDialog .tableFooter .totalItem.actualResourceHours,
#projectBudgetResourceDialog .tableFooter .totalItem.scheduledResourceCost,
#projectBudgetResourceDialog .tableFooter .totalItem.scheduledResourceHours,
#projectBudgetResourceDialog .tableFooter .totalItem.scheduledResourceRate,
#projectBudgetResourceDialog .tableRow .tableCell.actualResourceCost,
#projectBudgetResourceDialog .tableRow .tableCell.actualResourceHours,
#projectBudgetResourceDialog .tableRow .tableCell.scheduledResourceCost,
#projectBudgetResourceDialog .tableRow .tableCell.scheduledResourceHours,
#projectBudgetResourceDialog .tableRow .tableCell.scheduledResourceRate,
#projectBudgetResourceDialog .tableRow .totalItem.actualResourceCost,
#projectBudgetResourceDialog .tableRow .totalItem.actualResourceHours,
#projectBudgetResourceDialog .tableRow .totalItem.scheduledResourceCost,
#projectBudgetResourceDialog .tableRow .totalItem.scheduledResourceHours,
#projectBudgetResourceDialog .tableRow .totalItem.scheduledResourceRate {
  border-right-color: var(--cv-g-300);
}

.itemIcon {
  color: var(--cv-w);
}

.messageDisplay {
  background-color: var(--primary-color);
  color: var(--primary-color-contrast);
}
.messageDisplay .text::before, .messageDisplay a {
  color: var(--primary-color-contrast);
}
.messageDisplay .text .clickText {
  color: var(--cv-link-contrast);
}
.messageDisplay .text .clickText:hover {
  background-color: var(--cv-link);
  color: var(--cv-link-contrast);
}
.messageDisplay .text .clickText:hover:hover {
  background-color: var(--cv-link-shade);
}
.messageDisplay.error {
  background-color: var(--cv-red);
  color: var(--cv-red-contrast);
}
.messageDisplay.error .text::before, .messageDisplay.error a, .messageDisplay.error .text .clickText {
  color: var(--cv-red-contrast);
}
.messageDisplay.warning {
  background-color: var(--cv-yellow);
  color: var(--cv-yellow-contrast);
}
.messageDisplay.warning .text::before, .messageDisplay.warning a, .messageDisplay.warning .text .clickText {
  color: var(--cv-yellow-contrast);
}
.messageDisplay.success {
  background-color: var(--cv-green);
  color: var(--cv-green-contrast);
}
.messageDisplay.success .text::before, .messageDisplay.success a, .messageDisplay.success .text .clickText {
  color: var(--cv-green-contrast);
}
.messageDisplay [data-click="1"] {
  background-color: color-mix(in hsl, var(--cv-g-500) 20%, rgba(0, 0, 0, 0));
}

:root {
  --ai-pink:#b959c8;
  --ai-purple:#6847FF;
  --ai-dark-purple:#382397;
  --ai-grad:var(--ai-pink), var(--ai-purple), var(--ai-dark-purple);
}

.ai_input:before {
  background-image: linear-gradient(90deg, var(--ai-grad));
}
.ai_input:after {
  background-color: var(--cv-w);
}
.ai_input:focus-within {
  border-color: var(--ai-purple);
  box-shadow: 0 0 3px var(--ai-purple);
}
.ai_input button {
  --mix:80%;
  color: color-mix(in srgb, var(--ai-purple) var(--mix), rgb(255, 255, 255)) !important;
}
.ai_input button:hover {
  --mix:100%;
}
.ai_input.disabled .ai_input button {
  --mix: 50%;
}

.ai_insight_tag {
  background-color: color-mix(in srgb, var(--ai-purple) 5%, rgb(255, 255, 255));
  border-color: color-mix(in srgb, var(--ai-purple) 5%, rgb(255, 255, 255));
  color: var(--ai-purple);
}
.ai_insight_tag .icon {
  color: var(--ai-purple);
}
.ai_insight_tag:hover {
  border-color: var(--ai-purple);
}

#recent-queries .ai_insight_tag {
  color: var(--cv-g-400);
  background-color: var(--cv-g-100);
  border-color: var(--cv-g-200);
}
#recent-queries .ai_insight_tag .icon {
  color: var(--cv-g-400);
}

.ai-hash-selected {
  color: var(--ai-purple);
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--ai-purple) 10%, rgb(255, 255, 255));
}
.ai-hash-selected small, .ai-hash-selected svg, .ai-hash-selected a svg {
  color: inherit;
}

.ai_button.ai_button.ai_button.ai_button {
  background-image: linear-gradient(90deg, var(--ai-grad));
  box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.1) !important;
  border-color: #fff;
}
.ai_button.ai_button.ai_button.ai_button:before {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
}
.ai_button.ai_button.ai_button.ai_button:hover:before {
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.8);
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
#ai-chat-list .reply_liked, #ai-chat-list .reply_disliked {
  color: var(--ai-purple);
}

.aiChatBox {
  background: var(--cv-w);
  border-color: var(--cv-g-110);
}
.aiChatBox :where(h1, h2, h3, h4, h5, h6) {
  color: var(--ai-purple);
}
.aiChatBox header {
  border-bottom: 1px solid var(--cv-g-200);
}
.aiChatBox .ai_subheader .icon {
  color: var(--ai-purple);
}
.aiChatBox p.ai_chat {
  background-color: color-mix(in srgb, var(--ai-pink) 6%, rgb(255, 255, 255));
  border: 1px solid color-mix(in srgb, var(--ai-pink) 25%, rgb(255, 255, 255));
}
.aiChatBox p.ai_reply {
  background-color: color-mix(in srgb, var(--ai-purple) 10%, rgb(255, 255, 255));
  border: 1px solid color-mix(in srgb, var(--ai-purple) 25%, rgb(255, 255, 255));
}
.aiChatBox p.ai_reply .ai-thumbup, .aiChatBox p.ai_reply .ai-thumbdown {
  --mix: 20%;
  color: color-mix(in srgb, var(--ai-purple) var(--mix), rgb(255, 255, 255)) !important;
}
.aiChatBox p.ai_reply .ai-thumbup:hover, .aiChatBox p.ai_reply .ai-thumbup.selected, .aiChatBox p.ai_reply .ai-thumbdown:hover, .aiChatBox p.ai_reply .ai-thumbdown.selected {
  --mix:100%;
}
.aiChatBox p.ai_think {
  color: var(--cv-g-400);
}
.aiChatBox.ui-resizable-resizing {
  border-color: var(--ai-purple);
}

.workspace-menu .sd-action-list li {
  border-bottom-color: var(--cv-g-200);
}

.workspace-menu .sd-action-list li .active a {
  color: var(--cv-link);
}

.workspace-main .sd-summary-card.sd-summary-card {
  background-color: var(--cv-w);
  color: var(--cv-w-contrast);
}
.workspace-main .border-subtle {
  box-shadow: 0 0 0 1px inset var(--cv-g-300);
}

.workspace.cv-red {
  --brandColor:var(--cv-red);
  --brandColor-contrast:var(--cv-red-contrast);
  --brandColor-shade:var(--cv-red-shade);
}
.workspace.cv-redorange {
  --brandColor:var(--cv-redorange);
  --brandColor-contrast:var(--cv-redorange-contrast);
  --brandColor-shade:var(--cv-redorange-shade);
}
.workspace.cv-darkorange {
  --brandColor:var(--cv-darkorange);
  --brandColor-contrast:var(--cv-darkorange-contrast);
  --brandColor-shade:var(--cv-darkorange-shade);
}
.workspace.cv-yellow {
  --brandColor:var(--cv-yellow);
  --brandColor-contrast:var(--cv-yellow-contrast);
  --brandColor-shade:var(--cv-yellow-shade);
}
.workspace.cv-yellowgreen {
  --brandColor:var(--cv-yellowgreen);
  --brandColor-contrast:var(--cv-yellowgreen-contrast);
  --brandColor-shade:var(--cv-yellowgreen-shade);
}
.workspace.cv-lime {
  --brandColor:var(--cv-lime);
  --brandColor-contrast:var(--cv-lime-contrast);
  --brandColor-shade:var(--cv-lime-shade);
}
.workspace.cv-limegreen {
  --brandColor:var(--cv-limegreen);
  --brandColor-contrast:var(--cv-limegreen-contrast);
  --brandColor-shade:var(--cv-limegreen-shade);
}
.workspace.cv-green {
  --brandColor:var(--cv-green);
  --brandColor-contrast:var(--cv-green-contrast);
  --brandColor-shade:var(--cv-green-shade);
}
.workspace.cv-greenblue {
  --brandColor:var(--cv-greenblue);
  --brandColor-contrast:var(--cv-greenblue-contrast);
  --brandColor-shade:var(--cv-greenblue-shade);
}
.workspace.cv-cyan {
  --brandColor:var(--cv-cyan);
  --brandColor-contrast:var(--cv-cyan-contrast);
  --brandColor-shade:var(--cv-cyan-shade);
}
.workspace.cv-babyblue {
  --brandColor:var(--cv-babyblue);
  --brandColor-contrast:var(--cv-babyblue-contrast);
  --brandColor-shade:var(--cv-babyblue-shade);
}
.workspace.cv-blue {
  --brandColor:var(--cv-blue);
  --brandColor-contrast:var(--cv-blue-contrast);
  --brandColor-shade:var(--cv-blue-shade);
}
.workspace.cv-purple {
  --brandColor:var(--cv-purple);
  --brandColor-contrast:var(--cv-purple-contrast);
  --brandColor-shade:var(--cv-purple-shade);
}
.workspace.cv-crimson {
  --brandColor:var(--cv-crimson);
  --brandColor-contrast:var(--cv-crimson-contrast);
  --brandColor-shade:var(--cv-crimson-shade);
}
.workspace.cv-pink {
  --brandColor:var(--cv-pink);
  --brandColor-contrast:var(--cv-pink-contrast);
  --brandColor-shade:var(--cv-pink-shade);
}

.workspace.branded:not(.none).workspace.branded .cs-workspaceHeader .workspace-dd .secondary {
  box-shadow: 0 0 0 1px inset var(--cv-w);
  color: var(--cv-w);
}
.workspace.branded:not(.none).workspace.branded .cs-workspaceHeader .suffix small,
.workspace.branded:not(.none).workspace.branded .cs-workspaceHeader .icon1,
.workspace.branded:not(.none).workspace.branded .cs-workspaceHeader .breadcrumb a {
  color: var(--cv-w);
}
.workspace.branded:not(.none).workspace.branded .cs-workspaceHeader .sd-button:not(.primary):not(.secondary) {
  background: rgba(0, 0, 0, 0.1);
  color: var(--cv-w);
}
.workspace.branded:not(.none).workspace.branded .cs-workspaceHeader .sd-dropdown:not(.primary):not(.secondary) .sd-dropdown-trigger {
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.1);
  color: var(--cv-w);
}
.workspace.branded:not(.none).workspace.branded .cs-workspaceHeader .sd-dropdown:not(.primary):not(.secondary) .sd-dropdown-trigger .sd-button.sd-button {
  background: transparent;
  color: inherit;
}
.workspace.branded:not(.none).workspace.branded .cs-workspaceHeader .sd-dropdown:not(.primary):not(.secondary):hover .sd-dropdown-trigger {
  background: rgba(0, 0, 0, 0.3);
}

.workspace.branded.brandedWorkspace .cs-workspaceHeader {
  margin-bottom: 1rem;
}
.workspace.branded.brandedWorkspace .cs-workspaceHeader .sd-button {
  background-color: transparent;
  border-color: transparent;
}
.workspace.branded.brandedWorkspace .cs-workspaceHeader .sd-button.secondary {
  box-shadow: 0 0 0 1px inset var(--cv-w);
}
.workspace.branded.brandedWorkspace .cs-workspaceHeader a,
.workspace.branded.brandedWorkspace .cs-workspaceHeader .textInput,
.workspace.branded.brandedWorkspace .cs-workspaceHeader .sd-button:not(.primary),
.workspace.branded.brandedWorkspace .cs-workspaceHeader .clickable {
  color: getVar(var(--cv-w));
  transition: color var(--animation-base) ease;
}
.workspace.branded.brandedWorkspace .cs-workspaceHeader a:hover, .workspace.branded.brandedWorkspace .cs-workspaceHeader a:focus, .workspace.branded.brandedWorkspace .cs-workspaceHeader a:active,
.workspace.branded.brandedWorkspace .cs-workspaceHeader .textInput:hover,
.workspace.branded.brandedWorkspace .cs-workspaceHeader .textInput:focus,
.workspace.branded.brandedWorkspace .cs-workspaceHeader .textInput:active,
.workspace.branded.brandedWorkspace .cs-workspaceHeader .sd-button:not(.primary):hover,
.workspace.branded.brandedWorkspace .cs-workspaceHeader .sd-button:not(.primary):focus,
.workspace.branded.brandedWorkspace .cs-workspaceHeader .sd-button:not(.primary):active,
.workspace.branded.brandedWorkspace .cs-workspaceHeader .clickable:hover,
.workspace.branded.brandedWorkspace .cs-workspaceHeader .clickable:focus,
.workspace.branded.brandedWorkspace .cs-workspaceHeader .clickable:active {
  color: getVar(var(--cv-w), shade);
}
.workspace.branded.brandedWorkspace .cs-workspaceHeader .iconinput input:focus ~ a,
.workspace.branded.brandedWorkspace .cs-workspaceHeader .iconinput input:focus ~ span,
.workspace.branded.brandedWorkspace .cs-workspaceHeader .iconinput input:focus {
  border-bottom-color: var(--cv-w);
}
.workspace.branded.brandedWorkspace .cs-workspaceHeader .iconinput small {
  color: var(--cv-w);
}
.workspace.branded .selected {
  color: getVar(var(--brandColor));
  transition: color var(--animation-base) ease;
}
.workspace.branded .selected:hover, .workspace.branded .selected:focus, .workspace.branded .selected:active {
  color: getVar(var(--brandColor), shade);
}
.workspace.branded a:hover, .workspace.branded .clickable:hover {
  color: var(--brandColor);
}
.workspace.branded .sd-pagination .selected {
  background-color: var(--brandColor);
  color: var(--cv-w);
}
.workspace.branded .sd-pagination .selected:hover {
  color: var(--cv-w);
}
.workspace.branded .sd-button:not(.secondary):hover {
  color: var(--brandColor);
}
.workspace.branded .sd-button.secondary {
  color: var(--brandColor);
  box-shadow: 0 0 0 1px inset var(--brandColor);
}
.workspace.branded .sd-button.primary {
  transition: background-color var(--animation-base) ease;
  background-color: getVar(brandColor);
  box-shadow: 0 0 0 1px inset var(--brandColor);
}
.workspace.branded .sd-button.primary:hover {
  background-color: getVar(brandColor, shade);
}
.workspace.branded .workspace-menu .sd-action-list li .active a {
  color: var(--brandColor);
}
.workspace.branded h1,
.workspace.branded h2,
.workspace.branded h3,
.workspace.branded h4,
.workspace.branded h5,
.workspace.branded h6 {
  color: var(--brandColor);
}
.workspace.branded .list-item h6 {
  color: var(--cv-g-500);
}
.workspace.branded .list-item h6:hover {
  color: var(--brandColor);
}
.workspace.branded .cs-workspaceHeader {
  background-color: var(--brandColor);
  color: var(--brandColor-contrast);
}
.workspace.branded .cs-workspaceHeader .textFilter input::-webkit-input-placeholder {
  color: var(--cv-w);
}
.workspace.branded .cs-workspaceHeader .textFilter input::-moz-placeholder {
  color: var(--cv-w);
}
.workspace.branded .cs-workspaceHeader .textFilter input:-ms-input-placeholder {
  color: var(--cv-w);
}
.workspace.branded .cs-workspaceHeader .textFilter input:-moz-placeholder {
  color: var(--cv-w);
}
.workspace.branded .cs-workspaceHeader .sd-button.primary {
  background-color: var(--cv-w);
  color: var(--brandColor);
  box-shadow: 0 0 0 1px inset var(--brandColor);
}
.workspace.branded .cs-workspaceHeader .sd-button.primary:hover {
  background-color: var(--cv-w-shade);
}

.workspace-content .sd-button.on-dark {
  --button-color:var(--cv-w) ;
}

.VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation-button {
  color: transparent;
  box-shadow: none;
}
.VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation-button:hover {
  background: var(--cv-link);
}
.VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation-button:hover:before {
  background-color: var(--cv-link-contrast);
}
.VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation-button:hover:after {
  background-color: var(--cv-link-contrast);
}
.VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation--disabled:hover {
  background-color: var(--cv-g-200);
}
.VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation--disabled:hover:before {
  background-color: var(--cv-b);
}
.VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation--disabled:hover:after {
  background-color: var(--cv-b);
}

.workspace-content div svg:hover {
  color: var(--cv-link);
}

#workspaceMain .content div svg:hover {
  color: var(--cv-link);
}

.gjs-three-bg.gjs-three-bg {
  background-color: var(--cv-link);
}
.gjs-three-bg.gjs-three-bg span svg {
  color: var(--cv-w);
}

.gjs-editor-cont .gjs-editor {
  background-color: var(--cv-w);
  color: var(--cv-w-contrast);
}

.sdContentEditorPanelSwitch .gjs-pn-buttons span:hover {
  background-color: var(--cv-link);
  color: var(--cv-w);
}
.sdContentEditorPanelSwitch .gjs-pn-buttons span.gjs-pn-active {
  background-color: var(--cv-link);
}

.sdContentEditorPanels .gjs-one-bg.gjs-one-bg {
  background-color: var(--cv-w);
  color: var(--cv-w-contrast);
  border-color: var(--cv-g-200);
}

.sdEditorStyles,
.sdEditorLayers {
  background-color: var(--cv-w);
}
.sdEditorStyles .gjs-clm-header,
.sdEditorLayers .gjs-clm-header {
  background-color: var(--cv-g-200);
  color: var(--cv-g-200-contrast);
}
.sdEditorStyles .gjs-clm-header .gjs-clm-header-label,
.sdEditorLayers .gjs-clm-header .gjs-clm-header-label {
  color: var(--cv-g-400);
}
.sdEditorStyles .gjs-field,
.sdEditorLayers .gjs-field {
  background-color: var(--cv-w);
}
.sdEditorStyles .gjs-field input,
.sdEditorStyles .gjs-field,
.sdEditorStyles .gjs-select .gjs-field textarea,
.sdEditorStyles .gjs-radio-items,
.sdEditorLayers .gjs-field input,
.sdEditorLayers .gjs-field,
.sdEditorLayers .gjs-select .gjs-field textarea,
.sdEditorLayers .gjs-radio-items {
  color: var(--cv-g-500);
  border-color: var(--cv-g-200);
}
.sdEditorStyles .gjs-input-unit,
.sdEditorLayers .gjs-input-unit {
  color: var(--cv-g-400);
}
.sdEditorStyles .gjs-layer-vis,
.sdEditorLayers .gjs-layer-vis {
  color: var(--primary-color);
}
.sdEditorStyles .gjs-layer-vis.fa-eye-slash,
.sdEditorLayers .gjs-layer-vis.fa-eye-slash {
  color: var(--cv-g-350);
}
.sdEditorStyles .gjs-sm-label,
.sdEditorLayers .gjs-sm-label {
  color: var(--cv-g-350);
}
.sdEditorStyles .gjs-layer-count,
.sdEditorLayers .gjs-layer-count {
  background-color: var(--cv-g-200);
  color: var(--cv-w);
}
.sdEditorStyles .gjs-layer-count:empty,
.sdEditorLayers .gjs-layer-count:empty {
  background: transparent;
}
.sdEditorStyles .gjs-one-bg,
.sdEditorLayers .gjs-one-bg {
  background-color: var(--cv-w);
  border-bottom: 1px solid var(--cv-g-200);
}
.sdEditorStyles .gjs-one-bg:last-child,
.sdEditorLayers .gjs-one-bg:last-child {
  border-bottom-width: 0;
}
.sdEditorStyles .gjs-sm-sector .gjs-sm-property .gjs-sm-btn,
.sdEditorStyles .gjs-clm-tags .gjs-sm-property .gjs-sm-btn,
.sdEditorLayers .gjs-sm-sector .gjs-sm-property .gjs-sm-btn,
.sdEditorLayers .gjs-clm-tags .gjs-sm-property .gjs-sm-btn {
  background-color: var(--cv-link);
  color: var(--cv-w);
}
.sdEditorStyles #gjs-sm-images,
.sdEditorLayers #gjs-sm-images {
  background-color: var(--cv-green);
}
.sdEditorStyles .gjs-category-title,
.sdEditorStyles .gjs-sm-sector .gjs-sm-title,
.sdEditorStyles .gjs-clm-tags .gjs-sm-title,
.sdEditorStyles .gjs-block-category .gjs-title,
.sdEditorStyles .gjs-layer-title,
.sdEditorLayers .gjs-category-title,
.sdEditorLayers .gjs-sm-sector .gjs-sm-title,
.sdEditorLayers .gjs-clm-tags .gjs-sm-title,
.sdEditorLayers .gjs-block-category .gjs-title,
.sdEditorLayers .gjs-layer-title {
  background: transparent;
  color: var(--cv-g-400);
}
.sdEditorStyles .gjs-category-open,
.sdEditorStyles .gjs-sm-sector.gjs-sm-open,
.sdEditorStyles .gjs-sm-open.gjs-clm-tags,
.sdEditorStyles .gjs-block-category.gjs-open,
.sdEditorLayers .gjs-category-open,
.sdEditorLayers .gjs-sm-sector.gjs-sm-open,
.sdEditorLayers .gjs-sm-open.gjs-clm-tags,
.sdEditorLayers .gjs-block-category.gjs-open {
  background-color: var(--cv-g-200);
  color: var(--cv-g-200-contrast);
}
.sdEditorStyles .gjs-layer-title:hover,
.sdEditorStyles .gjs-category-title:hover,
.sdEditorStyles .gjs-sm-sector .gjs-sm-title:hover,
.sdEditorStyles .gjs-selected:hover,
.sdEditorLayers .gjs-layer-title:hover,
.sdEditorLayers .gjs-category-title:hover,
.sdEditorLayers .gjs-sm-sector .gjs-sm-title:hover,
.sdEditorLayers .gjs-selected:hover {
  transition: 0.3s;
  background-color: var(--cv-primary);
  color: var(--cv-w);
}
.sdEditorStyles .gjs-select option,
.sdEditorStyles .gjs-field-select option,
.sdEditorStyles .gjs-clm-select option,
.sdEditorStyles .gjs-sm-select option,
.sdEditorStyles .gjs-clm-select option,
.sdEditorStyles .gjs-fields option,
.sdEditorStyles .gjs-sm-unit option,
.sdEditorLayers .gjs-select option,
.sdEditorLayers .gjs-field-select option,
.sdEditorLayers .gjs-clm-select option,
.sdEditorLayers .gjs-sm-select option,
.sdEditorLayers .gjs-clm-select option,
.sdEditorLayers .gjs-fields option,
.sdEditorLayers .gjs-sm-unit option {
  background-color: var(--cv-w);
  color: var(--cv-g-400);
}
.sdEditorStyles .gjs-fields .gjs-field-arrows .gjs-field-arrow-u,
.sdEditorLayers .gjs-fields .gjs-field-arrows .gjs-field-arrow-u {
  border-bottom-color: var(--cv-g-400);
}
.sdEditorStyles .gjs-fields .gjs-field-arrows .gjs-field-arrow-d,
.sdEditorLayers .gjs-fields .gjs-field-arrows .gjs-field-arrow-d {
  border-top-color: var(--cv-g-400);
}
.sdEditorStyles.gjs-sm-open .gjs-category-title,
.sdEditorStyles.gjs-sm-open .gjs-sm-sector .gjs-sm-title,
.sdEditorLayers.gjs-sm-open .gjs-category-title,
.sdEditorLayers.gjs-sm-open .gjs-sm-sector .gjs-sm-title {
  background-color: var(--cv-primary);
  color: var(--cv-primary-contrast);
  color: var(--cv-primary);
}
.sdEditorStyles .gjs-sm-sector.gjs-sm-open .gjs-sm-title,
.sdEditorLayers .gjs-sm-sector.gjs-sm-open .gjs-sm-title {
  background-color: var(--cv-primary);
  color: var(--cv-primary-contrast);
  color: var(--cv-w);
}
.sdEditorStyles .gjs-clm-tag-status svg,
.sdEditorStyles .gjs-clm-tag-close svg,
.sdEditorLayers .gjs-clm-tag-status svg,
.sdEditorLayers .gjs-clm-tag-close svg {
  color: var(--cv-g-400);
}
.sdEditorStyles .gjs-clm-tag-status,
.sdEditorStyles .gjs-clm-tag-close,
.sdEditorLayers .gjs-clm-tag-status,
.sdEditorLayers .gjs-clm-tag-close {
  color: var(--cv-g-400);
}
.sdEditorStyles .gjs-clm-tags-btn.gjs-clm-tags-btn,
.sdEditorLayers .gjs-clm-tags-btn.gjs-clm-tags-btn {
  background-color: var(--cv-green);
  color: var(--cv-w);
  border-color: var(--cv-green);
}

.gjs-block {
  background-color: var(--cv-g-200);
  color: var(--cv-g-400);
}

.gjs-one-bg {
  background-color: var(--cv-g-300);
}

.gjs-two-color {
  color: var(--cv-g-350);
}

.gjs-four-color.gjs-four-color,
.gjs-four-color-h:hover {
  color: var(--cv-primary);
}

.gjs-pn-btn button {
  color: var(--cv-w);
  background-color: var(--cv-g-500);
}
.gjs-pn-btn button:hover {
  background-color: var(--cv-g-400);
}
.gjs-pn-btn svg {
  color: var(--cv-g-350);
}
.gjs-pn-btn svg:hover {
  color: var(--cv-g-400);
}

.gjs-pn-btn.gjs-pn-active {
  box-shadow: none;
  background: none;
}
.gjs-pn-btn.gjs-pn-active button {
  color: var(--cv-w);
  background-color: var(--cv-link);
}

.gjs-block {
  background-color: var(--cv-g-400);
  color: var(--cv-g-200);
}

.gjs-blocks-c {
  background-color: var(--cv-w);
}
.gjs-blocks-c .gjs-block {
  background-color: var(--cv-w);
  color: var(--cv-g-400);
}
.gjs-blocks-c .gjs-block:hover {
  color: var(--cv-primary);
  border-color: var(--cv-primary);
}

.gjs-am-file-uploader .gjs-two-color {
  color: var(--cv-g-400);
  background-color: var(--cv-w);
}

.gjs-mdl-content {
  background-color: var(--cv-w);
}
.gjs-mdl-content .gjs-am-assets-cont .gjs-am-assets .gjs-am-asset {
  color: var(--cv-primary);
}
.gjs-mdl-content .gjs-am-assets-cont .gjs-am-assets .gjs-am-asset .gjs-am-meta .gjs-am-name, .gjs-mdl-content .gjs-am-assets-cont .gjs-am-assets .gjs-am-asset .gjs-am-meta .gjs-am-dimensions, .gjs-mdl-content .gjs-am-assets-cont .gjs-am-assets .gjs-am-asset .gjs-am-meta .asset-remove {
  color: inherit;
}

.gjs-am-file-uploader {
  background-color: var(--cv-w);
}

.gjs-am-file-uploader > form {
  border-color: var(--cv-g-500);
}

.gjs-am-file-uploader > form .gjs-two-color,
.gjs-am-assets-cont .gjs-two-color {
  color: var(--cv-g-350);
}
.gjs-am-file-uploader > form .gjs-am-assets-header .gjs-btn-prim,
.gjs-am-assets-cont .gjs-am-assets-header .gjs-btn-prim {
  background-color: var(--cv-green);
}
.gjs-am-file-uploader > form .gjs-am-assets-header .gjs-btn-prim:hover,
.gjs-am-assets-cont .gjs-am-assets-header .gjs-btn-prim:hover {
  background-color: var(--cv-green-shade);
}
.gjs-am-file-uploader > form .gjs-am-assets-header .gjs-am-assets,
.gjs-am-assets-cont .gjs-am-assets-header .gjs-am-assets {
  color: var(--cv-g-350);
}

.gjs-am-file-uploader #gjs-am-title {
  color: var(--cv-primary);
}

.gjs-pn-btn:hover {
  color: var(--cv-g-300);
}

.gjs-sm-sector .gjs-sm-property .gjs-sm-btn,
.gjs-clm-tags .gjs-sm-property .gjs-sm-btn {
  box-shadow: none;
  background-color: var(--cv-link);
  color: var(--cv-link-contrast);
}
.gjs-sm-sector .gjs-sm-property .gjs-sm-btn:hover,
.gjs-clm-tags .gjs-sm-property .gjs-sm-btn:hover {
  background-color: var(--cv-link-shade);
}

.gjs-mdl-header {
  border-bottom-color: var(--cv-w);
  color: var(--cv-primary);
  background-color: var(--cv-w);
  color: var(--cv-w-contrast);
}

.gjs-block-label.gjs-block-label {
  border-bottom-color: var(--cv-g-200);
}

.sdEditorStyles .gjs-clm-header, .sdEditorLayers .gjs-clm-header {
  background: var(--cv-g-100);
}

.gjs-sm-properties {
  background: var(--cv-g-100);
}

.sdEditorStyles .gjs-sm-label, .sdEditorLayers .gjs-sm-label {
  color: var(--cv-g-400);
}

body[data-theme=dark] {
  --siteBg:color-mix(in srgb, var(--primary-color) var(--tintAmount), var(--cv-g-100));
  --cv-w:color-mix(in srgb, var(--cv-p) var(--tintAmount), #242424);
}

:where([data-theme=dark]) {
  --tintAmount:2%;
  --ck-color-toolbar-background:var(--cv-g-120);
  --ck-color-toolbar-border::var(--cv-g-300);
  --ck-color-button-default-background::var(--cv-g-200);
  --ck-color-text:var(--cv-g-350);
  --ck-color-base-background:var(--cv-g-100);
  --ck-color-base-border: var(--cv-g-300);
  --tabsBg:var(--cv-g-120);
  --listBg:var(--cv-w);
  --listBorder:var(--cv-g-200);
  --darkLink:#fff;
}
:where([data-theme=dark]) #mainLoader {
  --modal-mix:color-mix(in srgb, var(--primary-color) 50%, var(--cv-w));
}
:where([data-theme=dark]) .sd-button.secondary.secondary,
:where([data-theme=dark]) .on-dark.on-dark:not(button, .sd-button) .secondary {
  --button-color: var(--cv-link);
  background-color: color-mix(in srgb, var(--button-color) 15%, var(--cv-g-100));
  color: color-mix(in srgb, var(--button-color) 80%, white);
}
:where([data-theme=dark]) .sd-button.secondary.secondary:hover,
:where([data-theme=dark]) .on-dark.on-dark:not(button, .sd-button) .secondary:hover {
  background-color: var(--button-color);
  color: var(--cv-link-contrast);
}
:where([data-theme=dark]) .sd-button.success {
  --button-color: var(--cv-green);
  --button-text: var(--cv-green-contrast);
  --button-hover: var(--cv-green-shade);
  --button-light: color-mix(in hsl, var(--cv-green) 10%, rgba(0, 0, 0, 0));
}
:where([data-theme=dark]) .sd-button.dark-outline {
  color: var(--cv-g-350);
  box-shadow: 0 0 0 1px inset var(--cv-g-300);
}
:where([data-theme=dark]) .sd-button.dark-outline:hover {
  box-shadow: 0 0 0 1px inset var(--cv-g-200);
  background-color: var(--cv-g-200);
  color: var(--cv-g-500);
}
:where([data-theme=dark]).hl-1 .sub-nav-menu li a:hover {
  box-shadow: 0 -2px var(--dark-header-text-color-hover, var(--header-text-color-active), var(--cv-header-contrast)) inset;
  color: var(--dark-header-text-color-hover, var(--header-text-color-active), var(--cv-header-contrast));
}
:where([data-theme=dark]).hl-1 .sub-nav-menu li.active > a {
  color: var(--dark-header-text-color-active, var(--header-text-color-active, var(--cv-header)));
  box-shadow: 0 -2px var(--dark-header-text-color-active, var(--cv-header-contrast)) inset;
}
:where([data-theme=dark]).hl-2 .sub-nav-menu li.active > a {
  background-color: var(--dark-header-text-bgcolor-active, var(--cv-g-100));
  color: var(--dark-header-text-color-active, var(--cv-header));
}
:where([data-theme=dark]).hl-3 .sub-nav-menu li.home_icon_header:hover, :where([data-theme=dark]).hl-3 .sub-nav-menu li:hover > a,
:where([data-theme=dark]).hl-3 .sub-nav-menu li button {
  color: var(--dark-header-text-color-hover, var(--cv-link));
  background-color: transparent;
}
:where([data-theme=dark]).hl-3 .sub-nav-menu li.home_icon_header:hover a, :where([data-theme=dark]).hl-3 .sub-nav-menu li:hover > a a,
:where([data-theme=dark]).hl-3 .sub-nav-menu li button a {
  color: inherit;
}
:where([data-theme=dark]).hl-3 .sub-nav-menu li.active > a, :where([data-theme=dark]).hl-3 .sub-nav-menu li.home_icon_header.active {
  background-color: var(--dark-header-text-bgcolor-active, transparent);
  color: var(--dark-header-text-color-active, var(--cv-link));
}
:where([data-theme=dark]) .workspace-content .sd-button.on-dark {
  --button-color:var(--cv-g-500);
  color: var(--cv-link);
}
:where([data-theme=dark]) .f-dropdown.open {
  box-shadow: color-mix(in hsl, var(--cv-g-500) 0.24%, rgba(0, 0, 0, 0)) 0px 0px 2px 0px, color-mix(in hsl, var(--cv-g-400) 0.24%, rgba(0, 0, 0, 0)) -20px 20px 40px -4px;
}
:where([data-theme=dark]) .cs-navline.cs-navline,
:where([data-theme=dark]) .dhx_matrix_scell,
:where([data-theme=dark]) .dhx_cal_header.dhx_cal_header,
:where([data-theme=dark]) .dhx_timeline_scale_header.dhx_timeline_scale_header,
:where([data-theme=dark]) .dhx_timeline_label_wrapper.dhx_timeline_label_wrapper,
:where([data-theme=dark]) .dhx_cal_container.dhx_cal_container {
  background-color: transparent;
}
:where([data-theme=dark]) .dhx_cal_navline .dhx_cal_date {
  color: var(--cv-g-400);
}
:where([data-theme=dark]) .gt-panel {
  background-color: var(--cv-g-120);
}
:where([data-theme=dark]) .mileStoneWrap {
  --milestoneBorder:var(--cv-g-300);
  --milestone-color:var(--cv-g-350);
  --milestone-color-contrast:var(--cv-g-350-contrast);
  --milestone-color-shade:var(--cv-g-350-shade);
  --milestone-color-light:var(--cv-g-350-light);
  --milestoneFill:var(--cv-w);
}
:where([data-theme=dark]) .estimate__total {
  --mix-amount:25% ;
}
:where([data-theme=dark]) .smallViewMode .estimate__total {
  border: 1px solid var(--total-border);
}
:where([data-theme=dark]) .workspace-content .sd-button.on-dark {
  --button-color:var(--cv-g-500) ;
}
:where([data-theme=dark]) #previewer_header .cs-top-header .sd-heading {
  background-color: var(--cv-sg-200);
  color: var(--cv-sg-200-contrast);
}
:where([data-theme=dark]) #previewer_header .cs-top-header .js_notes span {
  color: var(--cv-sg-200-contrast);
}
:where([data-theme=dark]) .editor-row .sdEditorLayers .gjs-layer.gjs-layer {
  color: var(--cv-w-contrast);
}
:where([data-theme=dark]) .editor-row .sdEditorLayers .gjs-layer.gjs-layer .gjs-layer-count {
  background-color: var(--cv-link);
}
:where([data-theme=dark]) .editor-row .sdEditorLayers .gjs-layer.gjs-layer .gjs-layer-count:empty {
  background-color: var(--cv-w);
}
:where([data-theme=dark]) .editor-row .sdEditorLayers .gjs-layer.gjs-layer .gjs-layer-title {
  border-bottom: 1px solid var(--cv-g-200);
}
:where([data-theme=dark]) .editor-row .sdEditorLayers .gjs-layer.gjs-layer .gjs-layer-title:hover {
  color: var(--cv-link);
}
:where([data-theme=dark]) .editor-row .sdEditorLayers .gjs-layer.gjs-layer .gjs-layer-title .gjs-layer-name {
  overflow: inherit;
}
:where([data-theme=dark]) .editor-row .sdEditorLayers .gjs-layer.gjs-layer .gjs-layer-vis svg {
  color: var(--primary-color-contrast);
}
:where([data-theme=dark]) .workspace-content .featuredList .VueCarousel-slide .sd-thumb .title .text {
  color: var(--cv-b);
}
:where([data-theme=dark]) .workspace-content .featuredList .VueCarousel-slide .sd-thumb .sd-button.secondary:hover {
  background-color: var(--button-color);
  color: var(--cv-link);
}
:where([data-theme=dark]) .projectMilestones {
  --milestone-background:var(--cv-g-200);
  --milestone-border-color:color-mix(in srgb, var(--cv-g-300) 80%,rgba(0,0,0,0));
  --milestone-text-color:var(--cv-g-500);
  --milestone-hover-background:var(--cv-g-200-shade) ;
}
:where([data-theme=dark]) .projectMilestoneComplete {
  --milestone-background:var(--primary-color);
  --milestone-text-color:var(--primary-color-contrast);
  --milestone-hover-background:var(--primary-color-shade);
}
:where([data-theme=dark]) #previewContainer #previewer .sd-pagination input[type=number] {
  background-color: var(--cv-w);
  color: var(--cv-w-contrast);
}
:where([data-theme=dark]) body, :where([data-theme=dark]) html, :where([data-theme=dark]) #mainSection, :where([data-theme=dark]) #sectionContainer, :where([data-theme=dark]) .reveal-modal {
  background-color: var(--siteBg) !important;
}
:where([data-theme=dark]) .VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation-button {
  background-color: var(--cv-w-contrast);
  color: transparent;
  box-shadow: none;
}
:where([data-theme=dark]) .VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation-button:hover {
  background: var(--cv-link);
}
:where([data-theme=dark]) .VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation-button:hover:before {
  background-color: var(--cv-link-contrast);
}
:where([data-theme=dark]) .VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation-button:hover:after {
  background-color: var(--cv-link-contrast);
}
:where([data-theme=dark]) .VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation--disabled:hover {
  background-color: var(--cv-w-contrast);
}
:where([data-theme=dark]) .VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation--disabled:hover:before {
  background-color: var(--cv-b-contrast);
}
:where([data-theme=dark]) .VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation-button.VueCarousel-navigation--disabled:hover:after {
  background-color: var(--cv-b-contrast);
}
:where([data-theme=dark]) .cs-large-list-input input::placeholder {
  color: var(--cv-g-500);
}
:where([data-theme=dark]) #mainLoader .spinner {
  background-color: var(--primary-color-light, #70b4c1);
}

/*# sourceMappingURL=skinv3.css.map */