.tooltip300 {
    --bs-tooltip-max-width: 300px;
}

.tooltip500 {
    --bs-tooltip-max-width: 500px;
}

.tooltip500-left {
    --bs-tooltip-max-width: 500px;
}

.tooltip500-left .tooltip-inner {
    text-align: left;
}

.text-align-start {
    text-align: left;
}

.text-muted-shift {
    color: #717b86;
}

.liSpan {
    border: 1px solid;
    border-radius: 5px;
    padding: 0px 2px;
    align-content: center;
    white-space: nowrap;
}

    .liSpan:hover {
        cursor: pointer;
    }

html[data-bs-theme="light"] .liSpan {
    border-color: #666666;
    background-color: #eaf8fc;
}

    html[data-bs-theme="light"] .liSpan:hover {
        background-color: #cff4fc;
    }

html[data-bs-theme="light"] .liSpan.liSpanReq {
        background-color: #fcb6be;
}

html[data-bs-theme="dark"] .liSpan {
    border-color: #666666;
    background-color: #3f464e;
}

    html[data-bs-theme="dark"] .liSpan:hover {
        background-color: #032830;
    }

    html[data-bs-theme="dark"] .liSpan.liSpanReq {
        background-color: #60292a;
    }

html[data-bs-theme="light"] .yellowSpan {
    color: #ffd03b;
}

html[data-bs-theme="dark"] .yellowSpan {
    color: #4b2100;
}

html[data-bs-theme="light"] .highlightedValue {
    color: #d6b3ff;
}

html[data-bs-theme="dark"] .highlightedValue {
    color: #871874;
}

.custom-tooltip .tooltip-inner {
    max-width: 250px !important;
}

.custom-tooltip-xl .tooltip-inner {
    max-width: 400px !important;
    padding: 15px;
}

.custom-tooltip-xl ul {
    padding-left: 15px;
    margin-bottom: 0px;
}