.color-line {
    height: 5px;
    background: #ff0000;
    background-image: -webkit-gradient(linear, left top, right top, from(#02c0ce), color-stop(20%, #777edd), color-stop(20%, #8e44ad), color-stop(30%, #8e44ad), color-stop(30%, #2980b9), color-stop(40%, #2980b9), color-stop(40%, #27ae60), color-stop(50%, #27ae60), color-stop(50%, #f39c12), color-stop(60%, #f39c12), color-stop(60%, #d35400), color-stop(70%, #d35400), color-stop(70%, #777edd), color-stop(80%, #777edd), color-stop(80%, #ff679b), to(#45bbe0));
    background-image: linear-gradient(to right, #02c0ce, #777edd 20%, #8e44ad 20%, #8e44ad 30%, #2980b9 30%, #2980b9 40%, #27ae60 40%, #27ae60 50%, #f39c12 50%, #f39c12 60%, #d35400 60%, #d35400 70%, #777edd 70%, #777edd 80%, #ff679b 80%, #45bbe0 100%);
}


 
    .ql-container {
        height: auto !important;
    }
    .ql-editor {
        min-height: 100px;
        height: auto;
        overflow-y: hidden;
    }
    .ql-container{
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    .ql-toolbar{
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background-color: rgb(236, 239, 244);
    }
    .ql-variables{
            border: 1px solid #eff2f6;
            border-radius: 4px;
            padding:2px
    }

 .quill-wrapper{
border:transparent;
 
}

.quill-html{
width:100%;
min-height:200px;
border:0;
padding:12px;
font-family:monospace;
font-size:13px;
resize:vertical;
}
.ql-editor .varHighlight{
    color: red;
}
.ql-editor{
    background-color: white;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.upload-box {
    border: 1px dashed #ccc;
    padding: 6px;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    display: block;
    margin-top:0 !important;
}
 
.upload-box input {
    display: none;
}

.upload-text:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0c6"; /* Paperclicp */
    padding-right: 3px;
}
.upload-box:hover {
    border-color: #0d6efd;
    background: #f8f9fa;
}
label {
    font-size: 0.9rem;   /* smaller text */
    color: #6c757d;      /* Bootstrap text-muted color */
    display: block;      /* ensures proper spacing */
    margin-top: 0.25rem; /* optional spacing from input */
}