.editorContainer {
  display: flex;
  justify-content: space-between;
}

.quillContainer {
  max-width: 1000px;
  display: flex;
  column-gap: 15px;
  align-items: flex-start;
  margin: 10px 0
}

.quillContainer * {
  font-size: inherit;
  font-weight: inherit !important;
  border-spacing: 0;
}

/*fix spacing in iframe*/ 
.quillContainer.spacing{margin: 10px !important}
.spacing_1 .updateBtn{display:inline-block!important; margin:10px !important}

.quillContainer .ql-toolbar,
.quillContainer .ql-container,
.quillContainer .ql-container .ql-editor {
  display: block
}

.quillContainer .quillContent {
  width: 700px
}

.quillContainer .ql-container .ql-editor img[alt='Griglia'] {
  cursor: pointer !important
}

/*fix content*/
.quillContainer .ql-container .ql-editor * {
  all: unset;
  font-family: sans-serif !important
}

.quillContainer .ql-container .ql-editor a:link {
  color: initial !important;
  text-decoration: underline !important;
  cursor: auto !important;
}

.quillContainer .ql-container .ql-editor a:visited {
  color: initial !important;
  text-decoration: underline !important;
  cursor: auto !important;
}

.quillContainer .ql-container .ql-editor a:link:active {
  color: initial !important;
}

.quillContainer .ql-container .ql-editor a:visited:active {
  color: initial !important;
}

.quillContainer .ql-container .ql-editor b {
  font-weight: bold !important;
}

.quillContainer .ql-container .ql-editor figcaption {
  display: block !important;
}

