[data-role="button"] {
    text-align:left; 
    line-height:normal !important;
    appearance:none;
    position:relative;
    display:inline-flex;
    padding-left:1em; 
    padding-right:1em; 
    min-height:3em;
    min-width:3em;
    box-sizing:border-box; 
    border:1px solid transparent; 
    text-decoration:none; 
    outline:none;
    transition:background-color 0.3s, color 0.3s; 
    font-family:'Work Sans', sans-serif;
    font-weight:normal;
    font-size:1em;    
    font-stretch: 100%;
    font-style: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-weight: 400;
    letter-spacing: normal;
    text-indent: 0px;
    text-rendering: auto;
    text-shadow: none;
    text-transform: none;
    word-spacing: 0px;
    writing-mode: horizontal-tb;
    
    flex-direction:row;
    align-items:center;
    align-content:center;
    justify-content:center;

    color:var(--link-color) !important;
    background-color:var(--background-color) !important;
    border-color:var(--border-color) !important;
}

[data-role="button"].collapsed { min-height:1em !important; min-width:1em !important; }

[data-role="button"]:hover,
[data-role="button"]:focus { cursor:pointer; outline:none; text-decoration:none; transition:background-color 0.3s, color 0.3s; color:var(--link-color) !important; }

[data-role="button"]:hover > *,
[data-role="button"]:focus > * {
    color:inherit !important; 
}

[data-role="button"].xs { font-size:0.6rem; }
[data-role="button"].xs img.logo { width:0.6rem; }
[data-role="button"].xsmall { font-size:0.6rem; }
[data-role="button"].xsmall img.logo { width:0.6rem; }
[data-role="button"].small {font-size:0.8rem;}
[data-role="button"].small img.logo { width:0.8rem; }
[data-role="button"].medium { font-size:1rem; }
[data-role="button"].medium img.logo { width:1rem; }
[data-role="button"].large { font-size:1.2rem; }
[data-role="button"].large img.logo { width:1.2rem; }

[data-role="button"] > big { font-size:2rem; }
[data-role="button"] > big img.logo { width:2rem; }

small [data-role="button"].small { min-height:2em !important; min-width:2em !important; padding:0.5em 0.5em; }

[data-role="button"].red { --link-color:var(--cavelo-white); --background-color:var(--cv-accent-red-dark); --border-color: var(--cv-accent-red-dark); }
[data-role="button"].red:not([disabled]):hover,
[data-role="button"].red:not([disabled]):focus,
[data-role="button"].red.active { --link-color:var(--cv-accent-red-dark); --background-color:var(--cavelo-white); }


[data-role="button"].green { --link-color:var(--cavelo-white); --background-color:var(--cavelo-green); --border-color: var(--cavelo-green); }
[data-role="button"].green:not([disabled]):hover,
[data-role="button"].green:not([disabled]):focus,
[data-role="button"].green.active { --link-color:var(--cavelo-green); --background-color:var(--cavelo-white); }
[data-role="button"].orange { --link-color:var(--cavelo-white); --background-color:var(--cavelo-orange); --border-color: var(--cavelo-orange); }
[data-role="button"].orange:not([disabled]):hover,
[data-role="button"].orange:not([disabled]):focus,
[data-role="button"].orange.active { --link-color:var(--cavelo-orange); --background-color:var(--cavelo-white); }
[data-role="button"].navy { --link-color:var(--cavelo-white); --background-color:var(--cavelo-navy); --border-color: var(--cavelo-navy); }
[data-role="button"].navy:not([disabled]):hover, 
[data-role="button"].navy:not([disabled]):focus, 
[data-role="button"].navy.active { --link-color:var(--cavelo-navy); --background-color:var(--cavelo-white); }
[data-role="button"].blue { --link-color:var(--cavelo-white); --background-color:var(--cavelo-blue); --border-color: var(--cavelo-blue); }
[data-role="button"].blue:not([disabled]):hover, 
[data-role="button"].blue:not([disabled]):focus, 
[data-role="button"].blue.active { --link-color:var(--cavelo-blue); --background-color:var(--cavelo-white); }
[data-role="button"].white { --link-color:var(--cavelo-black); --background-color:var(--cavelo-white); --border-color: var(--cavelo-white); }
[data-role="button"].white:not([disabled]):hover, 
[data-role="button"].white:not([disabled]):focus, 
[data-role="button"].white.active { --link-color:var(--cavelo-black); --background-color:var(--cavelo-platinum); }
[data-role="button"].black { --link-color:var(--cavelo-white); --background-color:var(--cavelo-black); --border-color: var(--cavelo-black); }
[data-role="button"].black:not([disabled]):hover, 
[data-role="button"].black:not([disabled]):focus, 
[data-role="button"].black.active { --link-color:var(--cavelo-black); --background-color:var(--cavelo-white); }

