/* CAVELO-DASHBOARD-LAYOUT
 * Defines the generic layout 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 text-/background-/border-colors (layout only)
 */

/*** BASICS */
i { margin-right:0.5em; }
i:only-child { margin:0; }
*[class*="fa-"] { 
    height:1em !important; 
    vertical-align:middle; 
    justify-content:center; 
    align-items:center; 
    align-content:center; 
}
/* 
body > section i:first-child { height:100%; vertical-align:middle; } 
body > section i:first-child + span:not(:empty):last-child {height:100%;vertical-align:middle;width:-webkit-fill-available;width:fill-available;} 
 */
canvas { position:relative; max-width:100%; }
h1,h2,h3,h4,h5 { color:inherit; margin:0px; margin-bottom:1em; }
*+h1,*+h2,*+h3,*+h4,*+h5 { margin-top:1em; }
p { color:inherit; margin:0px; margin-bottom:1em; box-sizing:border-box; width:100% }
details, summary { outline:none; box-sizing:border-box; width:100% }
details > summary:first-of-type { display: block; }
details > summary::marker { display: none !important; }
details > summary .fas.fa-caret-right { display:inline-block; } 
details > summary .fas.fa-caret-down { display:none; } 
details[open] > summary .fas.fa-caret-right { display:none; }
details[open] > summary .fas.fa-caret-down { display:inline-block; }

details.normal { position:relative; display:block; width:100%; max-width:100%; } 
details.normal > summary { display:flex; flex-direction:row; align-items:center; align-content:center; justify-content:left; cursor:pointer; }
details.normal > summary > * { display:inline; }
details.normal > summary > *:last-child { 
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
}
details.normal > summary::after { 
    position:relative;
    display:inline-flex;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0da";
    color:var(--cavelo-green);
    margin-left:0.5rem;
    flex-direction:row;
    align-content:center;
    align-items:center;
    justify-content:flex-end;
    height:1rem;
    transform:rotate(90deg);
    transition:transform 0.25s ease-out;
}
details[open].normal > summary:after { 
    transform:rotate(270deg);
    transition:transform 0.25s ease-out;
}

/* If a summary with data-error, make the dropdown arrow an orange warning symbol */
details[open] > summary.error-indicator::after { transform:rotate(0deg); }
details > summary.error-indicator::after {
    content:"\f06a" !important;
    transform:rotate(0deg);
    border:none; 
    padding-right:0; 
    margin-right:0;
    right:-0.25em;
    color:var(--cavelo-orange);
    font-size:1rem;
    background-color:transparent;
}

details.normal.border-radius { padding:0 !important; overflow:hidden; }

small { font-size:0.8em; }
big { font-size:1.2em; }


/** Combine fontawesome icons - stacking **/
i[class*="fa-"] { position:relative; }

i.fa-combine { 
    position:relative; 
    display: inline-flex; 
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
}
i.fa-combine > i { position:absolute; margin:0; text-align:center; }
i.fa-combine > i::before {
    position:relative; 
    display: inline-flex; 
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;

}
i.fa-combine > i:first-child { position:relative; }

i.circle,
i.circle::before {
    aspect-ratio:1 / 1;
    width:fit-content;
    min-width:1em !important;
    min-height:1em !important;    
    box-sizing:border-box !important; 
}

i.fa.fa-spinner.fa-spin + span:empty { display:none; }
i.far.fa-square-check,
i.fa-regular.fa-square-check  { color:var(--cavelo-green); }
/* i.far.fa-check-square,
i.fa-regular.fa-check-square { color:var(--cavelo-green); } */

i.fa-temperature-full { color:var(--very-high-100) }
i.fa-temperature-three-quarters { color:var(--high-100) }
i.fa-temperature-half { color:var(--medium-100) }
i.fa-temperature-quarter { color:var(--low-100) }
i.fa-temperature-empty { color:var(--very-low-100) }

i.fa-cv-error:after { 
    display:block;
    position:absolute;
    right:0; bottom:0;
    width:0.5em; height:0.5em;
    border-radius:0.5em;
    border:1px solid var(--cv-accent-red-dark);
    background-color:var(--cv-accent-red-light);
    content:' ';
    transform:translate(50%, 50%);
}
i.fa-cv-warn:after { 
    display:block;
    position:absolute;
    right:0; bottom:0;
    width:0.5em; height:0.5em;
    border-radius:0.5em;
    border:1px solid var(--cavelo-orange);
    background-color:var(--cavelo-orange-60);
    content:' ';
    transform:translate(50%, 50%);
}


/*** Links and lists */
a, span { position:relative; display:inline-block; }
a { cursor:pointer; text-decoration:none; }
a:not(.underline):hover { cursor:pointer; text-decoration:none; }
a.underline { text-decoration: underline; }

/*
a.underline:after { 
    display:inline-block;
    width:fit-content;
    height:fit-content;
    margin-left:0.2em;
    content:'\f0c1';
    font-size:0.7em;
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
}
*/

p:last-child { margin-bottom:0; }

ul.list-tight { position:relative; margin-left:0; padding:0; list-style-position:inside; list-style-type: none; margin-top:0.5em; }
ul.list-tight > li { margin-bottom:0.5em; }
ul.list-tight > li,
ul.list-tight > li > small { width:100%; position:relative; display:flex; align-content:start; align-items: stretch; justify-content:start; vertical-align:top; height:auto; line-height:1; }
ul.list-tight > li > small:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; }
ul.list-tight > li > small i { margin-right:0.5em; }

ul.cve-refs li { word-break:break-all; }
ul.compact,
ol.compact { padding-left:2em; }
ul.compact > li,
ol.compact > li { margin:0.5em 0; }
ol>li>ol { list-style: lower-alpha; }

strong { font-weight:600; }

/*** Rows and columns */

/** ROWS */

.row { position:relative; max-width:100%; }
.row[class*="col-"] {
    --rowgap:1em;
    --colgap:2em;
    display: grid;
    row-gap:var(--rowgap);
    column-gap:var(--colgap);
    width:100%;
    max-width:100%;
}

.row.col-1 { grid-template-columns: 100%; }
.row.col-2 { grid-template-columns: 1fr 1fr; }
.row.col-3 { grid-template-columns: 1fr 1fr 1fr; }
.row.col-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.row.col-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.row.col-6 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } 
.row.col-7 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.row.col-8 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.row.col-9 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.row.col-10 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.row.col-11 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
.row.col-12 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }

.row[class*="col-control-"] {display: grid;column-gap:0em !important;padding:0px !important;}
.row.col-control-1 { grid-template-columns: auto 1fr;}
.row.col-control-2 { grid-template-columns: auto auto 1fr; }
.row.col-control-3 { grid-template-columns: auto auto auto 1fr; }
.row.col-control-4 { grid-template-columns: auto auto auto auto 1fr; }
.row.col-control-5 { grid-template-columns: auto auto auto auto auto 1fr; }
.row.col-control-6 { grid-template-columns: auto auto auto auto auto auto 1fr; }
.row.col-control-7 { grid-template-columns: auto auto auto auto auto auto auto 1fr; }

.row.col-control-1.reversed { grid-template-columns: 1fr auto;}
.row.col-control-2.reversed { grid-template-columns: 1fr auto auto; }
.row.col-control-3.reversed { grid-template-columns: 1fr auto auto auto; }
.row.col-control-4.reversed { grid-template-columns: 1fr auto auto auto auto; }
.row.col-control-5.reversed { grid-template-columns: 1fr auto auto auto auto auto; }
.row.col-control-6.reversed { grid-template-columns: 1fr auto auto auto auto auto auto; }
.row.col-control-7.reversed { grid-template-columns: 1fr auto auto auto auto auto auto auto; }

