/* Four Color Comic v40.31.14
   Compact clickable A-Z and permanent top/bottom collection pagination. */

#collection .fcc-alphabet-bar{
  width:100%;
  display:grid;
  grid-template-columns:repeat(28,minmax(0,1fr));
  gap:3px;
  margin:8px 0 10px;
  padding:0;
  overflow:visible;
}

#collection .fcc-letter-btn{
  appearance:none;
  min-width:0;
  height:28px;
  padding:0 3px;
  border:1px solid rgba(151,165,184,.25);
  border-radius:6px;
  background:rgba(255,255,255,.018);
  color:var(--text,#edf3fa);
  font:800 10px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor:pointer;
}

#collection .fcc-letter-btn:hover{
  border-color:rgba(124,108,255,.72);
  background:rgba(124,108,255,.10);
}

#collection .fcc-letter-btn.active{
  border-color:#7666ff;
  background:#6f5cff;
  color:#fff;
}

/* v44.css hid the entire bottom pager with !important.
   This later stylesheet explicitly restores it. */
#collection #v28CollectionPagerBottom{
  display:block!important;
  width:100%;
  margin-top:14px!important;
  padding-top:10px;
  border-top:1px solid rgba(151,165,184,.16);
}

#collection #v28CollectionPagerTop{
  display:block!important;
  width:100%;
}

#collection #v28CollectionPagerTop .v28-page-controls,
#collection #v28CollectionPagerBottom .v28-page-controls{
  display:flex!important;
}

#collection #v28CollectionPagerTop .v412-pager,
#collection #v28CollectionPagerBottom .v412-pager{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

@media(max-width:1050px){
  #collection .fcc-alphabet-bar{
    grid-template-columns:repeat(14,minmax(0,1fr));
    gap:4px;
  }
}

@media(max-width:620px){
  #collection .fcc-alphabet-bar{
    grid-template-columns:repeat(7,minmax(0,1fr));
  }
  #collection .fcc-letter-btn{height:30px}
  #collection #v28CollectionPagerTop .v28-page-controls,
  #collection #v28CollectionPagerBottom .v28-page-controls{
    width:100%;
    justify-content:space-between;
  }
}