/* CAVELO-DASHBOARD-COLORS
 * Defines the generic color parameters of common classes
 * Nothing here should be specific to the dashboard frame 
 * Nothing here should be specific to ui components
 * Nothing here should specify layout (unless necessary)
 */



/*** BACKGROUNDS */
.cv-bg { position:relative; border:1px solid transparent; background:transparent; } /*necessary layout*/
.cv-bg.orange { border-color: var(--cavelo-orange); background:var(--cavelo-orange); color:var(--cavelo-white); }
.cv-bg.navy { border-color: var(--cavelo-navy); background:var(--cavelo-navy); color:var(--cavelo-white); }
.cv-bg.blue { border-color: var(--cavelo-blue); background:var(--cavelo-blue); color:var(--cavelo-white); }
.cv-bg.white { border-color: var(--cavelo-white); background:var(--cavelo-white); color:var(--cavelo-black); }
.cv-bg.black { border-color: var(--cavelo-black); background:var(--cavelo-black); color:var(--cavelo-white); }
.cv-bg.grey { border-color: var(--cavelo-platinum);background:var(--cavelo-platinum); color:var(--cavelo-black); }
.cv-bg.dark-grey { border-color: var(--cavelo-grey); background:var(--cavelo-grey); color:var(--cavelo-white); }
.cv-bg.transparent { border-color: var(--cavelo-platinum); color:var(--cavelo-black); background:transparent !important; }
.cv-bg.inverse.orange { border-color: var(--cavelo-orange); color:var(--cavelo-orange); background:var(--cavelo-white); }
.cv-bg.inverse.navy { border-color: var(--cavelo-navy); color:var(--cavelo-navy); background:var(--cavelo-white); }
.cv-bg.inverse.blue { border-color: var(--cavelo-blue); color:var(--cavelo-blue); background:var(--cavelo-white); }
.cv-bg.inverse.white { border-color: var(--cavelo-grey); color:var(--cavelo-black); background:var(--cavelo-white); }
.cv-bg.inverse.black { border-color: var(--cavelo-black); color:var(--cavelo-black); background:var(--cavelo-white); }
.cv-bg.inverse.grey { border-color: var(--cavelo-platinum); color:var(--cavelo-black); background:var(--cavelo-white);}
.cv-bg.inverse.dark-grey { border-color: var(--cavelo-grey); color:var(--cavelo-black);background:var(--cavelo-white);}


/* !!V2 */
.cv-bg.gold { border-color: var(--cv-gold-100); background:var(--cv-gold-100); color:var(--cavelo-white); }
.cv-bg.bright-blue { border-color: var(--cv-bright-blue); background:var(--cv-bright-blue); color:var(--cavelo-white); }
.cv-bg.vivid-blue { border-color: var(--cv-vivid-blue); background:var(--cv-vivid-blue); color:var(--cavelo-white); }
.cv-bg.vivid-cyan { border-color: var(--cv-vivid-cyan); background:var(--cv-vivid-cyan); color:var(--cavelo-white); }
.cv-bg.red { border-color: var(--cv-accent-red-dark); background:var(--cv-accent-red-dark); color:var(--cavelo-white); }
.cv-bg.inverse.gold { border-color:solid var(--cv-gold-100); color:var(--cv-gold-100); background:var(--cavelo-white); }
.cv-bg.inverse.bright-blue { border-color: var(--cv-bright-blue); color:var(--cv-bright-blue); background:var(--cavelo-white); }
.cv-bg.inverse.vivid-blue { border-color: var(--cv-vivid-blue); color:var(--cv-vivid-blue); background:var(--cavelo-white); }
.cv-bg.inverse.vivid-cyan { border-color: var(--cv-vivid-cyan); color:var(--cv-vivid-cyan); background:var(--cavelo-white); }
.cv-bg.inverse.red { border-color: var(--cv-accent-red-dark); color:var(--cv-accent-red-dark); background:var(--cavelo-white); }
/* !!V2 */



.cv-bg.gradiant.navy { background: var(--cavelo-navy-green); }
.cv-bg.gradiant.green { background: var(--cavelo-green-navy); }
.cv-bg.gradiant.blue { background: var(--cavelo-blue-green); }
.cv-bg.gradiant.orange { background: var(--cavelo-orange-blue); }



