@import url("../../css/variable.19d03754d338.css");

/* editor overrides to the website + ad */
.ql-editor {
  padding: 12px 0;
  display: block;
}

/* qa-align-* justify-item only for image */
.ql-editor .ql-align-center {
  justify-items: center;
}

.ql-editor .ql-align-right {
  justify-items: right;
}

/* toolbar sticky position */
.ql-toolbar {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
}

/* resize z-index  */
#editor-resizer .toolbar {
  z-index: 3;
}

/* unset overflow to get position sticky work */
#contenu-tab {
  overflow-x: unset;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

/* float pour images */
.ql-float-left {
  float: left;
  margin: 0 1em 1em 0;
}
.ql-float-right {
  float: right;
  margin: 0 0 1em 1em;
}
.ql-float-center {
  display: block;
  margin: auto;
}

.ql-size-6pt {
  font-size: 6pt;
}
.ql-size-8pt {
  font-size: 8pt;
}
.ql-size-9pt {
  font-size: 9pt;
}
.ql-size-10pt {
  font-size: 10pt;
}
.ql-size-11pt {
  font-size: 11pt;
}
.ql-size-12pt {
  font-size: 12pt;
}
.ql-size-14pt {
  font-size: 14pt;
}
.ql-size-16pt {
  font-size: 16pt;
}
.ql-size-20pt {
  font-size: 20pt;
}
.ql-size-22pt {
  font-size: 22pt;
}
.ql-size-24pt {
  font-size: 24pt;
}
.ql-size-26pt {
  font-size: 26pt;
}
.ql-size-28pt {
  font-size: 28pt;
}
.ql-size-36pt {
  font-size: 36pt;
}
.ql-size-48pt {
  font-size: 48pt;
}
.ql-size-72pt {
  font-size: 72pt;
}

.quill-show-invisibles .ql-editor {
  white-space: pre-wrap;
}

.quill-show-invisibles .ql-editor p::after,
.quill-show-invisibles .ql-editor h1::after,
.quill-show-invisibles .ql-editor h2::after,
.quill-show-invisibles .ql-editor h3::after,
.quill-show-invisibles .ql-editor h4::after,
.quill-show-invisibles .ql-editor h5::after,
.quill-show-invisibles .ql-editor h6::after,
.quill-show-invisibles .ql-editor li::after,
.quill-show-invisibles .ql-editor blockquote::after,
.quill-show-invisibles .ql-editor div::after {
  content: "¶";
  color: #888;
  opacity: 0.5;
  font-size: 0.85em;
  margin-left: 0.25em;
  user-select: none;
  pointer-events: none;
}

.quill-show-invisibles .ql-editor p:empty::before {
  content: "¶";
  color: #888;
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
  position: absolute;
}

.quill-show-invisibles .ql-editor p:empty {
  min-height: 1.2em;
  position: relative;
}

.quill-show-invisibles .ql-editor br {
  position: relative;
}

.quill-show-invisibles .ql-editor br::after {
  content: "↵";
  color: #888;
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
  font-size: 0.9em;
  position: absolute;
  left: 0;
}

.quill-show-invisibles .ql-editor p:has(br:only-child)::after {
  content: "↵¶";
  color: #888;
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
  font-size: 0.85em;
  margin-left: 0;
}

.quill-show-invisibles .ql-editor p > br:only-child::after {
  content: "↵";
  color: #888;
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
  font-size: 0.9em;
  position: absolute;
}

.ql-toolbar .ql-pilcrow.ql-active {
  background-color: #e6f3ff;
  color: #0066cc;
}

.quill-show-invisibles .ql-editor {
  tab-size: 2;
}

.quill-show-invisibles .ql-editor *::after {
  white-space: pre;
}

.quill-show-invisibles .ql-editor ol li::after,
.quill-show-invisibles .ql-editor ul li::after {
  content: "¶";
  color: #888;
  opacity: 0.5;
  font-size: 0.85em;
  margin-left: 0.25em;
  user-select: none;
  pointer-events: none;
}

.quill-show-invisibles .ql-editor p p::after,
.quill-show-invisibles .ql-editor div div::after {
  display: none;
}

@media (max-width: 700px) {
  table thead {
    display: none;
  }

  table tr {
    display: block;
  }

  table td {
    display: block;
    height: fit-content !important;
  }
}

/* avoid float on mobile devices */
@media (max-width: 800px) {
  .ql-float-left,
  .ql-align-right,
  .ql-align-center {
    float: none !important;
    margin: auto;
  }
}

/* used into website */
.main-container .ql-editor {
  width: 100%;
}

/* by default text is not align to left, i keep it just in case  */
.ql-editor .ql-align-left {
  justify-items: left;
}

.ql-editor h2::before {
  display: none;
}

/* increase size of field */
.form-group > .row:has(#custom-content-id) {
  flex-direction: column;
}

.form-group > .row > .field-content:has(#custom-content-id) {
  flex: 0 0 100%;
  max-width: initial;
}

/* fix select field */
.form-group .related-widget-wrapper .select2-container {
  width: 100% !important;
}