.quillContainer .ql-container .ql-editor figure {
  display: block !important;
  margin-top: 1em !important;
  margin-bottom: 1em !important;
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.quillContainer .ql-container .ql-editor footer {
  display: block !important;
}

.quillContainer .ql-container .ql-editor h1 {
  display: block !important;
  font-size: 2em !important;
  margin-top: 0.67em !important;
  margin-bottom: 0.67em !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-weight: bold !important;
}

.quillContainer .ql-container .ql-editor h2 {
  display: block !important;
  font-size: 1.5em !important;
  margin-top: 0.83em !important;
  margin-bottom: 0.83em !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-weight: bold !important;
}

.quillContainer .ql-container .ql-editor h3 {
  display: block !important;
  font-size: 1.17em !important;
  margin-top: 1em !important;
  margin-bottom: 1em !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-weight: bold !important;
}

.quillContainer .ql-container .ql-editor h4 {
  display: block !important;
  margin-top: 1.33em !important;
  margin-bottom: 1.33em !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-weight: bold !important;
}

.quillContainer .ql-container .ql-editor h5 {
  display: block !important;
  font-size: 0.83em !important;
  margin-top: 1.67em !important;
  margin-bottom: 1.67em !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-weight: bold !important;
}

.quillContainer .ql-container .ql-editor h6 {
  display: block !important;
  font-size: 0.67em !important;
  margin-top: 2.33em !important;
  margin-bottom: 2.33em !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-weight: bold !important;
}

.quillContainer .ql-container .ql-editor hr {
  display: block !important;
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-style: inset !important;
  border-width: 1px !important;
}

.quillContainer .ql-container .ql-editor i,
.quillContainer .ql-container .ql-editor em {
  font-style: italic !important;
}

.quillContainer .ql-container .ql-editor img {
  display: inline-block !important;
  max-width: 100% !important
}

.quillContainer .ql-container .ql-editor li {
  display: list-item !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  position: relative !important;
}

.quillContainer .ql-container .ql-editor ol {
  display: block !important;
  list-style: none !important;
  padding-left: 1em !important;
  margin-left: 0.5em !important;
  margin-bottom: 1em !important
}

.quillContainer .ql-container .ql-editor ol li {
  list-style-type: decimal !important;
}

.quillContainer .ql-container .ql-editor p {
  display: block !important;
  margin-bottom: 1em !important;
}

.quillContainer .ql-container .ql-editor .ql-align-center {
  text-align: center !important
}

.quillContainer .ql-container .ql-editor .ql-align-right {
  text-align: right !important
}

.quillContainer .ql-container .ql-editor .align-justify {
  text-align: justify !important
}

.quillContainer .ql-container .ql-editor pre {
  display: block !important;
  margin-top: 1em !important;
  margin-bottom: 1em !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.quillContainer .ql-container .ql-editor s {
  text-decoration: line-through !important;
}

.quillContainer .ql-container .ql-editor small {
  font-size: 80% !important;
}

.quillContainer .ql-container .ql-editor span {
  display: inline !important;
}

.quillContainer .ql-container .ql-editor strong {
  font-weight: bold !important;
}

.quillContainer .ql-container .ql-editor sub {
  font-size: 75% !important;
  vertical-align: sub !important;
  margin-left: 1px !important;
}

.quillContainer .ql-container .ql-editor sup {
  font-size: 75% !important;
  vertical-align: top !important;
  margin-left: 1px !important;
}

.quillContainer .ql-container .ql-editor table {
  display: table !important;
  border-collapse: collapse !important;
  width: 100%;
  max-width: 100% !important;
}

.quillContainer .ql-container .ql-editor tbody {
  display: table-row-group !important;
}

.quillContainer .ql-container .ql-editor td {
  display: table-cell !important;
  border: 1px solid #000 !important;
  padding: 2px 5px !important;
  background: white !important;
  position: relative;
}

.quillContainer .ql-container .ql-editor td p {
  margin: inherit !important
}

.quillContainer .ql-container .ql-editor tfoot {
  display: table-footer-group !important;
}

.quillContainer .ql-container .ql-editor th {
  display: table-cell !important;
}

.quillContainer .ql-container .ql-editor thead {
  display: table-header-group !important;
}

.quillContainer .ql-container .ql-editor tr {
  display: table-row !important;
}

.quillContainer .ql-container .ql-editor u {
  text-decoration: underline !important;
}

.quillContainer .ql-container .ql-editor ul {
  display: block !important;
  margin-left: 1.2em !important;
}

/*fonts editor*/

.quillContainer .ql-container .ql-editor .ql-size-small {
  font-size: .75em !important
}

.quillContainer .ql-container .ql-editor .ql-size-large {
  font-size: 1.5em !important
}

.quillContainer .ql-container .ql-editor .ql-size-huge {
  font-size: 2.5em !important
}

.quillContainer .ql-container .ql-editor .ql-font-arial {
  font-family: 'Arial' !important;
}

.quillContainer .ql-container .ql-editor .ql-font-arial-black {
  font-family: 'Arial Black' !important;
}

.quillContainer .ql-container .ql-editor .ql-font-book-antiqua {
  font-family: 'Book Antiqua' !important;
}

.quillContainer .ql-container .ql-editor .ql-font-comic-sans-ms {
  font-family: 'Comic Sans MS' !important;
}

.quillContainer .ql-container .ql-editor .ql-font-courier-new {
  font-family: 'Courier New' !important;
}

.quillContainer .ql-container .ql-editor .ql-font-georgia {
  font-family: 'Georgia' !important;
}

.quillContainer .ql-container .ql-editor .ql-font-helvetica {
  font-family: 'Helvetica' !important;
}

.quillContainer .ql-container .ql-editor .ql-font-tahoma {
  font-family: 'Tahoma' !important;
}

.quillContainer .ql-container .ql-editor .ql-font-times-new-roman {
  font-family: 'Times New Roman' !important;
}

.quillContainer .ql-container .ql-editor .ql-font-trebuchet-ms {
  font-family: 'Trebuchet MS' !important;
}

.quillContainer .ql-container .ql-editor .ql-font-verdana {
  font-family: 'Verdana' !important;
}

.quillContainer .ql-container .ql-editor .ql-indent-1 {
  margin-left: 3em !important;
}

.quillContainer .ql-container .ql-editor li.ql-indent-1 {
  margin-left: 3.5em !important;
}

.quillContainer .ql-container .ql-editor .ql-indent-2 {
  margin-left: 6em !important;
}

.quillContainer .ql-container .ql-editor li.ql-indent-2 {
  margin-left: 6.5em !important;
}

.quillContainer .ql-container .ql-editor .ql-indent-3 {
  margin-left: 9em !important;
}

.quillContainer .ql-container .ql-editor li.ql-indent-3 {
  margin-left: 9.5em !important;
}

.quillContainer .ql-container .ql-editor .ql-indent-4 {
  margin-left: 12em !important;
}

.quillContainer .ql-container .ql-editor li.ql-indent-4 {
  margin-left: 12.5em !important;
}

.quillContainer .ql-container .ql-editor .ql-indent-5 {
  margin-left: 15em !important;
}

.quillContainer .ql-container .ql-editor li.ql-indent-5 {
  margin-left: 15.5em !important;
}

.quillContainer .ql-container .ql-editor .ql-indent-6 {
  margin-left: 18em !important;
}

.quillContainer .ql-container .ql-editor li.ql-indent-6 {
  margin-left: 18.5em !important;
}

.quillContainer .ql-container .ql-editor .ql-indent-7 {
  margin-left: 21em !important;
}

.quillContainer .ql-container .ql-editor li.ql-indent-7 {
  margin-left: 21.5em !important;
}

.quillContainer .ql-container .ql-editor .ql-indent-8 {
  margin-left: 24em !important;
}

.quillContainer .ql-container .ql-editor li.ql-indent-8 {
  margin-left: 24.5em !important;
}

.quillContainer .ql-container .ql-editor .ql-indent-9 {
  margin-left: 27em !important;
}

.quillContainer .ql-container .ql-editor li.ql-indent-9 {
  margin-left: 27.5em !important;
}

.quillContainer .ql-container .ql-editor li>.ql-ui:before {
  display: none !important
}

.ql-table-menus-container>div:nth-child(4),
.ql-table-menus-container>div:nth-child(5) {
  display: none
}

/*fonts toolbar*/
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='']::before {
  content: 'Default';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='arial']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='arial']::before {
  content: 'Arial';
  font-family: 'Arial';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='arial-black']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='arial-black']::before {
  content: 'Arial Black';
  font-family: 'Arial Black';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='book-antiqua']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='book-antiqua']::before {
  content: 'Book Antiqua';
  font-family: 'Book Antiqua';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='comic-sans-ms']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='comic-sans-ms']::before {
  content: 'Comic Sans MS';
  font-family: 'Comic Sans MS';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='courier-new']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='courier-new']::before {
  content: 'Courier New';
  font-family: 'Courier New';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='georgia']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='georgia']::before {
  content: 'Georgia';
  font-family: 'Georgia';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='helvetica']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='helvetica']::before {
  content: 'Helvetica';
  font-family: 'Helvetica';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='tahoma']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='tahoma']::before {
  content: 'Tahoma';
  font-family: 'Tahoma';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='times-new-roman']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='times-new-roman']::before {
  content: 'Times New Roman';
  font-family: 'Times New Roman';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='trebuchet-ms']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='trebuchet-ms']::before {
  content: 'Trebuchet MS';
  font-family: 'Trebuchet MS';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='verdana']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='verdana']::before {
  content: 'Verdana';
  font-family: 'Verdana';
}