/* .cv-bg.nodes::before { 
    position: fixed;
    box-sizing:border-box;
    top:0; right:calc(1em + 1px); bottom:0; left:0;
    background-color:var(--cavelo-white);
    background-image: var(--cv-node-background);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    background-clip: padding-box;
    background-attachment: fixed;
    opacity:0.5;
    content:'';
} */

/* .cv-bg.nodes.grey { background-color:var(--cavelo-black) !important; }
.cv-bg.nodes.grey::before { filter: invert(55%) sepia(0%) saturate(1096%) hue-rotate(199deg) brightness(88%) contrast(84%); }

.cv-bg.nodes.orange { background-color:var(--cavelo-black) !important; }
.cv-bg.nodes.orange::before { filter: invert(51%) sepia(90%) saturate(809%) hue-rotate(356deg) brightness(97%) contrast(91%); }

.cv-bg.nodes.blue { background-color:var(--cavelo-black) !important; }
.cv-bg.nodes.blue::before { filter: invert(21%) sepia(10%) saturate(1109%) hue-rotate(189deg) brightness(140%) contrast(101%); } */


/*** LINKS */
.link:not([data-role]), a:not([data-role]) { transition:color 0.3s; }
.link:not([data-role]):hover ,a:not([data-role]):hover { transition:color 0.3s; }
.link.dark-grey:not([data-role]):not([disabled]):hover, a.dark-grey:not([data-role]):not([disabled]):hover { color: var(--cavelo-black); }
.link.orange:not([data-role]):not([disabled]):hover, a.orange:not([data-role]):not([disabled]):hover { color: var(--cavelo-orange); }
.link.navy:not([data-role]):not([disabled]):hover, a.navy:not([data-role]):not([disabled]):hover { color:var(--cavelo-navy) }
.link.blue:not([data-role]):not([disabled]):hover, a.blue:not([data-role]):not([disabled]):hover { color:var(--cavelo-blue) }
.link.green:not([data-role]):not([disabled]):hover, a.green:not([data-role]):not([disabled]):hover { color:var(--cavelo-green) }
.link.gold:not([data-role]):not([disabled]):hover, a.gold:not([data-role]):not([disabled]):hover { color:var(--cv-gold-100) } /* !!V2 */
a.white:not([data-role]):not([disabled]):hover { color:var(--cavelo-white) }
a.black:not([data-role]):not([disabled]):hover { color:var(--cavelo-black) }
a.grey:not([data-role]):not([disabled]):hover { color:var(--cavelo-grey) }
a.bright-blue:not([data-role]):not([disabled]):hover { color:var(--cv-bright-blue) }/* !!V2 */
a.vivid-blue:not([data-role]):not([disabled]):hover { color:var(--cv-vivid-blue) }/* !!V2 */
a.vivid-cyan:not([data-role]):not([disabled]):hover { color:var(--cv-vivid-cyan) }/* !!V2 */

a:visited, a:link, a:active { color:inherit; }
a.underline { text-decoration:underline !important; }
.link:not([data-role]):not([disabled]):hover { text-decoration:underline; }


/*** TEXTS */
.cv-text.orange { color:var(--cavelo-orange) }
.cv-text.navy { color:var(--cavelo-navy) }
.cv-text.blue { color:var(--cavelo-blue) }
.cv-text.white { color:var(--cavelo-white) }
.cv-text.black { color:var(--cavelo-black) }
.cv-text.grey { color:var(--cavelo-grey) }

.cv-text.gold { color:var(--cv-gold-100) }/* !!V2 */
.cv-text.bright-blue { color:var(--cv-bright-blue) }/* !!V2 */
.cv-text.vivd-blue { color:var(--cv-vivid-blue) }/* !!V2 */
.cv-text.vivd-cyan { color:var(--cv-vivid-cyan) }/* !!V2 */
.cv-text.red { color:var(--cv-accent-red-medium) }/* !!V2 */
.cv-text.green { color:var(--cavelo-green-60) }/* !!V2 */


