/* Base styling for all highlight classes */
.highlight-entity {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
}

/* Success theme */
.highlight-success-0 {
    background-color: #6caf48;
}

.highlight-success-1 {
    background-color: #78c350;
}

.highlight-success-2 {
    background-color: #85c961;
}

.highlight-success-3 {
    background-color: #93cf72;
}

.highlight-success-4 {
    background-color: #a0d584;
}

.highlight-success-5 {
    background-color: #aedb96;
}

.highlight-success-6 {
    background-color: #bbe1a7;
}

.highlight-success-7 {
    background-color: #c9e7b9;
}

.highlight-success-8 {
    background-color: #d6edca;
}

.highlight-success-9 {
    background-color: #e4f3dc;
}

.highlight-success-10 {
    background-color: #f1f9ed;
}

/* Danger theme */
.highlight-danger-0 {
    background-color: #AF4844;
}

.highlight-danger-1 {
    background-color: #c3504c;
}

.highlight-danger-2 {
    background-color: #C9615D;
}

.highlight-danger-3 {
    background-color: #CF736F;
}

.highlight-danger-4 {
    background-color: #D58481;
}

.highlight-danger-5 {
    background-color: #DB9693;
}

.highlight-danger-6 {
    background-color: #E1A7A5;
}

.highlight-danger-7 {
    background-color: #E7B9B7;
}

.highlight-danger-8 {
    background-color: #EDCAC9;
}

.highlight-danger-9 {
    background-color: #F3DCDB;
}

.highlight-danger-10 {
    background-color: #F9EDED;
}

/* Yellow theme */
.highlight-yellow-0 {
    background-color: #ffff00;
}

.highlight-yellow-1 {
    background-color: #ffff19;
}

.highlight-yellow-2 {
    background-color: #ffff32;
}

.highlight-yellow-3 {
    background-color: #ffff4c;
}

.highlight-yellow-4 {
    background-color: #ffff66;
}

.highlight-yellow-5 {
    background-color: #ffff7f;
}

.highlight-yellow-6 {
    background-color: #ffff99;
}

.highlight-yellow-7 {
    background-color: #ffffb2;
}

.highlight-yellow-8 {
    background-color: #ffffcc;
}

.highlight-yellow-9 {
    background-color: #ffffe5;
}

.highlight-yellow-10 {
    background-color: #ffffe5;
}

/* Blue theme */
.highlight-info-0 {
    background-color: #486caf;
}

.highlight-info-1 {
    background-color: #5078c3;
}

.highlight-info-2 {
    background-color: #6185c9;
}

.highlight-info-3 {
    background-color: #7293cf;
}

.highlight-info-4 {
    background-color: #84a0d5;
}

.highlight-info-5 {
    background-color: #96aedb;
}

.highlight-info-6 {
    background-color: #a7bbe1;
}

.highlight-info-7 {
    background-color: #b9c9e7;
}

.highlight-info-8 {
    background-color: #cad6ed;
}

.highlight-info-9 {
    background-color: #dce4f3;
}

.highlight-info-10 {
    background-color: #edf1f9;
}


/* Purple theme */
.highlight-purple-0 {
    background-color: #b761cf;
}

.highlight-purple-1 {
    background-color: #cc6ce7;
}

.highlight-purple-2 {
    background-color: #d17ae9;
}

.highlight-purple-3 {
    background-color: #d689eb;
}

.highlight-purple-4 {
    background-color: #db98ee;
}

.highlight-purple-5 {
    background-color: #e0a6f0;
}

.highlight-purple-6 {
    background-color: #e5b5f3;
}

.highlight-purple-7 {
    background-color: #eac4f5;
}

.highlight-purple-8 {
    background-color: #efd2f7;
}

.highlight-purple-9 {
    background-color: #f4e1fa;
}

.highlight-purple-10 {
    background-color: #f9f0fc;
}

/* Purple theme */
.highlight-teal-0 {
    background-color: #53cbcf;
}

.highlight-teal-1 {
    background-color: #5de2e7;
}

.highlight-teal-2 {
    background-color: #6de4e9;
}

.highlight-teal-3 {
    background-color: #7de7eb;
}

.highlight-teal-4 {
    background-color: #8deaee;
}

.highlight-teal-5 {
    background-color: #9dedf0;
}

.highlight-teal-6 {
    background-color: #aef0f3;
}

.highlight-teal-7 {
    background-color: #bef3f5;
}

.highlight-teal-8 {
    background-color: #cef6f7;
}

.highlight-teal-9 {
    background-color: #def9fa;
}

.highlight-teal-10 {
    background-color: #eefcfc;
}

/* Grey theme */
.highlight-grey-0 {
    background-color: #b9b9b9;
}

.highlight-grey-1 {
    background-color: #cecece;
}

.highlight-grey-2 {
    background-color: #d2d2d2;
}

.highlight-grey-3 {
    background-color: #d7d7d7;
}

.highlight-grey-4 {
    background-color: #dcdcdc;
}

.highlight-grey-5 {
    background-color: #e1e1e1;
}

.highlight-grey-6 {
    background-color: #e6e6e6;
}

.highlight-grey-7 {
    background-color: #ebebeb;
}

.highlight-grey-8 {
    background-color: #f0f0f0;
}

.highlight-grey-9 {
    background-color: #f5f5f5;
}

.highlight-grey-10 {
    background-color: #fafafa;
}

/* Orange theme */
.highlight-orange-0 {
    background-color: #e48900;
}

.highlight-orange-1 {
    background-color: #fe9900;
}

.highlight-orange-2 {
    background-color: #fea319;
}

.highlight-orange-3 {
    background-color: #fead32;
}

.highlight-orange-4 {
    background-color: #feb74c;
}

.highlight-orange-5 {
    background-color: #fec166;
}

.highlight-orange-6 {
    background-color: #fecc7f;
}

.highlight-orange-7 {
    background-color: #fed699;
}

.highlight-orange-8 {
    background-color: #fee0b2;
}

.highlight-orange-9 {
    background-color: #feeacc;
}

.highlight-orange-10 {
    background-color: #fef4e5;
}

.color-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 2px solid transparent; /* Default border */
    transition: border 0.2s ease-in-out;
}

    .color-circle.selected {
        border: 3px solid #fff; /* White ring for the selected color */
        box-shadow: 0 0 0 2px #000; /* Optional black outer shadow for visibility */
    }

#colorAndExportContainer {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust spacing between dropdown and button */
}

.highlight-soft-yellow {
    background-color: rgba(255, 255, 0, 0.30);
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
}

.highlight-darken-soft-success {
    background-color: rgba(120, 195, 80, 0.3);
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
}

.highlight-lighten-soft-success {
    background-color: rgba(120, 195, 80, 0.05);
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
}

.highlight-darken-soft-warning {
    background-color: rgba(195, 120, 80, 0.3);
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
}

.highlight-darken-soft-danger {
    background-color: rgba(195, 80, 80, 0.3);
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
}


.highlight-darken-soft-info {
    background-color: rgba(80, 120, 195, 0.3);
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
}


.highlight-darken-soft-secondary {
    background-color: #6c757d;
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
}

.tippy-box {
    font-size: 12px;
}

    .tippy-box.theme-small {
        font-size: 12px;
    }