body {
  padding-right: 50px;
  padding-left: 50px;
}

.exercise_outer_container {
  margin-right: 2%;
  margin-left: 2%;
}

img {
  width: 100%;
}

.button-margin {
  margin-bottom: 20px;
}

.graph-div {
  height: 800px;
  border: 3px dashed black;
}

.img-button {
  vertical-align: middle;
  margin: 5px;
  padding: 0px;
  background: rgba(0,0,0,0.0);
  border: 0px;
}

.img-button:hover {
  border: 5px solid black;
  margin: 0px;
  background: rgba(0,0,0,1.0);
}

.questionnaire-answer:hover {
  border: 5px solid black;
  margin: 0px;
}

.title-row {
  text-align: center;
}

.dash-title {
  margin-top: 0px;
}

.message_div {
  text-align: center;
  background-color: #fae6c8;
  border: 5px solid black;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.message_img {
  display: block;
  margin: auto;
  width: 40%;
}

.noclick {
  pointer-events: none;
  opacity: .8;
}

iframe#code_iframe {
  overflow: auto;
  width: 100%;
  height: 700px;
  border: 5px solid black;
}

a.link-block-image {
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  margin: 5px;
}

a.link-block {
  border-radius: 5px;
  height: 100px;
  text-align: center;
  text-decoration: none;
  margin: 5px;
}

a.link-block:hover,
a.link-block-image:hover {
  border: 5px solid black;
  margin: 0px;
}

a.link-block h1 {
  color: black;
  text-decoration: none;
}

.button-success,
.button-error,
.button-warning,
.button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success {
    background: rgb(28, 184, 65);
}

.button-error {
    background: rgb(202, 60, 60);
}

.button-warning {
    background: rgb(223, 117, 20);
}

.button-secondary {
    background: rgb(66, 184, 221);
}

.pure-button-primary, a.pure-button-primary {
  background: #344b59;
}

.mini-flag {
  width: 30px;
}

canvas {
  /* all four are needed to support most browsers */
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.tolTarget {
  opacity: .8;
  background: #efefef;
  border: 1px solid black
}

/* Styles from Code.org */

#codeApp {
  position: relative
}

.full_container {
  padding: 0px 25px 25px;
}

.wrapper {
  min-height: 100%;
  margin-bottom: -256px;
}

.uitest-instructionsTab {
  text-decoration: none
}

.clear {
  clear: both;
}

.digitSpanBigNumber {
  font-size: 150px
}

.subquestionRadio {
  margin-left: 20px;
}

.npBtn {
  width: 70%;
  height: 90%;
  font-size: 50px !important;
}

.bordered {
  border: 1px solid black
}

.stereotypeImg {
  max-height: 400px;
  width: auto !important;
  margin-left: auto;
  margin-right: auto;
}

.inlineSvg {
  height: 35px;
  width: 40px;
  display: inline;
}

.blocklyButton {
  display: inline-block;
  width: 80px;
  height: 60px;
  text-align: center;
  margin: 5px;
  border: 0px;
}

.blocklyButton.disabled {
  opacity: 0.5;
}

.blocklyButtonImg {
  max-height:50px;
  width: auto;
  height: auto;
  margin-top: 5px;
}

@media (max-width: 1200px) {
  .exercise_outer_container {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 100px;
  }

  body {
    padding:0;
  }

  .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
    margin-left: 0;
    margin-right: 0;
    margin-bottom:0;
  }

  #unpluggedExplanation {
    margin-left: 50px;
    margin-bottom: 100px;
  }
}

.shapeImg {
  max-width: 70px;
  max-height: 70px;
}

.stroopImg {
  max-width: 300px;
  max-height: 300px;
}

.codeReadingAnswerDiv {
  border-radius: 25px;
  padding: 10px;
  background-color: #e8e8e8;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 5px solid black;
  text-align: center;
}

.codeReadingAnswerDiv.highlight {
  border: 10px solid blue;
  background-color: #bcbcbc;
}

.mapFrame.highlight {
  border: 10px solid #fda400;
}

.drillDebugInstructions {
  color: #474747;
  font-style: italic;
  font-weight: bold;
}

.codingCdoExplanation {
  display: inline;
  font-size: x-large;
  img {
    max-height: 60px;
    width: auto;
  };
}

.wsExecuteSuc {
  border: 5px solid green
}

.wsExecuteFail {
  border: 5px solid red
}

.flowChartDiv {
  overflow: scroll;
}

#flowChartOutputDiv {
  color: white;
  background-color: #262626;
  font-family: monospace;
  overflow: scroll;
}

.flowChartWarningDiv {
  margin-top: 10px;
}

.flowchartInfoDiv {
  color: #494949
}