/* mercha purple: #4C1AC9 */
.text-purple {
    color: #4C1AC9;
}

.bg-purple{opacity:1; background-color:#4C1AC9 !important}

.btn-primary{color:#fff;background-color:#4C1AC9;border-color:#4C1AC9}
.btn-primary:hover{color:#fff;background-color: #4d0fe2;border-color:#4d0fe2}
.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#0069d9;border-color:#0062cc;box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}
.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#007bff;border-color:#007bff}

.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: #000;
    --bs-nav-link-hover-color: #4C1AC9;
    --bs-nav-link-disabled-color: var(--bs-secondary-color);
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

.nav-tabs
{
    background-color: inherit;
    border-color: var(--bs-nav-tabs-link-active-border-color);
    color: #4C1AC9;
}

/** action buttons **/
.action-buttons
{
    background: #fff !important;
    z-index: 3;
    padding: 10px 10px;
    /*border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
}

/** end action buttons **/

/** timeline start **/
/* 1) HARD RESET: remove any existing rails/dots from other CSS */
.timeline,
.timeline * {
    box-sizing: border-box;
}

.timeline::before,
.timeline::after,
.timeline-item::before,
.timeline-item::after,
.timeline-rail::after,
.timeline-icon::before,
.timeline-icon::after {
    content: none !important;
    display: none !important;
}

/** max height overrides **/
.max-height-400 {
    max-height: 400px !important;
    overflow-y: auto;
    padding-right: 8px;
}
.max-height-650 {
    max-height: 650px !important;
    overflow-y: auto;
    padding-right: 8px;
}

/* Also kill any list markers (some browsers/themes add these) */
.timeline,
.timeline-item {
    list-style: none !important;
}
.timeline-item::marker {
    content: "" !important;
}

/* 2) REBUILD: our desired layout */
.timeline {
    margin: 0;
    padding: 0;
}

.timeline-item {
    display: flex;
    gap: 20px;
    position: relative;
    padding-bottom: 28px;
}

.timeline-rail {
    position: relative;
    width: 56px;
    flex: 0 0 56px;
    display: flex;
    justify-content: center;
}

/* The ONLY rail */
.timeline-rail::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 48px;           /* start below icon */
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-item:last-child .timeline-rail::before {
    display: none !important;
}

.timeline-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 4px #fff; /* clean cutout */
}

.timeline-content {
    flex: 1;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: 1rem;
}
/** timeline end **/

/** tiny, unobtrusive clear button **/
.dt-filter-wrap {
    position: relative;
}

.dt-filter-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    padding: 0;
    line-height: 1;
    font-size: 14px;
    color: #adb5bd;
    cursor: pointer;
    display: none;
}

.dt-filter-wrap:hover .dt-filter-clear {
    color: #495057;
}

.dt-filter-wrap.has-value .dt-filter-clear {
    display: block;
}

/* Make room so text doesn't go under the X */
.dt-filter-wrap input,
.dt-filter-wrap select {
    padding-right: 22px;
}

/** end tiny, unobtrusive clear button **/

/* Flyout panel */
.flyout {
    position: fixed;
    top: 0;
    right: -450px;               /* hidden position */
    width: 450px;
    height: 100vh;
    background: #fff;
    box-shadow: -8px 0 24px rgba(0,0,0,.15);
    z-index: 1055;
    display: flex;
    flex-direction: column;
    transition: right .3s ease;
}

/* Open state */
.flyout.show {
    right: 0;
}

/* Header */
.flyout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
}

/* Body */
.flyout-body {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}

/* Backdrop */
.flyout-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 1050;
}

.flyout-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

/** prevent scrolling when flyout is open */
body.flyout-open {
    overflow: hidden;
}

/** responsive flyout panel - full screen on small screens */
@media (max-width: 576px) {
    .flyout {
        /*width: 100%;*/
    }
}

/** end flyout panel **/

/** divider with shadow **/
.shadow-hr {
    border: none; /* Removes the default line/border */
    height: 1px; /* Sets the visible height of the rule */
    background-color: #ccc; /* Optional: Sets the main line color */

    /* Apply the box-shadow */
    /* Syntax: h-offset v-offset blur spread color */
    box-shadow: 0 10px 10px -10px #333;

    /* Optional: Center the line and add some vertical spacing */
    width: 90%;
    margin: 1.5em auto;
}
/** end divider with shadow **/