body {
  padding-top: 0px;
  padding-bottom: 20px;
  background-color: white;
}
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
.vmz-jumbotron-blue {
    background-color: lightblue !important;
}
.vmz-jumbotron-green {
    background-color: lightsteelblue !important;
}
.vmz-jumbotron-lightgrey {
    background-color: #F0F0F0 !important;
}
.vmz-page-header {
    border-bottom: 1px solid lightsteelblue !important;
}
.vmz-uppercase {
    text-transform: uppercase;
}
.vmz-displaynone {
    display: none;
}
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}
img {
    border-style: none;
}

#tooltip {
  background-color: #2151A8;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 4px;
}

#arrow,
#arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  z-index: -1;
}

  #arrow::before {
    content: '';
    transform: rotate(45deg);
    background: #2151A8;
  }

.stage-container {
  width: 100%;
  display: inline-flex;
}

.line {
  top: 50%;
  position: relative;
  width: 30%;
  height: 10px;
  background-color: white;
  margin-top: -5px;
  margin-left: -10px;
  margin-right: -10px;
  display: inline-block;
}

.completed-line {
  background-color: #2151A8;
}

.stage {
  width: 150px;
  display: inline-block;
}

  .stage img {
    max-width: 100%;
    z-index: 4;
    position: relative;
  }

.lang-container {
  float: right;
  display: flex;
}

.lang-box {
  display: inline-block;
  padding-bottom: 10px;
  margin-right: 10px;
}

  .lang-box img {
    width: 30px;
  }

.lang-box-selected {
  display: inline-block;
  border-bottom: 5px solid #2151A8;
}

#tooltip {
  z-index: 1;
  text-align: center;
}

#signature-img {
  mix-blend-mode: multiply;
  max-width: 100%;
}

.history {
  margin-left: 8px;
  list-style-type: none;
}

.history-solo {
  margin-left: 8px;
  list-style-type: none;
}

.history::before {
  width: 2px;
  height: 72px;
  content: '';
  left: 33px;
  position: absolute;
  background-color: #2151A8
}

.history:first-of-type::before {
  width: 2px;
  margin-top: 36px;
  height: 36px;
  content: '';
  left: 33px;
  position: absolute;
  background-color: #2151A8
}

.history:last-of-type::before {
  width: 2px;
  height: 36px;
  content: '';
  left: 33px;
  position: absolute;
  background-color: #2151A8
}

.history-stage0 {
  position: absolute;
  left: 16px;
  margin-top: 10px;
  max-width: 36px;
  display: inline-block;
  max-height: 36px;
  content: url(/images/stage0.png);
}

.history-stage1 {
  position: absolute;
  left: 16px;
  margin-top: 10px;
  max-width: 36px;
  display: inline-block;
  max-height: 36px;
  content: url(/images/stage1-completed.png);
}

.history-stage2 {
  position: absolute;
  left: 16px;
  margin-top: 10px;
  max-width: 36px;
  display: inline-block;
  max-height: 36px;
  content: url(/images/stage2-completed.png);
}

.history-stage3 {
  position: absolute;
  left: 16px;
  margin-top: 10px;
  max-width: 36px;
  display: inline-block;
  max-height: 36px;
  content: url(/images/stage3-completed.png);
}

.history-stage4 {
  position: absolute;
  left: 16px;
  margin-top: 10px;
  max-width: 36px;
  display: inline-block;
  max-height: 36px;
  content: url(/images/stage4-completed.png);
}

.history-stage5 {
  position: absolute;
  left: 16px;
  margin-top: 10px;
  max-width: 36px;
  display: inline-block;
  max-height: 36px;
  content: url(/images/stage5-completed.png);
}

.history-stage6 {
  position: absolute;
  left: 16px;
  margin-top: 10px;
  max-width: 36px;
  display: inline-block;
  max-height: 36px;
  content: url(/images/stage6-completed.png);
}

a {
  color: #2151A8;
  text-decoration: underline dotted;
}

  a:visited {
    color: #2151A8;
    text-decoration: underline dotted;
  }