/* editor design */

.react-quill-description .ql-font-Roboto {
  font-family: 'Roboto', sans-serif;
}
.react-quill-description .ql-font-Raleway {
  font-family: 'Raleway', sans-serif;
}
.react-quill-description .ql-font-Lato {
  font-family: 'Lato', sans-serif;
}
.react-quill-description .ql-font-Rubik {
  font-family: 'Rubik', sans-serif;
}
.react-quill-description .ql-font-OpenSans {
  font-family: 'Open Sans', sans-serif;
}

.react-quill-description .ql-container .ql-editor h1 {
  @apply text-h1;
}

.react-quill-description .ql-container .ql-editor h2 {
  @apply text-h2;
}

.react-quill-description .ql-container .ql-editor h3 {
  @apply text-h3;
}

.react-quill-description .ql-container .ql-editor h4 {
  @apply text-h4;
}

.react-quill-description .ql-container .ql-editor h5 {
  @apply text-h5;
}

.react-quill-description .ql-container .ql-editor h6 {
  @apply text-h6;
}

.react-quill-description .ql-container .ql-editor blockquote {
  @apply p-4 my-4 border-s-4 border-gray-300 bg-gray-50;
}
.react-quill-description .ql-container .ql-editor h1,
.react-quill-description .ql-container .ql-editor h2,
.react-quill-description .ql-container .ql-editor h3,
.react-quill-description .ql-container .ql-editor h4,
.react-quill-description .ql-container .ql-editor h5,
.react-quill-description .ql-container .ql-editor h6,
.react-quill-description .ql-container .ql-editor p {
  @apply text-gray-500;
}

.react-quill-description .ql-container .ql-editor .ql-video {
  @apply w-[53.125rem] h-[29.375rem];
}

.react-quill-description .ql-container .ql-editor a {
  @apply text-accent;
}

.ql-color-picker
  .ql-picker-options
  .ql-picker-item[data-value='custom-picker']:before {
  content: 'Pick Color';
}

.react-quill-description
  .ql-color-picker
  .ql-picker-options
  .ql-picker-item[data-value='custom-picker'] {
  @apply !bg-accent !text-white px-4 py-1 !w-full !h-auto text-center cursor-pointer transition-all;
}
.react-quill-description
  .ql-color-picker
  .ql-picker-options
  .ql-picker-item[data-value='custom-picker']:hover {
  @apply !border-transparent !bg-accent-hover;
}
.react-quill-description .ql-disabled > .ql-editor > * {
  @apply cursor-not-allowed;
}
.react-quill-description .disabled-editor .ql-toolbar button,
.react-quill-description .disabled-editor .ql-toolbar button,
.react-quill-description .disabled-editor .ql-toolbar .ql-picker-label {
  @apply cursor-not-allowed select-none;
}
.react-quill-description .quill .ql-toolbar button:hover,
.react-quill-description .quill .ql-toolbar button:hover,
.react-quill-description .quill .ql-toolbar button:focus,
.react-quill-description .quill .ql-toolbar button:focus,
.react-quill-description .quill .ql-toolbar button.ql-active,
.react-quill-description .quill .ql-toolbar button.ql-active,
.react-quill-description .quill .ql-toolbar .ql-picker-label:hover,
.react-quill-description .quill .ql-toolbar .ql-picker-label:hover,
.react-quill-description .quill .ql-toolbar .ql-picker-label.ql-active,
.react-quill-description .quill .ql-toolbar .ql-picker-label.ql-active,
.react-quill-description .quill .ql-toolbar .ql-picker-item:hover,
.react-quill-description .quill .ql-toolbar .ql-picker-item:hover,
.react-quill-description .quill .ql-toolbar .ql-picker-item.ql-selected,
.react-quill-description .quill .ql-toolbar .ql-picker-item.ql-selected {
  @apply text-accent;
}

.react-quill-description .quill .ql-toolbar button:hover .ql-stroke,
.react-quill-description .quill .ql-toolbar button:hover .ql-stroke,
.react-quill-description .quill .ql-toolbar button:focus .ql-stroke,
.react-quill-description .quill .ql-toolbar button:focus .ql-stroke,
.react-quill-description .quill .ql-toolbar button.ql-active .ql-stroke,
.react-quill-description .quill .ql-toolbar button.ql-active .ql-stroke,
.react-quill-description .quill .ql-toolbar .ql-picker-label:hover .ql-stroke,
.react-quill-description .quill .ql-toolbar .ql-picker-label:hover .ql-stroke,
.react-quill-description
  .quill
  .ql-toolbar
  .ql-picker-label.ql-active
  .ql-stroke,
