#body {
  position: relative;
  width: 800px;
  padding-bottom: 450px;
}

#history {
  font-size: 20px;
  float: right;
  margin-top: 5px;
}
#history i {
  display: inline-block;
  vertical-align: middle;
  margin-top: -4px;
  margin-left: -4px;
}

#page-locked-message {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 560px;
  max-height: 100%;
  z-index: 1000;
  background-color: #333;
  padding: 30px;
  display: none;
}

#rank-progress-container {
  position: relative;
  height: 20px;
  width: 100%;
  background-color: #222;
}
#rank-text {
  position: absolute;
  left: 10px;
  top: 1px;
  color: #666;
  font-size: 14px;
  font-weight: bold;
}
#rank-progress {
  height: 100%;
  width: 0px;
  background-color: #0cf;
}

#quest-content {
  width: 450px;
  display: inline-block;
  vertical-align: top;
}
#quest-content.blur {
  filter: blur(5px);
  pointer-events: none;
}

.rank-quests {
  margin-bottom: 15px;
}

.rank-quests.locked {
}

.rank-quests.locked h3 {
  color: #666;
}

.quest-button {
  position: relative;
  cursor: pointer;
  display: inline-block;
  border: 1px solid #aaa;
  padding: 10px 20px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.rank-quests.locked .quest-button {
  color: #666;
  border: 1px solid #666;
}
.quest-button:hover {
  background-color: #0cf;
  color: #333;
}
.quest-button .description {
  display: none;
}
.quest-button.selected {
  background-color: #0cf;
  color: #333;
}

.quest-button .result-overlay {
  position: absolute;
  left: 4px;
  top: 3px;
  color: #b6f;
}
.quest-button .lock-overlay {
  position: absolute;
  left: 2px;
  top: 2px;
  color: #666;
}

#quest-card-wrapper {
  /*
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 560px;
  z-index: 100;
  */
  position: absolute;
  top: 120px;
  left: 470px;
  width: 350px;
  height: calc(100% - 100px);
  overflow: auto;
  background-color: #333;
  z-index: 100;
  /*
  max-height: 100%;
  */
}
#quest-card {
  position: relative;
  padding: 30px;
  border: 1px solid #aaa;
  display: inline-block;
}
#quest-card .close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
#quest-card .title {
  font-weight: bold;
}
#quest-card .description {
  margin: 15px 0px;
}
#quest-card .description .goal {
  margin-bottom: 15px;
}
#quest-card .codebot {
  margin-top: 20px;
  margin-bottom: 20px;
}
.action-button {
  cursor: pointer;
  background-color: #0cf;
  padding: 15px 25px;
  display: inline-block;
  color: #333;
}
.action-button i {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 4px;
}

#lesson-button {
  position: relative;
  background-color: #0fc;
}
#lesson-button .popout-icon {
  position: absolute;
  right: 0px;
  top: 0px;
}
#locked-button {
  background-color: #666;
  cursor: not-allowed;
}

#quest-card.hidden {
  display: none;
}