/* 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; 
}

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; cursor:pointer; 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; }
details.normal > summary > * { display:inline; }
details.normal > summary > *:last-child { width:-webkit-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;
}

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


/** Combine fontawesome icons - stacking **/
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); } */

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

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; }

/*** Rows and columns */
.row[class*="col-"] {display: grid;row-gap:1em;column-gap:2em;width:100%;max-width:100%;}

.row.col-1 { grid-template-columns: 1fr; }
.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: flex;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[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 > .col { grid-column: span 1; }
.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-gap-0 { column-gap:0em !important; }
.row.col-gap-0-5 { column-gap:0.5em !important; }
.row.col-gap-1 { column-gap:1em !important; }
.row.col-gap-1-5 { column-gap:1.5em !important; }
.row.col-gap-2 { column-gap:2em !important; }

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; }

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

input, 
select, 
[contenteditable="true"], 
.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; margin-bottom:1em; }
.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:pointer; }
/* .form-group > .form-group-wrapper.checkbox > * { display:inline-block; width:auto; }
.form-group > .form-group-wrapper.checkbox > input { position:absolute; height:1.2em; width:1.2em; left:0; top:0.4em; }
.form-group > .form-group-wrapper.checkbox > label,
.form-group > .form-group-wrapper.checkbox > .controls > label { margin-left:2em; font-size:0.9em; padding-top:5px; } */
.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;}
.form-group > .form-group-wrapper:not(.checkbox) label { margin:0 !important; min-height:2.5em; display:inline-flex; justify-content:left; align-content: center; align-items: center; }

/* .form-group > [data-role="input"]:not(.checkbox) select[multiple] { height:10em !important; } */
.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:not(.checkbox) > input { width:auto; } */

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;
    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:block;
    position:absolute;
    width:auto;
    height:auto;
    white-space: nowrap;
    /* top:0; */
    /* bottom:0; */
    /* transform: translate(0, -50%); */
    background-color:var(--cavelo-platinum);
    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: translateX(calc(-100% - 20px)); */
    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: translateX(calc(100% + 20px)); */
    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 > .form-group-wrapper .form-error {
    border-color:var(--cavelo-orange-60) !important;
    background-color:var(--cavelo-orange-20) !important;
}

#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:1em !important; } */
#menu-user .form-group + .form-group { margin-top:0.5em; }

::-webkit-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; }

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; }
section#domains-and-subdomains details > summary > *.title { width:-webkit-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 */

[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:300px; width:100%; }

.text-bold { font-weight:bold; }
.text-italic { font-style:italic; }
.text-underline { text-decoration: underline; }
.text-top { vertical-align:top !important; }
.text-right { text-align:right !important; }
.text-left { text-align:left !important; }
.text-center { text-align:center !important; }
.text-middle,
.text-middle > * { vertical-align:middle !important; }
.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 { font-size:1.2em !important; }
.text-wrap { white-space:normal; word-wrap:break-word; }

.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;}
.float-right { float:right; } 
.no-point { cursor:default !important; }
.hover-me:hover { text-decoration:underline; }
.full-page { position:absolute; top:0; right:0; bottom:0; left:0; }
.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 { column-gap:0em !important; }
.norowgaps { row-gap: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; }

/** 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-normal { margin:1em !important; }
.margin-normal-top { margin-top:1em !important; }
.margin-normal-bottom { margin-bottom:1em !important; }
.margin-normal-right { margin-right:1em !important; }
.margin-normal-left { margin-left:1em !important; }

.margin-small { margin:0.8em !important; }
.margin-small-top { margin-top:0.8em !important; }
.margin-small-bottom { margin-bottom:0.8em !important; }
.margin-small-right { margin-right:0.8em !important; }
.margin-small-left { margin-left:0.8em !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; }


/** 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; }

.colgaps { column-gap:1em !important; }
.rowgaps { row-gap:1em !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-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-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-w-100 { min-width:100px !important; }
.min-w-150 { min-width:150px !important; }
.min-w-200 { min-width:200px !important; }

.max-w-100 { max-width:100px !important; }
.max-w-150 { max-width:150px !important; }
.max-w-200 { max-width:200px !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; }

.height-150 { display:inline-block; height:150px !important; min-height:150px !important; max-height:150px !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; }


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

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


.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; }

.overflow-scroll { max-height:100%; overflow-y:auto; }


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; }



#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 connectors 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; border-width:0px; }
.bg-clouds { background:var(--cavelo-background-clouds); }
.bg-rays { background:var(--cavelo-background-rays); }

.flex-grid {
    column-gap:1rem;
    row-gap:1rem;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-start;
    align-content:flex-start;
    justify-content:flex-start;
}

section.splash {
    position:absolute;
    box-sizing:border-box;
    top:0; right:0; bottom:0; left:0;
    background:var(--cavelo-background-rays);
    background-size:cover;
    color:var(--cavelo-white);    
    /* z-index:999; */
}
section.splash:before {
    position:absolute;
    box-sizing:border-box;
    top:0; right:0; bottom:0; left:0;
    background-color:var(--cavelo-navy);
    opacity:0.95;
    content:'';
}

body > section.splash { z-index:999; }

section.splash article.splash {
    position:relative;
    box-sizing:border-box;
    width: fit-content;
    height: fit-content;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    max-width:60vw;
    display:grid;
    grid-template-columns: 30vw 30vw;
    color:var(--cavelo-white);
}

section.splash form { 
    position:relative;
    box-sizing:border-box;
    width: fit-content;
    height: fit-content;
    text-align: center;
    /* margin:0 auto; */
    border-radius:4px;
    padding:1.5em !important;
    min-width:20em !important;
    max-width:25vw !important;
}

section.splash .logo { position:relative; display:flex !important; align-content:center; }
section.splash .logo > img { height:3em; width:auto;  }
section.splash .logo > div { height:100%; width:100%; font-size:1.5em; font-family:good-times, sans-serif !important; letter-spacing:0.1em !important; font-weight:lighter; padding-top:0.2em; }

section.splash article.splash h1 { font-size:5em; }
section.splash article.splash h2 { font-size:3em; }
section.splash article.splash p.lead { font-size:1.5em; }

section.splash input { 
    /* box-shadow:0 0 0 50px var(--cavelo-black) inset !important;
    -webkit-box-shadow:0 0 0 50px var(--cavelo-black) inset !important; */
    -webkit-text-fill-color: var(--cavelo-black) !important;
    color:var(--cavelo-black) !important;
}
input:-webkit-autofill,
input:-internal-autofill-selected,
section.splash input:-internal-autofill-selected,
section.splash input:-webkit-autofill {
    box-shadow:0 0 0 50px transparent inset !important;
    -webkit-box-shadow:0 0 0 50px transparent inset !important;
    -webkit-text-fill-color: var(--cavelo-navy) !important;
    color:var(--cavelo-navy) !important;
}