.infolio-curve-title{
  position: absolute;
  background: #fff;
  top: 50%;
  right: -1px;
  width: max-content;
  padding: 10px 25px;
  border-radius: 15px 15px 0 0;
  transform: rotate(-90deg) scaleX(-1) translateX(50%) translateY(-100%);
  transform-origin: top right;
  .sub-title{
    margin: 0;
    color: #1a1a1a;
  }

  .shap-left-bottom{
    position: absolute;
    bottom: -1px;
    left: -2.05rem;
    transform: rotate(180deg);

    svg{
      width: 2.1rem;
      height: 2.1rem;
      path{
        fill: #ffffff;
      }
    }
  }

  .shap-right-bottom{
    position: absolute;
    bottom: -1px;
    right: -2.05rem;
    transform: rotate(270deg);

    svg{
      width: 2.1rem;
      height: 2.1rem;
      path{
      fill: #ffffff;
      }
    }
  }
}

body.tcg-dark-mode {
  .infolio-curve-title{
    background: #1a1a1a;
    .sub-title{
      color: #ffffff;
    }
    .shap-left-bottom{
      svg{
        path{
          fill: #1a1a1a;
        }
      }
    }

    .shap-right-bottom{
      svg{
        path{
          fill: #1a1a1a;
        }
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  body.tcg-auto-mode {
    .infolio-curve-title{
      background: #1a1a1a;
      .sub-title{
        color: #ffffff;
      }
      .shap-left-bottom{
        svg{
          path{
            fill: #1a1a1a;
          }
        }
      }

      .shap-right-bottom{
        svg{
          path{
            fill: #1a1a1a;
          }
        }
      }
    }
  }
}