body, html { border: 0; margin: 0; padding: 0; width: 100%; height: 100%; }

body {font-size: 1.5em;background: #e2e2e2;}

body > .container {
}

body .wrapper {
    margin-top: 0;
}

.content {
    margin-right: -15px;
    margin-left: -15px;
    min-height: 600px;
    display: block;
}

.content > .row,
.content > .panel {    
    margin-left: 15px;
    margin-right: 15px;
}

.header {
    background: transparent url(../images/banner.png) center top no-repeat;
    height: 190px;
    background-size: 100% auto;  
    border-bottom: solid 1px rgba(64,64,64,0.75);
    position: relative;
}

.main-navbar {
    background: rgb(255 255 255 / 90%);
}

.sidebar-nav {
    background: -moz-linear-gradient(top,  rgb(255 255 255) 0%,rgb(98 98 98) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%, rgb(98 98 98) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgb(255 255 255) 0%,rgb(98 98 98) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */    
}

.main-navbar button {background-color: #cec;color: #fff;}
.main-navbar button span {color: #fff; border: 1px solid #fff; }

.header h1 {
    padding: 20px 20px;
    color: #2962ff;
    display: none;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.navbar-fixed-padding { 
  display: block; 
  height: 53px;
  margin-bottom: 15px;
}

/* Custom page footer */
.footer {
  padding: 20px;
  background: #ffe57f;
  color: #000;
  border-top: 1px solid #e5e5e5;
}

.footer a {
  color: #000;
}

/* Customize container */

.container-narrow > hr {
  margin: 30px 0;
}

.navbar {
  padding: 0;
  margin: 0;
}

.navbar-center {
  position: absolute;
  left: 0;
  right: 0;
  width: 360px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.navbar li a,
.sidebar li a {
  color: #0eff71;  
  font-size: 1.2em;
  text-shadow: 2px 2px 3px #3f3535;
  margin: 0;
}

.navbar li a:active, 
.navbar li a:hover {
  background: rgb(129,129,129,0.64);
  color: #36e527;  
  text-shadow: none;
 }

.navbar li.active a,
.sidebar li.active a {
  background: rgba(129, 129,129,0.5);
  color: #a3f879;  
  text-shadow: 1px 1px 1px #444;
}

.dropdown-menu{
  background: rgba(255,255,255,0.95);
}

.dropdown-menu>li>a {
    display: block;
    padding: 15px 20px;
}

.carousel
{ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }

.carousel .carousel-caption { 
    left: 0; right: 0; bottom: 0; 
    padding: 15px;
    z-index: 9;
    background: rgba(0, 0, 0, 0.5); 
    color: white;
}

.carousel-inner > .item > img {
    width: 100%;
    height: 100%
}


.panel { border: 0; }
.raised,
.panel-default, .panel-primary, .panel-success, .panel-info, .panel-danger
{ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }

.main-navbar {
  box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.24);
}
.sidebar-nav {
  box-shadow: 4px 0px 8px rgba(0,0,0,0.06), 6px 0px 4px rgba(0,0,0,0.12);
}


.panel-default .panel-heading {background: #606060; border: 0; color: #fff}
.panel-primary .panel-heading {background: #0074ff; border: 0;}
.panel-success .panel-heading { background: #4CAF50; border: 0; }
.panel-info .panel-heading { background: #5c00cf; border: 0; color: #fff; }
.panel-warning .panel-heading { background: #f7f2ad; border: 0; }
.panel-danger .panel-heading { background: #f7adad; border: 0; }

.btn-primary { background: #212f52; }
.btn-success { background: #41bc0f }
.btn-info { background: #059ee3 }
.btn-danger { background: #d31501 }
.btn-warning { background: #FF9100 }

.badge-primary { background: #0069e7; color: #fff }
.badge-success { background: #3ac303; color: #fff }
.badge-info { background: #15d4ed; color: #fff }
.badge-warning { background: #ff9100; color: #fff }
.badge-danger { background: #FF5722; color: #fff }
.badge-waiting { background: #f7ff07; color: #5d5d5d }
.badge-cancel { background: #a0a0a0; color: #fff }

footer { background: #FFFF8D }
footer .widget h4 { font-size: 1.5em; font-weight: bold; margin: 15px 0 25px; }
footer .credits { padding: 10px 0 15px; background: #FFD600 }

.card {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.panel {
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
   
}

span.required { color: red; }

span.approved { background-image: url(../images/check_sm.png); background-size: 24px 24px; width: 24px; height: 24px; display: inline-block; vertical-align: middle; }
span.unapproved { background-image: url(../images/xmark_sm.png); background-size: 24px 24px; width: 24px; height: 24px; display: inline-block;  vertical-align: middle; }


ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

ul.timeline:before {
    content: "";
    display: inline-block;
    width: 2px;
    position: absolute;
    left: 3px;
    top: 5px;
    height: calc(100% - 12px );
}
ul.timeline li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 15px;
}
ul.timeline li:before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    position: absolute;
    left: 0;
    top: 5px;
    border-radius: 10px;
}               

ul.timeline:before {
    background: #bdbdbd;
}
ul.timeline li:before {
    background: #4f4f4f;
}

.timeline.dests li:first-child:before {
    background: #ffc401;
}
.timeline.dests li:last-child:before {
    background: #ff0000;
}

.panel-body .map:first-child { margin: -15px -15px 15px -15px; }

.start-loc.form-group { padding: 0; ; }
.end-loc.form-group { padding: 0; ; }

.start-loc-label { color: #e49f23; }
.start-loc-label .icon { font-size: 1.5em; color: #e49f23; -webkit-text-stroke: 1px #444; vertical-align: middle; }
.start-loc-icon { background: url(../images/start_marker.png); background-size: 25px 37px; width: 25px; height: 37px; display: inline-block; vertical-align: middle }
.end-loc-label { color: #5e843f; }
.end-loc-label .icon { font-size: 1.5em; color: #5e843f; -webkit-text-stroke: 1px #444; vertical-align: middle; }
.end-loc-icon { background: url(../images/end_marker.png) ; background-size: 25px 37px;  width: 25px; height: 37px; display: inline-block; vertical-align: middle }


.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  background-color: #eee;
  border: 0;
  opacity: 1;
}

ol.milestones {
  display: flex;
  list-style: none;
  text-align: center;
  counter-reset: milestones;
  width: 100%;
  padding: 0;
  margin: 20px 0;
}
ol.milestones li {
  flex-grow: 1;
  flex-basis: 0;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  font-size: 0.75em;
  line-height: 1.25em;
}
ol.milestones a {
  display: block;
  text-decoration: none;
}
ol.milestones a::before,
ol.milestones a::after {
  display: block;
  font-size: 1.25em;
  box-sizing: border-box;
}
ol.milestones a::before {
  border-radius: 50%;
  text-decoration: none;
  content: counter(milestones);
  counter-increment: milestones;
  width: 3em;
  height: 3em;
  line-height: 3em;
  margin: 0 auto 0em;
}
ol.milestones a::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 0;
  border: 0;
  left: 50%;
  top: 1.5em;
  border-bottom-width: 0.5em;
  margin-top: -0.25em;
}
ol.milestones li:last-child a::after {
  display: none;
}
ol.milestones a,
ol.milestones a:visited {
  color: #9ca09f;
}
ol.milestones a::before {
  color: #fdfefe;
  background-color: #4a596a;
}
ol.milestones a::after {
  border-bottom-style: solid;
  border-color: #4a596a;
}
ol.milestones li.current a {
  font-weight: bold;
  color: #707070;
}
ol.milestones li.current a::before {
  color: #fdfefe;
  background-color: #1e1f35;
}
ol.milestones li.current a::after {
  border-style: dashed;
  border-color: #9E9E9E;
}
ol.milestones li.current ~ li a::before {
  color: #707070;
  background-color: #e7e7e3;
  box-shadow: inset 0 0 0 0.375em #d4d4d4;
}
ol.milestones li.current ~ li a::after {
  border-bottom-style: none;
}