/* CAVELO-DASHBOARD-FRAME
 * Defines the specific layout parameters of the dashboard areas
 * Specify viewport sizing against html tag (not body tag)
 * Colors here are acceptable (as long as specific to frame)
 * Layout here are acceptable (as long as specific to frame)
 * 
 * Curtain          (#cavelo-curtain)
 * Aside Menu       (#cavelo-menu)
 * Section Content  (#cavelo-page)
 * Header Menu      (#cavelo-page-menu)
 * Main Content     (#cavelo-page-content)
 * Footer Menu      (#cavelo-page-footer)
 *
 * Alerts           (#dashboard-alert)
 */


/*** CURTAIN */
#cavelo-curtain {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    opacity:1;
    z-index:99999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow:hidden;
    font-size:2vw;
    font-weight:700;
    color:var(--cavelo-white);
    border-width:0px !important;
    background:var(--cavelo-navy-green-corner) !important;
    outline:none !important;
}
/* #cavelo-curtain::before {
    position:absolute;
    box-sizing:border-box;
    top:0; right:0; bottom:0; left:0;
    background-color: var(--cavelo-navy);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    background-clip: padding-box;
    filter: invert(55%) sepia(0%) saturate(1096%) hue-rotate(199deg) brightness(88%) contrast(84%);
    opacity:0.5;
    content:'';
    border-width:0px !important;
    outline:none !important;
} */
#cavelo-curtain > div { text-align:center; opacity:1; z-index:1; }
#cavelo-curtain > div > * { display:block; }
#cavelo-curtain > div > img { font-size:4em; margin:0px; margin-bottom:1rem; width:25vw; }
#cavelo-curtain > div > p { font-size:1em; margin:0px; }
#cavelo-curtain.open { opacity:0; z-index:-1; transition: opacity 1s, z-index 1s; }
#cavelo-curtain.open > div { opacity:0; transition: opacity 0.5s; }

/*** ASIDE MENU */
#cavelo-menu {width:200px;padding:0;margin:0;height:100vh;border:0px;z-index:10;box-shadow: var(--box-shadow);}
#cavelo-menu .brand { padding:1em; vertical-align:middle; margin-bottom:1em; } 
#cavelo-menu .brand > * { height:auto; display:inline-block; vertical-align:middle; } 
#cavelo-menu .brand #OemImageMenuText { width:100%; display:block; }
#cavelo-menu .brand #OemImageMenuIcon { width:50%; display:none; margin:0 auto !important; }

#cavelo-menu .menu-group { padding:1em 0; }
#cavelo-menu .menu-group > a,
#cavelo-menu .menu-group > .subtitle { padding:0 1em; font-size:1em; }
#cavelo-menu .menu-group .subtitle { font-variant-caps: all-petite-caps; font-weight:900; font-stretch: expanded; letter-spacing: 0.1em; }
#cavelo-menu .menu-group > a { opacity:0.7; color:var(--cavelo-platinum); padding:0.5em 1em;width:100%;box-sizing:border-box;background-color:rgba(240,240,240,0.05);margin-bottom:2px;}
#cavelo-menu .menu-group > a > i.fas:first-child { display:inline-block; width:1.5em; text-align:center; opacity:0.5; 
    /*SPECIAL*/
    display:none;
}
#cavelo-menu .menu-group > a.active { opacity:1; color:var(--cavelo-white); background-color:rgba(240,240,240,0.2); }
#cavelo-menu .menu-group > a[href].active { color:var(--cavelo-white); border-right:4px solid var(--cavelo-green); }
#cavelo-menu .menu-group > a > i.fas.fa-caret-right { color:var(--cavelo-green); text-align:right; opacity:0.5; }
#cavelo-menu .menu-group > a > i.fas.fa-caret-down { color:var(--cavelo-green); text-align:right; opacity:1; }
#cavelo-menu .menu-group > a:hover { opacity:1; color:var(--cavelo-white); background-color:rgba(240,240,240,0.1); }
#cavelo-menu .menu-group > a.active > i.fas:first-child,
#cavelo-menu .menu-group > a:hover > i.fas:first-child { opacity:1; }


