@media (max-width: 1023px) {
    .small-stepper-card {
        display: block !important;
    }

    .big-stepper-card {
        display: none !important;
    }
}

.big-stepper-card{
    background: rgb(237, 238, 238) !important;
    border-radius: .5rem !important;
    padding: 1rem;
}

.small-stepper-card{
    background: rgb(237, 238, 238) !important;
    border-radius: .5rem !important;
    padding: 0.6rem 0.6rem 0 0.6rem !important;
    display: none;
}

.progress-container {
    width: 100%;
    background: rgba(220, 220, 221, 1);
    border-radius: 16px;
    overflow: hidden;
}

.progress-bar {
    height: 21px;
    line-height: 21px;
    background: rgba(115, 163, 0, 1);
    text-align: start;
    color: #fff;
    font-size: 15px;
    border-radius: 16px;
    padding-left: 9px;
}

:root{
    --panel:#f3f5f7;
    --text:#1f2937;
    --muted:#7b8591;
    --line:#d9dee6;
    --green:#78bd3f;
    --purple:#5b39f5;
    --chip:#e6edd9;
    --circle:28px;
    --radius:12px;
}
*{box-sizing:border-box}

/* header */
.hdr{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding: 5px 0;
    border-radius:10px;
    position:relative;
}

.progress-pill{
    position:absolute;
    left:10px; top:-10px;
    background:var(--chip);
    border-radius:999px;
    padding:3px 10px;
    font-size:12px;
    font-weight:700;
    color:#2d3a12;
    border:1px solid #cfe0b8;
}

.hdr-text{
    flex:1 1 auto
}
.hdr h3{
    margin:.2rem 0 0;
    font-size:16px;
    width: 220px;
}
.hdr small{
    display:block;
    color: rgba(99, 102, 106, 1);
    margin-top:2px;
    font-size: 13px;
    width: 220px;
}

.toggle{
    background: var(--light-grey-20);
    border: 1px solid var(--dark-grey-60);
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    height: 1.7rem;
    place-items: center;
    position: absolute;
    right: 0;
    top: 1.1rem;
    width: 1.7rem;
}
.chev{
    width:6px;
    height:6px;
    border-right:1px solid black;
    border-bottom:1px solid black;
    transform:rotate(-135deg);
    transition:.2s ease
}

.collapsed .chev{transform:rotate(45deg)}

.step{
    position:relative;margin:6px 0;padding:10px 8px;border-radius:10px
}

.step.current{
    background: rgba(246, 246, 246, 1)
}

.stepper-label{
    margin-left: 40px;
    font-size:16px
}

.collapsible{overflow:hidden;transition:height .25s ease;height:0}

.stepper-circle {
    content:attr(data-step);
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:var(--circle);
    height:var(--circle);
    border-radius:999px;
    border:1px solid rgba(185, 185, 187, 1);
    display:grid;
    place-items:center;
    font-weight:700;
    font-size:14px;
    color: rgba(130, 133, 136, 1);
}

.step.done > .stepper-circle{
    background: var(--warm-green-20);
    border-color: var(--warm-green-100);
    color: var(--warm-green-100);
}

.step.current > .stepper-circle{
    color: var(--indigo-100);
    border-color: var(--indigo-100);
}