/*** SHADOWS */
.shadow { margin-bottom:2em; }
.shadow.orange { box-shadow: var(--cavelo-orange-40) 8px 8px 0px 0px; }
.shadow.navy { box-shadow: var(--cavelo-navy-40) 8px 8px 0px 0px; }
.shadow.blue { box-shadow: var(--cavelo-blue-40) 8px 8px 0px 0px; }
.shadow.white { box-shadow: var(--cavelo-white-40) 8px 8px 0px 0px; }
.shadow.black { box-shadow: var(--cavelo-black-40) 8px 8px 0px 0px; }
.shadow.grey { box-shadow: var(--cavelo-platinum) 8px 8px 0px 0px; }
.shadow.dark-grey { box-shadow: var(--cavelo-grey) 8px 8px 0px 0px; }

.shadow.gold { box-shadow: rgba(230,191,0, 0.5) 8px 8px 0px 0px; }/* !!V2 */
.shadow.bright-blue { box-shadow: rgba(0,117,160, 0.5) 8px 8px 0px 0px; }/* !!V2 */
.shadow.vivid-blue { box-shadow: rgba(0,179,219, 0.5) 8px 8px 0px 0px; }/* !!V2 */
.shadow.vivid-cyan { box-shadow: rgba(0,214,243, 0.5) 8px 8px 0px 0px; }/* !!V2 */


/*** FORMS AND INPUTS */
input, 
select, 
[contenteditable="true"], 
.contenteditable,
textarea[readonly] { background-color:inherit; }

.form-group,
.form-group > .form-group-wrapper { color:inherit; border-color:inherit; background-color:inherit; }
.form-group > .form-group-wrapper > span.select-pure > .cover-disabled { background-color:transparent; }

.form-group > .form-group-wrapper > select[multiple],
.form-group > .form-group-wrapper > textarea { border-color:inherit; }

[contenteditable="true"],
.contenteditable { box-shadow:inset var(--cavelo-grey) 0px 0px 5px 0px; color:var(--cavelo-black) }

input:focus, select:focus, textarea:focus {
    outline:1px auto rgba(102,102,102,0.5);
    border-color:var(--cavelo-grey);
}

select option { color:var(--cavelo-black); }
select:invalid, 
select option:disabled { color:var(--cavelo-grey) }



/*** SPECIAL COLORS */
i.fa-star { color:var(--cv-gold-100) !important; }
i.fa-exclamation-triangle.error { color:var(--cv-accent-red-dark); }
i.fa-thermometer-three-quarters { color:var(--cv-accent-red-medium); }
i.fa-thermometer-half { color:var(--cv-gold-dark); }
i.fa-thermometer-quarter { color:inherit; }
i.fa-dev.dev { color:var(--cv-accent-red-dark); font-size:2em; vertical-align:middle; } /*necessary layout*/

*:not([disabled]):hover > i.fa-ban,
*:not([disabled]):hover > i.fa-trash-alt,
*:not([disabled]):hover > i.fa-exclamation-circle { color:var(--cv-accent-red-medium) !important; cursor:pointer; }

section > article > h2 > .fa-check-circle { color:var(--cavelo-green) !important; }

.vertical-spacer, .horizontal-spacer { background:var(--cavelo-green); }
.color-inherited { color:inherit !important; background-color:inherit !important; border:inherit !important; }

.flash {
    background-color:var(--cavelo-white) !important;
    box-shadow: var(--cavelo-green) inset 0px 0px 5px 0px !important;
    transition: background-color 0.2s, box-shadow 0.2s;
    transition-timing-function: ease-in-out;
}

@keyframes blink {
    0% { background-color:var(--cavelo-green); box-shadow: 0 0 10px var(--cavelo-green); color:var(--cavelo-green); }
    100% { background-color:inherit; box-shadow: 0 0 0px; color:inherit; }
}

@keyframes pulseDot {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.5); }
    100% { transform: scale(1); }
}

@keyframes pulseEvent {
    0%   { background-color:var(--cavelo-grey); }
    50%  { background-color:var(--cavelo-white); }
    100% { background-color:var(--cavelo-grey); }
}




