.fgpb-wrapper { margin:10px 0; font-family: inherit; }
.fgpb-bar { position:relative; border-radius:8px; overflow:hidden; background:#eee; height:36px; display:flex; align-items:center; justify-content:center; padding:0 10px; }
.fgpb-fill { position:absolute; left:0; top:0; bottom:0; width:0%; transition:width 400ms ease; opacity:0.95; z-index:1; }
.fgpb-text { position:relative; z-index:2; font-weight:600; color:#fff; text-align:center; width:100%; }
.fgpb-red .fgpb-fill { background:#e74c3c; }
.fgpb-yellow .fgpb-fill { background:#f1c40f; }
.fgpb-green .fgpb-fill { background:#27ae60; }
.fgpb-yellow .fgpb-text { color:#1a1a1a; }