/* Set dropdown font-families */
.ql-toolbar .ql-font span[data-label="Sailec Light"]::before {
  font-family: "Sailec Light";
}

.ql-toolbar .ql-font span[data-label="Sofia Pro"]::before {
  font-family: "Sofia";
}

.ql-toolbar .ql-font span[data-label="Slabo 27px"]::before {
  font-family: "Slabo 27px";
}

.ql-toolbar .ql-font span[data-label="Roboto Slab"]::before {
  font-family: "Roboto Slab";
}

.ql-toolbar .ql-font span[data-label=Inconsolata]::before {
  font-family: "Inconsolata";
}

.ql-toolbar .ql-font span[data-label="Ubuntu Mono"]::before {
  font-family: "Ubuntu Mono";
}

/* Set content font-families */
.ql-font-sofia {
  font-family: "Sofia";
}

.ql-font-slabo {
  font-family: "Slabo 27px";
}

.ql-font-roboto {
  font-family: "Roboto Slab";
}

.ql-font-inconsolata {
  font-family: "Inconsolata";
}

.ql-font-ubuntu {
  font-family: "Ubuntu Mono";
}

.ql-toolbar {
  border-color: #d8d6de !important;
}
.ql-toolbar .ql-formats:focus,
.ql-toolbar .ql-formats *:focus {
  outline: 0;
}
.ql-toolbar .ql-formats .ql-picker-label:hover, .ql-toolbar .ql-formats .ql-picker-label:focus,
.ql-toolbar .ql-formats button:hover,
.ql-toolbar .ql-formats button:focus {
  color: #0097a7 !important;
}
.ql-toolbar .ql-formats .ql-picker-label:hover .ql-stroke, .ql-toolbar .ql-formats .ql-picker-label:focus .ql-stroke,
.ql-toolbar .ql-formats button:hover .ql-stroke,
.ql-toolbar .ql-formats button:focus .ql-stroke {
  stroke: #0097a7 !important;
}
.ql-toolbar .ql-formats .ql-picker-label:hover .ql-fill, .ql-toolbar .ql-formats .ql-picker-label:focus .ql-fill,
.ql-toolbar .ql-formats button:hover .ql-fill,
.ql-toolbar .ql-formats button:focus .ql-fill {
  fill: #0097a7 !important;
}
.ql-toolbar .ql-formats .ql-picker-label.ql-active,
.ql-toolbar .ql-formats button.ql-active {
  color: #0097a7 !important;
}
.ql-toolbar .ql-formats .ql-picker-item.ql-selected {
  color: #0097a7 !important;
}
.ql-toolbar .ql-formats .ql-picker-options .ql-picker-item:hover {
  color: #0097a7 !important;
}
.ql-toolbar .ql-formats .ql-picker-options .ql-active {
  color: #0097a7 !important;
}

.ql-bubble .ql-picker {
  color: #fff !important;
}
.ql-bubble .ql-stroke {
  stroke: #fff !important;
}
.ql-bubble .ql-fill {
  fill: #fff !important;
}

.ql-container {
  border-color: #d8d6de !important;
  font-family: "Montserrat", Helvetica, Arial, serif;
}

.ql-editor a {
  color: #0097a7;
}

.ql-picker {
  color: #5e5873 !important;
}

.ql-stroke {
  stroke: #5e5873 !important;
}

.ql-active .ql-stroke {
  stroke: #0097a7 !important;
}
.ql-active .ql-fill {
  fill: #0097a7 !important;
}

.ql-fill {
  fill: #5e5873 !important;
}

.ql-toolbar,
.ql-container {
  border-top-right-radius: 0.357rem;
  border-top-left-radius: 0.357rem;
}

.ql-toolbar + .ql-container, .ql-container + .ql-toolbar {
  border-bottom-right-radius: 0.357rem;
  border-bottom-left-radius: 0.357rem;
  border-top-right-radius: unset;
  border-top-left-radius: unset;
}

.dark-layout .quill-toolbar,
.dark-layout .ql-toolbar {
  background-color: #283046;
  border-color: #3b4253 !important;
}
.dark-layout .quill-toolbar .ql-picker,
.dark-layout .ql-toolbar .ql-picker {
  color: #fff !important;
}
.dark-layout .quill-toolbar .ql-stroke,
.dark-layout .ql-toolbar .ql-stroke {
  stroke: #fff !important;
}
.dark-layout .quill-toolbar .ql-fill,
.dark-layout .ql-toolbar .ql-fill {
  fill: #fff !important;
}
.dark-layout .quill-toolbar .ql-picker-options,
.dark-layout .quill-toolbar .ql-picker-label,
.dark-layout .ql-toolbar .ql-picker-options,
.dark-layout .ql-toolbar .ql-picker-label {
  background-color: #283046;
}
.dark-layout .quill-toolbar .ql-picker-options .ql-active,
.dark-layout .quill-toolbar .ql-picker-label .ql-active,
.dark-layout .ql-toolbar .ql-picker-options .ql-active,
.dark-layout .ql-toolbar .ql-picker-label .ql-active {
  color: #0097a7 !important;
}
.dark-layout .ql-active .ql-stroke {
  stroke: #0097a7 !important;
}
.dark-layout .ql-active .ql-fill {
  fill: #0097a7 !important;
}
.dark-layout .ql-bubble .ql-toolbar {
  background: #3b4253;
  border-radius: 2rem;
}
.dark-layout .ql-container {
  border-color: #3b4253 !important;
  background-color: #283046;
}
.dark-layout .ql-editor .ql-syntax {
  background-color: #161d31;
}
.dark-layout .ql-editor.ql-blank:before {
  color: #b4b7bd;
}

[data-textdirection=rtl] .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) i,
[data-textdirection=rtl] .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  left: auto !important;
  right: 0;
}