[data-role="input"] { 
    width:100%; 
    position:relative; 
    background-color:transparent !important; 
    border-width:0px; 
}

[data-role="input"] > label { 
    min-height:fit-content; 
    width:100%; 
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
[data-role="input"] > .description:empty { display:none; }
[data-role="input"] > .description:not(:empty) { 
    padding-top:0.5em; 
    padding-bottom:0.5em; 
}
.form-group > .description:empty { display:none; }

/*
[data-role="input"] > input        { border-bottom-color:inherit !important; }
[data-role="input"] > select       { border-bottom-color:inherit !important; }
[data-role="input"] > textarea     { border-color:inherit !important; }
[data-role="input"] > select[multiple] { border-color:inherit !important; border-width:1px !important; }
[data-role="input"].checkbox       { margin-bottom:1px; }
*/
/* .form-group.inline { 
    position:relative; 
    display:inline-block;
    min-height:2.5em !important;  
} */
.form-group.inline > [data-role="input"] {
    display:inline-flex;
    margin-bottom:0px;
    justify-content: flex-start;
    position: relative;
    width: 100%;
}
.form-group.inline > [data-role="input"] > *:not(:last-child) { 
    width:auto; 
    margin-right:1em !important; 
}
.form-group.inline > [data-role="input"] > label { 
    white-space:nowrap; 
}
.form-group.inline > [data-role="input"] > .description { 
    padding:5px 0 0 0; 
    margin:0 !important;
    /* padding:0 !important; */
}

.form-group.fit > [data-role="input"] > label { 
    min-height:fit-content !important; 
}
.form-group.fit > [data-role="input"] > input { 
    min-height:fit-content; 
    max-height:fit-content; 
    max-width:100%;
    padding-top:0px; 
    padding-bottom:0px; 
    border-width:0px;
    outline-offset:0.3em;
}


.form-group.inline > [data-role="input"] {
    display:grid !important;
    width: 100%  !important;
    grid-template-areas:
        "label input"
        "desc desc"  !important;
    grid-template-columns: max-content 1fr;
}
.form-group.inline > [data-role="input"] > input { grid-area: input; }
.form-group.inline > [data-role="input"] > label { grid-area: label; }
.form-group.inline > [data-role="input"] > .description { grid-area: desc; }

.form-group.fit-width { width:fit-content !important }
.form-group.fit-width > [data-role="input"].checkbox { width:fit-content !important; }
.form-group.fit-width > [data-role="input"].checkbox > * { width:fit-content !important; }

/* [data-role="input"].checkbox { */
    /* display:grid !important; */
    /* width: 100%  !important; */
    /* grid-template-areas: */
        /* "input label" */
        /* "desc desc"  !important; */
    /* grid-template-columns: auto 1fr; */
    /* grid-template-rows: min-content; */
    /* column-gap: 0.5em; */
    /* align-content:flex-start; */
    /* align-items: baseline; */
/* } */
/* [data-role="input"].checkbox > input { grid-area: input; padding-top:2px; } */
/* [data-role="input"].checkbox > label { grid-area: label; min-height:2.5em !important; } */
/* [data-role="input"].checkbox > .description { grid-area: desc; } */

[data-role="input"].checkbox {
    display:inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    align-content: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    position:relative;
    min-height:2.5em;    
}
[data-role="input"].checkbox > label { 
    cursor:pointer; 
    position:relative; 
    margin:0rem !important; 
    padding:0 !important; 
    /* height:fit-content;  */
    height:100%;
    cursor:pointer;
}
[data-role="input"].checkbox > input[type="checkbox"] { 
    cursor:pointer; 
    position:relative; 
    display:flex; 
    appearance:none; 
    /* height:1em;  */
    height:100%;
    width:1.5em; 
    padding:0px; 
    cursor:pointer;
}
[data-role="input"].checkbox > input[type="checkbox"]:before {
    position:relative;
    display:block;
    height:fit-content; width:fit-content;
    font-family: "Font Awesome 6 Free";
    font-weight: 300;
    font-size: 1em;
    content: "\f0c8";
    color:var(--cavelo-grey);
    /* top:50%;  */
    /* transform:translateY(-0.6em); */
}
[data-role="input"].checkbox > input[type="checkbox"]:checked:before {
    content: "\f14a";
    color:var(--cavelo-green);
    height:fit-content; width:fit-content;
}

[data-role="input"].checkbox > input[type="checkbox"]:focus:before {
    background-color:var(--cavelo-dark-grey);
}

[data-role="input"].checkbox > label[disabled],
[data-role="input"].checkbox > input[type="checkbox"][disabled] { 
    cursor:not-allowed !important; 
}

[data-role="input"].checkbox > label[readonly],
[data-role="input"].checkbox > input[type="checkbox"][readonly] { 
    cursor:unset !important; 
}
/* [data-role="input"].checkbox > input[type="checkbox"][readonly]:checked:before { color:inherit; } */

.minimal > [data-role="input"].checkbox { min-height:2em; }



.form-group .description { 
    color:inherit; 
    padding-top:0.5em; 
    padding-bottom:0.5em; 
}

[data-role="input"] > select.placeholder[value=""] {
    color:var(--cavelo-grey)
}

/* [data-role="input"].inverse:not(.checkbox) input,
[data-role="input"].inverse:not(.checkbox) select { 
    background-color:var(--cavelo-white); 
} */


.inline.icon-description > [data-role="input"] {
    grid-template-columns: 2rem auto 1fr;
    grid-template-areas:
        "desc label input" !important;
}
.inline.icon-description > [data-role="input"] > .description { padding:0; align-content:center; }

.icon-dollars:not(.inline) > [data-role="input"] > label > [data-role="tag"] { z-index:5; }
.icon-dollars:not(.inline) > [data-role="input"] > input { width:calc(100% - 1rem) !important; margin-left:1rem !important; }
.icon-dollars:not(.inline) > [data-role="input"]:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    content:"$";
    position:absolute;
    bottom:0.5rem; left:0;
}