#cavelo-menu.small { width: 80px; }
#cavelo-menu.small .brand #OemImageMenuText { display:none; }
#cavelo-menu.small .brand #OemImageMenuIcon { width:100%; display:block; }
#cavelo-menu.small .menu-group .subtitle { display:none; }
#cavelo-menu.small .menu-group a > i.fas:first-child { display:inline-block; font-size:2em; width:100%; }
#cavelo-menu.small .menu-group a > span { display:none; }
#cavelo-menu.small .menu-group a > i.fas.fa-caret-right { color:var(--cavelo-green); text-align:right; opacity:0.5; bottom:50%; transform: translate(150%, 50%); opacity:0.5;  }
#cavelo-menu.small .menu-group a > i.fas.fa-caret-down { color:var(--cavelo-green); text-align:right; opacity:0.5; bottom:50%; transform: translate(100%, 50%); opacity:1; }

#cavelo-menu.hidden { display:none; }

#cavelo-menu nav::-webkit-scrollbar { display: none; }
#cavelo-menu nav {
    height:100vh; overflow-y:auto; overflow-x:hidden;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}  
#cavelo-menu nav .nav-spacer { height:0px; }

#cavelo-menu .menu-group > a.submenu-trigger + .submenu { 
    position:relative; 
    display:none; 
    overflow:hidden; 
    padding:0px; 
    margin:0px; 
    transition:visibility 2s, opacity 2s, max-height 0.25s; 
    background-color:transparent !important; 
    visibility:visible; opacity:1; max-height:100vh;
    margin-bottom:2px;
    transition:visibility 0s, opacity 1s, max-height 1s;
    border-color:var(--cavelo-green-40);
}
#cavelo-menu .menu-group > a.submenu-trigger.open + .submenu { 
    display:block;
}   

#cavelo-menu .menu-group .submenu > a { position:relative; }
#cavelo-menu .menu-group .submenu > a:last-child { margin:0px !important; }
#cavelo-menu .menu-group .submenu > a .arrow.right { 
    position:absolute; left:-8px; top:0; height:0; width:0; 
    border:1em solid transparent; border-left-color:var(--cavelo-platinum); 
    border-right:0px;
}


#cavelo-menu div.submenu > a { font-size:0.9em; padding:0.5em 1em; width:100%; box-sizing:border-box; background-color:rgba(240,240,240,0.05); margin-bottom:2px; }
#cavelo-menu div.submenu > a > i.fas,
#cavelo-menu div.submenu > a > i.fa-solid { display:inline-block; width:1em; margin-right:1em; text-align:center; 
    /*SPECIAL*/
    display:none;
}
#cavelo-menu div.submenu > a.active { background-color:rgba(240,240,240,0.1); border-right:4px solid var(--cavelo-green); }

#cavelo-menu div.submenu > a > * { color:var(--cavelo-platinum); opacity:0.7; }
#cavelo-menu div.submenu > a:hover > * { color:var(--cavelo-white); opacity:1; }
#cavelo-menu div.submenu > a.active > * { color:var(--cavelo-white); opacity:1; }

#cavelo-menu.small div.submenu a { text-align:center; }
#cavelo-menu.small div.submenu a > i.fas:first-child { font-size:1.5em; width:100%; margin-right:0; }
#cavelo-menu.small div.submenu a > span { display:none; }

html.xlarge #cavelo-menu.large { width:200px; }
html.xlarge #cavelo-menu.large + #cavelo-page { left:200px; right:0; }
html.xlarge #cavelo-menu.small { width:60px; }
html.xlarge #cavelo-menu.small + #cavelo-page { left:60px; right:0; }

html.large #cavelo-menu.large { width:160px; }
html.large #cavelo-menu.large + #cavelo-page { left:160px; }
html.large #cavelo-menu.small { width:60px; }
html.large #cavelo-menu.small + #cavelo-page { left:60px; }

html.medium #cavelo-menu.large { top:4.5em; width:160px; }
html.medium #cavelo-menu.large + #cavelo-page { left:0; }
html.medium #cavelo-menu.small { top:4.5em; width:60px; }
html.medium #cavelo-menu.small + #cavelo-page { left:0; }

html.small #cavelo-menu nav .nav-spacer { height:8em; }
html.small #cavelo-menu.large { top:0; width:160px; }
html.small #cavelo-menu.large + #cavelo-page { left:0; right:0; }
html.small #cavelo-menu.small { top:0; width:60px; }
html.small #cavelo-menu.small + #cavelo-page { left:0; right:0; }

/*** PAGE WRAPPER */
#cavelo-page {
    z-index:5; 
    position:fixed;
    padding:0em;
    margin:0em;
    box-sizing:border-box;
    left:200px;
    /* width:calc(100vw - 200px);  */
    top:0;
    right:0;
    height:100vh;
    border:0px;

    background:var(--cavelo-background-clouds);
    background-size:cover;
}
#cavelo-page:before {
    position:absolute;
    box-sizing:border-box;
    top:0; right:0; bottom:0; left:0;
    background-color:var(--cavelo-navy);
    opacity:0.95;
    content:'';
}
#cavelo-menu.hidden + #cavelo-page { left:0; right:0; }