.row[class*="col-control-"] + .row[class*="col-control-"] { margin-top:0.5em; }
.row[class*="col-control-"] > [data-role="button"]:last-child { justify-content:left; }
.row[class*="col-control-"] > [data-role="button"] + [data-role="button"] { border-left-width:0px; }
.row[class*="col-control-"]:not(.reversed) > *:last-child {width: -webkit-fill-available;}
.row[class*="col-control-"].reversed > *:first-child {width: -webkit-fill-available;}

.row > .col-span-1 { grid-column: span 1; }
.row > .col-span-2 { grid-column: span 2; }
.row > .col-span-3 { grid-column: span 3; }
.row > .col-span-4 { grid-column: span 4; }
.row > .col-span-5 { grid-column: span 5; }
.row > .col-span-6 { grid-column: span 6; }
.row > .col-span-7 { grid-column: span 7; }
.row > .col-span-8 { grid-column: span 8; }
.row > .col-span-9 { grid-column: span 9; }
.row > .col-span-10 { grid-column: span 10; }
.row > .col-span-11 { grid-column: span 11; }
.row > .col-span-12 { grid-column: span 12; }

.row.col-1 > .col-span-all { grid-column-start: 1; grid-column:span 1; }
.row.col-2 > .col-span-all { grid-column-start: 1; grid-column:span 2; }
.row.col-3 > .col-span-all { grid-column-start: 1; grid-column:span 3; }
.row.col-4 > .col-span-all { grid-column-start: 1; grid-column:span 4; }
.row.col-5 > .col-span-all { grid-column-start: 1; grid-column:span 5; }
.row.col-6 > .col-span-all { grid-column-start: 1; grid-column:span 6; }
.row.col-7 > .col-span-all { grid-column-start: 1; grid-column:span 7; }
.row.col-8 > .col-span-all { grid-column-start: 1; grid-column:span 8; }
.row.col-9 > .col-span-all { grid-column-start: 1; grid-column:span 9; }
.row.col-10 > .col-span-all { grid-column-start: 1; grid-column:span 10; }
.row.col-11 > .col-span-all { grid-column-start: 1; grid-column:span 11; }
.row.col-12 > .col-span-all { grid-column-start: 1; grid-column:span 12; }

.row > .col-span-all { grid-column-start: 1; }

.row.col-gap-0 { --colgap:0em !important; }
.row.col-gap-0-5 { --colgap:0.5em !important; }
.row.col-gap-1 { --colgap:1em !important; }
.row.col-gap-1-5 { --colgap:1.5em !important; }
.row.col-gap-2 { --colgap:2em !important; }

/** COLUMNS */

.col { position:relative; max-height:100%; }
.col[class*="row-"] {
    --rowgap:1em;
    --colgap:2em;
    display: grid;
    row-gap:var(--rowgap);
    column-gap:var(--colgap);
    height:100%;
    max-height:100%;
}
.col.row-1 { grid-template-rows: 100%; }
.col.row-2 { grid-template-rows: repeat(2, calc(calc(100% - var(--rowgap)) / 2)); }
.col.row-3 { grid-template-rows: repeat(3, calc(calc(100% - calc(var(--rowgap)*2)) / 3)); }
.col.row-4 { grid-template-rows: repeat(4, calc(calc(100% - calc(var(--rowgap)*3)) / 4)); }
.col.row-5 { grid-template-rows: repeat(5, calc(calc(100% - calc(var(--rowgap)*4)) / 5)); }
.col.row-6 { grid-template-rows: repeat(6, calc(calc(100% - calc(var(--rowgap)*5)) / 6)); }


html.xlarge .row {column-gap:1em;}
html.xlarge .cv-bg.row {padding:1em;}

html.large .row { column-gap:1em; }
html.large .cv-bg.row { padding:1em; }

html.medium .row { grid-template-columns: 1fr 1fr; }
html.medium .row.col-1 { grid-template-columns: 1fr; }
html.medium .row.col-2 { grid-template-columns: 1fr; }
html.medium .row.col-3 { grid-template-columns: 1fr 1fr; }
html.medium .row.col-4 { grid-template-columns: 1fr 1fr; }
html.medium .row > * { margin:1em 0; }
html.medium .row > [class^="col-span"] { grid-column: span 2; }
html.medium .row.col-1 > [class^="col-span"] { grid-column: span 1; }
html.medium .row.col-2 > [class^="col-span"] { grid-column: span 2; }
html.medium .row.col-3 > [class^="col-span"] { grid-column: span 3; }
html.medium .row.col-4 > [class^="col-span"] { grid-column: span 4; }

html.small .row { grid-template-columns: 1fr; }
html.small .row.col-1 { grid-template-columns: 1fr; }
html.small .row.col-2 { grid-template-columns: 1fr; }
html.small .row.col-3 { grid-template-columns: 1fr; }
html.small .row.col-4 { grid-template-columns: 1fr; }
html.small .row > * { margin:0.5em 0; }
html.small .col-span-1 { grid-column: span 1; }
html.small .col-span-2 { grid-column: span 1; }
html.small .col-span-3 { grid-column: span 1; }
html.small .col-span-4 { grid-column: span 1; }

.row.nostretch {align-items: start;justify-content: start;align-content: start;}

/*** Forms and inputs */
form {line-height:1.5;}

input, 
select, 
.contenteditable { outline:none; padding:0.5em; margin:0px auto; border-width:0px; border-bottom-width:1px; }

.form-group {
    position:relative;
    vertical-align:middle;
    margin:0; padding:0; width: 100%;
    margin-bottom:1em;
}
.form-group:last-child { margin:0; }

.form-group > .form-group-wrapper { position:relative; vertical-align:top; }
.form-group > .form-group-wrapper > * { position:relative; width:100%; display:block; margin:0; }
.form-group > .form-group-wrapper > .controls.row { display:grid; }
.form-group > .form-group-wrapper > span.select-pure > .cover-disabled { display:block; position:absolute; top:0; left:0; right:0; bottom:0; opacity:1; visibility:visible; z-index:1000; }
.form-group > .form-group-wrapper > select[multiple],
.form-group > .form-group-wrapper > textarea {border-width:1px;border-style:solid;cursor:text;}
.form-group > .form-group-wrapper:not(.checkbox) select,
.form-group > .form-group-wrapper:not(.checkbox) input,
.form-group > .form-group-wrapper:not(.checkbox) textarea,
.form-group > .form-group-wrapper:not(.checkbox) span.select-pure {min-height:2.6em; font-family:'Work Sans', sans-serif; padding:0.5em; width:100%; }
.form-group > .form-group-wrapper:not(.checkbox) label, .form-label { margin:0 !important; min-height:2.5em; display:inline-flex; justify-content:left; align-content: center; align-items: center; }
.form-group > .form-group-wrapper:not(.checkbox) select[multiple] { height:10em !important; }


.moz .select-wrapper::after { top: 1em; right: 1em; font-size: 0.8em; }
.moz .form-group > .form-group-wrapper > .select-wrapper::after { top: 1.5em; right: 1.5em; }
.moz input[type="number"] { -moz-appearance: textfield; appearance: textfield; margin: 0; }
input[type="checkbox"]:focus { outline:none !important; }