.quillContainer .qMacros {
  width: 30%;
  padding: 5px;
  border: 1px solid #ccc;
  position: relative;
}

.quillContainer .qMacros .title {
  background: #ebebeb;
  display: block;
  padding: 5px;
  margin-bottom: 10px;
  font-weight: bold !important;
  border: 1px solid #ccc;
}

.quillContainer .qMacros button {
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
  margin-top: 4px;
  white-space: break-spaces
}

.quillContainer .ql-toolbar {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 0;
  border-right: 0
}

.quillContainer .ql-toolbar * {
  font-weight: inherit !important;
}

.quillContainer .ql-toolbar .ql-formats {
  border-right: 1px solid gainsboro;
  margin-right: 0;
  padding: 5px;
  border-bottom: 1px solid #ccc;
  flex-grow: 1;
  display: flex;
  justify-content: space-evenly;
}

.quillContainer.full .ql-toolbar .ql-formats.full,
.quillContainer.full .ql-toolbar .ql-formats:first-child,
.quillContainer .ql-toolbar .ql-formats .drop-t,
.quillContainer .ql-toolbar .drop-t .ql-picker-label {
  width: 100% !important;
}

.quillContainer .ql-toolbar .ql-formats .ql-picker.ql-size {
  min-width: 100%
}

.quillContainer .ql-toolbar .ql-formats .ql-picker.ql-header {
  min-width: 100%
}

.quillContainer .ql-toolbar .ql-formats .ql-picker.ql-font {
  min-width: 140px
}

.quillContainer .ql-toolbar .ql-formats .ql-picker-label,
.quillContainer .ql-toolbar .ql-formats .ql-picker-options .ql-picker-item {
  font-family: sans-serif
}

.quillContainer .ql-snow .ql-formats:after {
  display: none
}

.quillContainer .ql-container .ql-editor {
  height: 750px;
  max-width: 680px;
  cursor: text
}

.previewContainer {
  border: 1px solid #ccc;
  width: 700px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.previewContainer #previewContent {
  border: 1px solid #ccc;
  position: relative;
  display: block;
  height: 100%
}

.previewContainer #previewContent.loading:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff url('./../../img/ajax-loader.gif') no-repeat center center;
}

.previewContainer .title {
  background: #ebebeb;
  display: block;
  padding: 5px;
  margin-bottom: 10px;
  font-weight: bold !important;
  border: 1px solid #ccc;
}

.previewContainer #previewFrame {
  border: 1px solid #ccc;
  width: 100%;
  height: 100%;
  border: 0;
}

#contentEditorHandler {
  resize: none;
  width: 100%;
  height: 750px;
  box-sizing: border-box;
  border-top: 0;
  box-shadow: none
}


/*preview
.previewContainer{padding: 5px; border: 1px solid #ccc; position: relative; width: 700px; height:100%}
.previewContainer .title{background: #ebebeb;display: block;padding: 5px;margin-bottom: 10px;font-weight: bold !important;border: 1px solid #ccc;}
.previewContainer #preview{height: 700px;overflow: auto; background: #ccc;padding: 25px; display: block; border: 1px solid #ccc;}
.previewContainer #preview .qPage {border: 1px solid #ccc;margin-bottom: 20px;padding: 30px; width: 100%;box-sizing: border-box; height: 966px;  display: block;  white-space: break-spaces; background: white; box-shadow: 2px 5px 8px 0 grey}
.previewContainer #preview .qPage img{max-width:100%}
fix content preview
.previewContainer #preview h1, .previewContainer #preview h1 span{font-size:1.5em}
.previewContainer #preview h2, .previewContainer #preview h2 span{font-size:1.5em}
.previewContainer #preview h3, .previewContainer #preview h3 span{font-size:1.17em}
.previewContainer #preview h4, .previewContainer #preview h4 span{font-size:1em}
.previewContainer #preview h5, .previewContainer #preview h5 span{font-size:.83em}
.previewContainer #preview h6, .previewContainer #preview h6 span{font-size:.67em}
*/