/* Darefani global clearable fields: cross stays inside the input / textarea */
.df-input-clear-host{position:relative}
.df-input-clear-btn{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:26px;height:26px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:#77818b;font:normal 24px/1 Arial,sans-serif;cursor:pointer;transform:translateY(-50%);opacity:.85;transition:background-color .15s,color .15s,opacity .15s;touch-action:manipulation}
.df-input-clear-btn:hover{background:rgba(0,0,0,.075);color:#333;opacity:1}
.df-input-clear-btn:focus{outline:2px solid #7cacf0;outline-offset:1px;opacity:1}
.df-input-clear-btn[hidden]{display:none!important}
.df-input-clear-btn:disabled{display:none!important}
@media (pointer:coarse){.df-input-clear-btn{width:26px;height:26px}}
/* MDBootstrap md-form uses content-box in some input rules. Keep clear-button padding inside input width. */
.md-form input.df-clearable:not(.browser-default),.md-form textarea.df-clearable:not(.browser-default){box-sizing:border-box!important;max-width:100%}