.ql-container {
    border: 0 !important;
    flex-grow: 1;
}

.ql-snow.ql-toolbar button {
    margin: 0;
}

.ql-snow.ql-toolbar {
    padding: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    border: 0;
}

.ql-editor {
    padding: 12px .75rem;
}

.ql-snow.ql-toolbar .ql-formats {
    margin: 0;
    padding: 0 8px;
    color: var(--bien-grey-1);
    font-size: 16px;
    position: relative;
    display: flex;
    align-items: center;
}

.ql-snow.ql-toolbar .ql-formats:first-of-type {
    padding: 0 12px 0 0;
}

.ql-snow.ql-toolbar .ql-formats:after {
    content: "";
    width: 1px;
    height: 24px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: var(--bien-grey-2);
}

.ql-snow.ql-toolbar .ql-formats:last-of-type:after {
    display: none;
}

.ql-font span[data-value="playfair_display"],
.ql-font span[data-value="playfair_display"]::before {
    font-family: playfair_display;
}

.ql-font span[data-value="Roboto"],
.ql-font span[data-value="Roboto"]::before {
    font-family: Roboto;
}

.ql-font span[data-value="Montserrat"],
.ql-font span[data-value="Montserrat"]::before {
    font-family: Montserrat;
}

.ql-font span[data-value="Poppins"],
.ql-font span[data-value="Poppins"]::before {
    font-family: Poppins;
}

.ql-font span[data-value="open_sans"],
.ql-font span[data-value="open_sans"]::before {
    font-family: open_sans;
}

.ql-font span[data-value="book_antigua"],
.ql-font span[data-value="book_antigua"]::before {
    font-family: book_antigua;
}

.ql-color span.ql-picker-item[data-value="#ffffff"],
.ql-background span.ql-picker-item:not([data-value]) {
    border: 1px solid var(--bien-grey-2) !important;
}

.ql-color .ql-picker-options span[data-value="remove-font-color"] {
    border: 1px solid var(--bien-dark) !important;
    background-color: #FFF !important;
    font-size: 22px !important;
    line-height: 22px !important;
    padding: 0 !important;
    text-align: center !important;
    position: relative !important;
}

.ql-color .ql-picker-options span[data-value="remove-font-color"]::before {
    content: "close" !important;
    font-family: "Material Icons Outlined";
}

.ql-fill {
    fill: var(--bien-grey-1) !important;
}

.ql-active .ql-fill {
    fill: var(--primary) !important;
}

.ql-stroke {
    stroke: var(--bien-grey-1) !important;
}

.ql-active .ql-stroke {
    stroke: var(--primary) !important;
}

.ql-snow .ql-picker-label:before {
    line-height: 24px;
    font-size: 16px;
    color: var(--bien-grey-1);
}

.ql-snow .ql-active.ql-picker-label::before {
    color: var(--primary) !important;
}

.ql-toolbar.ql-snow .ql-picker-label {
    border-radius: var(--border-radius);
    border: 0;
    padding-left: 4px;
    padding-right: 0;
}

.ql-toolbar.ql-snow .ql-picker-options .ql-picker-item {
    padding: .5rem;
}

.ql-toolbar.ql-snow .ql-picker-options {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    padding: 0;
    border-radius: var(--border-radius);
    max-height: 175px;
    overflow-y: auto;
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    background: var(--primary);
    color: white;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: var(--border-radius);
}

.ql-snow.ql-toolbar button.ql-undo,
.ql-snow.ql-toolbar button.ql-redo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ql-snow.ql-toolbar button.ql-undo::before {
    content: "undo";
}

.ql-snow.ql-toolbar button.ql-redo::before {
    content: "redo";
}

.ql-snow.ql-toolbar button.ql-undo::before, .ql-snow.ql-toolbar button.ql-redo::before {
    font-family: "Material Icons Outlined";
    color: var(--bien-grey-1);
    font-size: 20px;
}

.ql-snow.ql-toolbar button.ql-undo:hover::before,
.ql-snow.ql-toolbar button.ql-redo:hover::before {
    color: var(--bien-dark);
}

.dynamic-fields-container {
    /*margin-top: -1px;*/
    position: relative;
    background: #FFF;
    padding: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    border: 0;
}

.dynamic-fields-container .df-intestazione {
    display: none;
}

.dynamic-fields-container .df {
    font-size: 14px !important;
    font-family: 'Poppins', serif !important;
    color: var(--bien-grey-1);
    margin-right: 12px;
    padding: 0;
    border: 0;
    line-height: 24px;
}

.dynamic-fields-container .df:before {
    content: '[';
}

.dynamic-fields-container .df:after {
    content: ']';
}

.dynamic-fields-container .df:hover {
    border: 0;
    border-radius: 0;
    color: var(--bien-dark);
}

.df-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    flex-grow: 1;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    border: 1px solid var(--bien-bg);
    border-bottom: 0;
    padding: 4px 8px;
}