.react-quill-description
  .quill
  .ql-toolbar
  .ql-picker-label.ql-active
  .ql-stroke,
.react-quill-description .quill .ql-toolbar .ql-picker-item:hover .ql-stroke,
.react-quill-description .quill .ql-toolbar .ql-picker-item:hover .ql-stroke,
.react-quill-description
  .quill
  .ql-toolbar
  .ql-picker-item.ql-selected
  .ql-stroke,
.react-quill-description
  .quill
  .ql-toolbar
  .ql-picker-item.ql-selected
  .ql-stroke,
.react-quill-description .quill .ql-toolbar button:hover .ql-stroke-miter,
.react-quill-description .quill .ql-toolbar button:hover .ql-stroke-miter,
.react-quill-description .quill .ql-toolbar button:focus .ql-stroke-miter,
.react-quill-description .quill .ql-toolbar button:focus .ql-stroke-miter,
.react-quill-description .quill .ql-toolbar button.ql-active .ql-stroke-miter,
.react-quill-description .quill .ql-toolbar button.ql-active .ql-stroke-miter,
.react-quill-description
  .quill
  .ql-toolbar
  .ql-picker-label:hover
  .ql-stroke-miter,
.react-quill-description
  .quill
  .ql-toolbar
  .ql-picker-label:hover
  .ql-stroke-miter,
.react-quill-description
  .quill
  .ql-toolbar
  .ql-picker-label.ql-active
  .ql-stroke-miter,
.react-quill-description
  .quill
  .ql-toolbar
  .ql-picker-label.ql-active
  .ql-stroke-miter,
.react-quill-description
  .quill
  .ql-toolbar
  .ql-picker-item:hover
  .ql-stroke-miter,
.react-quill-description
  .quill
  .ql-toolbar
  .ql-picker-item:hover
  .ql-stroke-miter,
.react-quill-description
  .quill
  .ql-toolbar
  .ql-picker-item.ql-selected
  .ql-stroke-miter,
.react-quill-description
  .quill
  .ql-toolbar
  .ql-picker-item.ql-selected
  .ql-stroke-miter {
  @apply stroke-accent;
}

.react-quill-description .ql-align-center img {
  margin: 0 auto;
}
.react-quill-description .ql-align-right img {
  margin: 0 0 0 auto;
}
.react-quill-description .quill .ql-container {
  border: none;
}