.form-group.inline > .form-group-wrapper.checkbox { display:flex; align-items:center; align-content:center; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start;}
.form-group.inline > .form-group-wrapper.checkbox > input[type="checkbox"] { position:relative; top:-1px; right:revert; bottom:revert; left:revert; height:1.2em; width:1.2em; }
.form-group.inline > .form-group-wrapper.checkbox > label { 
    position:relative; top:revert; right:revert; bottom:revert; left:revert; font-size:revert; min-height:2.5em; padding:0; margin:0; 
    display:flex; align-items:center; align-content:center; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start;
}

.form-group.inline > .form-group-wrapper.file > label { 
    position:relative; top:revert; right:revert; bottom:revert; left:revert; font-size:revert; min-height:2.5em; padding:0; margin:0; 
    display:flex; align-items:center; align-content:center; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start;
}


textarea[readonly] { 
    width:calc(100% - 1em);
    margin:auto auto 1em auto;
    border:1px solid;
    border-radius:2px;
    overflow-y:scroll;
    overflow-x:auto;
    min-height:5em;
    max-height:10em; 
    white-space:pre;
    resize:none; 
    height:auto;
    padding:0.5em;
}

.input-undo { 
    display:inline-block;  
    position:absolute; 
    background-color:var(--cavelo-black); 
    color:var(--cavelo-white); 
    z-index:99999;
    font-family:'Work Sans', sans-serif;
    font-weight:bold;
    font-style:normal;
    font-size:14px;
    line-height:1.5;
    border-radius:0.5em;
    vertical-align:baseline;
    text-align:center;
    height:1.5em; width:1.5em; 
    box-shadow: rgba(0,0,0,0.4) 0px 5px 15px 0px;
    cursor:pointer;
}
.input-undo:hover * { color:var(--cavelo-orange); }
.input-undo i,
.input-undo i:before,
.input-undo i:after {
    margin:0;
    padding:0;
    position:relative;
    height:1.5em;
    width:1.5em;
    vertical-align: baseline;
    text-align:center;
}
input.changed,
select.changed,
textarea.changed,
.contenteditable.changed { background-color:var(--cavelo-grey-0); }

input.changed:invalid,
select.changed:invalid,
textarea.changed:invalid,
.contenteditable.changed:invalid { border-color:var(--cavelo-orange); background-color:var(--cavelo-orange-0); }


.form-group.with-button > .form-group-wrapper > select,
.form-group.with-button > .form-group-wrapper > input { 
    display:inline-block;
    width:calc(100% - 3em);
    margin-right:0.8em; 
}
.form-group.with-button > .form-group-wrapper > button {
    display:inline-flex; 
    min-width:2.5em !important; 
    min-height:2.5em !important;
    max-width:2.5em !important; 
    max-height:2.5em !important;
    padding:0px !important;
    margin:0px !important;
    margin-left:0.5rem !important;
    line-height:2.5em;
    justify-content:center;
    align-items:center;
}

.form-group > .form-group-wrapper > .controls { position:relative; }

.form-group > .form-group-wrapper .input-error {
    opacity:1; visibility:1;
    column-span:all;
    display:flex;
    position:absolute;
    width:auto;
    height:auto;
    white-space: nowrap;
    /* top:0; */
    /* bottom:0; */
    /* transform: translate(0, -50%); */
    background-color:var(--cavelo-white);
    border:1px solid var(--cavelo-orange);
    z-index:99999;
    text-align:center;
    box-shadow: var(--box-shadow);
}

.form-group > .form-group-wrapper > .controls > .input-error {
    max-width:334px;
    width: auto !important;
}

/* .form-group > .form-group-wrapper .input-error:not(.right) {
    left:0;
    bottom:0;
    transform: translate(calc(-100% - 20px), 0);
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    border-top-right-radius:3px;
    border-bottom-right-radius:3px;
    padding:0em 0em 0em 0.5em;
} */

/* .form-group > .form-group-wrapper .input-error:not(.right):after {
    content:'';
    position:relative;
    display:inline-block;
    border-top: 1em solid transparent;
    border-bottom: 1em solid transparent;    
    border-left: 1em solid var(--cavelo-orange);
    border-right: 0em solid transparent;
    left:1em;
    vertical-align:middle;    
} */

/* .form-group > .form-group-wrapper .input-error.right {
    right:0;
    bottom:0;
    transform: translate(calc(100% + 20px), 0);
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    padding:0em 1em 0em 0em;
} */

/* .form-group > .form-group-wrapper .input-error.right:before {
    content:'';
    position:relative;
    display:inline-block;
    border-top: 1em solid transparent;
    border-bottom: 1em solid transparent;    
    border-right: 1em solid var(--cavelo-orange);
    border-left: 0em solid transparent;
    right:1em;
    vertical-align:middle;    
} */

.form-group > .form-group-wrapper .input-error:empty { display:none; }


.form-group.inline > .form-group-wrapper .input-error {
    position:absolute;
    display:block;
}


@keyframes errorhide {
    from {opacity:1;}
    to {opacity:0;}
}

/* .form-group > .form-group-wrapper */
[data-error]::after {
    display:flex;
    font-family: 'Work Sans', sans-serif;
    line-height:1;
    position: absolute;
    content:attr(data-error) !important;
    width:fit-content;
    background-color:var(--cavelo-white);
    border:2px solid var(--cavelo-orange);
    font-size:0.8rem;
    padding:0.25em 0.5em;
    z-index:-10;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    white-space: pre;

    opacity:0;
    color:var(--cavelo-black);
}

[data-error]::after {
    top:100%;
    left:0;
}
[data-error]:focus-within::after { opacity:1; z-index:10; }
[data-error]:hover::after { opacity:1; z-index:10; }
.form-group > .form-group-wrapper .form-error,
textarea.form-error,
.form-error {
    border-color:var(--cavelo-orange-60) !important;
    background-color:var(--cavelo-orange-20) !important;
}


/* .form-group > .form-group-wrapper */
/* .form-group > .form-group-wrapper */
/* [data-error].error-right::after {
    right:0; top:0;
    transform:translate(100%, 0.2em);
    border-top-left-radius:1em;
    border-bottom-left-radius:1em;
    padding-left:1em;
} */
/* .form-group > .form-group-wrapper */
/* [data-error].error-left::after {
    left:0; top:0;
    transform:translate(-100%, 0.2em);
    border-top-right-radius:1em;
    border-bottom-right-radius:1em;
    padding-right:1em;
} */

/* details[data-error]:not([open])::after {
    font-family: "Font Awesome 6 Free";
    font-size:1rem;
    font-weight:600;
    content:"\f06a" !important;
    border:none;
    color:var(--cavelo-orange);
    background-color:transparent;
    position:absolute;
    right:0.25em;
    top:0;
}
details[data-error][open]::after {
    display:none;
} */

#menu-user .form-group { margin-bottom:0; }
#menu-user .form-group > .form-group-wrapper.checkbox > input { left:0.1em !important; }
#menu-user .form-group > .form-group-wrapper.checkbox > label { margin-left:1.8em !important; }
#menu-user .form-group + .form-group { margin-top:0.5em; }

::-webkit-progress-value,
::-moz-progress-value,
::-ms-progress-value {
    transition: width 1s;
}


.cv-controls.col-controls-5 > * { margin-right:0.5rem !important; margin-left:0 !important; }

