:root {
    --bg-focus: var(--bs-light-secondary);
    --text-color-focus: #343a40;
    --color-shadow-focus: var(--bs-primary);
}

.contenteditable {
    border-radius: 5px;
    padding: .35rem;
    margin-left: -7px;
    /*word-break: break-word;*/
    outline: 0;
    position: relative; 
    z-index: 1; 
    color: #54667a !important;
}

.contenteditable:not(:focus):hover {
    /*background-color: #f9fafb;  bg-gray-50 */
    cursor: pointer;
    box-shadow: 0 0 0 2px #e5e7eb; /* ring-1 ring-gray-200 */
}

.contenteditable:focus {
    color: var(--text-color-focus)!important;
    box-shadow: 0px 0px 0px 2px var(--color-shadow-focus);
    background: var(--bg-focus);
    transition: .25s;
}

.contenteditable[contenteditable]:empty:before{
    color: #7b838a!important;
    content:attr(data-placeholder);
}