/* For quill text editor */
@import "~quill/dist/quill.snow.css";
/*
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: 'Normal';
    font-size: 14px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: 'Large';
    font-size: 16px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: 'Huge';
    font-size: 20px !important;
}
*/


.myQuill {

    width:100%;

    .ql-toolbar {
        background-color: var(--ion-color-light);
        border:0px;
    }
    
    .ql-container {

        border-color: var(--ion-color-light);
        border-bottom-color: var(--ion-color-dark);
        font-family:var(--ion-font-family,);
        font-size:14px;
       
        h1 {
            font-size:20px;
            margin-bottom:6px;
        }

        h2 {
            font-size:16px;
            margin-bottom:6px;
        }
    }

    /* Base Colors */

    .ql-snow.ql-toolbar button,
    .ql-snow .ql-toolbar button,
    .ql-snow.ql-toolbar .ql-picker-label,
    .ql-snow .ql-toolbar .ql-picker-label,
    .ql-snow.ql-toolbar .ql-picker-item,
    .ql-snow .ql-toolbar .ql-picker-item {
      color: var(--ion-color-medium);
    }
    .ql-snow.ql-toolbar button .ql-fill,
    .ql-snow .ql-toolbar button .ql-fill,
    .ql-snow.ql-toolbar button .ql-fill,
    .ql-snow .ql-toolbar button .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item .ql-fill,
    .ql-snow.ql-toolbar button .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar button .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item .ql-stroke.ql-fill {
      fill: var(--ion-color-medium);
    }
    .ql-snow.ql-toolbar button .ql-stroke,
    .ql-snow .ql-toolbar button .ql-stroke,
    .ql-snow.ql-toolbar button .ql-stroke,
    .ql-snow .ql-toolbar button .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-label .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-label .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-item .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-item .ql-stroke,
    .ql-snow.ql-toolbar button .ql-stroke-miter,
    .ql-snow .ql-toolbar button .ql-stroke-miter,
    .ql-snow.ql-toolbar button .ql-stroke-miter,
    .ql-snow .ql-toolbar button .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-label .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-label .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-item .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-item .ql-stroke-miter {
      stroke: var(--ion-color-medium);
    }

    /* Hover and highlight colors */

    .ql-snow.ql-toolbar button:hover,
    .ql-snow .ql-toolbar button:hover,
    .ql-snow.ql-toolbar button:focus,
    .ql-snow .ql-toolbar button:focus,
    .ql-snow.ql-toolbar button.ql-active,
    .ql-snow .ql-toolbar button.ql-active,
    .ql-snow.ql-toolbar .ql-picker-label:hover,
    .ql-snow .ql-toolbar .ql-picker-label:hover,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active,
    .ql-snow.ql-toolbar .ql-picker-item:hover,
    .ql-snow .ql-toolbar .ql-picker-item:hover,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
      color: var(--ion-color-primary);
    }
    .ql-snow.ql-toolbar button:hover .ql-fill,
    .ql-snow .ql-toolbar button:hover .ql-fill,
    .ql-snow.ql-toolbar button:focus .ql-fill,
    .ql-snow .ql-toolbar button:focus .ql-fill,
    .ql-snow.ql-toolbar button.ql-active .ql-fill,
    .ql-snow .ql-toolbar button.ql-active .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
    .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
      fill: var(--ion-color-primary);
    }
    .ql-snow.ql-toolbar button:hover .ql-stroke,
    .ql-snow .ql-toolbar button:hover .ql-stroke,
    .ql-snow.ql-toolbar button:focus .ql-stroke,
    .ql-snow .ql-toolbar button:focus .ql-stroke,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke,
    .ql-snow .ql-toolbar button.ql-active .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
    .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
    .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
    .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
    .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
    .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
    .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
    .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
    .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
      stroke: var(--ion-color-primary);
    }

    .ql-editor.ql-blank::before {
        color: var(--ion-color-dark);
    }
    background-color:transparent;

    .item-has-focus {

        background-color: red;
    }
}

.noQlPadding {

    .ql-editor {

        padding:0px;
        white-space: normal;
    }
}