.svg-image {
    position:relative;
    display:inline-flex;
    padding:0 !important;
    margin:0 !important;
    height:fit-content !important;
    width:fit-content !important;
}
.svg-image > svg {
    position:relative;
    display:inline-block;
}


[data-role="spinner"] { width:fit-content; }
[data-role="spinner"] > i { margin:0; }
[data-role="spinner"] > i + span:not(:empty) { margin-left:0.25em; }

*.loading:before { 
    display: inline-block;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    animation-name:fa-spin;
    animation-duration:1.5s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    content:"\f110";
    margin-right:0.5em;
}


section#domains-and-subdomains { margin-top:1rem; }
section#domains-and-subdomains details[data-type="domain"] {
    --detail-border:var(--cavelo-navy);
    --detail-background:var(--cavelo-navy-20);
    --summary-padding:0.2em;
    --content-border:var(--cavelo-navy-40);
    --content-padding:0.5em;
}
section#domains-and-subdomains details[data-type="subdomain"] {
    --detail-border:var(--cavelo-orange);
    --detail-background:var(--cavelo-orange-20);
    --summary-padding:0.2em;
    --content-border:var(--cavelo-orange-40);
    --content-padding:0.5em;
}
section#domains-and-subdomains details[data-type="host"] {
    --detail-border:var(--cavelo-grey);
    --detail-background:var(--cavelo-grey-20);
    --summary-padding:0.5em;
    --content-border:var(--cavelo-grey-40);
    --content-padding:0.5em;
}

section#domains-and-subdomains .fa-solid { 
    position:relative; 
    display:inline-block;
    width:1em; 
    text-align:center;
    vertical-align:middle;
}
section#domains-and-subdomains pre {
    position:relative !important;
    display:block !important;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}
section#domains-and-subdomains details > [data-role="alert"] { border-left-width:0.25em !important; }
section#domains-and-subdomains details { 
    margin:0;
    position:relative; 
    display:block; 
    width:100%; 
    border:1px solid var(--detail-border);
    background-color:var(--detail-background);
    overflow:hidden;
}
section#domains-and-subdomains details > summary { 
    position:relative; 
    margin:0;
    padding:var(--summary-padding); 
    border-color:var(--detail-border);    
    background-color:rgba(255,255,255,1);
    z-index:2;
    border-left:0.25em solid var(--detail-border);
}


section#domains-and-subdomains details > section { 
    position:relative; 
    margin:0;
    padding:var(--content-padding); 
    border-color:var(--content-border);    
    background-color:rgba(255,255,255,0.8);
    z-index:1;
    border-left:0.25em solid var(--content-border);
}

/* section#domains-and-subdomains details > section label { margin:0; color:var(--detail-border); } */

section#domains-and-subdomains details:not([open]) > summary:hover { 
    /* background-color:var(--summary-hover); */
    box-shadow:inset 0 0 0.2em var(--detail-border);
}
section#domains-and-subdomains details[open] > summary {
    border-bottom:1px solid var(--detail-border);
    box-shadow:0 0 0.5em var(--detail-border);
}

section#domains-and-subdomains details > summary { padding-right:1rem; display:flex; flex-direction:row; align-items:center; align-content:center; justify-content:left; }
section#domains-and-subdomains details > summary > * { display:inline-flex; }
section#domains-and-subdomains details > summary > *.title { 
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
}
section#domains-and-subdomains details > summary::after { 
    position:relative;
    display:inline-flex;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0da";
    color:var(--cavelo-green);
    margin-left:0.5rem;
    flex-direction:row;
    align-content:center;
    align-items:center;
    justify-content:flex-end;
    height:1rem;
    transform:rotate(90deg);
    transition:transform 0.25s ease-out;
}
section#domains-and-subdomains details[open] > summary:after { 
    transform:rotate(270deg);
    transition:transform 0.25s ease-out;
}

/* section#domains-and-subdomains details > summary::after { position:absolute; content: ' \25BA'; right:0; top:50%; font-size:inherit;transform: translate(-50%, -50%);}
section#domains-and-subdomains details[open] > summary:after { position:absolute; content: " \25BC"; right:0; top:50%; font-size:inherit;transform: translate(-50%, -50%);} */

section#domains-and-subdomains details + details { margin-top:0.5rem; }
/* section#domains-and-subdomains details > summary > * { vertical-align:middle; margin-left:0.5rem !important; } */
section#domains-and-subdomains details > summary > [data-role="toggle"] + .title { margin-left:1rem !important; }
section#domains-and-subdomains details > summary > [data-role="button"]{margin-left:0 !important;margin-right:var(--summary-padding) !important;}
/* section#domains-and-subdomains details > summary > [data-role="button"].small { padding:0.2em !important; text-align:center; } */

section#domains-and-subdomains details[data-type="host"] section [data-role="alert"] { margin-bottom:1em !important; }

section#domains-and-subdomains .button-list [data-role="button"] { margin:0 !important; }
section#domains-and-subdomains .button-list  {
    position: relative;
    display: flex; 
    column-gap: 0.5em;
    row-gap: 0.5em;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    justify-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

/* section#domains-and-subdomains .align-right {
    position:absolute;
    left:auto;
    right:0;
    top:0;
    bottom:0;
    padding-right:2rem;
    display:flex;
    flex-direction:row;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: space-between;
}

section#domains-and-subdomains .align-right > * { margin-left:0.5em; } */
section#domains-and-subdomains [data-role="badge"] { position:relative; display:inline-block; padding:0; box-shadow:none; text-align:center; width:fit-content; height:fit-content; }
section#domains-and-subdomains [data-role="badge"] > span { 
    border:0.2em solid transparent; 
    border-left-width:0.5em;
    border-right-width:0.5em;
    width:fit-content; 
    height:fit-content; 
    white-space:nowrap; 
    text-align:center; 
    min-width:100%;
}
section#domains-and-subdomains [data-role="badge"] > span:empty { border-width:0.2em; }
section#domains-and-subdomains [data-role="badge"].green > span:empty::after { display:inline-block; width:100%; height:fit-content; content:'\2713'; text-align:center; overflow:visible; }
section#domains-and-subdomains [data-role="badge"].red > span:empty::after { display:inline-block; width:100%; height:fit-content; content:'\21'; text-align:center; overflow:visible; }
section#domains-and-subdomains [data-role="badge"].orange > span:empty::after { display:inline-block; width:100%; height:fit-content; content:'\21'; text-align:center; overflow:visible; }




/*** OVERRIDES */

.inset { box-shadow: inset 0 0 1em 0 var(--border-color); }

[disabled="true"] { opacity: 0.5; }

.vertical-spacer { position:relative; display:inline-block; width:4px; height:auto; padding:0.8em 0; }
.horizontal-spacer { position:relative; display:inline-block; height:4px; width:auto; padding:0 1em; }
.cv-details > * { line-height:1.8; white-space:normal; word-wrap:break-word; }
.cv-details .tagging-wrapper { line-height:initial; margin-top:0.5em; }
.heatmap { z-index:9999; }
.chart { min-height:300px; width:100%; }
.chart-nodata {display:flex;align-content:center;align-items:center;justify-content:center;min-height: 100px;width:100%;}

