.flow-content {
  position: relative;
  width: 600px;
  margin: 0 auto 100px auto;
}

.panel-nav {
  position: absolute;
  top: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  border: solid 1px #e5e5e5;
  border-radius: 50px;
}

.panel-nav:active {
  border-color: #4183c4;
}

.panel-nav.prev {
  left: -165px;
}

.panel-nav.next {
  left: 644px;
}

.panel-nav .mega-octicon {
  font-size: 48px;
  line-height: 100px;
  color: #4183c4;
}

.panel-nav.disabled .mega-octicon {
  color: #e5e5e5;
}

.panel-nav.disabled:active {
  cursor: default;
  border-color: #e5e5e5;
}

.panel-nav-bottom {
  margin-top: 20px;
  line-height: 1.4;
}

.panel-nav-bottom.next {
  float: right;
}

.panel-nav-bottom.prev {
  float: left;
}

.panel-nav-bottom .mega-octicon {
  position: relative;
  top: -1px;
  vertical-align: middle;
}

.panel-content {
  display: none;
}

.panel-content.active {
  display: block;
}

.scrollable-diagram {
  padding: 20px 0;
  overflow-x: scroll;
  overflow-y: hidden;
}

.features-branch-diagram {
  position: relative;
  margin-top: 20px;
  margin-bottom: -80px;
}

.diagram-icon {
  position: absolute;
  width: 53px;
  height: 53px;
  line-height: 55px;
  color: #4183c4;
  text-align: center;
  cursor: pointer;
  background-color: #fff;
  border: solid 4px #4183c4;
  border-radius: 50px;
}

.diagram-icon.active {
  color: #fff;
  background-color: #932D70;
  border-color: #932D70;
}

.diagram-icon .mega-octicon {
  line-height: 32px;
}

.diagram-icon-small {
  position: absolute;
  color: #4183c4;
  cursor: pointer;
  margin-top: 2px\9; // IE hack - this needs to remain the last rule
}

.diagram-icon-small.active {
  color: #932D70;
  opacity: 1;
}

.diagram-icon-branch {
  top: -18px;
  left: 61px;
}

.diagram-icon-pr {
  top: 84px;
  left: 395px;
}

.diagram-icon-merge {
  top: -18px;
  left: 813px;
}

.diagram-icon-commit-1 {
  top: 96px;
  left: 220px;
  background-color: #fff;
}

.diagram-icon-commit-2 {
  top: 96px;
  left: 275px;
  background-color: #fff;
}

.diagram-icon-commit-3 {
  top: 96px;
  left: 330px;
  background-color: #fff;
}

.diagram-icon-discussion-1 {
  top: 74px;
  left: 468px;
  opacity: 0.3;
}

.diagram-icon-commit-4 {
  top: 96px;
  left: 495px;
  background-color: #fff;
}

.diagram-icon-discussion-2 {
  top: 126px;
  left: 522px;
  opacity: 0.3;
}

.diagram-icon-commit-5 {
  top: 96px;
  left: 550px;
  background-color: #fff;
}

.diagram-icon-discussion-3 {
  top: 74px;
  left: 577px;
  opacity: 0.3;
}

.diagram-icon-commit-6 {
  top: 96px;
  left: 605px;
  background-color: #fff;
}

.diagram-icon-deploy {
  top: 84px;
  left: 660px;
}

circle:hover {
  cursor: pointer;
}

@media only screen and (max-width: 959px) {
  .flow-content {
    width: auto;
  }

  .panel-nav {
    position: static;
    top: auto;
  }

  .panel-nav.prev {
    left: auto;
    float: left;
  }

  .panel-nav.next {
    left: auto;
    float: right;
  }
}