.inline.icon-dollars > [data-role="input"] { 
    grid-template-columns:1fr 1fr 20rem;
    grid-template-areas: "label desc input" !important;
}
.inline.icon-dollars > [data-role="input"] > .description { 
    display:inline-flex !important; 
    padding:0; 
    min-width:1rem;
    flex-direction: row-reverse;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}
.inline.icon-dollars > [data-role="input"] > .description:not(:empty) { padding-right:2rem; }
.inline.icon-dollars > [data-role="input"] > .description:after {
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    content:"$";
    position:absolute;
    height:100%;
    right:0.5rem;
    display:inline-flex;
    flex-direction: row-reverse;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

/* input { outline:none !important; } */

/* .icon-xmark:not(.inline) > [data-role="input"] > label > [data-role="tag"] { z-index:5; }
.icon-xmark:not(.inline) > [data-role="input"] > input { width:calc(100% - 1rem) !important; margin-left:1rem !important; }
.icon-xmark:not(.inline) > [data-role="input"]:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    content:"\f00d";
    position:absolute;
    bottom:0.5rem; left:0;
}

.inline.icon-xmark > [data-role="input"] { 
    grid-template-columns:1fr 1fr auto;
    grid-template-areas: "label desc input" !important;
}
.inline.icon-xmark > [data-role="input"] > .description { 
    display:inline-flex !important; 
    padding:0; 
    min-width:1rem;
    flex-direction: row-reverse;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}
.inline.icon-xmark > [data-role="input"] > .description:not(:empty) { padding-right:2rem; }
.inline.icon-xmark > [data-role="input"] > .description:after {
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    content:"\f00d";
    position:absolute;
    height:100%;
    right:0.5rem;
    display:inline-flex;
    flex-direction: row-reverse;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
} */

input[readonly="true"] {
    color:var(--cavelo-black-80) !important;
    background-color:var(--bg-readonly) !important;
    outline:none !important;
    cursor: default !important;
}



[data-role="input"] > div.clickable > img { border:1px solid transparent; }
[data-role="input"] > div.clickable > img[src^="data:image"] + div { opacity:0; }
[data-role="input"] > div.clickable:hover > img[src^="data:image"] + div { opacity:0.5; }
[data-role="input"] > div.clickable:hover > img[src^="data:image"] + div:hover { opacity:1; }
[data-role="input"] > div.clickable:hover > img[src^="data:image"] { border-color:var(--cavelo-grey); }
[data-role="input"] > div.clickable > canvas { border:1px solid transparent; }
[data-role="input"] > div.clickable:hover > canvas { border-color:var(--cavelo-black); }

.form-group-wrapper.file > input[type="file"] {
    opacity:0; 
    min-height:0 !important; 
    max-height:0 !important; 
    height:0 !important; 
    padding:0 !important; 
    margin:0 !important; 
}

/* FF - not supports attr() */
[data-top-rem="0"]     { top:0rem !important; }
[data-top-rem="0.1"]   { top:0.1rem !important; }
[data-top-rem="0.25"]  { top:0.25rem !important; }
[data-top-rem="0.5"]   { top:0.5rem !important; }
[data-right-rem="0"]   { right:0rem !important; }
[data-right-rem="0.1"] { right:0.1rem !important; }
[data-right-rem="1.5"] { right:1.5rem !important; }
[data-left-rem="0.25"] { left:0.25rem !important; }
[data-role="input"] [data-min-height="0.25"],
[data-role="input"] .image-view { min-height:2.6rem !important; }
select:focus, input:focus { outline:none; }




.form-group.inline > [data-role="input"] > label:empty { margin-right:0 !important; }
    


[data-role="input"] > select:has(option[data-placeholder][selected]) {
    color:var(--cavelo-grey);
}