.bootstrap-tagsinput .tag {
    background: #358468 !important;
    padding-right: 3px;
    padding-left: 3px;
    border-radius: 5px;
    margin-right: 5px;
    padding-right: 25px;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

@media only screen and (max-width: 991.98px) {
    [data-toggleclass=app-mobile-menu-open].backdrop {
        z-index: 1 !important;
    }
}

.bootstrap-tagsinput .tag [data-role="remove"] {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    padding: 0 5px;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
}

    .bootstrap-tagsinput .tag [data-role="remove"]:hover {
        color: red;
    }

.CustomAlignments {
    margin-top: 23px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    width: 100%;
    border: 1px solid #8080808f;
    padding: 10px 10px;
    border-radius: 4px;
}

pre {
    padding: 1rem 0;
    border-radius: 0.5rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

    pre code.hljs {
        padding: 1.5em;
        font-size: 0.875rem;
    }

.hljs-comment {
    color: #6d9d9d;
}

.code-example {
    margin: 1.5rem 0;
}

.concept-section {
    margin-bottom: 3rem;
}

.concept-title.with-lead {
    font-size: 2.5rem;
    font-weight: 300;
}

.sidebar {
    position: sticky;
    top: 1rem;
}

.main-content {
    line-height: 1.6;
}

.concept-title {
    color: var(--primary-500);
    font-size: 1.5rem;
}

.example-output {
    background-color: #e9ecef;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
}

.pro-tip {
    background-color: rgba(var(--bs-success-rgb), 0.2);
    border-left: 4px solid var(--success-500);
    padding: 1rem;
    margin: 1rem 0;
}

.warning {
    background-color: var(--warning-100);
    border-left: 4px solid var(--warning-700);
    padding: 1rem;
    margin: 1rem 0;
}

.demo-sidebar a {
    display: block;
    padding: 0.25rem 0;
    color: var(--bs-gray-900);
}

    .demo-sidebar a:hover {
        color: var(--primary-500);
    }

.sidebar {
    position: sticky;
    top: 20px;
    align-self: flex-start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 15px 0;
}

    .sidebar ul {
        list-style: none;
        padding-left: 0;
    }

    .sidebar a {
        color: #0d6efd;
        text-decoration: none;
        display: block;
        padding: 8px 0;
    }

        .sidebar a:hover {
            text-decoration: underline;
            color: #0a58ca;
        }

/* Ensure sidebar stays within viewport and doesn’t overlap footer */
@media (max-width: 991px) {
    .sidebar {
        position: static;
        top: auto;
        max-height: none;
        padding: 15px;
    }
}

/* Highlight.js styles (if used) */
pre code {
    background-color: #2d2d2d;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    display: block;
}

/* Tip box styling */
.tip-box {
    background-color: #e6f7ff;
    border-left: 4px solid #1890ff;
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
}

.dynamicPanel {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(6px); /* Blur background */
    background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent overlay */
    justify-content: center;
    align-items: center;
}

    .dynamicPanel.show {
        display: flex; /* Needed for centering */
    }

    .dynamicPanel .panel-head {
        background-color: #f1f1f1;
        border-bottom: 1px solid #ddd;
    }

    .dynamicPanel .panel-content-style {
        width: 100%;
        min-height: 200px; /* Minimum height */
        max-height: 80vh; /* Maximum height based on viewport */
        overflow-y: auto; /* Scroll if content is too tall */
        overflow-x: hidden; /* Scroll if content is too tall */
        animation: fadeIn 0.3s ease;
    }

    .dynamicPanel .panel-footer {
        padding: 15px;
        background-color: #f1f1f1;
        border-top: 1px solid #ddd;
        text-align: right;
    }

/* Fade animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

::-webkit-scrollbar {
    width: 12px;
}

/* Track (background) 
::-webkit-scrollbar-track {
    background: var(--app-body-color);
}*/
::-webkit-scrollbar-thumb {
    background-color: var(--app-body-color);
    border-radius: 10px;
    border: 3px solid var(--bs-body-bg);
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #8a8a8a;
    }

.k-grid tr:hover,
.k-grid .k-alt:hover {
    background-color: transparent !important;
}