:root {
    --p-tag-primary-background: var(--primary-color); 
    --p-tag-primary-color: #ffffff; 
}

.shadow {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgba(255, 0, 179, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
}
.custom-button {
    background: linear-gradient(135deg, #62555f, #610b4a);
    border-radius: 2px; /* Adjust based on your preferences */
    padding: 2px 2px;
    color: white; /* Text color */
    font-size: 12px;
    text-align: center;
    transition: all 0.3s ease;

    /* Glowing shadow effect at bottom */
    box-shadow: 0 5px 20px -5px var(--primary-color);

    /* Top border + gradient left and right */
    border-top: 1px solid var(--primary-color);
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;

    /* Gradient from top (solid) to transparent in the middle (50% down the sides) */
    border-image: linear-gradient(to bottom, var(--primary-color) 0%, rgba(0, 0, 0, 0) 50%);
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom, var(--primary-color), transparent 50%);
}
.glow-box {
    background-color: var(--surface-0);
    padding: 1rem;
    border-radius: 0 0 0.7rem 0.7rem;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); /* No shadow by default */
    transition: box-shadow 0.3s ease-in-out;
}

/* Glow effect only at the bottom and bottom corners when selected */
.glow-selected {
    /* Glowing shadow effect at bottom */
    box-shadow: 0 5px 20px -5px var(--primary-color);

    /* Top border + gradient left and right */
    border-top: 1px solid var(--primary-color);
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;

    /* Gradient from top (solid) to transparent in the middle (50% down the sides) */
    border-image: linear-gradient(to bottom, var(--primary-color) 0%, rgba(0, 0, 0, 0) 50%);
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom, var(--primary-color), transparent 50%);

    /* Only round top left and top right corners */
    /* border-radius: 0.7rem 0.7rem 0 0; */
}

/* Adjust the transition effect for a smoother hover or selected state */
.glow-box:hover {
    box-shadow: 0 10px 20px -5px var(--primary-color); /* Hover effect to highlight */
}

.radiant-bg {
    background: linear-gradient(-225deg, var(--p-primary-500), var(--p-primary-700) 48%, var(--p-primary-800));
  }
  
.dark .radiant-bg {
    background: linear-gradient(-225deg, var(--p-primary-400), var(--p-primary-600) 48%, var(--p-primary-800));
  }

/* Add glowing shadow effect */
.glow-box {
    background-color: var(--surface-0);
    padding: 1rem;
    border-radius: 0.7rem;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); /* No shadow by default */
    transition: box-shadow 0.3s ease-in-out;
}

/* Glow effect only at the bottom and bottom corners when selected */
.glow-selected {
    /* Glowing shadow effect at bottom */
    box-shadow: 0 5px 10px -5px var(--primary-color);

    /* Top border + gradient left and right */
    border-top: 1px solid var(--primary-color);
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;

    /* Gradient from top (solid) to transparent in the middle (50% down the sides) */
    border-image: linear-gradient(to bottom, var(--primary-color) 0%, rgba(0, 0, 0, 0) 50%);
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom, var(--primary-color), transparent 50%);
}

.radiant-bg-def {
    background: linear-gradient(
        120deg, /* Top-left to bottom-right */
        var(--primary-color) 0%, /* Start with primary */
        var(--secondary-color) 100% /* End with secondary */
    );
}
.radiant-bg {
    /* Top-to-bottom gradient using directional keyword */
    background: linear-gradient(to bottom, var(--primary-color) 0%, var(--secondary-color) 100%);
}
.radiant-bg-with-image {
  background:
  var(--my-bg-image),
  /* linear-gradient(to bottom, var(--p-primary-color), var(--p-secondary-color)); */
  linear-gradient(-225deg, var(--p-primary-500), var(--p-secondary-700)) ; 
  /* _48%,var(--p-secondary-800)),var(--bgbox-url); */
  background-position: right bottom, left top;
  background-repeat: no-repeat, no-repeat;
  /* gradient is 100% x 100%, image is auto x 40% (height) */
  background-size: auto 40%,100% 100% ;
}