[data-role="button"].grey { --link-color:var(--cavelo-black); --background-color:var(--cavelo-platinum); --border-color: var(--cavelo-platinum); }
[data-role="button"].grey:not([disabled]):hover,
[data-role="button"].grey:not([disabled]):focus, 
[data-role="button"].grey.active { --link-color:var(--cavelo-black); --background-color:var(--cavelo-white); }
[data-role="button"].dark-grey { --link-color:var(--cavelo-white); --background-color:var(--cavelo-grey); --border-color: var(--cavelo-white); }
[data-role="button"].dark-grey:not([disabled]):hover, 
[data-role="button"].dark-grey:not([disabled]):focus, 
[data-role="button"].dark-grey.active { --link-color:var(--cavelo-black); --background-color:var(--cavelo-white); --border-color: var(--cavelo-grey); }
/*!!V2*/
[data-role="button"].gold { --link-color:var(--cavelo-white); --background-color:rgba(0230,191,0,1); --border-color: var(--cv-gold); }
[data-role="button"].gold:not([disabled]):hover, 
[data-role="button"].gold:not([disabled]):focus, 
[data-role="button"].gold.active { --link-color:var(--cv-gold); --background-color:var(--cavelo-white); }
[data-role="button"].bright-blue { --link-color:var(--cavelo-white); --background-color:var(--cv-bright-blue); --border-color: var(--cv-bright-blue); }
[data-role="button"].bright-blue:not([disabled]):hover, 
[data-role="button"].bright-blue:not([disabled]):focus, 
[data-role="button"].bright-blue.active { --link-color:var(--cv-bright-blue); --background-color:var(--cavelo-white); }
[data-role="button"].vivid-blue { --link-color:var(--cavelo-white); --background-color:var(--cv-vivid-blue); --border-color: var(--cv-vivid-blue); }
[data-role="button"].vivid-blue:not([disabled]):hover, 
[data-role="button"].vivid-blue:not([disabled]):focus, 
[data-role="button"].vivid-blue.active { --link-color:var(--cv-vivid-blue); --background-color:var(--cavelo-white); }
[data-role="button"].vivid-cyan { --link-color:var(--cavelo-white); --background-color:var(--cv-vivid-cyan); --border-color: var(--cv-vivid-cyan); }
[data-role="button"].vivid-cyan:not([disabled]):hover, 
[data-role="button"].vivid-cyan:not([disabled]):focus, 
[data-role="button"].vivid-cyan.active { --link-color:var(--cv-vivid-cyan); --background-color:var(--cavelo-white); }
/*!!V2*/
[data-role="button"]:not([disabled]):hover i,
[data-role="button"]:not([disabled]):focus i,
[data-role="button"]:not([disabled]):hover img.logo,
[data-role="button"]:not([disabled]):focus img.logo,
[data-role="button"]:not([disabled]):hover [data-icon]:before,
[data-role="button"]:not([disabled]):focus [data-icon]:before { transform:scale(1.2); animation-name:none !important; } 
[data-role="button"]:not([disabled]):hover i.fa-spin,
[data-role="button"]:not([disabled]):focus i.fa-spin { animation-name:fa-spin !important; }

table.pulse-controls tr:hover td.controls [data-role="button"]:not([disabled]) i,
table.pulse-controls tr:focus td.controls [data-role="button"]:not([disabled]) i { animation-name:pulseIcon; animation-duration: 1s; animation-iteration-count: infinite; animation-iteration-count: alternate; } 
table.pulse-controls tr:hover td.controls [data-role="button"]:not([disabled]) img.logo,
table.pulse-controls tr:focus td.controls [data-role="button"]:not([disabled]) img.logo,
table.pulse-controls tr:hover td.controls [data-role="button"]:not([disabled]) [data-icon]:before,
table.pulse-controls tr:focus td.controls [data-role="button"]:not([disabled]) [data-icon]:before { animation-name:pulseIcon; animation-duration: 1s; animation-iteration-count: infinite; animation-iteration-count: alternate; } 


