/* Offcanvas container */
.custom-offcanvas {
    position: fixed;
    top: 29%;
    right: -390px; /* hidden by default */
    height: calc(100% - 29%);
    width: 390px;
    background: #f9fbfd;
    z-index: 1051;
    transition: right 0.4s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
}

    .custom-offcanvas.show {
        right: 0;
    }

.custom-offcanvas-header {
    padding: 1rem;
    background: #4e5d6b;
    display: flex;
    color: white;
    justify-content: space-between;
    align-items: center;
}

.custom-offcanvas-body {
    padding: 1rem;
    overflow-y: auto;
    flex-grow: 1;
}

.btn_toggle {
    position: fixed;
    top: 23.5%;
    right: 8px;
    z-index: 1200;
    background-color: #5d6d7e; /* Lighter than #2c3e50 */
    color: #fff;
    border: none;
    padding: 8px 12px;
    font-size: 0.875rem; /* 14px */
    border-radius: 50rem; /* Pill shape */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, right 0.4s ease;
    cursor: pointer;
}

    .btn_toggle:hover {
        background-color: #4e5d6b; /* Slightly darker for hover */
        color: #fff;
    }


.approval-item {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
}

/*Optional (prevent background scroll)*/
body.modal-open {
    overflow: hidden;
}


/*        Queries container */
.customFollowUpContainer {
    margin-left: 20px;
    padding-left: 10px;
    position: relative;
}

/* Each question block */
.tree-node {
    position: relative;
    padding-left: 15px; /* for horizontal line spacing */
    padding-bottom: 10px; /* instead of margin-bottom */
}

    /*Tree _ bottom connector*/
    .tree-node::before {
        content: "";
        position: absolute;
        top: 0.6em;
        left: -0.70em;
        width: 20px;
        height: 0;
        border-bottom: 1px solid #d5d4d8;
    }


    /* Vertical line  (only on non-last children) */
    .tree-node:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 1.3em; /* start just below the dot */
        left: -20px;
        bottom: 0; /* stretch to bottom */
        border-left: 1px solid #d5d4d8;
        z-index: 0;
    }


    .tree-node .connector-dot {
        position: absolute;
        top: 5px;
        left: -25px;
        width: 11px;
        height: 11px;
        border: 2px solid darkorange;
        border-radius: 50%;
        box-sizing: border-box;
    }
    /*  child tree  */
    .tree-node .tree-node {
        padding-left: 20px;
        margin-top: 10px;
    }

/*other css*/

.text-slate {
    color: #2c3e50 !important;
}

.text-slate-0 {
    color: #4e667e !important; /* slightly lighter than #2c3e50 */
}

.choices__list--multiple .choices__item {
    background-color: #4e667e;
    color: #fff;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 15px;
    margin-right: 5px;
    margin-top: 5px;
}

    .choices__list--multiple .choices__item.is-highlighted {
        background-color: #6b7d93 !important; /* lighter match to #4e667e */
        border: none !important;
        color: #fff !important;
    }


.accordion-toggle::after {
    color: #2c3e50;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f078"; /* chevron down */
    float: none;
    margin-left: auto;
    transition: transform 0.2s ease;
}

.accordion-toggle:not(.collapsed)::after {
    content: "\f077"; /* chevron up */
}

.card-header:hover {
    background-color: #f8f9fa !important;
}