.cc-stepbar{
  height:8px;
  border-radius:9999px;
  background:#e5e7eb;
  overflow:hidden;
}

.cc-stepfill{
  height:100%;
  background:var(--brandGreen,#22c55e);
  transform-origin:left;
  transform:scaleX(var(--sx,0));
  transition:transform .35s ease;
}

.cc-stepbar.cc-animate .cc-stepfill{
  animation:ccfill .45s ease forwards;
}

@keyframes ccfill{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

.cc-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.3rem 1rem;
  border-radius:9999px;
  border:1px solid #e5e7eb;
  background:#f3f4f6;
  color:var(--brandBlue,#004980);
  font-size:.875rem;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
  cursor:pointer;
  user-select:none;
}

.cc-pill:hover{
  background:#e5e7eb;
}

.cc-pill.is-active{
  background:#DCFCE7;
  border-color:var(--brandGreen,#19BA5D);
  color:var(--brandBlue,#004980);
}

.cc-multi input:checked + span{
  background:#DCFCE7;
  border-color:var(--brandGreen,#19BA5D);
  color:var(--brandBlue,#004980);
}

#cc-summary-indicator{
  display:none;
}

#cc-summary-indicator.htmx-request{
  display:flex;
}

.cc-spinner{
  width:1.25rem;
  height:1.25rem;
  border-radius:9999px;
  border:2px solid rgba(0,73,128,.18);
  border-top-color:var(--brandBlue,#004980);
  animation:ccspin .7s linear infinite;
}

@keyframes ccspin{
  to{transform:rotate(360deg)}
}

.cc-leftFrame{
  display:flex;
  flex-direction:column;
}

.cc-leftScroll{
  padding-right:0;
}

.cc-leftNav{
  margin-top:12px;
}

.cc-chip{
  display:inline-flex;
  align-items:center;
  padding:.35rem .85rem;
  border-radius:9999px;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  color:var(--brandBlue,#004980);
  font-size:.875rem;
  white-space:nowrap;
}

.cc-breakdown-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:1rem;
  padding:.35rem 0;
  color:var(--brandBlue,#004980);
  font-weight:300;
}

.cc-breakdown-note{
  color:rgba(11,42,74,.55);
  font-size:.875rem;
}

.cc-summary-sheet{
  border-radius:24px;
  background:#fff;
  box-shadow:0 10px 24px rgba(11,42,74,.10);
}

.cc-summary-chevron{
  transition:transform .18s ease;
}

@media (min-width: 768px){
  .cc-leftFrame{
    height:620px;
  }

  .cc-leftScroll{
    flex:1;
    overflow-y:auto;
    padding-right:6px;
  }
}

@media (max-width: 767px){
  .cc-leftScroll{
    overflow:visible;
  }

  .cc-leftNav{
    display:none;
  }
}