[data-role="button"].transparent,
[data-role="button"].transparent.active { 
    /*--link-color:var(--cavelo-black);*/ 
    --background-color:transparent; 
    --border-color:transparent; 
}

[data-role="button"].admin,
[data-role="button"].admin.active { --link-color:var(--cavelo-forest); --background-color:transparent; --border-color:transparent; }
[data-role="button"].admin:hover { --link-color:var(--cavelo-navy); font-weight:600 }


/* Buttons - inverse - color on hover */
[data-role="button"].inverse { --background-color:var(--cavelo-white); }
[data-role="button"].inverse.green { --link-color:var(--cavelo-green); --border-color: var(--cavelo-green); }
[data-role="button"].inverse.green:not([disabled]):hover,
[data-role="button"].inverse.green:not([disabled]):focus,
[data-role="button"].inverse.green.active { --background-color:var(--cavelo-green); --link-color:var(--cavelo-white); }
[data-role="button"].inverse.orange { --link-color:var(--cavelo-orange); --border-color: var(--cavelo-orange); }
[data-role="button"].inverse.orange:not([disabled]):hover,
[data-role="button"].inverse.orange:not([disabled]):focus,
[data-role="button"].inverse.orange.active { --background-color:var(--cavelo-orange); --link-color:var(--cavelo-white); }
[data-role="button"].inverse.navy { --link-color:var(--cavelo-navy); --border-color: var(--cavelo-navy); }
[data-role="button"].inverse.navy:not([disabled]):hover,
[data-role="button"].inverse.navy:not([disabled]):focus,
[data-role="button"].inverse.navy.active { --background-color:var(--cavelo-navy); --link-color:var(--cavelo-white); }
[data-role="button"].inverse.blue { --link-color:var(--cavelo-blue); --border-color: var(--cavelo-blue); }
[data-role="button"].inverse.blue:not([disabled]):hover,
[data-role="button"].inverse.blue:not([disabled]):focus,
[data-role="button"].inverse.blue.active { --background-color:var(--cavelo-blue); --link-color:var(--cavelo-white); }
[data-role="button"].inverse.white { --link-color:var(--cavelo-black); --background-color:var(--cavelo-white); --border-color: var(--cavelo-white); }
[data-role="button"].inverse.white:not([disabled]):hover,
[data-role="button"].inverse.white:not([disabled]):focus,
[data-role="button"].inverse.white.active { --link-color:var(--cavelo-black); --background-color:var(--cavelo-white); }
[data-role="button"].inverse.black { --link-color:var(--cavelo-black); --border-color: var(--cavelo-black); }
[data-role="button"].inverse.black:not([disabled]):hover,
[data-role="button"].inverse.black:not([disabled]):focus,
[data-role="button"].inverse.black.active { --background-color:var(--cavelo-black); --link-color:var(--cavelo-white); }
[data-role="button"].inverse.grey { --link-color:var(--cavelo-black); --border-color: var(--cavelo-platinum); }
[data-role="button"].inverse.grey:not([disabled]):hover,
[data-role="button"].inverse.grey:not([disabled]):focus,
[data-role="button"].inverse.grey.active { --background-color:var(--cavelo-platinum); --link-color:var(--cavelo-black); }
[data-role="button"].inverse.dark-grey { --link-color:var(--cavelo-black); --border-color: var(--cavelo-grey); --background-color:var(--cavelo-white); }
[data-role="button"].inverse.dark-grey:not([disabled]):hover,
[data-role="button"].inverse.dark-grey:not([disabled]):focus,
[data-role="button"].inverse.dark-grey.active { --background-color:var(--cavelo-grey); --link-color:var(--cavelo-white); --border-color:var(--cavelo-grey);}
/*!!V2*/
[data-role="button"].inverse.gold { --link-color:rgba(0230,191,0,1); --border-color: var(--cv-gold); }
[data-role="button"].inverse.gold:not([disabled]):hover,
[data-role="button"].inverse.gold:not([disabled]):focus,
[data-role="button"].inverse.gold.active { --background-color:var(--cv-gold); --link-color:var(--cavelo-white); }
[data-role="button"].inverse.bright-blue { --link-color:var(--cv-bright-blue); --border-color: var(--cv-bright-blue); }
[data-role="button"].inverse.bright-blue:not([disabled]):hover,
[data-role="button"].inverse.bright-blue:not([disabled]):focus,
[data-role="button"].inverse.bright-blue.active { --background-color:var(--cv-bright-blue); --link-color:var(--cavelo-white); }
[data-role="button"].inverse.vivid-blue { --link-color:var(--cv-vivid-blue); --border-color: var(--cv-vivid-blue); }
[data-role="button"].inverse.vivid-blue:not([disabled]):hover,
[data-role="button"].inverse.vivid-blue:not([disabled]):focus,
[data-role="button"].inverse.vivid-blue.active { --background-color:var(--cv-vivid-blue); --link-color:var(--cavelo-white); }
[data-role="button"].inverse.vivid-cyan { --link-color:var(--cv-vivid-cyan); --border-color: var(--cv-vivid-cyan); }
[data-role="button"].inverse.vivid-cyan:not([disabled]):hover,
[data-role="button"].inverse.vivid-cyan:not([disabled]):focus,
[data-role="button"].inverse.vivid-cyan.active { --background-color:var(--cv-vivid-cyan); --link-color:var(--cavelo-white); }
/*!!V2*/


