body {
  padding-bottom: 30px;
}

.container .jumbotron {
  color: white;
  background-color: #D0404F;
  /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
  background-image: url("/img/vera-pages.jpg");
  padding: 0;
}

.jumbotron .container {
    padding: 20px;
    padding-left: 60px;
}

.jumbotron img {
  padding: 0;
  float: left;
  width: 200px;
  margin: 0 10px 0 0;
}

.shadowed {
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
  filter: url(#drop-shadow);
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
  filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}

.radialmask {
  background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.9) 20%, rgba(0,0,0,0.05) 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.9)), color-stop(20%,rgba(0,0,0,0.9)), color-stop(100%,rgba(0,0,0,0.05))); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.9) 20%,rgba(0,0,0,0.05) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.9) 20%,rgba(0,0,0,0.05) 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.9) 20%,rgba(0,0,0,0.05) 100%); /* IE10+ */
  background: radial-gradient(ellipse at center,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.9) 20%,rgba(0,0,0,0.05) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6000000', endColorstr='#0d000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.jumbotron h1 .jumbotron p {
  color: white;
  position: relative;
  left: 10px;
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}
.stepwizard-step p {
  margin-top: 10px;
}

.stepwizard-row {
  display: table-row;
}

.stepwizard {
  display: table;
  width: 100%;
  position: relative;
}

.stepwizard-step button[disabled] {
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 100%;
  height: 1px;
  background-color: #ccc;
  z-order: 0;

}

.stepwizard-step {
  display: table-cell;
  text-align: center;
  position: relative;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}
input[readonly] {
  background-color: white !important;
  cursor: text !important;
}
.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

.form-wrapper {
  margin-bottom: 15px;
}

.container .btn-lg {
  padding: 6px 12px;
  font-size: 16px;
}

#results .alert {
  margin-top: 20px;
}

#validate .list-group {
  box-shadow: none;
}

table {
  width: 100%;
}

.error-form-data {
  color: red;
}

#configure-validator-header, #result-details {
  overflow-wrap: anywhere;
  font-weight: 600;
  font-size: 0.95em;
}

.header-for-name {
  display: flex;
  align-items: flex-start;
}

.header-for-name h1{
  margin-top: 0;
  margin-bottom: 8px;
}

@media screen and (max-width: 1200px) {
  .header-for-name {
    position: relative;
  }

  .header-for-name h1 {
    margin-bottom: 40px;
  }

  .header-for-name p {
    position: absolute;
    left: 0;
    bottom: -20px;
  }
}

@media screen and (max-width: 1000px) {
  .header-for-name {
    margin-bottom: 10px;
  }

  .header-for-name p {
    bottom: -35px;
  }

  .header-for-name h1 {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 760px) {
  .header-for-name h1 {
    margin-bottom: 80px;
  }

  .header-for-name p {
    bottom: -35px;
  }
}

@media screen and (max-width: 500px) {
  .jumbotron .container {
    padding-left: 20px;
  }
}

@media screen and (max-width: 450px) {
  .header-for-name {
    flex-direction: column;
  }

  .header-for-name h1 {
    margin-top: 10px;
  }
}

@media screen and (max-width: 300px) {
  .header-for-name h1 {
    margin-bottom: 100px;
  }
}