#onboarding .center-pane-border {
  border-top: 4px solid #014683;
  border-radius: 4px;
  padding: 65px 0;
  margin: 0 auto 2.5rem;
  background-color: #fff;
  box-shadow: 0.5px 0.5px 2px 0 rgba(27, 36, 50, 0.1);
}
.theme-btn-primary {
  background-color:#014683 !important; 
  border-color:#014683 !important;
}

.theme-btn-primary:hover {
  background-color:#347cf7 !important; 
  border-color:#347cf7 !important;
}
.theme-link {
    color: #014683;
    text-decoration: none;
}
.theme-title {
  color: white !important;
}
.img-responsive-logo {
  display: block;
  max-width: 100%;
  height: 70px;
}
.checkbox-input:checked + .input-icon{
  background-color: #014683 !important;
}.theme-loading-spiner-holder {
  color: #014683 !important;
}
.theme-loading-spiner-holder .message span {
  background-color: #014683 !important;
}
.theme-fa-btn {
    color: #014683;
}
.nav-bordered > li.active > a {
  border-bottom: 2px solid #014683;
  color: #014683;
  font-family: "sf_ui_textbold";
}
a {
    color: #014683;
    text-decoration: none;
}
.truckImage {
    height: 110px;
    width: 185px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 10px;
    display: inline-table;
    padding: 17px 0px 0px 90px;
    cursor: pointer;
    margin-left:10px;
    margin-right:10px;
}
@keyframes filling-animation {
    0% {
      opacity: 0.0;
      bottom: -40px;
    }
    50% {
      opacity: 0.6;
    }
    90% {
      opacity: 0.0;
      bottom: calc(100% - 20px);
    }
    100% {
      opacity: 0.0;
    }
  }
  .tank-gauge {
    font-family: roboto;
    display: inline-block;
    width: auto;
    position: relative;
    background: white;
  }
  .tank-gauge .outer {
    position: relative;
    background: #ddd;
    height: 75px;
    width: 75px;
    margin-right: 80px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .tank-gauge .outer::before, .tank-gauge .outer::after {
    content: " ";
    display: block;
    position: absolute;
    top: -20px;
    left: 0px;
    width: 100%;
    height: 40px;
    border-radius: 100%;
    background: rgba(235, 235, 235, 0.2);
    z-index: 2;
  }
  .tank-gauge .outer::before {
    z-index: 1;
    background: #E4E4E4;
  }
  .tank-gauge .outer .level {
    position: absolute;
    background: #8AD86A;
    bottom: -20px;
    left: 0px;
    width: 100%;
    margin-right: 80px;
    margin-top: 20px;
    margin-bottom: 20px;
    transition: height 0.5s;
  }
  .tank-gauge .outer .level::before, .tank-gauge .outer .level::after {
    content: " ";
    display: block;
    position: absolute;
    bottom: -20px;
    left: 0px;
    width: 100%;
    height: 40px;
    border-radius: 100%;
    background: #8AD86A;
  }
  .tank-gauge .outer .level::before {
    bottom: initial;
    top: -20px;
    background: #B6EAA1;
    z-index: 1;
  }
  .tank-gauge .outer .level .highlight {
    display: block;
    position: absolute;
    bottom: -20px;
    left: 0px;
    width: 100%;
    height: 40px;
    border-radius: 100%;
    background: rgba(255, 255, 255, 0.5);
    z-index: 4;
    filter: blur(5px);
    opacity: 0.0;
  }
  .tank-gauge .outer .ticks {
    position: absolute;
    width: 80px;
    left: 75px;
    height: 100%;
    right: 0px;
    top: 3px;
    bottom: -4px;
  }
  .tank-gauge .outer .ticks .tick {
    height: 2px;
    width: 18px;
    border: solid 1px white;
    position: absolute;
    background: #BCBCBC;
    left: 0px;
    z-index: 2;
  }
  .tank-gauge .outer .ticks .tick.maxfill {
    background-color: #D64242;
    width: 15px;
    height: 3px;
  }
  .tank-gauge .outer .ticks .tick.autofill {
    background-color: #426FD6;
    width: 15px;
    height: 3px;
  }
  .tank-gauge .outer .ticks .tick.estop {
    background-color: #4BB2DC;
    width: 15px;
    height: 3px;
  }
  .tank-gauge .outer .ticks .tick.value {
    transition: all 0.5s;
    height: 0px;
    border: none;
    z-index: 2;
  }
  .tank-gauge .outer .ticks .tick.value .arrow {
    transform: translateY(-10px);
  }
  .tank-gauge .outer .ticks .tick.value label {
    position: absolute;
    top: 0px;
    display: inline;
    left: 20px;
    transform: translateY(-50%);
  }
  .tank-gauge .outer .ticks .tick.value img {
    position: absolute;
    top: 0px;
    display: inline;
    left: 58px;
    transform: translateY(-50%);
  }
  .tank-gauge.filling .outer {
    background: #C1F1FD;
  }
  .tank-gauge.filling .outer::before {
    background: #d0f4fd;
  }
  .tank-gauge.filling .level, .tank-gauge.filling .level::after {
    background: #8AD86A ;
  } 
  .tank-gauge.filling .level::before {
    background: #B6EAA1;
  }
  .tank-gauge.filling .highlight {
    animation-name: filling-animation;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  .tank-gauge.error .level, .tank-gauge.error .level::after {
    background: #DA5E5E;
  }
  .tank-gauge.error .level::before {
    background: #E08A8A;
  }
  .tank-gauge.warning .level, .tank-gauge.warning .level::after{
    background: #FFC339;
  }
  .tank-gauge.warning .level::before{
    background: #FFDD8D;
  }
  .tank-gauge.grey .level, .tank-gauge.grey .level::after{
    background: #DDDDDD;
  }
  .tank-gauge.grey .level::before{
    background: #E5E5E5;
  }
  #countdown{
	width: 142px;
	height: 30px;
	text-align: center;
	background: #014683;
	background-image: -webkit-linear-gradient(top, #014683, #014683, #045296, #045296); 
	background-image:    -moz-linear-gradient(top, #014683, #014683, #045296, #045296);
	background-image:     -ms-linear-gradient(top, #014683, #014683, #045296, #045296);
	background-image:      -o-linear-gradient(top, #014683, #014683, #045296, #045296);
	border: 1px solid #20588a;
	border-radius: 5px;
	margin: auto;
	position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

#countdown #tiles{
	position: relative;
}

#countdown #tiles > span{
	width: 32px;
	max-width: 92px;
	font: bold 18px 'Droid Sans', Arial, sans-serif;
	text-align: center;
	color: #014683;
	background-color: #ddd;
	background-image: -webkit-linear-gradient(top, #bbb, #eee); 
	background-image:    -moz-linear-gradient(top, #bbb, #eee);
	background-image:     -ms-linear-gradient(top, #bbb, #eee);
	background-image:      -o-linear-gradient(top, #bbb, #eee);
	border-top: 1px solid #fff;
	border-radius: 3px;
	margin: 2px 7px 2px 5px;
	display: inline-block;
	position: relative;
}

#countdown #tiles > span:before{
	content:"";
	width: 100%;
	height: 13px;
	background: #111;
	display: block;
	padding: 0 3px;
	position: absolute;
	top: 41%; left: -3px;
	z-index: -1;
}
#countdown #tiles > span:after{
	content:"";
	width: 100%;
	height: 1px;
	background: #eee;
	border-top: 1px solid #333;
	display: block;
	position: absolute;
	top: 48%; left: 0;
}

#countdown .labels{
	width: 100%;
	height: 25px;
	text-align: center;
	position: absolute;
	bottom: 8px;
}

#countdown .labels li{
	width: 102px;
	font: bold 15px 'Droid Sans', Arial, sans-serif;
	color: #f47321;
	text-shadow: 1px 1px 0px #000;
	text-align: center;
	text-transform: uppercase;
	display: inline-block;
}

.selectBox {
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}

.selectdiv:after {
    content: '\f078';
    font: normal normal normal 17px/1 FontAwesome;
    color: #333;
    right: 28px;
    bottom: 5px;
    height: 34px;
    padding: 15px 0px 0px 8px;
    position: absolute;
    pointer-events: none;
}

/* IE11 hide native button (thanks Matt!) */
select::-ms-expand {
display: none;
}

.selectdiv select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */
  float: right;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  -ms-word-break: normal;
  word-break: normal;
}