/*** PAGE MENU */
#cavelo-page-menu {
    position:relative;
    padding:0.5em !important;
    text-align:right;
    vertical-align:middle;
    min-height:2.5em;
    box-shadow: var(--box-shadow);
    z-index:100;
}
#cavelo-page-menu > div:first-child { display:block; float:left; }
#cavelo-page-menu #collapse > * { display:inline-block; position:relative; vertical-align:middle; }
#cavelo-page-menu .collapse-menu { display:inline-block; position:relative; vertical-align:middle; }

#cavelo-page-menu .page-menu {display:inline-block;text-align:left;}
#cavelo-page-menu .page-menu > [data-role="dropdown"] > button > i:first-child { display:none; }
#cavelo-page-menu .page-menu > [data-role="dropdown"] > button > * { margin:0 !important; }


#cavelo-page-menu .page-menu > [data-role="dropdown"] > .menu { min-width:18rem; }
#cavelo-page-menu .page-menu > [data-role="dropdown"] > .menu > .row {box-sizing: border-box;margin:0px !important;border-width:0px !important;}
#cavelo-page-menu .page-menu > [data-role="dropdown"] > .menu > .filter { box-sizing:border-box; border:0px; width:100%; border-bottom:1px solid; border-color:inherit; }
#cavelo-page-menu .page-menu > [data-role="dropdown"] > .menu > .filter [data-role="input"] { margin-bottom:0px; }
#cavelo-page-menu .page-menu > [data-role="dropdown"] > .menu > .filter input { box-sizing:border-box; border:0px; width:100%; padding:0.5em 1em; }
/* #cavelo-page-menu .page-menu > [data-role="dropdown"] > .menu [data-role="button"] {
    padding-top:0px !important;
    padding-bottom:0px !important;
    line-height:3em;
} */
#cavelo-page-menu .page-menu > [data-role="dropdown"] > .menu a[data-role="button"] {
    line-height:3em;
    justify-content: flex-start;
    white-space:nowrap;
    padding-top:0px;
    padding-bottom:0px;
}
#cavelo-page-menu .page-menu > [data-role="dropdown"] > .menu [data-role="button"] > * { height:auto; }


html.small #cavelo-page-menu { border:0; z-index:999; }
html.small #cavelo-page-menu .page-menu [data-role="dropdown"] > .menu { 
    z-index:999;
    position:fixed; 
    top:4.2em; right:0px; left:0px;
    max-height:50vh;
}


/*** PAGE CONTENT */
#cavelo-page-content {
    position:relative;
    height:calc(100vh - 7em);
    padding:0px;
    border:0px;
    overflow-y:auto;
    overflow-x:hidden;
    width:100% !important;
}
#cavelo-page-content > .row {padding:2em;}

html.xlarge #cavelo-page-content { height:calc(100vh - 7em); }
html.large #cavelo-page-content { height:calc(100vh - 7em); }
html.medium #cavelo-page-content { height:calc(100vh - 7em); }
html.small #cavelo-page-content { height:calc(100vh - 7.5em); }
html.small #cavelo-page-content { height:calc(100vh - 8.5em); }

html.xlarge .max-window { max-height:calc(100vh - 11.5em); }
html.large .max-window { max-height:calc(100vh - 11.5em); }
html.medium .max-window { max-height:calc(100vh - 11.5em); }
html.small .max-window { max-height:calc(100vh - 13em); }


/*** PAGE FOOTER */
#cavelo-page-footer {
    position:relative;
    bottom:0;
    left:0;
    right:0;
    width:auto;
    padding:0.7em !important;
    text-align:right;
    margin:0px;
    box-shadow: var(--box-shadow);
    z-index:10;
}
#cavelo-page-footer > small > .inline-separator {
    display:inline-block;
    padding-left:0.5em; padding-right:0.5em;
}

html.small #cavelo-page-footer { text-align:center; padding:0.5em 1em 1em 1em !important; }
html.small #cavelo-page-footer .inline-separator:nth-child(2) { display:block; opacity:0; width:0; height:0; }