.text-normal { font-style:normal !important; font-weight:normal !important; }
.text-bold { font-weight:bold !important; }
.text-italic { font-style:italic !important; }
.text-strike { text-decoration:line-through; }
.text-underline { text-decoration: underline; }
.text-top {vertical-align:top !important;align-content: flex-start;}
.text-bottom { vertical-align:bottom !important;align-content: flex-end; }
.text-right { text-align:right !important;justify-content: flex-end; }
.text-left { text-align:left !important;justify-content: flex-start; }
.text-center { text-align:center !important; justify-content: center; }
.text-middle,
.text-middle > * {vertical-align:middle !important;align-content: center;}
.text-baseline,
.text-baseline > * { vertical-align:baseline !important; }
.text-light { font-weight:lighter !important; }
.text-small { font-size:0.8em !important; }
.text-xs { font-size:0.6em !important; }
.text-big,
.text-large { font-size:1.2em !important; }
.text-wrap { white-space:normal; word-wrap:break-word; }

.text-size-xs { font-size:0.6rem !important; }
.text-size-small { font-size:0.8rem !important; }
.text-size-normal { font-size:1rem !important; }
.text-size-large { font-size:1.2rem !important; }

.title { font-weight:bold; }
.subtitle { font-weight:lighter; text-transform:uppercase; }
.block { position:relative; width:100%; max-width:100% !important; display:block; }
.inline { display:inline !important; margin:0px; }
.inline-block { display:inline-block !important; margin:0px; }
.circle { border-radius:50%; display:inline-block !important; height:0.8em; width:0.8em;  margin-right:0.5em; }
.ellipsis   { width:100%; overflow: hidden;  text-overflow: ellipsis; white-space: nowrap; }
.noellipsis { width:100%; overflow: initial; text-overflow: initial;  white-space: break-word; overflow-wrap: break-word; }
.number-filter > div { min-width:140px; }
.arrow.right { display:none !important; }
.clickable {cursor:pointer !important;}
.dragging {cursor:grabbing !important;}
.float-right { float:right; } 
.no-point { cursor:default !important; }
.hover-me:hover { text-decoration:underline; }
.full-page { position:absolute; box-sizing:border-box; top:0; right:0; bottom:0; left:0; max-width:100%; max-height:100%; }
.no-overflow { overflow:hidden; }
.auto-scroll { overflow:auto; }
.auto-scroll-y { overflow-y:auto; overflow-x:hidden }
.auto-scroll-x { overflow-y:hidden; overflow-x:auto }
.fade-in  { opacity:1 !important; visibility:visible !important; transition: visibility 1s, opacity 1s linear !important; transition-delay: 1s; }
.fade-out { opacity:0 !important; visibility:hidden !important;  transition: visibility 1s, opacity 1s linear !important; transition-delay: 1s; }

.pull-right { position:absolute !important; right:1em; margin-right:0px; }
.pull-left { position:absolute !important; left:1em; margin-left:0px; }
.pull-top, .pull-top > * { display:inline-block; vertical-align:top; margin-top:0px; }
.pull-bottom, .pull-bottom > *  { display:inline-block; vertical-align:bottom; margin-bottom:0px; }
.pull-middle {display: flex;align-items: center;}
.pull-top-right { position:absolute !important; right:1em; margin-right:0px; top:1em; margin-top:0px; }
.pull-top-left { position:absolute !important; left:1em; margin-left:0px; top:1em; margin-top:0px; }
.pull-bottom-right { position:absolute !important; right:1em; margin-right:0px; bottom:1em; margin-bottom:0px; }
.pull-bottom-left { position:absolute !important; left:1em; margin-left:0px; bottom:1em; margin-bottom:0px; }

.align-middle { 
    display:flex;
    height:100%; width:100%;
    align-items:center;
    align-content:center;
    justify-content:center;
}

.noshadow { box-shadow:none !important; }
.noborder { border-width:0px !important; }
.nogaps { gap:0em !important; }
.nogutter { gap:0em !important; padding-bottom:0; }
.nogutter > * {  width:100% !important; text-align:center; }
.nogutter > input { text-align:left; }
.nocolgaps { --colgap:0em !important; }
.norowgaps { --rowgap:0em !important; }
.nooverflow { overflow-y:hidden !important; overflow-x:hidden !important; }
.nooverflow-x { overflow-x:hidden !important; }
.nooverflow-y { overflow-y:hidden !important; }
.nooverflow * { overflow-y:hidden !important; overflow-x:hidden !important }
.nooverflow-x * { overflow-x:hidden !important; }
.nooverflow-y * { overflow-y:hidden !important; }

.border-top { border-top-width:1px !important; }
.border-right { border-right-width:1px !important; }
.border-bottom { border-bottom-width:1px !important; }
.border-left { border-left-width:1px !important; }


/** MARGINS **/
.nomargin { margin:0px !important; } /*allow margin kill, then override*/
.margin-size-none { --size-margin:0; }
.margin-size-normal { --size-margin:1em; }
.margin-size-small { --size-margin:0.8em; }
.margin-size-xs { --size-margin:0.5em; }
.margin { margin:var(--size-margin) !important; }
.margin-top { margin-top:var(--size-margin) !important; }
.margin-bottom { margin-bottom:var(--size-margin) !important; }
.margin-right { margin-right:var(--size-margin) !important; }
.margin-left { margin-left:var(--size-margin) !important; }

.margin-large { margin:1.5em !important; }
.margin-large-top { margin-top:1.5em !important; }
.margin-large-bottom { margin-bottom:1.5em !important; }
.margin-large-right { margin-right:1.5em !important; }
.margin-large-left { margin-left:1.5em !important; }

.margin-small { margin:1em !important; }
.margin-small-top { margin-top:1em !important; }
.margin-small-bottom { margin-bottom:1em !important; }
.margin-small-right { margin-right:1em !important; }
.margin-small-left { margin-left:1em !important; }

.margin-xs { margin:0.5em !important; }
.margin-xs-top { margin-top:0.5em !important; }
.margin-xs-bottom { margin-bottom:0.5em !important; }
.margin-xs-right { margin-right:0.5em !important; }
.margin-xs-left { margin-left:0.5em !important; }

.margin-xxs { margin:0.25em !important; }
.margin-xxs-top { margin-top:0.25em !important; }
.margin-xxs-bottom { margin-bottom:0.25em !important; }
.margin-xxs-right { margin-right:0.25em !important; }
.margin-xxs-left { margin-left:0.25em !important; }

.margin-none-top { margin-top:0 !important; }
.margin-none-bottom { margin-bottom:0 !important; }
.margin-none-right { margin-right:0 !important; }
.margin-none-left { margin-left:0 !important; }

/** PADDING **/
.nopadding { padding:0px !important; } /*allow padding kill, then override*/
.padding-size-none { --size-padding:0; }
.padding-size-normal { --size-padding:1em; }
.padding-size-small { --size-padding:0.8em; }
.padding-size-xs { --size-padding:0.5em; }

.padded { padding:var(--size-padding) !important; }
.padded-top { padding-top:var(--size-padding) !important; }
.padded-bottom { padding-bottom:var(--size-padding) !important; }
.padded-right { padding-right:var(--size-padding) !important; }
.padded-left { padding-left:var(--size-padding) !important; }
.padded.small,
.padded-small { padding:1em !important; }
.padded-small-top { padding-top:1em !important; }
.padded-small-bottom { padding-bottom:1em !important; }
.padded-small-right { padding-right:1em !important; }
.padded-small-left { padding-left:1em !important; }

.padded.xs,
.padded-xs { padding:0.5em !important; }
.padded-xs-top { padding-top:0.5em !important; }
.padded-xs-bottom { padding-bottom:0.5em !important; }
.padded-xs-right { padding-right:0.5em !important; }
.padded-xs-left { padding-left:0.5em !important; }

