.custom-legend {
  border: 2px groove threedface;
  border-top: none;
  border-color: var(--surplus-secondary-border);
  padding: 0.5em;
  margin: 1em 2px;
}

.custom-legend > h1 {
/*   font: 1em normal; */
  font-family: Inter,sans-serif;
  font-weight: 400;
  font-size: 15px;
  margin: -1em -0.5em 0;
} 
  
.custom-legend > h1 > span {
  padding-left: 22px;
  padding-right: 22px;
  float: left;
}
  .custom-legend > h1:before {
      padding-right: 5%;
      border-top: 2px groove threedface;
      border-color: var(--surplus-secondary-border);
      content: ' ';
      float: left;
      margin: 0.5em 2px 0 -1px;
      width: 0.75em;
  }

  .custom-legend.center-legend> h1:before{
    padding-right: 46%;
  }

  .custom-legend.corner-left> h1:before{
    padding-right: 0%;
  }

   .custom-legend.corner-right> h1:before{
    padding-right: 91%;
  }

  .custom-legend.corner-right-default> h1:before{
    padding-right: 87%;
  }


  .custom-legend > h1:after {
      border-top: 2px groove threedface;
      border-color: var(--surplus-secondary-border);
      content: ' ';
      display: block;
      height: 1.5em;
      left: 2px;
      margin: 0 1px 0 0;
      overflow: hidden;
      position: relative;
      top: 0.5em;
  }