details.normal:hover > summary,
details.normal[open] > summary { font-weight:bold; }
details.normal:hover > summary.grey,
details.normal[open] > summary.grey { background-color:var(--cavelo-platinum); color:var(--cavelo-black); }
details.normal:hover > summary.dark-grey,
details.normal[open] > summary.dark-grey { background-color:var(--cavelo-grey); color:var(--cavelo-black); }
details.normal:hover > summary.blue,
details.normal[open] > summary.blue { background-color:var(--cavelo-blue); color:var(--cavelo-white); }
details.normal:hover > summary.orange,
details.normal[open] > summary.orange { background-color:var(--cavelo-orange); color:var(--cavelo-white); }
details.normal:hover > summary.green,
details.normal[open] > summary.green { background-color:var(--cavelo-green); color:var(--cavelo-white); }
details.normal:hover > summary.red,
details.normal[open] > summary.red { background-color:var(--cv-accent-red-dark); color:var(--cavelo-white); }


[data-role="button"]:disabled { opacity:0.5 !important; }
[data-role="button"].dark-grey:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    border-color:rgba(118,118,118,0.5) !important;
    color: rgba(118,118,118) !important;
    opacity:0.5 !important;
}




/*** NEW COLOR OPTIONS */

i[class*="cv-bg-"]   { height:fit-content !important; width:fit-content !important; }
.cv-bg-green        { background-color:var(--cavelo-green) !important; }
.cv-bg-orange       { background-color:var(--cavelo-orange) !important; }
.cv-bg-navy         { background-color:var(--cavelo-navy) !important; }
.cv-bg-blue         { background-color:var(--cavelo-blue) !important; }
.cv-bg-white        { background-color:var(--cavelo-white) !important; }
.cv-bg-black        { background-color:var(--cavelo-black) !important; }
.cv-bg-grey         { background-color:var(--cavelo-platinum) !important; }
.cv-bg-dark-grey    { background-color:var(--cavelo-grey) !important; }
.cv-bg-gold         { background-color:var(--cv-gold) !important; }/* !!V2 */
.cv-bg-bright-blue  { background-color:var(--cv-bright-blue) !important; }/* !!V2 */
.cv-bg-vivid-blue   { background-color:var(--cv-vivid-blue) !important; }/* !!V2 */
.cv-bg-vivid-cyan   { background-color:var(--cv-vivid-cyan) !important; }/* !!V2 */
.cv-bg-red          { background-color:var(--cv-accent-red-dark) !important; }/* !!V2 */

.cv-text-placeholder  { color:var(--cavelo-black-20) !important; }
.cv-text-green        { color:var(--cavelo-green) !important; }
.cv-text-orange       { color:var(--cavelo-orange) !important; }
.cv-text-navy         { color:var(--cavelo-navy) !important; }
.cv-text-blue         { color:var(--cavelo-blue) !important; }
.cv-text-white        { color:var(--cavelo-white) !important; }
.cv-text-black        { color:var(--cavelo-black) !important; }
.cv-text-grey         { color:var(--cavelo-platinum) !important; }
.cv-text-dark-grey    { color:var(--cavelo-grey) !important; }
.cv-text-gold         { color:var(--cv-gold) !important; }/* !!V2 */
.cv-text-bright-blue  { color:var(--cv-bright-blue) !important; }/* !!V2 */
.cv-text-vivid-blue   { color:var(--cv-vivid-blue) !important; }/* !!V2 */
.cv-text-vivid-cyan   { color:var(--cv-vivid-cyan) !important; }/* !!V2 */
.cv-text-red          { color:var(--cv-accent-red-dark) !important; }/* !!V2 */

[class*="cv-border-"]   { border:1px solid transparent; box-sizing:border-box !important; }
.cv-border-green        { border-color:var(--cavelo-green) !important; }
.cv-border-orange       { border-color:var(--cavelo-orange) !important; }
.cv-border-navy         { border-color:var(--cavelo-navy) !important; }
.cv-border-blue         { border-color:var(--cavelo-blue) !important; }
.cv-border-white        { border-color:var(--cavelo-white) !important; }
.cv-border-black        { border-color:var(--cavelo-black) !important; }
.cv-border-grey         { border-color:var(--cavelo-platinum) !important; }
.cv-border-dark-grey    { border-color:var(--cavelo-grey) !important; }
.cv-border-gold         { border-color:var(--cv-gold) !important; }/* !!V2 */
.cv-border-bright-blue  { border-color:var(--cv-bright-blue) !important; }/* !!V2 */
.cv-border-vivid-blue   { border-color:var(--cv-vivid-blue) !important; }/* !!V2 */
.cv-border-vivid-cyan   { border-color:var(--cv-vivid-cyan) !important; }/* !!V2 */
.cv-border-red          { border-color:var(--cv-accent-red-dark) !important; }/* !!V2 */