/*** PAGE ALERTS */
#dashboard-alert {
    /* position:sticky;  */
    position:absolute;

    top:0; left:0; right:0; 

    display:grid;
    grid-template-columns: 4em auto 4em;
    width:calc(100% - 2em);
    padding-top:0em;
    padding-bottom:0em;
    padding-left:1em;
    padding-right:1em;
    margin-top:0;
    margin-bottom:0;
    margin-left:1em;
    margin-right:1em;
    overflow:hidden;

    border-width:0px !important;
    max-height:0px;
    z-index:99;
}

#dashboard-alert.open-down { 
    /* position:sticky;  */
    top:1em;
    padding-top:1em;
    padding-bottom:1em;
    border-width:2px !important;
    max-height:fit-content;

    box-shadow: var(--box-shadow);
}


/* #dashboard-alert + .cv-bg { 
    margin-top:0;
} */

#dashboard-alert > * { 
    overflow:hidden !important;
    position:relative; 
    display:block; 
    width:100%; 
    max-height:0px;
}

/* #dashboard-alert.open-down + .row:not(.cv-bg) { 
    margin-top:1em;
}
#dashboard-alert.open-down + .cv-bg { 
    margin-top:2em; 
} */

#dashboard-alert.open-down > * {
    max-height:fit-content !important;
}

#dashboard-alert > * > i { margin:0px; }
#dashboard-alert > .icon { 
    position:relative;
    display:inline-block; 
    text-align:left; 
    font-size:2em; 
}
#dashboard-alert > .close { 
    position:relative;
    display:inline-block; 
    text-align:right; 
    cursor:pointer; 
    font-size:2em; 
}
#dashboard-alert > .close:hover > * { color:var(--cavelo-green); }
#dashboard-alert > .content {
    position:relative;
    display: flex;
    align-items: center;

    text-align:left;
    line-height:1.2;
    font-size:1.2em;
    color:var(--cavelo-black);
    vertical-align: middle;
    /* max-height:100%; */
    max-height:fit-content !important;
}

/* #dashboard-alert.red { box-shadow: var(--cv-accent-red-dark) 0px 0px 20px 0px; }
#dashboard-alert.orange { box-shadow: var(--cv-orange) 0px 0px 20px 0px; }
#dashboard-alert.gold { box-shadow: var(--cv-gold) 0px 0px 20px 0px; }
#dashboard-alert.blue { box-shadow: var(--cv-blue) 0px 0px 20px 0px; } */


/*** EXTRAS */
img.logo { height:2em; width:auto; vertical-align:middle; }
img.logo + span { margin-left:0.5em; vertical-align:middle; }
img.logo.big { height:4em; vertical-align:middle; }
img.logo.small { height:1.5em; vertical-align:middle; }

#mobile-collapse { display:none; }
body.small #mobile-collapse { display:block; }

.matomoHsr #cavelo-menu nav a > i { min-height:20px !important; }
html.small  .matomoHeatmap body,
html.small  .matomoHeatmap #cavelo-page,
html.small  .matomoHeatmap #cavelo-page-content { min-height: 2000px !important }

html.pdf { 
    height:auto !important; 
    overflow:auto !important; 
    background-color:var(--cavelo-black) !important;
    min-height:100vh !important;
}
html.pdf body { 
    position:relative;
    height:auto !important; 
    overflow:auto !important; 
    min-height:100vh !important;
}
html.pdf #cavelo-menu,
html.pdf #cavelo-page,
html.pdf #cavelo-page-content { 
    position:relative !important; 
    height:auto !important; 
    min-height:90vh;
}
html.pdf #cavelo-menu { position:absolute !important; }
html.pdf #cavelo-menu.large + #cavelo-page { width:calc(100% - 200px) !important; }
html.pdf #cavelo-menu.small + #cavelo-page { width:calc(100% - 60px) !important; }
html.pdf #cavelo-menu.hidden + #cavelo-page { width:100% !important; }
html.pdf [data-role="modal"] { position:absolute; bottom:0; height:100%; }


#back-to-top {
    cursor:pointer;
    font-size:1em;
    position:fixed;
    bottom:30px;
    right:30px;
    background-color:var(--cavelo-navy);
    opacity:0;
    transition:opacity 0.5s;    
    z-index:-1;
}
#back-to-top > * { display:block; color:var(--cavelo-white); padding:0.8em 1em; text-decoration:none !important; }
#back-to-top.active { opacity:0.4; transition:opacity 1s; z-index:999; text-decoration:none !important; }
#back-to-top.active:hover { opacity:1; transition:opacity 1s; text-decoration:none !important; }


