.alert-violet {
    background-color: #cbb8ff;
    border: 1px solid #9975ff;
}

.alert-rose {
    background: #5a2f51;
    border: 1px solid #ad318e;
}

.text-bg-violet {
    background-color: #cbb8ff;
    border: 1px solid #9975ff;
    color: #212529;
}

.text-bg-rose {
    background: #5a2f51;
    border: 1px solid #ad318e;
    color: #dee2e6;
}

.bg-rose {
    background-color: rgba(135, 24, 116, 1) !important;
}

.bg-violet {
    background-color: rgba(104, 87, 198, 1) !important;
}

.badge-value {
    transition: all 0.3s ease;
    max-width: fit-content;
    align-items: center;
}

html[data-bs-theme="light"] .badge-value {
    background-color: #cbb8ff;
    border: 1px solid #9975ff;
    color: #212529;
}

html[data-bs-theme="dark"] .badge-value {
    background: #5a2f51;
    border: 1px solid #ad318e;
    color: #dee2e6;
}

.badge-delete {
    padding: 3px;
    position: absolute;
    right: 3px;
    top:0px;
    transform: translateY(10%);
    transition: all 0.3s ease;
    cursor: pointer;
}

html[data-bs-theme="light"] .badge-delete {
    border: 1px solid #9975ff;
    background: #bc2435;
}

html[data-bs-theme="dark"] .badge-delete {
    border: 1px solid #24272b;
    background: #bc2435;
}

@property --a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.aiGeneratedBannerBg {
    padding: 2px;
    border-radius: 6px;
    overflow: hidden;
}

.aiGeneratedBanner {
    padding: 1px 6px;
    border-radius: 4px;
    line-height: 1;
}

html[data-bs-theme="light"] .aiGeneratedBanner {
    background: #e7deff;
}

html[data-bs-theme="dark"] .aiGeneratedBanner {
    background: #332935;
}

#xmlAlert {
    line-break: anywhere;
}

#idsNavigationSidebar:not(.collapsed) ~ #idsMainSection #xmlAlert {
    max-width: calc(100vw - 300px);
}