.df.char-count {
    cursor: default;
}

.ql-snow .ql-picker .ql-picker-options {
    position: fixed;
    min-width: unset;
}

.ql-editor::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.texteditor {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    overflow: auto;
    resize: vertical;
    position: relative;
    min-height: 200px;
}

.texteditor .ql-toolbar-container {
    padding: 0;
    width: 100%;
    background: #FFF;
}

.texteditor .ql-toolbar-card {
    background: var(--bien-bg);
    display: flex;
    align-items: center;
    border-radius: var(--border-radius);
    padding: 6px 8px;
    overflow: auto;
}

.ql-toolbar-card::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.ql-snow .ql-formats .mi,
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg,
.ql-snow.ql-toolbar button svg, .ql-snow .ql-toolbar button svg {
    color: var(--bien-grey-1);
}

.ql-snow .ql-formats .ql-active .mi {
    color: var(--bien-primary);
}

.ql-picker:hover .mi,
.ql-picker:hover .ql-picker-label:before,
.ql-picker:hover .ql-picker-label:after,
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button:hover .mi {
    color: var(--bien-dark);
}

.ql-color.ql-picker.ql-color-picker,
.ql-background.ql-picker.ql-color-picker {
    height: auto;
    width: auto;
}

.ql-color.ql-picker.ql-color-picker .ql-picker-label,
.ql-background.ql-picker.ql-color-picker .ql-picker-label,
.ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 24px;
    padding: 0;
    margin: 0 4px !important;
    width: 24px;
}

.ql-snow .ql-color-picker .ql-picker-label, .ql-snow .ql-icon-picker .ql-picker-label {
    padding: 0;
}

.ql-image-url, .ql-preview-render, .ql-time, .ql-date {
    display: flex !important;
    justify-content: center;
    align-items: center;
    color: var(--bien-grey-1) !important;
}

.ql-image-url:hover,
.ql-preview-render:hover,
.ql-time:hover,
.ql-date:hover {
    color: var(--bien-dark) !important;
}

.ql-snow .ql-direction i.mi:last-child {
    display: none;
}

.ql-snow .ql-direction.ql-active i.mi:last-child {
    display: inline;
}

.ql-snow .ql-direction.ql-active i.mi:first-child {
    display: none;
}

.ql-image-url:before {
    content: 'image';
    font-family: "Material Icons Outlined";
    font-size: 24px;
}

.ql-preview-render:before {
    content: 'visibility';
    font-family: "Material Icons Outlined";
    font-size: 24px;
}

.ql-date:before {
    content: 'today';
    font-family: "Material Icons Outlined";
    font-size: 24px;
}

.ql-time:before {
    content: 'schedule';
    font-family: "Material Icons Outlined";
    font-size: 24px;
}

.ql-snow .ql-icon-picker .ql-picker-item {
    width: auto;
    height: auto;
    padding: 0;
}

.ql-picker .ql-picker-label[data-label]:after {
    content: 'expand_more';
    font-family: "Material Icons Outlined";
    font-size: 16px;
    position: absolute;
    top: 50%;
    right: -4px;
    color: var(--bien-grey-1);
    transform: translateY(-50%);
}

.ql-picker:hover .ql-picker-label[data-label]:after {
    color: var(--bien-dark);
}

.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
    display: none;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: var(--bien-primary);
}

.texteditor .ql-toolbar-container .char-count {
    font-weight: 500;
    margin-left: var(--bien-gutter-double);
    color: var(--bien-dark);
}

.ql-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 6px .75rem;
    overflow: hidden;
}

.dynamic-fields-container + .ql-toolbar-container {
    padding-top: 0 !important;
}

.dynamic-fields-container + .ql-toolbar-container .ql-toolbar-card {
    border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
}

.ql-snow .ql-color-picker .ql-picker-item {
    border-radius: var(--border-radius);
    width: 24px;
    height: 24px;
}

.ql-snow .ql-color-picker .ql-picker-options {
    width: 200px;
}

.ql-tooltip.ql-editing {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    color: var(--bien-dark);
    padding: 6px 12px;
    white-space: nowrap;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
}

.ql-tooltip.ql-editing input {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bien-dark);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: border-color 0.15s ease-in-out;
}

.ql-snow .ql-tooltip.ql-editing.ql-hidden {
    display: none;
}

.ql-snow .ql-tooltip a {
    line-height: 1.5;
    display: inline-flex;
}

/* LOADER */
.ql-placeholder {
    display: none;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
}

.ql-placeholder-toolbar {
    width: calc(100% - 1.5rem);
    height: 36px;
    background: var(--bien-grey-2);
    margin: 6px .75rem;
    border-radius: var(--border-radius);
}

.texteditor.--loading .ql-placeholder {
    display: flex;
}

.texteditor.--loading .ql-footer {
    display: none;
}