@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Playfair+Display&display=swap');


.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="roboto-mono"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="roboto-mono"]::before {
  content: 'Roboto Mono';
  font-family: 'Roboto Mono', monospace;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="playfair"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="playfair"]::before {
  content: 'Playfair Display';
  font-family: 'Playfair Display', serif;
}
/* Font labels for Quill font picker */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="helvetica-thin"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica-thin"]::before {
  content: 'Helvetica Thin';
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 100;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="helvetica-ultralight"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica-ultralight"]::before {
  content: 'Helvetica UltraLight';
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 200;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="helvetica-light"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica-light"]::before {
  content: 'Helvetica Light';
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="helvetica-regular"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica-regular"]::before {
  content: 'Helvetica Regular';
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 400;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="helvetica-medium"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica-medium"]::before {
  content: 'Helvetica Medium';
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 500;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="helvetica-bold"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica-bold"]::before {
  content: 'Helvetica Bold';
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 700;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="helvetica-condensedbold"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica-condensedbold"]::before {
  content: 'Helvetica Condensed Bold';
  font-family: 'HelveticaNeueCondensedBold', sans-serif;
  font-weight: 700;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="helvetica-black"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="helvetica-black"]::before {
  content: 'Helvetica Black';
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 900;
}


.ql-font-helvetica-thin {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 100;
}

.ql-font-helvetica-ultralight {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 200;
}

.ql-font-helvetica-light {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
}

.ql-font-helvetica-regular {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 400;
}

.ql-font-helvetica-medium {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 500;
}

.ql-font-helvetica-bold {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 700;
}

.ql-font-helvetica-condensedbold {
  font-family: 'HelveticaNeueCondensedBold', sans-serif;
  font-weight: 700;
}

.ql-font-helvetica-black {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 900;
}

.ql-font-roboto-mono {
  font-family: 'Roboto Mono', monospace;
}
.ql-font-playfair {
  font-family: 'Playfair Display', serif;
}

.ql-toolbar {
  background: #2c2c2c;
  border: 1px solid #444;
}

.ql-toolbar button,
.ql-toolbar .ql-picker {
  color: #ccc;
}

.ql-container {
  background: #1e1e1e;
  color: #eee;
  border: 1px solid #444;
}

.ql-editor {
  min-height: 300px;
  max-width: 100%;
}

.ql-editor pre {
  background: #2c2c2c;
  color: #ccc;
}

/* Optional: Invert table grid lines */
.ql-editor table,
.ql-editor td,
.ql-editor th {
  border-color: #666;
}