html {
  position: relative;
  min-height: 100%;
}
body {
  padding-top: 100px;
  margin-bottom: 200px;
  color: #444;
}
a {
  text-decoration: none;
}
a#scroll-up i {
  color: #ffffff;
}
a#scroll-up {
  bottom: 180px;
  position: fixed;
  right: 20px;
  display: none;
  background-color: rgba(8,70,168,.9);
  opacity: 0.5;
  padding: 10px 16px;
  border-radius: 2px;
}
.req:after {
  content:"*";
  color:red;
}
/* Bootstrap's .form-control{width:100%} is declared after the .col-md-*
   grid classes in the compiled CSS, so at equal specificity it silently
   wins whenever a col-md-* class is put directly on an <input>/<select>
   (as opposed to a wrapping div). This compound selector out-specifies it
   so a directly-sized form-control actually respects its column width. */
@media (min-width: 768px) {
  .form-control.col-md-3 {
    width: 25%;
  }
}
.opentradelogo {
  background: url(/web-assets/open-trade-logo.png) no-repeat 0 0;
  background-size: auto 40px;
  padding: 5px 0 5px 40px;
}
.double-top { border-top:double !important; }
@media (min-width: 768px) {
  .navbar-brand {
    background: url(/web-assets/icons/opentrade-logo-300x70.png) no-repeat center left transparent;
    padding-right:20px;
    width: 350px;
    height:100px;
    color:#000000;
  }
  .m-site-a { display:none; }
}
@media (max-width: 768px) {
  body {padding-top:50px;}
  .navbar-brand {
    background: url(/web-assets/icons/opentrade-logo-40x40.png) no-repeat center left transparent;
    padding-right:5px;
    color:#000000;
    width:40px;
    height:45px;
  }
  #navbarCollapse { background-color:#fff;}
}
#opentrade-nav {
  padding: 0 1rem;
}
.opentrade-bg-dark { background-color: #fff !important; }
#opentrade-nav .nav-link {
  color: rgba(0,0,0,.5);
}
/* Bootstrap's .nav-link rule sets `background:0 0` and is declared after
   .btn-secondary in the vendored bootstrap.min.css, so at equal
   specificity it silently strips the button's gray background whenever
   `nav-link` and `btn btn-secondary` are combined on the same element
   (e.g. the marketing-site "Login" link) - leaving white-on-white text. */
#opentrade-nav .nav-link.btn-secondary {
  background-color: #6c757d;
}
#opentrade-nav .nav-link.btn-secondary:hover {
  background-color: #5c636a;
}
.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}
.form-control-dark {
  color: #fff;
  background-color: rgba(128, 128, 128, .1);
  border-color: rgba(128, 128, 128, .1);
}
.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}
.form-control:hover, .form-control:focus, .form-control:active, .form-select:hover, .form-select:focus {
  border:1px solid #ced4da !important;
  box-shadow:none !important;
}
input:focus, input:active {
  box-shadow:none !important;
}
/* Was applied to <main> itself (class="home-page"), which wraps the
   entire page, not just the hero banner. background-size:cover sizes
   against the viewport under background-attachment:fixed, so that
   happened to look fine on desktop by coincidence -- but switching to
   scroll (needed below, since iOS Safari doesn't reliably paint
   background-attachment:fixed on anything other than html/body) made
   cover size against <main>'s own ~1700px content height instead,
   blowing the image up so far only a blank sliver of it was ever in
   view. Scoped to the actual hero wrapper div instead, with a bounded
   min-height, so cover has a sane box to size against either way. */