.padded.xxs,
.padded-xxs { padding:0.25em !important; }
.padded-xxs-top { padding-top:0.25em !important; }
.padded-xxs-bottom { padding-bottom:0.25em !important; }
.padded-xxs-right { padding-right:0.25em !important; }
.padded-xxs-left { padding-left:0.25em !important; }

.padded-none { padding:0em !important; }
.padded-none-top { padding-top:0em !important; }
.padded-none-bottom { padding-bottom:0em !important; }
.padded-none-right { padding-right:0em !important; }
.padded-none-left { padding-left:0em !important; }


.spilloverflow { overflow-y:visible !important; overflow-x:visible !important; }
.spilloverflow-x { overflow-x:visible !important; }
.spilloverflow-y { overflow-y:visible !important; }
.spilloverflow * { overflow-y:visible !important; overflow-x:visible !important }
.spilloverflow-x * { overflow-x:visible !important; }
.spilloverflow-y * { overflow-y:visible !important; }

[class*='min-'] { display:inline-block; }
[class*='max-'] { display:inline-block; }

.min-0 { min-height:0px !important; }
.min-50 { min-height:50px !important; }
.min-100 { min-height:100px !important; }
.min-150 { min-height:150px !important; }
.min-200 { min-height:200px !important; }
.min-250 { min-height:250px !important; }
.min-225 { min-height:225px !important; }
.min-300 { min-height:300px !important; }
.min-350 { min-height:350px !important; }
.min-400 { min-height:400px !important; }
.min-500 { min-height:500px !important; }
.min-600 { min-height:600px !important; }
.min-700 { min-height:700px !important; }
.min-800 { min-height:800px !important; }

.max-1rem:not(.row) { max-height:1rem !important; }
.max-1rem.row { grid-auto-rows:1rem !important; }
.max-1-5rem:not(.row) { max-height:1.5rem !important; }
.max-1-5rem.row { grid-auto-rows:1.5rem !important; }
.max-2rem:not(.row) { max-height:2rem !important; }
.max-2rem.row { grid-auto-rows:2rem !important; }

.max-50 { max-height:50px !important; }
.max-100 { max-height:100px !important; }
.max-150 { max-height:150px !important; }
.max-200 { max-height:200px !important; }
.max-225 { max-height:225px !important; }
.max-250 { max-height:250px !important; }
.max-300 { max-height:300px !important; }
.max-350 { max-height:350px !important; }
.max-400 { max-height:400px !important; }
.max-500 { max-height:500px !important; }
.max-600 { max-height:600px !important; }

.min-h-1rem { min-height:1rem !important; } 
.min-h-2rem { min-height:2rem !important; } 
.min-h-2-5rem { min-height:2.5rem !important; } 
.min-h-3rem { min-height:3rem !important; } 
.min-h-4rem { min-height:4rem !important; } 
.min-h-5rem { min-height:5rem !important; } 
.min-h-content { min-height:min-content !important; }

.min-w-1rem { min-width:1rem !important; } 
.min-w-2rem { min-width:2rem !important; } 
.min-w-3rem { min-width:3rem !important; } 
.min-w-4rem { min-width:4rem !important; } 
.min-w-5rem { min-width:5rem !important; } 

.min-w-50 { min-width:50px !important; }
.min-w-75 { min-width:75px !important; }
.min-w-100 { min-width:100px !important; }
.min-w-150 { min-width:150px !important; }
.min-w-180 { min-width:180px !important; }
.min-w-200 { min-width:200px !important; }
.min-w-250 { min-width:250px !important; }
.min-w-300 { min-width:300px !important; }
.min-w-400 { min-width:400px !important; }
.min-w-500 { min-width:500px !important; }
.min-w-content { min-width:min-content !important; }


.max-w-50  { max-width:50px !important; }
.max-w-100 { max-width:100px !important; }
.max-w-150 { max-width:150px !important; }
.max-w-180 { max-width:180px !important; }
.max-w-200 { max-width:200px !important; }
.max-w-300 { max-width:300px !important; }
.max-w-400 { max-width:400px !important; }
.max-w-content { max-width:max-content !important; }
.max-w-100pct { max-width:100% !important; }
.max-w-50pct { max-width:50% !important; }

.fit-w-content { min-width:max-content !important; max-width:max-content !important; }


.width-50  { display:inline-block; width:50px !important;  min-width:50px !important;  max-width:50px !important; }
.width-60  { display:inline-block; width:60px !important;  min-width:60px !important;  max-width:60px !important; }
.width-80  { display:inline-block; width:80px !important;  min-width:80px !important;  max-width:80px !important; }
.width-100 { display:inline-block; width:100px !important; min-width:100px !important; max-width:100px !important; }
.width-120 { display:inline-block; width:120px !important; min-width:120px !important; max-width:120px !important; }
.width-150 { display:inline-block; width:150px !important; min-width:150px !important; max-width:150px !important; }
.width-200 { display:inline-block; width:200px !important; min-width:200px !important; max-width:200px !important; }
.width-250 { display:inline-block; width:250px !important; min-width:250px !important; max-width:250px !important; }
.width-300 { display:inline-block; width:300px !important; min-width:300px !important; max-width:300px !important; }
.width-350 { display:inline-block; width:350px !important; min-width:350px !important; max-width:350px !important; }
.width-400 { display:inline-block; width:400px !important; min-width:400px !important; max-width:400px !important; }

.height-150 { display:inline-block; height:150px !important; min-height:150px !important; max-height:150px !important; }
.height-20-pct { height:20% !important; min-height:20% !important; max-height:20% !important; }
.height-50-pct { height:50% !important; min-height:50% !important; max-height:50% !important; }
.height-100-pct { height:100% !important; min-height:100% !important; max-height:100% !important; }

.auto-height { min-height:0vh !important; max-height:100vh !important; height:auto !important; }
.auto-width  { min-width:0vh !important; max-width:100vw !important; width:auto !important; }
.full-height { min-height:100%; }
.full-width  { min-width:100%; }

.vh-50 { height:50vh !important; }
.vh-60 { height:60vh !important; }
.vh-70 { height:70vh !important; }
.vh-80 { height:80vh !important; }

.aspect-h-phi { width:100%; height:auto; aspect-ratio:0.618 / 1; }
.aspect-w-phi { width:100%; height:auto; aspect-ratio:1.618 / 1; }
.aspect-16-9 { width:100%; height:auto; aspect-ratio:16 / 9; }
.aspect-1-1 { width:100%; height:auto; aspect-ratio:1 / 1; }



.scale-0-5 { transform:scale(0.5); }
.scale-1 { transform:scale(1); }
.scale-1-5 { transform:scale(1.5); }
.scale-2 { transform:scale(2); }
.scale-2-5 { transform:scale(2.5); }
.scale-3 { transform:scale(3); }

.opacity-1 { opacity:0.1 !important; }
.opacity-2 { opacity:0.2 !important; }
.opacity-3 { opacity:0.3 !important; }
.opacity-4 { opacity:0.4 !important; }
.opacity-5 { opacity:0.5 !important; }
.opacity-6 { opacity:0.6 !important; }
.opacity-7 { opacity:0.7 !important; }
.opacity-8 { opacity:0.8 !important; }
.opacity-9 { opacity:0.9 !important; }

.double-scroll { overflow:auto; overflow-y:hidden; }

