[data-role="tabs"] { width:100%; padding:0px; margin:0px; box-sizing:border-box; position:relative; z-index:10; max-width:100% !important; }
[data-role="tabs"] > .menu { border:none; width:100%; padding:0px; margin:0px; box-sizing:border-box; position:relative; max-width:100% !important; }
[data-role="tabs"] > .menu > [tabindex] {
    position:relative;
    display: inline-flex;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    /* border:1px solid inherit;  */
    /* transparent; */
    padding:0.5em 1em;
    margin-right:2px;
    /* margin-right:1px; */
    z-index:100;
    box-sizing:content-box;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    min-height:1.5rem;
}

[data-role="tabs"] > .menu > [tabindex]:hover { cursor:pointer; }
[data-role="tabs"] > .menu > [tabindex].active:hover,
[data-role="tabs"] > .menu > [tabindex][disabled]:hover { cursor: default; }


[data-role="tabs"][data-direction="horizontal"] > .menu > div:not(.active) { border-bottom-width:0 }
[data-role="tabs"][data-direction="horizontal"] > .menu > div.active::after { 
    position:absolute; display:block; content:""; background-color:inherit; left:0; right:0; top:100%; height:2px; 
}

/* [data-role="tabs"][data-direction="horizontal"] > .menu > div:not(.inverse):not(.active) { border-color:transparent !important; } */


[data-role="tabs"][data-direction="vertical"] > .menu > div { 
    display:inline-grid;
    grid-template-columns:calc(100% - 1.5rem) 1.5rem;
    grid-auto-flow: column dense;
    padding:0.5em; 
}

[data-role="tabs"] > .menu > div i {background-color:inherit;vertical-align: baseline;}
[data-role="tabs"] > .menu > div i.fa-trash-alt { margin:0; margin-left:0.5em; display:none; }
/* [data-role="tabs"] > .menu > * i.fa-trash-alt:hover { color:var(--cv-accent-red-medium); } */
[data-role="tabs"] > .menu > div:hover i.fa-trash-alt { display:inline-block; }

[data-role="tabs"] > .menu > div i.fa-plus { margin:0; }
[data-role="tabs"] > .menu > div.active * { font-size:1.1rem; font-weight:600; }
[data-role="tabs"] > .menu > div.active i { font-size:1rem; }
[data-role="tabs"] > .menu > div.block { width:calc(100% - 2em) }

[data-role="tabs"] > .content {
    position:relative;
    width:100%;
    padding:0px;
    margin:0px;
    z-index:8;
    /* border:none; */
    border-radius:var(--border-radius);
    border-top-left-radius:0;
    overflow: visible;
    max-width:100% !important;
}
[data-role="tabs"] > .content > * { 
    padding:1em; 
    border-radius:var(--border-radius);
    border-top-left-radius:0;
    overflow:visible;
}
[data-role="tabs"].max-window > .content { max-height:calc(100% - 2em); overflow-y:auto; }

[data-role="tabs"] > .content:empty { content:'No content' }
[data-role="tabs"] > .content > div:empty { content:'No content' }

/* [data-role="tabs"] > .menu > div { margin-bottom:-1px; } */
/* [data-role="tabs"] > .menu > div.active { top:2px; padding-top:0.7rem; border-width:1px; border-bottom:var(--cavelo-white); } */
/* [data-role="tabs"] > .menu > div.white.active { border-color:var(--cavelo-platinum);} */
/* [data-role="tabs"] > .menu > div.grey.active { border-color:var(--cavelo-platinum); } */
/* [data-role="tabs"] > .menu > div.dark-grey.active { border-color:var(--cavelo-grey); } */
/* [data-role="tabs"] > .menu > div:not(.active) { border-width:1px; border-color:transparent; border-bottom-left-radius:0; border-bottom-right-radius:0;   } */
/* [data-role="tabs"] > .menu > div:not(.active) { border-color:transparent; } */

/* [data-role="tabs"] > .menu > div.white:not(.active) { border-color:var(--cavelo-platinum-60) !important; }
[data-role="tabs"] > .menu > div.white.active { border-color:var(--cavelo-platinum); }
[data-role="tabs"] > .content > div.white { border-color:var(--cavelo-platinum); }

[data-role="tabs"] > .menu > div.grey:not(.active) { border-color:var(--cavelo-white) !important; }
[data-role="tabs"] > .menu > div.grey.active { border-color:var(--cavelo-platinum); }
[data-role="tabs"] > .content > div.grey { border-color:var(--cavelo-platinum); } */
/* [data-role="tabs"] > .menu > div.grey { border-color:var(--cavelo-platinum); } */
/* [data-role="tabs"] > .menu > div.dark-grey { border-color:var(--cavelo-grey); } */



[data-role="tabs"][data-direction="vertical"] { 
    display:grid; 
    grid-template-columns:13rem calc(100% - 13rem);
}
[data-role="tabs"][data-direction="vertical"] > .menu > div { 
    width:13rem; 
    box-sizing:border-box; 
    border-radius:0;
}

[data-role="tabs"][data-direction="vertical"] > .menu > div.active { top:0; border-color:transparent; z-index:110; box-shadow:rgba(0,0,0,0.2) 2px 0px 14px 0px; }
[data-role="tabs"][data-direction="vertical"] > .menu > div.active:first-child  { box-shadow:rgba(0,0,0,0.15) 2px 3px 5px 0px; }
[data-role="tabs"][data-direction="vertical"] > .menu > div.active:last-child   { box-shadow:rgba(0,0,0,0.15) 2px -3px 5px 0px; }
[data-role="tabs"][data-direction="vertical"] > .menu > div:not(.active) { box-shadow:inset rgba(0,0,0,0.15) -5px 0px 5px -5px; }

[data-role="tabs"][data-direction="vertical"] > .content,
[data-role="tabs"][data-direction="vertical"] > .content > * { z-index:120; border-top-right-radius:0; border-bottom-left-radius:0; }
/* [data-role="tabs"][data-direction="vertical"] > .content [data-role="tabs"] > .content,
[data-role="tabs"][data-direction="vertical"] > .content [data-role="tabs"] > .content > * { z-index:120; border-top-right-radius:0; border-bottom-left-radius:0; } */



[data-role="tabs"][data-direction="horizontal"] > .menu > [data-toggle].error-indicator::before {
    border:none;
    position:relative;
    display:inline-flex;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size:1rem;
    content:"\f06a" !important;
    color:var(--cavelo-orange);
    margin-right:0.5rem;
    padding:0;
    flex-direction:row;
    align-content:center;
    align-items:center;
    justify-content:flex-end;
}

[data-role="tabs"][data-direction="vertical"] > .menu > [data-toggle].error-indicator::after {
    border:none;
    position:relative;
    display:inline-flex;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size:1rem;
    content:"\f06a" !important;
    color:var(--cavelo-orange);
    margin-right:0.5rem;
    padding:0;
    flex-direction:row;
    align-content:center;
    align-items:center;
    justify-content:flex-end;
}


/* .fullpage > [data-role="tabs"][data-direction="horizontal"] { display:flex; flex-direction: column; } */
/* .fullpage > [data-role="tabs"][data-direction="horizontal"] > .content { height:-webkit-fill-available; } */
/* .fullpage > [data-role="tabs"][data-direction="horizontal"] > .content > [data-tabid] { min-height:100%; } */