/* 1. Make the main toolbar background black and remove default borders */
.ql-toolbar.ql-snow {
    background-color: black !important;
    border: 2px solid white !important; /* Optional: Dark gray border */
}

/* 2. Color the SVG Icons White */
/* Stroke-based icons (most of them: bold, italic, etc.) */
.ql-snow .ql-stroke {
    stroke: white !important;
}

/* Fill-based icons (like the color bucket, triangle dropdowns) */
.ql-snow .ql-fill, 
.ql-snow .ql-stroke.ql-fill {
    fill: white !important;
}

/* 3. Color the Dropdown Text and Picker Labels White */
.ql-snow .ql-picker {
    color: white !important;
}

/* 4. Handle Hover States (Optional but recommended) */
/* When hovering, turn them a distinct color (e.g., yellow or light gray) so the user knows it's clickable */
.ql-snow .ql-picker:hover,
.ql-snow .ql-picker-label:hover {
    color: #ddd !important;
}

.ql-snow button:hover .ql-stroke,
.ql-snow .ql-picker-label:hover .ql-stroke {
    stroke: #ddd !important;
}

.ql-snow button:hover .ql-fill,
.ql-snow .ql-picker-label:hover .ql-fill {
    fill: #ddd !important;
}

/* 5. Style the Editor Container (Bottom part) to match */
/* Optional: If you want the typing area to also have a black background */
.ql-container.ql-snow {
    background-color: #1a1a1a; /* Dark gray for contrast */
    border: 2px solid white !important;
    color: white !important;
    height: 130px !important;
    font-size: 16px !important;
}

input {
  border: 2px solid  white !important;
}

input,
.ql-editor {
  padding: 4px !important;
  font-size: 16px!important;
}

#editor {
  height: 130px !important;
}