.hero-banner {
  min-height: 500px;
  /* Without this, .v_content's margin-top:200px (its first child, nothing
     else here to contain it) collapses straight through this box and
     pushes the whole thing down 200px instead of making space inside it
     -- the background image was never actually missing, the box housing
     it just started 200px lower than the visible "blank" area above it. */
  overflow: hidden;
  background: url(/web-assets/opentrade-truck.jpg) no-repeat center center / cover;
  background-attachment: fixed;
}
@media (max-width: 767.98px) {
  .hero-banner {
    background-attachment: scroll;
  }
}
a#scroll-up:hover { opacity: 1; }
.card-header {font-weight:700;}
.cover-home {
  background: url(/web-assets/images/cover_home.jpg) no-repeat;
  background-size: cover;
}
.clickable-row {cursor:pointer;}
.glow:hover { background-color:#e7e7e7; }
.green { color:#00ff00 !important; }
.grey { color:#ddeedd !important; }
#app_content { padding:0 50px; }
.hero {
  position: absolute;
  width:100%;
  height:auto;
  left:0;
  bottom: 180px;
}
.load-detail { font-size: 14px; }
#p1b, #c1c, .c-panel-btn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}
#p1b:hover, #c1c:hover {
  background: #ddd;
  color: black;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
  color: #aaa;
  background-color: #000;
  padding-top:20px;
  font-size:14px;
}
.footer a { color: #fff; }
.highlight_search {background-color:#ffff00;font-weight:bold;}
.num {
  float: left;
  color: gray;
  text-align: right;
  margin-right: 6pt;
  padding-right: 6pt;
  border-right: 1px solid gray;
}
pre { background-color:#ebebeb;padding:15px; }

#truckintersection {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width:auto;
  height:auto;
  z-index: -100;
}
.v_content {
  position: relative;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}
.form-div { margin-top: 100px; border: 1px solid #e0e0e0; }
#profile_photo { display: block; max-width:150px; height:150px; margin: 0px auto; border-radius: 50%; }
#profile-photo-display { display: block; max-width:150px; height:150px; margin: 0px auto; border-radius: 50%; }
.img-placeholder {
  width: 150px;
  height: 150px;
  color: #ffffff;
  background: #000000;
  opacity: .7;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}
.img-placeholder h4 {
  margin-top: 40%;
  color: white;
}
.img-div:hover .img-placeholder {
  display: block;
  cursor: pointer;
}
.profile-photo-t {
  max-width:65px;
  border-radius: 10%;
}
.text-10-clr, .text-100-clr { color: #0433ff !important; }
.text-12-clr, .text-102-clr { color: #941751 !important; }
.text-20-clr, .text-105-clr { color: #0433ff !important; }
.text-30-clr, .text-110-clr { color: #941100 !important; }
.text-40-clr, .text-115-clr { color: #7a81ff !important; }
.text-42-clr, .text-160-clr { color: #ff9300 !important; }
.text-45-clr, .text-125-clr { color: #4f8f00 !important; }
.text-50-clr, .text-130-clr { color: #008f00 !important; }
.text-60-clr, .text-135-clr { color: #ff2600 !important; }
.text-70-clr, .text-140-clr { color: #011993 !important; }
.text-80-clr, .text-150-clr { color: #009193 !important; }
.text-90-clr, .text-155-clr { color: #a9a9a9 !important; }
.text-99-clr, .text-120-clr { color: #a9a9a9 !important; }

.even { background-color: #e6f1ff !important; }
.odd { background-color:#edf5ff !important; }
.even:hover, .odd:hover { background-color: #ffffff; }

@media print {
 .no-print, .bi, .btn, .footer, form, #search {display:none;}
 body {font-family:helvetica neue,helvetica,arial; font-size:18px;}
 h1,h2,h3,h4 {font-variant:small-caps;}
 a { color:#444; text-decoration:none !important; }
}
@media only screen and (max-width: 500px) {
  .num, .no-small { display:none; }
}

.ot-autocomplete-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1060;
  margin: 2px 0 0;
  padding: 4px 0;
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.175);
  font-size: .9rem;
}
.ot-autocomplete-list li {
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ot-autocomplete-list li:hover,
.ot-autocomplete-list li.active {
  background-color: #0d6efd;
  color: #fff;
}

.bi-lg {
  font-size: 1.33em;
  vertical-align: -0.0667em;
}

.btn-report-action {
  min-width: 140px;
}