.overflow-scroll { overflow-y:auto; position:relative; width:100%; height:100%; }
.stick-to-top { position:sticky; top:0; }

html.xlarge .hidden-xlarge,
html.large .hidden-large,
html.medium .hidden-medium,
html.small .hidden-small { display:none; }
html.small .checkbox-control { display:none !important; }
html.small .dt-item-controls { display:none !important; }
html.small .details-control  { display:none !important; }
html.small .dt-buttons { display:none !important; }
html.small .has-controls { display:none !important; }
html.small .hidden-small { display:none !important; }
html.small .header [data-role="button"] > i + span { display:none; }


.testing * { box-sizing:border-box; border:1px solid rgba(0,0,0,0.1); background:rgba(0,0,0,0.1); padding:0.8em 1em; width:auto; height:auto; overflow:auto; }

/* .hover-show-sibling { position:relative; cursor:pointer; }
.hover-show-sibling + * { position:absolute; z-index:10; box-shadow:var(--box-shadow); min-height:fit-content; white-space:nowrap; }
.hover-show-sibling + * > * { min-height:fit-content; white-space:nowrap; }
.hover-show-sibling:not(:hover) + * { display:none; } */


#template-rules:empty::after { display:block; content:'No rules have been added to this template'; margin-top:1em; }
#template-rules > details > summary { padding-right:1rem !important; }
/* #template-rules > details > summary { display:grid; grid-template-columns: auto 1fr auto; vertical-align:middle; padding:0px; }
#template-rules > details > summary::after { margin-right:0.5em; margin-top:0.5em; }
#template-rules > details > summary > * > .title { position:relative; display:flex; height:100%; align-items:center; align-content:center; } */

#template-assignees:empty::after { display:block; content:'You have not created any organizations'; }


#data-risk-calculation .active { color:var(--cavelo-green) }
#data-risk-configuration .row { padding:0.3em 0em; }
#data-risk-configuration div > input { position:relative; display:inline-block; padding:0px; }
#data-risk-configuration div.dollar:before { width:1em; height:1em; content:'$' } 
#data-risk-configuration div.dollar input { width:calc(100% - 2em); }
#data-risk-configuration div.percent:after { width:1em; height:1em; content:'%' } 
#data-risk-configuration div.percent input { width:calc(100% - 2em); }

#data-risk-configuration .row:hover { background-color:var(--cavelo-platnum-40); }
#data-risk-configuration .form-group > .form-group-wrapper.checkbox label { vertical-align:middle; margin:0; padding:0; }
#data-risk-configuration .form-group > .form-group-wrapper.checkbox input { vertical-align:middle; top:0; }



.empty-permissions:empty::before { content:'Select one or more sources for applicable parameters' }



/* .collapsable { position:relative; }
.collapsable .collapse-toggler { position:absolute !important; bottom:1em; left:1em; right:1em; } 
.collapsable .collapse { position:relative; overflow:hidden; }
.collapsable.collapsed .collapse { max-height:1em; }
.collapsable.collapsed .collapse:after { position:absolute; top:0; right:0; bottom:0; left:0; content:''; background-image: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,255)); overflow:hidden; }
 */


.bg-clouds:before,
.bg-rays:before { 
    position:absolute; 
    background-color:rgba(56,60,76,0.8);
    top:0; left:0; right:0; bottom:0; 
    content:''; 
}
.bg-clouds,
.bg-rays { background-size:cover !important; border-width:0px; }
.bg-clouds { background:var(--cavelo-background-clouds); }
.bg-rays { background:var(--cavelo-background-rays); }


ul.warnings {
    position:relative; 
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.warnings > li {
    position:relative; 
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-start;
}
ul.warnings > li::before { 
    position:relative; 
    margin: 0 0.5rem 0 0;
    padding: 0;
    content:'\26A0';
    font-size:1.5em;
}

ul.simple { margin:0; padding:0; list-style-position: inside; }

.offset-child {
    /* --child-pad:calc(var(--child-pad) + '1em'); */
    padding-left:var(--child-pad);
    --child-pad:calc(var(--child-pad) + '1em');
}

*:not(:hover) .hide-unless-hovered {
    display:none;
}

*.hide-empty:empty { display:none !important; }


#cv-maximized:empty { display:none !important; }
#cv-maximized {
    display:block;
    position:fixed;
    z-index:1000;
    top:0; left:0; right:0; bottom:auto;
    width:100vw;
    height:100vh;
    overflow:auto;
    padding:2rem;
    background-color:rgba(0,0,0,0.8)
}
#cv-maximized > * {
    width:auto !important;
    height:auto !important;
    padding:1rem !important;
}


.bubble,
.rbac-list {
    border:1px solid var(--cavelo-platinum);
    background-color:var(--cavelo-platinum-20);
    color:var(--cavelo-black);
    display:grid;
    position:relative;
    grid-template-columns:1fr;
    row-gap:0.2rem;
    padding:0.5rem;
    border-radius:0.5rem;
}
.rbac-list > div {
    display:grid;
    position:relative;
    font-size:1rem;
    grid-template-columns:15rem 2rem 1fr;
}
.rbac-list > div > * { display:flex; position:relative; min-height:1rem; align-items:flex-start; }
.rbac-list > div > *:nth-child(1) { font-size:1em; font-weight:600; }
.rbac-list > div > *:nth-child(2) { font-size:0.8em; font-weight:600; padding-top:0.2em; }




.search-wrapper {
    box-sizing:border-box;
    position:relative;
    display:grid;
    grid-template-columns: 20rem 2rem calc(100% - 22rem);
    align-items: start;
    justify-content: start;
}
.search-wrapper > .search-params { position:relative; }
.search-wrapper > .search-results { position:relative; }
.search-wrapper > .search-collapse {
    box-sizing:border-box;
    border:2px solid var(--cavelo-platinum-40);
    background-color:var(--cavelo-platinum-40);
    width:1rem;
    height:100%;
    margin:0rem 0.5rem;
    display:flex;
    align-items: start;
    justify-content:center;
    border-radius:0.5rem;
    align-content: center;
}
.search-wrapper > .search-collapse:after {
    box-sizing:border-box;
    margin-top:0.5rem;
    display:flex;
    align-items:start;
    /* align-items:center; */
    /* height:100%; */
    justify-content:center;
    border-radius:0.5rem;
    width:0.5rem;
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    content:'\f0d9';
}
.search-wrapper > .search-collapse:hover,
.search-wrapper.collapsed > .search-collapse:hover {
    border:2px solid var(--cavelo-green-20);
    background-color:var(--cavelo-platinum-60);
    cursor: pointer;    
}
.search-wrapper.collapsed { grid-template-columns: 0 1.5rem calc(100% - 1.5rem); }
.search-wrapper.collapsed > .search-params { width:0px !important; overflow:hidden; }
.search-wrapper.collapsed > .search-collapse { margin-left:0rem; background-color:var(--cavelo-platinum-40); border-color:var(--cavelo-orange-20); }
.search-wrapper.collapsed > .search-collapse:after { content:'\f0da'; color:var(--cavelo-orange); }




