.bottom-step-no {
  float: left;
  margin-top: 22px;
  margin-left: 2px;
  float: left;
}
.bottom-no-of-stages {
  float: left;
  margin-top: 23px;
}

.visible {
  visibility: hidden;
}

.bottom-name-of-step-stage {
  float: left;
  margin-left: 23px;
  position: relative;
  margin-top: 22px;
  max-width: 400px;

  .bottom-name-of-step-span {

  }
  .edit-step-name {

    position: absolute;
    top: 0px;
    left: 0px;
    border: none;
    background-color: black;
    color: white;
  }
}
.bottom-stage-name {
  margin-top: 24px;
  margin-left: 5px;
  float: left;
}

.bottom-step-no-cycle-container {
  visibility: visible;
  float: left;
  position: absolute;
  left: 500px;
  margin-top: 21px;

  .bottom-step-no-cycle {
    float: left;
    span {
      text-decoration: underline;
    }

    .bottom-step-no-cycle-edit {
      position: absolute;
      background-color: black;
      color: white;
      top: 0px;
      left: 0px;
      border: none;
    }
  }
}

.bottom-step-x {
  float: left;
  margin-top: 4px;
}
.bottom-cycles-and-dots {
  margin-top: 2px;
  margin-left: 3px;
  float: left;
}

.bottom-gather-data {
    position: absolute;
    left: 631px;
    margin-top: 30px;

    .bottom-gather-data-text {
      float: left;
      margin-right: 23px;
    }

    .bottom-gather-data-step {
      float: left;
      margin-top: 3px;
    }
    span {
      margin-left: 5px;
      float: left;
    }
    .faded {
      color: #cdcdcd;
    }

    .bottom-gather-data-ramp {
      float: left;
      margin-top: 3px;
      margin-left: 23px;
    }
}

.gather-data-toggle {
  width: 22px;
  height: 12px;
  border-radius: 12px;
  background-color: #bbbbbb;
  position: relative;
  float: left;
  cursor: pointer;

  .outer-circle {
    width:10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
    position: absolute;
    top: 1px;
    left: 1px;

    .inner-circle {
      width:6px;
      height: 6px;
      border-radius: 50%;
      background-color: #bbbbbb;
      position: absolute;
      top: 2px;
      left: 2px;
    }
  }
}

.bottom-autodelta-button {
  margin-left: 15px;
}

.bottom-button-container {
  float: left;
  width: 147px;
  height: 41px;
  margin-top: 25px;

  .delta-button-true {
    width: 142px;
    height: 31px;
    background-color: black;
    font-size: 9px;
    border: 1px solid black;
    margin-left: 5px;
    color: white;
    cursor: pointer;

    .delta-button-image-container {
      width: 41px;
      height: 30px;
      float: left;
    }

    .delta-button-text {
      float: left;
      width:95px;
      height: 31px;
      padding-top: 7px;
    }
  }

  .delta-button-false {
    width: 142px;
    height: 31px;
    background-color: white;
    font-size: 9px;
    border: 1px solid black;
    margin-left: 5px;
    color: black;
    cursor: pointer;

    .delta-button-image-container {
      width: 41px;
      height: 30px;
      float: left;
    }
    .delta-button-text {
      float: left;
      width:95px;
      height: 31px;
      padding-top: 7px;
    }
  }

  .gather-data-button-true {
    width: 142px;
    height: 31px;
    background-color: black;
    font-size: 9px;
    border: 1px solid black;
    margin-left: 5px;
    color: white;
    cursor: pointer;

    .gather-data-button-image-container {
      width: 41px;
      height: 30px;
      float: left;
      padding-top: 5px;
    }
    .gather-data-button-text {
      float: left;
      width:95px;
      height: 31px;
      padding-top: 7px;
    }
  }

  .gather-data-button-false {
    width: 142px;
    height: 31px;
    background-color: white;
    font-size: 9px;
    border: 1px solid black;
    margin-left: 5px;
    color: black;
    cursor: pointer;

    .gather-data-button-image-container {
      width: 41px;
      height: 30px;
      float: left;
      padding-top: 5px;
    }
    .gather-data-button-text {
      float: left;
      width:95px;
      height: 31px;
      padding-top: 7px;
    }
  }

  .lol-pop {
    width: 180px;
    height: 111px;
    position: relative;
    top: -156px;
    left: -20px;

    .gather-data-popup {
      width: 180px;
      height: 111px;
      background-color: black;
      position: absolute;
      opacity: .8;

      .tail {
        width: 20px;
        height: 20px;
        position: absolute;
        background-color: black;
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);
        top: 100px;
        left: 80px;
      }
    }

    .gather-data-popup-content {
      width: 150px;
      height: 111px;
      position: absolute;
      left: 18px;
      top: 12px;

      .small-button {
        width: 142px;
        background-color: white;
        height: 31px;
        border: 1px solid black;
        font-size: 9px;
        font-weight: bold;
        cursor: pointer;

        .tik-image-container {
          height: 31px;
          width: 34px;
          float: left;
          padding-top: 5px;
          padding-left: 8px;
        }
        .tik-text-container {
          height: 31px;
          width: 100px;
          float: left;
          padding-top: 7px;
        }
      }
      .first {
        margin-top: 8px;
        margin-bottom: 10px;
      }

      button {
        margin-bottom: 5px;
        width: 140px;
      }
    }
  }
}
