[data-bs-theme=dark] {
    --my-table-bg: #ffffff1a;
}

.table thead {
    --bs-table-bg: var(--my-table-bg) !important;
}

body {
    font-family: "Inter", "Plus Jakarta Sans", "Raleway";
}

.text-bg-pass {
    background-color: #20c997;
}

.text-bg-fail {
    background-color: #dc3545;
}

.text-bg-tag {
    color: #6c757d;
    background-color: #dee2e6;
}

.grade-bg-container {
    position: relative; /* Ensure the container is the positioning context */
    overflow: hidden; /* Prevent the pseudo-element from overflowing */
}

.grade-bg-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vh;
    height: 100vh;
    background-image: url("/ddehyaegv/raw/upload/v1/static/app/img/cucom_logo_light.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15; /* Set the opacity for the background image */
    z-index: -1; /* Ensure it appears behind the content */
    transform: translate(-50%, -50%); /* Center the pseudo-element */
}

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
  
.rotating-gradient-effect {
    --bs-bg-opacity: 1;
    background: rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity));
    border-radius: 0.5rem;
    position: relative;
}

.rotating-gradient-effect::before,
.rotating-gradient-effect::after {
    content: "";
    position: absolute;
    inset: -0.1rem;
    z-index: -1;
    background: conic-gradient(
        from var(--gradient-angle),
        var(--bs-red),
        var(--bs-blue),
        var(--bs-teal),
        var(--bs-yellow),
        var(--bs-orange)
);
    border-radius: inherit;
    animation: rotation 2.5s linear infinite;
}

.rotating-gradient-effect::after {
    filter: blur(2rem);
}

@keyframes rotation {
0% {
    --gradient-angle: 0deg;
}
100% {
    --gradient-angle: 360deg;
}
}

.bd-gutter {
    --bs-gutter-x: 3rem;
}
.bd-layout {
    display: grid;
    grid-template-areas: "sidebar main";
    grid-template-columns: 1fr 5fr;
    gap: 1.5rem;
}
.bd-sidebar {
    position: sticky;
    top: 5rem;
    display: block !important;
    height: calc(100vh - 6rem);
    overflow-y: auto;
}
.bd-main {
    grid-area: main;
    grid-template-areas: "intro toc" "content toc";
    grid-template-rows: auto 1fr;
    grid-template-columns: 4fr 1fr;
}

.linear-gradient-effect {
    --bs-bg-opacity: 1;
    --bs-btn-hover-bg: var(--bs-body-bg);
    /* --bs-btn-hover-color: var(--bs-body-color); */
    --bs-btn-active-bg: var(--bs-dark-bg-subtle);
    --bs-btn-active-border-color: transparent;
    background: var(--bs-dark-bg-subtle);
    color: var(--bs-body-color);
    border-radius: 6px;
    position: relative;
}

.linear-gradient-effect::before,
.linear-gradient-effect::after {
    content: "";
    position: absolute;
    inset: -0.07rem;
    z-index: -1;
    background: linear-gradient(-90deg, #007cf0, #00dfd8, #ff0080, #007cf0);
    background-size: 400% 100%;
    border-radius: inherit;
    animation: vercel-anim 8s ease-in-out infinite;
}

.linear-gradient-effect::after {
  filter: blur(.5rem)
}

@keyframes vercel-anim {
    50% {
        background-position: 140% 50%;
        transform: skew(-2deg)
    }
}