@media(max-width:768px) {
    .form-wizard-container {
        overflow-y: auto;
        padding-left: 0px;
    }
}

@media only screen and (max-width: 768px) {
    .selcmain-box {
        height: auto !important;
    }

    .mobile-topbar {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        background: var(--color-BgOrgWhite);
        border-bottom: 1px solid var(--color-BodTertiaryGray);
        position: sticky;
        top: 0px;
        z-index: 1;
        box-shadow: 0 1px 3px var(--color-ShadowOrgOffWhite);
        width:100%;
    }

    .form-wizard-container {
        overflow-y: auto;
        padding: 0px;
    }

    body, html {
        height: 100%;
        overflow-y: auto;
    }

    .overall-progress-container.mobile-progress-top .next-step {
        font-family: var(--font-2) !important;
        fill: var(--color-FillBlack);
        font-size: 7px;
    }
    .widget-pane-toggle-button-container{
        display:none!important;
    }
}

/* Left group: circle + active title */
.mobile-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    min-width: 0; /* Needed for ellipsis inside flex */
}

/* Circle styling */
.overall-progress-container.mobile-progress-top {
    position: relative; /* reset absolute */
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    margin: 0;
    z-index: 1;
}

.overall-progress {
    transform: rotate(0deg);
    width: 100%;
    height: 100%;
}

.circle-bg {
    fill: none;
    stroke: var(--color-FillGrayMedium);
    stroke-width: 3;
}

.circle-completed {
    fill: none;
    stroke: var(--color-FillGreenSuccessAlert);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

/* Active menu title beside circle */
.mobile-active-title {
    font-family: var(--font-3);
    font-size: clamp(18px, 3vw, 24px);
    color: var(--color-TextSecondaryBlue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0 !important;
    width: 100%;
    flex-wrap: wrap;
}
.mobile-action-chips{
    flex-wrap:wrap;
}

.mobile-active-title .mobile-action-chips button {
    font-family: var(--font-2) !important;
    font-size: 16px;
    display: flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid var(--color-BodTertiaryGray);
}

        .mobile-active-title .mobile-action-chips button.add-chip {
            background: var(--color-BgVeryLightBlue);
            color: var(--color-TextPrimaryBlue);
        }

            .mobile-active-title .mobile-action-chips button.add-chip:hover {
                background: var(--color-BgPrimaryBlue);
                color: var(--color-TextOrgWhite);
            }

        .mobile-active-title .mobile-action-chips button.delete-chip:hover {
            background: var(--color-BgRedErrorAlert);
            color: var(--color-TextOrgWhite);
        }

        .mobile-active-title .mobile-action-chips button.delete-chip {
            background: var(--color-BgPeachColor);
            color: var(--color-TextRedErrorText);
        }

        .mobile-active-title .mobile-action-chips button i {
            font-size: 21px;
            margin-right: 6px;
        }

        .mobile-active-title .mobile-action-chips button span {
            margin-top: 2px;
            font-family: var(--font-1) !important;
        }
/* Right: Next steps badge */
.mobile-next-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--color-TextPrimaryBlue);
    padding: 6px 10px;
    font-family: var(--font-1);
    font-size: clamp(17px, 1.2vw, 16px);
    line-height: 1.2;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px; /* adjust as needed */
}

    .mobile-next-badge .next-steps-label {
        font-size: clamp(18px, 2vw, 24px);
    }

    .mobile-next-badge .next-steps-count {
        font-size: clamp(18px, 2.5vw, 23px);
        font-weight: 700;
        color: var(--color-TextGreenSuccessText);
    }

/* Center section: title between circle and next badge */
.mobile-topbar-center {
    padding-left:10px;
    text-align: left;
    font-family: var(--font-1) !important;
width:100%;
}
.mark_point{
    width:calc(100% - 80px);
    display:flex;
    align-items:center;
}
.mobile-topbar-title {
    font-weight: 400;
    font-size: 25px;
    color: var(--color-TextBlack);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 380px;
    font-family: var(--font-2) !important;
    max-width:calc(100% - 10px);
}
.sub-txt-point {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 380px;
}