@import "./colors.css.scss";
.temperatureLog-state-active {
  .content {
    padding-left: 20px;
    padding-right: 20px;
  }
  .curve-header {
    box-shadow: none;
    border-bottom: 3px solid;
    margin-left: 10px;
    padding-bottom: 10px;

    .row {
      margin-right: 0;
      margin-left: 0;
      .chart-name {
        width: 30%;
        // float: left;
        padding-right: 0;
        padding-left: 0;
      }
      .chart-controls {
        width: 70%;
        // float: left;
        padding-right: 0;
        padding-left: 0;
      }
    }

    .zoom-text {
      text-align: right;
      padding-right: 15px;
      vertical-align: baseline !important;
    }
  }
  padding-bottom: 20px;
  .zoom-scroll-container {
    padding-left: 0;
    padding-right: 0;
    padding-top: 15px;
    margin-right: 0;
    .scrollbar-container {
      .scrollbar-directive {
        margin-top: 8px;
      }
    }

    .zoom-container {
      padding-left: 0;
      padding-right: 0;
    }

    .scroll-container {
      padding-left: 0;
      padding-right: 0;
    }
  }
  .chart-container {
    // height: 400px;
    position: relative;
    path.domain {
      stroke-width: 2px;
    }
  }
  // .loading-blue-container {
  //   left: 450px !important;
  //   top: 135px !important;
  // }
  .vertical-text {
    $margin: 230px !important;
    margin-top: $margin;
    margin-bottom: -$margin;
    margin-left: -20px;
  }
  .chart-legend {
    display: none;
  }
  g.y2-axis {
    display: none;
  }
  .indicators-group {
    border-radius: 5px;
    box-shadow: 0.5px 0.5px 3px 0px $gray;
    margin: 0 auto;
    margin-top: 10px;
    padding: 20px 0;
    width: 600px;
    .row {
      margin: 0;
    }
    .item-indicator {
      float: left;
      width: (1/3)*100%;
      padding-left: 25px;
      strong {
        color: #000;
      }
      .dot {
        border-radius: 100px;
        background-color: $blue;
        display: inline-block;
        height: 10px;
        width: 10px;
      }
      &:first-of-type {
        .dot {
          background-color: #000;
        }
      }
      &:last-of-type {
        .dot {
          background-color: $lightgray;
        }
      }
    }
  }
}
