@import "../../../ui-components/styles/variables";

:host {
  .chart {
    height: calc(100% - 40px);
    margin-bottom: 6px;
  }

  ::ng-deep svg.britechart.line-chart {
    overflow: visible;
  }

  display: block;
  position: relative;
  background-color: $black;



  .overlay {
    height: 310px;
    position: absolute;
    background-color: $black;
    width: 100%;

    .text {
      font-size: 30px;
      margin-left: 20px;
      &.no-data{
       font-size: 14px;
        color: #a7b2d8;
        opacity: 0.5;
      }
    }
  }

  ::ng-deep .masking-rectangle {
    fill: $black;
  }

  ::ng-deep .horizontal-grid-line {
    stroke: $dark-grey-blue;
    stroke-dasharray: unset;
  }

  ::ng-deep .extended-x-line {
    stroke: $dark-grey-blue;
  }

  ::ng-deep .tick {
    text {
      fill: $light-periwinkle-two;
    }
  }

  ::ng-deep .legend-entry-name {
    fill: $light-periwinkle-two;
  }

  ::ng-deep rect.tooltip-text-container {
    fill: black !important;
    stroke: $blue-300 !important;
  }

  ::ng-deep .tooltip-title {
    fill: $blue-200 !important;
  }

  ::ng-deep .tooltip-divider {
    stroke: $blue-300 !important;
    stroke-width: 0.5px;

  }

  ::ng-deep .tooltip-left-text, ::ng-deep .tooltip-right-text {
    fill: $blue-200 !important;
  }
}
