/* Text Panel */
.ql-toolbar {
    background-color: #ffffff;
}

.editor {
    min-height: 300px;
}

.ql-snow .ql-picker.ql-font {
    width: max-content;
}

.ql-picker-label {
    margin-right: 30px;
}

/* Font Family */
.ql-font-Arial { font-family: "Arial"; }
.ql-font-Arial-Black { font-family: "Arial Black"; }
.ql-font-Brush-Script-MT { font-family: "Brush Script MT"; }
.ql-font-Comic-Sans-MS { font-family: "Comic Sans MS"; }
.ql-font-Courier-New { font-family: "Courier New"; }
.ql-font-Georgia { font-family: "Georgia"; }
.ql-font-Helvetica { font-family: "Helvetica"; }
.ql-font-Impact { font-family: "Impact"; }
.ql-font-Lucida-Sans-Unicode { font-family: "Lucida Sans Unicode"; }
.ql-font-Tahoma { font-family: "Tahoma"; }
.ql-font-Times-New-Roman { font-family: "Times New Roman"; }
.ql-font-Trebuchet-MS { font-family: "Trebuchet MS"; }
.ql-font-Verdana { font-family: "Verdana"; }

/* Font Display Selection */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
	content: "Arial";
	font-family: "Arial";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial-Black]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial-Black]::before {
	content: "Arial Black";
	font-family: "Arial Black";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Brush-Script-MT]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Brush-Script-MT]::before {
	content: "Brush Script MT";
	font-family: "Brush Script MT";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Comic-Sans-MS]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Comic-Sans-MS]::before {
	content: "Comic Sans MS";
	font-family: "Comic Sans MS";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Courier-New]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Courier-New]::before {
	content: "Courier New";
	font-family: "Courier New";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Georgia]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Georgia]::before {
	content: "Georgia";
	font-family: "Georgia";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Helvetica]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Helvetica]::before {
	content: "Helvetica";
	font-family: "Helvetica";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Impact]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Impact]::before {
	content: "Impact";
	font-family: "Impact";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Lucida-Sans-Unicode]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Lucida-Sans-Unicode]::before {
	content: "Lucida Sans Unicode";
	font-family: "Lucida Sans Unicode";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Tahoma]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Tahoma]::before {
	content: "Tahoma";
	font-family: "Tahoma";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
	content: "Times New Roman";
	font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Trebuchet-MS]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Trebuchet-MS]::before {
	content: "Trebuchet MS";
	font-family: "Trebuchet MS";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Verdana]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Verdana]::before {
	content: "Verdana";
	font-family: "Verdana";
}

.text-content {
    width: -webkit-fill-available;
}

.panel {
    display: flex;
    flex-direction: row;
    padding: 5px 0;
    background-color: #ffffff;
    justify-content: space-between;
    align-items: center;
    align-self: flex-end;
    width: -webkit-fill-available;
}

/* Image Panel */
.toolbar-panel {
    @extend .panel;

    .toolbar-panel-input {
        flex-grow: 1;

        .toobar-panel-image-width {
            padding: 0 10px;

            .toolbar-panel-width-text {
                font-size: 14px;
                color: #202020;
            }
        }

        .toolbar-panel-image-link {
            margin: 0 20px;
        }
    }
}

.footer-panel {
    @extend .panel;

    .footer-panel-switch {
        flex-grow: 1;
        .footer-panel-border-bottom {
            padding: 0 10px;
        }

        .footer-panel-background {
            padding: 0 20px;
        }
    }

    .footer-panel-button {
        flex-grow: 1;
        text-align: right;

        .footer-panel-compress-image {
            margin: 0 10px;
        }
    }
}