.ql-snow .ql-picker.ql-header {
    width: 50px !important
}

/* COLORS */



/* front.primary 377dff */
.ql-color-377dff {
    color: #377dff;
}
.ql-bg-377dff{
    background-color: #377dff
}
.ql-picker-item[data-value="377dff"] {
    background-color: #377dff !important;
}


/* front.secondary 71869d */
.ql-color-71869d {
    color: #71869d;
}
.ql-bg-71869d{
    background-color: #71869d
}
.ql-picker-item[data-value="71869d"] {
    background-color: #71869d !important;
}

/* front.success 00c9a7 */
.ql-color-00c9a7 {
    color: #00c9a7;
}
.ql-bg-00c9a7{
    background-color: #00c9a7
}
.ql-picker-item[data-value="00c9a7"] {
    background-color: #00c9a7 !important;
}

/* front.danger de4437 */ 
.ql-color-de4437 {
    color: #de4437;
}
.ql-bg-de4437{
    background-color: #de4437
}
.ql-picker-item[data-value="de4437"] {
    background-color: #de4437 !important;
}

/* front.warning f5ca99 */
.ql-color-f5ca99 {
    color: #f5ca99;
}
.ql-bg-f5ca99{
    background-color: #f5ca99
}
.ql-picker-item[data-value="f5ca99"] {
    background-color: #f5ca99 !important;
}

/* front.info 09a5be */
.ql-color-09a5be {
    color: #09a5be;
}
.ql-bg-09a5be{
    background-color: #09a5be
}
.ql-picker-item[data-value="09a5be"] {
    background-color: #09a5be !important;
}

/* front.light f7faff */
.ql-color-f7faff {
    color: #f7faff;
}
.ql-bg-f7faff{
    background-color: #f7faff
}
.ql-picker-item[data-value="f7faff"] {
    background-color: #f7faff !important;
}

/* front.dark 1e2022 */
.ql-color-1e2022 {
    color: #1e2022;
}
.ql-bg-1e2022{
    background-color: #1e2022
}
.ql-picker-item[data-value="1e2022"] {
    background-color: #1e2022 !important;
}

/* front.navy 21325b */
.ql-color-21325b {
    color: #21325b;
}
.ql-bg-21325b{
    background-color: #21325b
}
.ql-picker-item[data-value="21325b"] {
    background-color: #21325b !important;
}

/* vuetify.secondary 71869d */
.ql-color-71869d {
    color: #71869d;
}
.ql-bg-71869d{
    background-color: #71869d
}
.ql-picker-item[data-value="71869d"] {
    background-color: #71869d !important;
}

/* vuetify.accent b71c1c */
.ql-color-b71c1c {
    color: #b71c1c;
}
.ql-bg-b71c1c{
    background-color: #b71c1c
}
.ql-picker-item[data-value="b71c1c"] {
    background-color: #b71c1c !important;
}

/* vuetify error AB2C34 */
.ql-color-AB2C34 {
    color: #AB2C34;
}
.ql-bg-AB2C34{
    background-color: #AB2C34
}
.ql-picker-item[data-value="AB2C34"] {
    background-color: #AB2C34 !important;
}

/* vuetify warning ba6800 */
.ql-color-ba6800 {
    color: #ba6800;
}
.ql-bg-ba6800{
    background-color: #ba6800
}
.ql-picker-item[data-value="ba6800"] {
    background-color: #ba6800 !important;
}

/* vuetify info 377dff */
.ql-color-377dff {
    color: #377dff;
}
.ql-bg-377dff{
    background-color: #377dff
}
.ql-picker-item[data-value="377dff"] {
    background-color: #377dff !important;
}

/* vuetify success 43a047 */
.ql-color-43a047 {
    color: #43a047;
}
.ql-bg-43a047{
    background-color: #43a047
}
.ql-picker-item[data-value="43a047"] {
    background-color: #43a047 !important;
}


/* custom.highlight ffffe8 */
.ql-color-ffffe8 {
    color: #ffffe8;
}
.ql-bg-ffffe8{
    background-color: #ffffe8
}
.ql-picker-item[data-value="ffffe8"] {
    background-color: #ffffe8 !important;
}

/* custom.redlight fff4f4 */
.ql-color-fff4f4 {
    color: #fff4f4;
}
.ql-bg-fff4f4{
    background-color: #fff4f4
}
.ql-picker-item[data-value="fff4f4"] {
    background-color: #fff4f4 !important;
}


/* custom.light-yellow FFFFF7 */
.ql-color-FFFFF7 {
    color: #FFFFF7;
}
.ql-bg-FFFFF7{
    background-color: #FFFFF7
}
.ql-picker-item[data-value="FFFFF7"] {
    background-color: #FFFFF7 !important;
}


/* wrisc.pastel siyah: #2C292A */
.ql-color-2C292A {
    color: #2C292A;
}
.ql-bg-2C292A{
    background-color: #2C292A
}
.ql-picker-item[data-value="2C292A"] {
    background-color: #2C292A !important;
}

/* wrisc.pastel kahvebordo: #472835 */
.ql-color-472835 {
    color: #472835;
}
.ql-bg-472835{
    background-color: #472835
}
.ql-picker-item[data-value="472835"] {
    background-color: #472835 !important;
}

/* wrisc.pastel koyu pembe: #6A505B */
.ql-color-6A505B {
    color: #6A505B;
}
.ql-bg-6A505B{
    background-color: #6A505B
}
.ql-picker-item[data-value="6A505B"] {
    background-color: #6A505B !important;
}

/* wrisc.pastel yesil: #86AD9F */
.ql-color-86AD9F {
    color: #86AD9F;
}
.ql-bg-86AD9F{
    background-color: #86AD9F
}
.ql-picker-item[data-value="86AD9F"] {
    background-color: #86AD9F !important;
}


/* wrisc.pastel koyu yesil: #94B6A8  */
.ql-color-94B6A8 {
    color: #94B6A8;
}
.ql-bg-94B6A8{
    background-color: #94B6A8
}
.ql-picker-item[data-value="94B6A8"] {
    background-color: #94B6A8 !important;
}





/*  QUILL FONTS
    - 'sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu', 'mirza'
*/

/* Set dropdown font-families */

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

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

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

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

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

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

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

/* Set content font-families */

/* We do not set Aref Ruqaa since it is the default font */

.ql-font-sofia {
    font-family: "Sofia";
}

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

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

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

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

.ql-font-mirza {
    font-family: "Mirza";
}