/* Align timeline to the left */
/* Remove empty space from the left */
::v-deep(.p-timeline-event-opposite) {
  display: none !important;
}


.timeline-content {
  padding-left: 5px; /* Adjust spacing */
}

/* You can still apply custom CSS here if needed */
/* .p-dialog-maximized {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
} */
.p-dialog {
    width: 100vw !important; /* Set full width */
    height: 100vh !important; /* Set full height */
    max-width: none !important; /* Remove max-width */
    max-height: none !important; /* Remove max-height */
    padding: 0 !important; /* Remove padding */
    margin: 0 !important; /* Remove margin */
    top: 0 !important; /* Align to top */
    left: 0 !important; /* Align to left */
    overflow: hidden; /* Prevent scrolling */
}

.p-tabview-panels {
    background: var(--p-tabview-tab-panel-background);
    color: var(--p-tabview-tab-panel-color);
    padding: 0; /* 0.875rem 1.125rem 1.125rem 1.125rem; */
}

/* Add glowing shadow effect */

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}
.ribbon {
    --f: 0.5em; /* control the folded part */

    position: absolute;
    top: 0;
    right: 0;
    line-height: 1.8;
    padding-inline: 1lh;
    padding-bottom: var(--f);
    border-image: conic-gradient(#0008 0 0) 51% / var(--f);
    clip-path: polygon(
        100% calc(100% - var(--f)),
        100% 100%,
        calc(100% - var(--f)) calc(100% - var(--f)),
        var(--f) calc(100% - var(--f)),
        0 100%,
        0 calc(100% - var(--f)),
        999px calc(100% - var(--f) - 999px),
        calc(100% - 999px) calc(100% - var(--f) - 999px)
    );
    transform: translate(calc((1 - cos(45deg)) * 100%), -100%) rotate(45deg);
    transform-origin: 0% 100%;
    background-color: #2fff00; /* the main color  */
}
.ribboninactive {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}
.ribboninactive {
    --f: 0.5em; /* control the folded part */

    position: absolute;
    top: 0;
    right: 0;
    line-height: 1.8;
    padding-inline: 1lh;
    padding-bottom: var(--f);
    border-image: conic-gradient(#0008 0 0) 51% / var(--f);
    clip-path: polygon(
        100% calc(100% - var(--f)),
        100% 100%,
        calc(100% - var(--f)) calc(100% - var(--f)),
        var(--f) calc(100% - var(--f)),
        0 100%,
        0 calc(100% - var(--f)),
        999px calc(100% - var(--f) - 999px),
        calc(100% - 999px) calc(100% - var(--f) - 999px)
    );
    transform: translate(calc((1 - cos(45deg)) * 100%), -100%) rotate(45deg);
    transform-origin: 0% 100%;
    background-color: #ff8400; /* the main color  */
}


/* from quiz */
/* Style for the progress bar container */
.progress-bar-container {
    position: relative;
    width: 100%;
    height: 30px;
    background-color: var(--secondary-color);
    border-radius: 5px;
    margin-bottom: 20px;
    overflow: hidden;

    /* Glowing shadow effect at bottom */
    box-shadow: 0 5px 20px -5px var(--primary-color);

    /* Top border + gradient left and right */
    border-top: 1px solid var(--primary-color);
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;

    /* Gradient from top (solid) to transparent in the middle (50% down the sides) */
    border-image: linear-gradient(to bottom, var(--primary-color) 0%, rgba(0, 0, 0, 0) 50%);
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom, var(--primary-color), transparent 50%);
}

/* Dynamic progress bar */
.progress-bar {
    height: 100%;
    background-color: var(--primary-color); /* Primary color */
    transition: width 0.3s ease;
}

/* Style for the progress percentage text */
.progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: #fff;
}





@media (max-width: 640px) {
    .grid {
        display: block; /* Stack items on mobile */
    }
}