.cv-border-2 { border-width:2px !important; }
.cv-border-3 { border-width:3px !important; }
.cv-border-4 { border-width:4px !important; }





section.risk-distribution { position:relative; display:grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; column-gap:0.1em; padding:0.5em; }
section.risk-distribution > article { position:relative; min-height:3em; display:flex; align-content:middle; align-items:middle; justify-content:middle; }
section.risk-distribution > article.veryLow  { background-color:var(--cavelo-blue); border-top-left-radius:1em; border-bottom-left-radius:1em; }
section.risk-distribution > article.low      { background-color:var(--cavelo-green); }
section.risk-distribution > article.medium   { background-color:var(--cv-gold-100); }
section.risk-distribution > article.high     { background-color:var(--cavelo-orange); }
section.risk-distribution > article.veryHigh { background-color:var(--cv-accent-red-dark); border-top-right-radius:1em; border-bottom-right-radius:1em; }

section.risk-distribution > article:before { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-weight:bold;}
section.risk-distribution > article.veryLow:before  { content:'Very Low'; color:var(--cavelo-white); }
section.risk-distribution > article.low:before      { content:'Low'; color:var(--cavelo-white); }
section.risk-distribution > article.medium:before   { content:'Medium'; color:var(--cavelo-white); }
section.risk-distribution > article.high:before     { content:'High'; color:var(--cavelo-white); }
section.risk-distribution > article.veryHigh:before { content:'Very High'; color:var(--cavelo-white); }

section.risk-distribution > article > div { 
    position:absolute; 
    top:100%; 
    left:50%; 
    transform:translateX(-50%); 
    padding:0.5em; 
    min-width:2.5em; 
    box-sizing:border-box; 
    border:1px solid var(--cavelo-black); 
    background-color:var(--cavelo-white);
    color:var(--cavelo-white);
    font-weight:bold;
    text-align:center;
    border-bottom-left-radius:0.5em;
    border-bottom-right-radius:0.5em;
}

section.risk-distribution > article > div:before { 
    content:''; 
    position:absolute; 
    bottom:100%; 
    left:50%; 
    transform:translateX(-50%); 
    width:2.5em; 
    height:auto; 
    box-sizing:border-box;
    border-top:0;
    border-left:1.25em solid transparent;
    border-right:1.25em solid transparent;
    border-bottom:1em solid var(--cavelo-black); 
}

section.risk-distribution > article.veryLow > div  { border:1px solid var(--cv-blue-50); background-color:var(--cv-blue-0); color:var(--cavelo-blue); }
section.risk-distribution > article.low > div      { border:1px solid var(--cavelo-green-60); background-color:var(--cavelo-green-20); color:var(--cavelo-green); }
section.risk-distribution > article.medium > div   { border:1px solid var(--cv-gold-50); background-color:var(--cv-gold-0); color:var(--cv-gold-100); }
section.risk-distribution > article.high > div     { border:1px solid var(--cv-orange-50); background-color:var(--cv-orange-0); color:var(--cavelo-orange); }
section.risk-distribution > article.veryHigh > div { border:1px solid var(--cv-accent-red-medium); background-color:var(--cv-accent-red-light); color:var(--cv-accent-red-dark); }

section.risk-distribution > article.veryLow > div:before  { border-bottom:1em solid var(--cv-blue-0); }
section.risk-distribution > article.low > div:before      { border-bottom:1em solid var(--cavelo-green-20); }
section.risk-distribution > article.medium > div:before   { border-bottom:1em solid var(--cv-gold-0); }
section.risk-distribution > article.high > div:before     { border-bottom:1em solid var(--cv-orange-0); }
section.risk-distribution > article.veryHigh > div:before { border-bottom:1em solid var(--cv-accent-red-light); }