.dashboard-message-wrapper {
    --percentage:0%;

    position:absolute !important;
    top:4.5rem !important;
    right:1.5rem !important;
    width:auto; max-width:50vw;
    height:auto;
    display:grid;
    grid-template-columns:1fr;
    row-gap:0.5rem;
    justify-content:end;
    justify-items: end;
    z-index:999;
}
.dashboard-message-wrapper > div { 
    position:relative; 
    display:grid;
    grid-template-columns:auto auto;
    column-gap:0;
    width:fit-content;
    text-align:left;
    border-width:4px;
    border-radius:0.5rem;
    font-size:1.2rem;

    box-shadow: var(--box-shadow);
}
.dashboard-message-wrapper > div > .message {
    padding:1rem;
    position:relative;
    width:auto;
    display:flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
}
.dashboard-message-wrapper > div > .close { 
    padding-top:1rem;
    position:relative; width:auto;
    width:2rem; height:100%;
    display:flex; 
    align-items: flex-start;
    align-content: flex-start;
    justify-content:center;
    color:var(--cavelo-black-20);
    cursor:pointer;
}

.dashboard-message-wrapper > div > .close.auto-dismiss:before {
    position:absolute;
    content:' ';
    height:1em; width:1em;
    background: conic-gradient(var(--border-color) var(--percentage), transparent 0);
    border-radius: 50%;
    animation: timer linear;
    animation-duration:inherit;
    opacity:0.5;
}
.dashboard-message-wrapper > div:hover > .close:before,
.dashboard-message-wrapper > div:hover > .close:not(.auto-dismiss):before { opacity:0.2; }

.dashboard-message-wrapper > div:hover > .close:hover { color:var(--cavelo-black) }
.dashboard-message-wrapper > div:hover > .close:after,
.dashboard-message-wrapper > div > .close:not(.auto-dismiss):after {
    position:absolute;
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    content:'\f00d';
}



i[class*="cv-status-"] { 
    position:relative; 
    display:inline-block; 
    /* font-size:0.8em;  */
    min-width:1em; min-height:1em; 
    vertical-align:middle; 
    text-align:center; 
}
i[class*="cv-status-"]:before {
    position:relative;
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    content:'\f111';
} 
i[class*="cv-status-"].clickable:after { content:'\f059'; } 

i[class*="cv-status-"]:after { 
    position:relative; margin-left:-1em;
    font-family: "Font Awesome 6 Free";
    font-weight: 300;
    content:'\f111';
}
i.cv-status-orange:before { color:var(--cavelo-orange-40) }
i.cv-status-orange:after { color:var(--cavelo-orange) }
i.cv-status-green:before { color:var(--cavelo-green-40) }
i.cv-status-green:after { color:var(--cavelo-green) }
i.cv-status-gold:before { color:var(--cv-gold-light) }
i.cv-status-gold:after { color:var(--cv-gold-dark) }
i.cv-status-red:before { color:var(--cv-accent-red-light) }
i.cv-status-red:after { color:var(--cv-accent-red-dark) }
i.cv-status-dark-grey:before { color:var(--cavelo-grey) }
i.cv-status-dark-grey:after { color:var(--cavelo-black) }
i.cv-status-grey:before { color:var(--cavelo-platinum) }
i.cv-status-grey:after { color:var(--cavelo-grey) }


i[class*="cv-health-"] { 
    position:relative; 
    display:inline-block; 
    /* font-size:0.8em;  */
    min-width:1em; min-height:1em; 
    vertical-align:middle; 
    text-align:center; 
}
i[class*="cv-health-"]:before {
    position:relative;
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    content:'\f004';
} 
i[class*="cv-health-"]:after { 
    position:relative; margin-left:-1em;
    font-family: "Font Awesome 6 Free";
    font-weight: 300;
    content:'\f004';
}
i.cv-health-orange:before { color:var(--cavelo-orange-40) }
i.cv-health-orange:after { color:var(--cavelo-orange) }
i.cv-health-green:before { color:var(--cavelo-green-40) }
i.cv-health-green:after { color:var(--cavelo-green) }
i.cv-health-gold:before { color:var(--cv-gold-light) }
i.cv-health-gold:after { color:var(--cv-gold-dark) }
i.cv-health-red:before { color:var(--cv-accent-red-light); content:'\f21e'; margin-left:-0.1em; }
i.cv-health-red:after { color:var(--cv-accent-red-dark); margin-left:-1.05em; }
i.cv-health-dark-grey:before { color:var(--cavelo-grey) }
i.cv-health-dark-grey:after { color:var(--cavelo-black) }
i.cv-health-grey:before { color:var(--cavelo-platinum) }
i.cv-health-grey:after { color:var(--cavelo-grey) }


.tooltip-popup .row { row-gap:0; column-gap:0; padding-top:0; padding-bottom:0; }

summary[data-icon="check"]:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    content:'\f058';
    margin-right:0.5rem; 
    color:var(--cavelo-green);
}
summary[data-icon="xmark"]:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    content:'\f057';
    margin-right:0.5rem; 
    /* color:var(--cavelo-platinum); */
}

/* .condition-and,
.condition-or {
    position:relative;
    padding-left:0.5em;
    border-left:2px solid var(--cavelo-platinum);
} */

.condition-or > .rule:before,
.condition-and > .rule:before {
    content:" And";
    position:absolute;
    display:block;
    color:var(--cavelo-grey);
    top:2rem;
    width:1.8rem;
    text-align:center;
    font-weight:bold;
    font-size:0.7em;
}
.condition-or > .rule:before {
    content:" Or"
}

/* .condition-or[readonly="true"] > .rule { margin-bottom:1.5em !important; }
.condition-or[readonly="true"] > .rule:last-child { margin-bottom:0 !important; }
.condition-or[readonly="true"] > .rule:before { width:4em; content:"- Or -"; top:calc(100% + 0.5em); }
.condition-or[readonly="true"] > .rule:last-child:before { display:none; }

.condition-and[readonly="true"] > .rule { margin-bottom:1.5em !important; }
.condition-and[readonly="true"] > .rule:last-child { margin-bottom:0 !important; }
.condition-and[readonly="true"] > .rule:before { width:4.5em; content:"- And -"; top:calc(100% + 0.5em); }
.condition-and[readonly="true"] > .rule:last-child:before { display:none; } */

/* .search-wrapper >  */
.search-results { min-height:70vh; height:100%; }

*:not(:hover) > .show-on-hover { display:none; }

.clickable:not([disabled]):hover i,
.clickable:not([disabled]):focus i,
.clickable:not([disabled]):hover img.logo,
.clickable:not([disabled]):focus img.logo,
.clickable:not([disabled]):hover [data-icon]:before,
.clickable:not([disabled]):focus [data-icon]:before { transform:scale(1.2); animation-name:none !important; } 



[data-role="order"] > div:first-child { 
    display:grid; 
    position:relative;
    grid-template-columns:1fr auto;
    /* overflow:hidden; */
}
[data-role="order"] > div:first-child > [data-role="dropdown"] { margin:0; padding:0; top:0; border-width:0; box-sizing:content-box; }
[data-role="order"] > div:first-child > [data-role="dropdown"] > [data-role="button"] { margin:0; padding:0; border-top-width:0; border-right-width:0; box-sizing:content-box; }

[data-role="order"] > div:last-child { 
    display:block; 
    position:relative;
    
}


.detail-card { 
    /* radius-small */
    --border-radius: 0.5em;
    /* border-radius */
    border-radius: var(--border-radius) !important;
    /* box-shadow */
    box-shadow: var(--box-shadow);
}

.colgaps,
.colgap-small { column-gap:1em !important; }
.rowgaps,
.rowgap-small { row-gap:1em !important; }
.colgap-xs { column-gap:0.5em !important; }
.rowgap-xs { row-gap:0.5em !important; }