#progress-list{
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    /* padding: 60px 0; */
    position: relative;
}
#progress-list::after{
    width: 3px;
    position: absolute;
    height: 100%;
    content: "";
    left: 0;
    top: 30px;
    background-color: #79797c;
    margin-left: 20px;
}
.inner-progress-list{
    width: 96%;
    margin: 0 auto;
}
.child-progress-list{
    width: 100%;
    padding: 30px 40px;
}
.child-progress-list h4{
    /* white-space: wrap; */
    position: relative;
    margin-bottom: 5px;
    font-size: 16px !important;

}
.child-progress-list a{
    font-size: 12px;

}
.child-progress-list h4::after{
    position: absolute;
    width: 20px;
    height: 20px;
    content: "";
    background-color: #313e5e;
    border: 2px solid #fff;
    left: -34px;
    top: 0;
    border-radius: 50%;
    z-index: 2;
}
.child-progress-list:first-child h4::after{
    
    background-color: #3acf3a;
}
.mandatory{
    color: red;
}
.border-app{
    border: 1px solid #acacac;
    border-radius: 20px;
}

/* ===== Running text (scrolling announcement) ===== */
.ig-ticker{display:flex;align-items:center;gap:.75rem;background:#313E5D;color:#fff;
  padding:.5rem 1rem;font-size:.9rem;position:relative;z-index:5;overflow:hidden}
.ig-ticker__label{display:inline-flex;align-items:center;gap:.35rem;background:#FFD400;color:#313E5D;font-weight:700;
  padding:.15rem .6rem;border-radius:99px;white-space:nowrap;flex:0 0 auto}
.ig-ticker__viewport{overflow:hidden;flex:1 1 auto;white-space:nowrap}
.ig-ticker__track{display:inline-block;white-space:nowrap;animation:ig-ticker-move 30s linear infinite;will-change:transform}
.ig-ticker__viewport:hover .ig-ticker__track{animation-play-state:paused}
.ig-ticker__sep{margin:0 .75rem;opacity:.6}
@keyframes ig-ticker-move{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.ig-ticker__track{animation:none;white-space:normal}}

/* ===== Notice popup ===== */
.ig-popup{--ig-popup-max-w:820px}
.ig-popup .modal-content{position:relative;border:0;border-radius:14px;overflow:hidden;
  box-shadow:0 24px 70px rgba(16,24,40,.35)}
.ig-popup .modal-body{background:transparent}
.ig-popup .modal-body img{display:block;width:auto;height:auto;max-width:100%;max-height:85vh;margin:0 auto}
.ig-popup.ig-popup--image .modal-dialog{width:fit-content;max-width:min(92vw,var(--ig-popup-max-w))}
.ig-popup.ig-popup--image .modal-content{width:auto}
.ig-popup__close{position:absolute;top:10px;right:10px;z-index:5;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;
  background:rgba(17,24,39,.55);color:#fff;font-size:22px;line-height:1;cursor:pointer;
  transition:background .15s ease,transform .15s ease}
.ig-popup__close:hover{background:rgba(17,24,39,.8);color:#fff;transform:scale(1.05)}
.ig-popup .modal-footer{border-top:0}

/* ===== Navbar: reduce height (template override) ===== */
@media (min-width: 992px) {
  .w3l-header-4 .nav-3 .nav-item { padding: 6px 10px; }
  .w3l-header-4 .nav-3 .nav-item .nav-link { padding: 4px 8px; }
  .w3l-header-4 .nav-3 .brand.ig { height: 34px; }
  .w3l-header-4 .nav-3 .ig-avatar .ig-nav-avatar { height: 34px; width: 34px; margin-top: 0; margin-right: .75rem; }
  .w3l-header-4 .nav-3 .ig-avatar p { line-height: 1.15rem; }
  .w3l-header-4 .nav-3 .ig-avatar p.title { font-size: .85rem; }
}

/* ===== Running text pinned like the navbar =====
   The ticker lives inside .w3l-header-4 (position: sticky) so the navbar and the
   ticker are pinned together. The variable is set by the RunningText partial
   (only when at least one active announcement exists). */
.ig-ticker {
  height: var(--ig-ticker-h, 38px);
  box-sizing: border-box;
  line-height: 1.2;
  flex-wrap: nowrap; }

/* Compensate the ticker height on the fixed sidebar so it never overflows the viewport.
   Desktop layout only; on mobile (<=575px) the sidebar is a height:100% drawer. */
@media (min-width: 576px) {
  .frame-ig-sidebar-kelola {
    height: calc(100% - 90px - var(--ig-ticker-h, 0px)); }
}