.wrapper {
  height: 100%;
  width: 100%;

  /* rechart svg styles you can custom in className props */
  :global {
    .recharts-cartesian-axis-line {
      stroke-width: 5px;
      stroke: #eff4f9;
      stroke-linecap: round;

      /* can only use transform to move the svg child node */
      transform: translateY(4px);
    }

    .recharts-cartesian-axis-tick-value {
      font-size: 11px;
      fill: #abb4be;
    }

    .recharts-bar-rectangle {
      fill: #d6ebf5;
      stroke: #329dce;
      &:hover {
        fill: #86c5e1;
        cursor: pointer;
      }
    }

    .recharts-default-tooltip {
      display: flex;
      flex-direction: column-reverse;
 
      /*
       * must use !important in
       * borderColor color padding border white-space
       */
      color: #fff !important;
      background-color: rgba(36, 46, 66, 0.95) !important;
   
      opacity: 0.9;
      border-radius: 4px;

      li {
        color: inherit !important;
      }
    }
  }

}