[data-role="button"][disabled="true"] { cursor:not-allowed; opacity:0.5; } 
[data-role="button"]>i { margin:0; text-align:center; }
[data-role="button"]>i:not(.hidden) + span { margin-left:0.5em; }
[data-role="button"]>span:not(.hidden) + i { margin-left:0.5em; }
[data-role="button"].block { display:flex; min-width:100%; justify-content:flex-start; }

[data-role="button"] + [data-role="button"],
[data-role="dropdown"] + [data-role="button"],
[data-role="button"] + [data-role="dropdown"],
[data-role="dropdown"] + [data-role="dropdown"] { margin-left:0.5em; }

[data-role="button"].block + [data-role="button"].block { margin-top:0.5em; margin-left:0; }

[data-role="button"].text-center { justify-content:center; }
[data-role="button"].text-left { justify-content:flex-start; }

.row.col-1 > [data-role="button"] { margin:0px !important; }

[data-role="button"] { padding-left:1em; padding-right:1em; }

[data-role="button"].checkbox { padding-right:1.5em; }
[data-role="button"].checkbox:before {
    position:relative; margin-right:0.5em;
    font-family: "Font Awesome 6 Free";
    font-weight: 300;
    content: "\f0c8"; 
    opacity:0.5;
}
[data-role="button"].checkbox.active:before {
    color:var(--cavelo-green);
    content: "\f14a"; 
    opacity:1;
}

[data-role="button"].nostretch { 
    max-width:fit-content !important; 
    max-height:fit-content !important; 
}


[data-role="button"].cv-text-placeholder  { color:var(--cavelo-black-20) !important; }
[data-role="button"].cv-text-green        { color:var(--cavelo-green) !important; }
[data-role="button"].cv-text-orange       { color:var(--cavelo-orange) !important; }
[data-role="button"].cv-text-navy         { color:var(--cavelo-navy) !important; }
[data-role="button"].cv-text-blue         { color:var(--cavelo-blue) !important; }
[data-role="button"].cv-text-white        { color:var(--cavelo-white) !important; }
[data-role="button"].cv-text-black        { color:var(--cavelo-black) !important; }
[data-role="button"].cv-text-grey         { color:var(--cavelo-platinum) !important; }
[data-role="button"].cv-text-dark-grey    { color:var(--cavelo-grey) !important; }
[data-role="button"].cv-text-gold         { color:var(--cv-gold) !important; }
[data-role="button"].cv-text-bright-blue  { color:var(--cv-bright-blue) !important; }
[data-role="button"].cv-text-vivid-blue   { color:var(--cv-vivid-blue) !important; }
[data-role="button"].cv-text-vivid-cyan   { color:var(--cv-vivid-cyan) !important; }
[data-role="button"].cv-text-red          { color:var(--cv-accent-red-dark) !important; }
[data-role="button"].cv-text-transparent  { color:transparent !important; }


.template-image { position:relative; }
.template-image > [data-role="button"] { 
    display:none;
    position:absolute;
    top:4px;
    right:4px;
}
.template-image:hover > img[src^="data"] + [data-role="button"] { display:block; }


[data-role="button"].active.active-bold { font-weight:bold; }
[data-role="button"].active.active-italic { font-style:italic; }
[data-role="button"].active.active-underline { text-decoration:underline; }



/* FF - not supports fit-content? */
.row.col-control-1 > [data-role="button"].nostretch { max-height:3em !important; }