[data-role="panel"] { 
    position:relative; 
    padding:1em; 
    width:100% !important; 
    max-width:100% !important; 
    border-radius:var(--border-radius);
    height:max-content;
}

[data-role="panel"] > .content { 
    position:relative;
    display:grid; 
    grid-template-rows:auto 1fr;
    align-content:flex-start;
    height:100%; 
    width:100%; 
    max-width:100%; 
    box-sizing:border-box; 
}

[data-role="panel"] > .content > .header { 
    position:relative; 
    display:flex; 
    border-bottom:2px solid var(--cavelo-green-20) !important; 
    width:100%; 
    max-width:100%; 
    padding-bottom:0.5em;
}

[data-role="panel"] > .content > .header > * { position:relative; display:inline-block; margin:0em; padding:0em; }
[data-role="panel"] > .content > .header > *:empty { display:none; }
[data-role="panel"] > .content > .header > h2 { 
    font-size:1.8rem;
    font-weight:600;
    white-space:nowrap; 
    display:flex;
    flex-direction:row;
    justify-content:left;
    align-items:center;
    align-content:center;
    flex-wrap:nowrap;
}

[data-role="panel"] > .content > .header > h2 > * { display:inline-block; margin-right:0.5em; }
[data-role="panel"] > .content > .header > h2 > small { width:fit-content; height:1em;  }
[data-role="panel"] > .content > .header > h2 > small:empty { display:none !important; margin:0 !important; }
[data-role="panel"] > .content > .header > .menu {
    position:relative;
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
    display:flex;
    flex-direction:row;
    justify-content:right;
    align-items:center;
    align-content:center;
    flex-wrap:nowrap;
    min-height:3em;
}
[data-role="panel"] > .content > .header > .menu > * { position:relative; margin-left:1em !important; }
[data-role="panel"] > .content > .body {
    display:block;
    position:relative;
    box-sizing:border-box;
    top:0;
    bottom:0;
    left:0; right:0;
    height:auto;
    min-height:100px;
    height:100%;
    max-width:100%;
    /* width:100%; */
    /* max-width:100%; */
    /* overflow-y: visible; */
    /* overflow-x: visible; */
    overflow-x:auto;
}

[data-role="panel"].grey .header { border-color: var(--cavelo-grey); }
[data-role="panel"].white .header { border-color: var(--cavelo-grey); }
[data-role="panel"].inverse .header { border-color:inherit; }


[data-role="panel"].small > .content > .header > h2 { font-size:1rem; }
[data-role="panel"].small > .content > .header > .menu { min-height:1em; }


[data-role="panel"].stretch  { height:-webkit-fill-available !important; }
[data-role="panel"].stretch > .content > .body { height:-webkit-fill-available !important; overflow:unset; }
[data-role="panel"].stretch > .content > .body > canvas:only-child { width:100%; height:100%; }



.search-wrapper > .search-results > [data-role="panel"] { height:100%; }