svg { height: 100%; width: 100%; }

/* Fences */
.fence {
  display: flex;
  flex-direction: column;
  font-style: normal;
  line-height: 1;
  margin: 0 5px;
  width: 13px;
}

.fence * { display: block; flex: 1 1 auto; }
.fence svg { fill: #000; }
.fence.flipped { transform: scaleX(-1); }
.fence-extension { height: 100%; }

/* Groups */
.group {
  align-items: stretch;
  display: inline-flex;
  line-height: 0.9;
  margin: 0.3rem 0;
  vertical-align: middle;
}

.group-row { display: block; position: relative; }


/* Extra */
.content { font-size: 20px; text-align: center; }

.icon {
  background: #d42a20;
  display: inline-block;
  height: 15px;
  width: 15px;
}

/* Fences */
$(".fence").each(function(){
    var t = $(this).text().trim();
    
    var parts = {
        upper: '<span class="fence-upper-hook"><svg preserveAspectRatio="none" viewBox="0 0 10 9.84"><path d="M10,0v0.75C8.47,0.95,7.4,1.44,6.78,2.24c-0.62,0.8-0.93,2.18-0.93,4.15v3.45H4.29V6.11c0-2.13,0.44-3.66,1.32-4.58C6.48,0.61,7.95,0.1,10,0z"/></svg></span>',
        middle: '<span class="fence-middle"><svg preserveAspectRatio="none" viewBox="0 0 10 17.97"><path d="M0,9.54V8.38C1.55,8.2,2.66,7.71,3.31,6.91s0.98-2.07,0.98-3.82V0h1.56v2.99c0,2.08-0.41,3.55-1.24,4.42S2.38,8.78,0.38,8.87v0.21c2.02,0.1,3.43,0.58,4.25,1.45s1.22,2.34,1.22,4.41v3.04H4.29v-3.11c0-1.76-0.33-3.04-0.99-3.85C2.65,10.21,1.55,9.72,0,9.54z"/></svg></span>',
        lower: '<span class="fence-lower-hook"><svg preserveAspectRatio="none" viewBox="0 0 10 9.84"><path d="M10,9.84V9.09C8.47,8.89,7.4,8.4,6.78,7.6c-0.62-0.8-0.93-2.18-0.93-4.15V0H4.29v3.73c0,2.13,0.44,3.66,1.32,4.58C6.48,9.23,7.95,9.74,10,9.84z"/></svg></spa>',
        extension: '<span class="fence-extension"><svg preserveAspectRatio="none" viewBox="0 0 10 1"><path d="M5.85,0v1H4.29V0H5.85z"/></svg></span>'
    };
    
    if (t == "{" || t == "}") {
        var fclass = (t == "}") ? "flipped" : "";
        $(this).html(parts.upper + parts.extension + parts.middle + parts.extension + parts.lower);
    }
    
    $(this).addClass(fclass);
});