.react-quill-description .quill .ql-toolbar {
  display: block;
  border: 0px;
  @apply border-b border-b-border-base border-solid bg-[#EEF1F4] rounded-tl rounded-tr;
}

.react-quill-description .ql-editor {
  min-height: 18em;
}

.react-quill-description .ql-picker.ql-font .ql-picker-item {
  font-size: 0;
}

.react-quill-description .ql-picker.ql-font .ql-picker-item:before {
  content: attr(data-value) !important;
  font-size: 14px;
}

.react-quill-description .ql-picker.ql-font .ql-active:before {
  content: attr(data-value) !important;
  font-size: 14px;
}

.react-quill-description
  .ql-picker.ql-font
  .ql-picker-label[data-value='Roboto']::before,
.react-quill-description
  .ql-picker.ql-font
  .ql-picker-item[data-value='Roboto']::before {
  font-family: 'Roboto', sans-serif;
  content: 'Roboto' !important;
}

.react-quill-description
  .ql-picker.ql-font
  .ql-picker-label[data-value='Raleway']::before,
.react-quill-description
  .ql-picker.ql-font
  .ql-picker-item[data-value='Raleway']::before {
  font-family: 'Raleway', sans-serif;
  content: 'Raleway' !important;
}

.react-quill-description
  .ql-picker.ql-font
  .ql-picker-label[data-value='Lato']::before,
.react-quill-description
  .ql-picker.ql-font
  .ql-picker-item[data-value='Lato']::before {
  font-family: 'Lato', sans-serif;
  content: 'Lato' !important;
}

.react-quill-description
  .ql-picker.ql-font
  .ql-picker-label[data-value='Rubik']::before,
.react-quill-description
  .ql-picker.ql-font
  .ql-picker-item[data-value='Rubik']::before {
  font-family: 'Rubik', sans-serif;
  content: 'Rubik' !important;
}

.react-quill-description
  .ql-picker.ql-font
  .ql-picker-label[data-value='OpenSans']::before,
.react-quill-description
  .ql-picker.ql-font
  .ql-picker-item[data-value='OpenSans']::before {
  font-family: 'Open Sans', sans-serif;
  content: 'Open Sans' !important;
}


/* react rich text editor front end design */
.react-editor-description .ql-font-Roboto {
  font-family: 'Roboto', sans-serif;
}
.react-editor-description .ql-font-Raleway {
  font-family: 'Raleway', sans-serif;
}
.react-editor-description .ql-font-Lato {
  font-family: 'Lato', sans-serif;
}
.react-editor-description .ql-font-Rubik {
  font-family: 'Rubik', sans-serif;
}
.react-editor-description .ql-font-OpenSans {
  font-family: 'Open Sans', sans-serif;
}
.react-editor-description h1,
.react-editor-description h2,
.react-editor-description h3,
.react-editor-description h4,
.react-editor-description h5,
.react-editor-description h6 {
  @apply leading-[150%];
}
.react-editor-description h1 {
  @apply text-h1;
}

.react-editor-description h2 {
  @apply text-h2;
}

.react-editor-description h3 {
  @apply text-h3;
}

.react-editor-description h4 {
  @apply text-h4;
}

.react-editor-description h5 {
  @apply text-h5;
}

.react-editor-description h6 {
  @apply text-h6;
}

.react-editor-description blockquote {
  @apply p-4 my-4 border-s-4 border-gray-300 bg-gray-50;
}

.react-editor-description p {
  @apply text-gray-500;
}

.react-editor-description .ql-video {
  @apply lg:w-[53.125rem] lg:h-[29.375rem] w-full h-full aspect-video;
}

.react-editor-description .ql-video.ql-align-center {
  @apply mx-auto;
}
.react-editor-description .ql-video.ql-align-right {
  @apply ml-auto;
}

.react-editor-description a {
  @apply text-accent underline;
}

.react-editor-description pre {
  @apply whitespace-pre-wrap my-1 py-1 px-2.5 rounded;
}

.react-editor-description pre.ql-syntax {
  @apply bg-[#23241f] text-[#f8f8f2] overflow-visible;
}

.react-editor-description ol,
.react-editor-description ul {
  list-style: revert;
  @apply pl-6 list-inside;
}

.react-editor-description .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3rem;
}
.react-editor-description li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5rem;
}
.react-editor-description .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3rem;
}
.react-editor-description li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5rem;
}
.react-editor-description .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6rem;
}
.react-editor-description li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5rem;
}
.react-editor-description .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6rem;
}
.react-editor-description li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5rem;
}
.react-editor-description .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9rem;
}
.react-editor-description li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5rem;
}
.react-editor-description .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9rem;
}
.react-editor-description li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5rem;
}
.react-editor-description .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12rem;
}
.react-editor-description li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5rem;
}
.react-editor-description .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12rem;
}
.react-editor-description li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5rem;
}
.react-editor-description .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15rem;
}
.react-editor-description li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5rem;
}
.react-editor-description .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15rem;
}
.react-editor-description li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5rem;
}
.react-editor-description .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18rem;
}
.react-editor-description li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5rem;
}
.react-editor-description .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18rem;
}
.react-editor-description li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5rem;
}
.react-editor-description .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21rem;
}
.react-editor-description li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5rem;
}
.react-editor-description .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21rem;
}
.react-editor-description li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5rem;
}
.react-editor-description .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24rem;
}
.react-editor-description li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5rem;
}
.react-editor-description .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24rem;
}
.react-editor-description li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5rem;
}
.react-editor-description .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27rem;
}
.react-editor-description li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5rem;
}
.react-editor-description .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27rem;
}
.react-editor-description li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5rem;
}
.react-editor-description .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.react-editor-description .ql-align-center {
  @apply text-center;
}
.react-editor-description .ql-align-justify {
  @apply text-justify;
}
.react-editor-description .ql-align-right {
  @apply text-right;
}

.react-editor-description .ql-align-center img {
  @apply mx-auto;
}
.react-editor-description .ql-align-right img {
  @apply ml-auto;
}