#cavelo-page-content > .fullpage { height:100% !important; }



/******/
.cv-tool { 
    position:relative; 
    display:grid;
    height:100%; width:100%;
    margin:0; padding:0;
    min-height:14em;
    box-sizing:border-box;
    grid-template-columns: 200px 1fr;
    column-gap:0px;
    row-gap:0px;
}

.cv-tool > aside {
    position:relative;
    display:block;
    box-sizing:border-box;
}

.cv-tool > aside > [data-role="button"] {
    display:block;
    width:100%;
    margin:0em;
    margin-bottom:2px;
}
.cv-tool > aside > .title,
.cv-tool > aside > .subtitle { font-size:1em; padding:0 1em; margin:2em 0 0.5em 0; } 
.cv-tool > aside > .subtitle { font-variant-caps: all-petite-caps; font-weight:normal; font-stretch: expanded; letter-spacing: 0.1em; }

.cv-tool > aside > [data-role="button"] > i { color:var(--cavelo-green); }
.cv-tool > aside > [data-role="button"] > span { color:var(--cavelo-white); }
.cv-tool > aside > [data-role="button"]:hover { background-color:rgba(240,240,240,0.1); }
.cv-tool > aside > [data-role="button"].active,
.cv-tool > aside > [data-role="button"]:active,
.cv-tool > aside > [data-role="button"]:focus { 
    border-right:4px solid var(--cavelo-green);
    background-color:rgba(240,240,240,0.2);
}

.cv-tool > main {
    position:relative;
    display:block;
    box-sizing:border-box;
}

.cv-tool > main > header {
    position:relative;
    /* display:flex; */
    height:calc(3em - 4px); 
    width:100%;
    box-sizing:border-box;
    /* justify-content:flex-start;
    align-items: center;
    align-content: center; */
}

.cv-tool > main > section {
    position:relative;
    display:flex;
    height:100%;
    max-height:calc(100% - 6em + 8px);
    box-sizing:border-box;
}

.cv-tool > main > footer {
    position:absolute;
    display:flex;
    height:calc(3em - 4px); width:100%;
    box-sizing:border-box;
    bottom:0;
    justify-content:flex-start;
    align-items: center;
    align-content: center;
}


.cv-tool > main > header:empty { display:none; visibility:hidden; max-height:0px !important }
.cv-tool > main > header:empty ~ section,
.cv-tool > main > header.hidden ~ section {
    max-height:calc(100% - 3em + 4px) !important;
}

.cv-tool > main > footer:empty { display:none; visibility:hidden; max-height:0px !important }
.cv-tool > main > footer:empty ~ section,
.cv-tool > main > footer.hidden ~ section {
    max-height:calc(100% - 3em + 4px) !important;
}

.cv-tool > main > header:empty + footer:empty + section,
.cv-tool > main > header:empty + footer.hidden + section,
.cv-tool > main > header.hidden + footer:empty + section,
.cv-tool > main > header.hidden + footer.hidden + section {
    max-height:100% !important;
}


/* If at base body, stretch to window */
body > .cv-tool { height:100vh !important; width:100vw !important; }

/* small aside */
.cv-tool > aside.small { width:4em !important; }
.cv-tool > aside.small + main { left:4em !important; }
.cv-tool > aside.small > .title { display:none; } 
.cv-tool > aside.small > .subtitle { display:none; } 
.cv-tool > aside.small > [data-role="button"] { text-align:center; }
.cv-tool > aside.small > [data-role="button"] > i { font-size:1em; }
.cv-tool > aside.small > [data-role="button"] > span { display:none; }

/* empty aside */
.cv-tool > aside:empty,
.cv-tool > aside.hidden {  display:none; }
.cv-tool > aside:empty + main,
.cv-tool > aside.hidden + main { left:0 !important; }



#cavelo-page-menu .page-menu > [data-role="dropdown"] > button > span: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;
}
#cavelo-page-menu .page-menu > [data-role="dropdown"] > button.open > span:after,
#cavelo-page-menu .page-menu > [data-role="dropdown"] > button.active > span:after {
    transform:rotate(270deg);
    transition:transform 0.25s ease-out;
}

.submenu-trigger:before { 
    position:relative;
    display:inline-flex;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0da";
    color:var(--cavelo-green);
    margin-left:0.5rem;
    float:right;
    transform:rotate(0deg);
    transition:transform 0.25s ease-out;
}

.submenu-trigger.open:before {
    transform:rotate(90deg);
    transition:transform 0.25s ease-out;
}