/* scrollbar */
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

/* Navigatin Bar */

.nav-selected { font-size: 20px; }

.nav-tabs >li>a {
  padding-top:9px;
  padding-bottom:9px;
  font-weight: bold;
}

.navbar, .navbar-brand { font-family: 'Open Sans',sans-serif; }

.navbar-inverse .navbar-nav > .open > a ,
.navbar-inverse .navbar-nav > .open > a:hover {
  background-color:#204D75;
}

.navbar-inverse,
.btn-black {
  background-color:#0F243E;
}


/* UI layout element */

.pagetop-margin { top: 50px; }

.fixed-content { padding-top: 0; }


/* logout button */

.btn-black:hover { color: white; }

.btn-black {
  color: silver;
  border-color: DimGray;
}

.nopad { padding: 0px; }

.round-all-s { border-radius: 4px; }

.round-all-l { border-radius: 10px; }

.round-all-xl { border-radius: 12px; }

.round-bottom-l { border-radius: 0 0 10px 10px; }

.round-top-s { border-radius: 4px 4px 0 0; }

.round-top-l { border-radius: 10px 10px 0 0; }

.bold { font-weight: bold; }


.rows .btn {
  border-radius: 0px;
}

/* login */

.FAlogin {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  width: 280px;
}

.FAlogin input { width: 100%; }

.FAlogin .btn-info {
  background-color: #00457c;
  border-color: #00457c;
}

.white {
  background-color: #fff;
}

/* home - mobile */

.top-bar {
  height: 60px;
  width: 100%;
}

.top-bar .nav-tabs { border-bottom: none; }

.top-bar .nav-tabs .active { border-bottom: 5px solid #00457c; }

.top-bar .nav-tabs li a,
.top-bar .nav-tabs li.active a,
.top-bar .nav-tabs li.active a:hover,
.top-bar .nav-tabs li.active a:focus {
  border: none;
  height: 100%;
  padding: 0;
}

.top-bar .nav-tabs li {
  height: 60px !important;
  width: 16.65%;
}

.dtlbox-heading {
  background: #CFE2F2;
  color: #0073BC;
  font-size: 11px;
  padding: 10px 0;
  text-align: center;
}

.btn-bar {
  background-color: #666;
  height: 50px;
  width: 100%;
}

.btn-bar span { line-height: 1.2em; }

.btn-opt {
  border-right: 1px solid rgb(124, 124, 124);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  height: 100%;
}

.btn-block {
  display: table;
  opacity: 0.5;
  height: 100%;
  width: 100%;
}

.btn-span {
  display: table-cell;
  vertical-align: middle;
}

.btn-opt .heading-sel-button {
  background-color: #000;
  opacity: 1;
}

.col-pad { padding: 3px; }

.setting-icon {
  color: #164874;
  margin-top: -75px;
  padding-right: 0px;
}

/* popup form - general */

.popup-spin {
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030;
}

.popup-form {
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030;
}

.popup-container {
  display: table-cell;
  vertical-align: middle;
}

.popup-content {
  margin: 0 auto;
  max-height: 480px;
  max-width: 320px;
  height: 100%;
  width: 100%;
}

.ctrl-bar span { font-size: 16px; }

.popup-container .ctrl-bar {
  background-color: #888;
  color: #fff;
  padding: 5px;
}

.popup-content .ui-widget-header {
  border: 0;
  background: none;
}

.popup-content .ui-corner-all { border-radius: 0; }

.popup-content .ui-widget-content {
  border: none;
  padding: 0;
  width: 100%
}


/* datepicker */

.popup-content .ui-datepicker { height: 100%; }

.popup-content .ui-datepicker,
.popup-content .ui-datepicker .ui-datepicker-title,
.popup-content .ui-datepicker .ui-state-default,
.popup-content .ui-datepicker .ui-widget-content .ui-state-default,
.popup-content .ui-datepicker .ui-widget-header .ui-state-default {
  color: #888;
  font-family: Arial;
  font-size: 14px;
}

.popup-content .ui-datepicker .ui-datepicker-header { padding: 0; }

.popup-content .ui-widget-header .ui-icon { background-position: 0; }

.popup-content .ui-widget-header .ui-state-hover {
  border: 0;
  background: none;
}

.popup-content .ui-widget-header .ui-datepicker-prev-hover {
  left: 0;
  margin-left: 2px;
}

.popup-content .ui-widget-header .ui-datepicker-next-hover {
  right: 0;
  margin-right: 2px;
}

.popup-content .ui-widget-header .ui-icon.ui-icon-circle-triangle-w {
  background-image: url('../img/m_icon_chevron_left.png');
  background-size: 11px 16px;
}

.popup-content .ui-widget-header .ui-icon.ui-icon-circle-triangle-e {
  background-image: url('../img/m_icon_chevron_right.png');
  background-size: 11px 16px;
}

.popup-content .ui-datepicker .ui-datepicker-prev,
.popup-content .ui-datepicker .ui-datepicker-next {
  top: 0;
}

.popup-content .ui-datepicker th {
  font-size: 11px;
  font-weight: normal;
  padding: 0;
}

.popup-content .ui-datepicker td { padding: 0; }

.popup-content .ui-datepicker td a { text-align: center; }

.popup-content .ui-state-default {
  border: 0 !important;
  background: none !important;
}

.popup-content .ui-state-active { background: rgba(28, 164, 221, 0.3) !important; }

.popup-content .ui-state-highlight {
  border: 0 !important;
  background: none !important;
  color: #1CA4DD !important;
}

.popup-content .fromcal,
.popup-content .tocal {
  height: 195px;
}

.popup-content .fromcal { background-color: #fff; }

.popup-content .tocal { background-color: #eee; }

.popup-content .tocal .ui-widget-content { background: transparent; }

.popup-content .popup-btn-bar,
.pop-desktop .table-desktop .popup-btn-bar {
  background-color: #eee;
  border-top: 1px solid #cacaca;
  display: table;
  height: 40px;
  width: 100%;
}

.popup-content .popup-btn-bar span,
.pop-desktop .table-desktop .popup-btn-bar span {
  display: table-cell;
  font-family: Arial;
  font-size: 16px;
  vertical-align: middle;
}

.col-datepicker,
.col-filterprod {
  display: inline-block;
  vertical-align: top;
  width: 50%;
}

.col-datepicker-false { width: 100%; }

.col-filterprod .form-group { margin-bottom: 0; }

.datepicker {
  background-color: #CFE2F2;
  color: #0073BC;
  text-align: center;
  vertical-align: top;
}

.datepicker a {
  color: #0073BC;
  line-height: 32px;
  vertical-align: middle;
}

.datepicker-btn {
  padding-left: 10px;
  vertical-align: top;
}

.datepicker-tag .span-date { padding-left: 10px; }

.datepicker-tag .span-date span {
  font-size: 13px;
  font-weight: bold;
}

.datepicker-tag .datepicker { text-align: left; }

.datepicker-tag div { display: inline-block; }

.datepicker-tag div span {
  display: block;
  line-height: 1.2em;
}


/* popup chart detail & popup fleetalerts detail */

.popdetail,
.popFleetalertsDtl {
  background-color: #fff;
}

.popdetail .ctrl-bar,
.popFleetalertsDtl .ctrl-bar {
  background-color: #888;
  color: #fff;
}

.popdetail .ctrl-head {
  display: inline-block;
  margin-left: -10px;
  height: 35px;
}

.popdetail .ctrl-head div,
.popFleetalertsDtl .ctrl-head div {
  display: table;
  height: 40px;
}

.popdetail .ctrl-head div div.ng-binding {
  display: table-cell;
  line-height: 1.2em;
  padding: 2% 0;
  vertical-align: middle;
}

.ctrl-head .ctrl-btn {
  padding: 10px;
}

.popdetail .ctrl-btn,
.popFleetalertsDtl .ctrl-btn {
  display: inline-block;
  float: left;
  font-size: 16px;
}

.popdetail .ctrl-btn a,
.popFleetalertsDtl .ctrl-btn a {
  color: #fff;
  line-height: 40px;
  vertical-align: middle;
}

.popdetail .ctrl-btn a span,
.popFleetalertsDtl .ctrl-btn a span {
  font-family: Arial;
}

.popdetail .form-group { margin-bottom: 0; }

.popdetail .dtlbox-content,
.popFleetalertsDtl .dtlbox-content {
  height: 100%;
  overflow-y: auto;
  text-align: left;
}

.popdetail hr {
  margin-bottom: 0;
  margin-top: 0;
}

.popdetail .dtlbox-content { padding: 4px; }

.popdetail .dtlbox-content-title { color: #194971; }

.popFleetalertsDtl .dtlbox-content { padding: 3px; }


/* desktop */

.desktop .tabs-left > .nav-tabs {
  background-color: #ddd;
  border-bottom: 0;
  border-right: 1px solid #ddd;
  float: left;
  margin-right: 15px;
}

.desktop .tabs-left > .nav-tabs > li { float: none; }

.desktop .tabs-left > .nav-tabs > li > a {
  margin-bottom: 3px;
  margin-right: -1px;
  min-width: 74px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.desktop .tabs-left > .nav-tabs > li > a:hover,
.desktop .tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
  box-shadow: -1px 3px 2px 0px #999999;
}

.desktop .tabs-left > .nav-tabs .active > a,
.desktop .tabs-left > .nav-tabs .active > a:hover,
.desktop .tabs-left > .nav-tabs .active > a:focus {
  border-color: #fff #fff #fff #fff;
  box-shadow: -2px 3px 2px 0px #BDBDBD;
}

.desktop .fleetalerts .heading .btn-group {
  margin-bottom: 10px;
  margin-top: 20px;
}

.desktop .fleetalerts .heading > a {
  color: black;
  font-size: 12px;
  padding: 10px;
}

.desktop .nav li a { padding: 0; }

.desktop .fleetalerts .heading-button > button {
  background:linear-gradient(#D6D7D8, #EBEDEF);
  background:-webkit-linear-gradient(#D6D7D8, #EBEDEF);
  background:-moz-linear-gradient(#D6D7D8, #EBEDEF);
  background-color:#D6D7D8;
  border-radius:25px;
  border : 10px;
  color:#976A2E;
  font-size:12px;
  font-weight: normal;
  line-height : 16px;
  text-align:center;
  text-decoration:none;
  -webkit-border-radius:25px;
  -moz-border-radius:25px;
}

.desktop .fleetalerts .heading-button > button :hover { color: #194971; }

.desktop .fleetalerts .heading-button > button :active {
  border: 0px;
  border-color : transparent;
  position:relative;
  top:1px;
}

.desktop .fleetalerts .heading-sel-button > button {
  background:linear-gradient(#7FA3C0, #194971);
  background:-webkit-linear-gradient(#7FA3C0, #194971);
  background:-moz-linear-gradient(#7FA3C0, #194971);
  background-color:#194971;
  border-radius:25px;
  border : 10px;
  color:#ffffff;
  font-size:12px;
  font-weight: normal;
  outline-width: 0px;
  text-align:center;
  -webkit-border-radius:25px;
  -moz-border-radius:25px;
}

.desktop div.highcharts-container {
  border: 1px solid #DBDBDB;
  border-radius: 0 0 10px 10px;
}

.desktop .fleetalerts .col-sm-7 { height: 498px; }

.desktop .fleetalerts .form-group { margin-bottom: 5px; }

.desktop .datepicker { margin-bottom: 5px; }

.desktop .datepicker span { vertical-align: middle; }

.desktop .popup-form {
  position: static;
  z-index: 0;
}

.desktop .popdetail .dtlbox-content {
  border: 1px solid #DBDBDB;
  border-radius: 0 0 10px 10px;
  font-size: 10px;
  height: 355px;
}

.desktop .popdetail .dtlbox-content div { margin-top: 3px; }

.desktop .popdetail .dtlbox-content-title { font-size: 11px; }

.desktop .popdetail .dtlbox-content-dtl { color: #A7A9AC; }

.popup-form.popFleetalertsDtl hr {
  margin-bottom: 3px;
  margin-top: 3px;
}

.padleft0 {
  padding-left:0;
}

.popup-form.popFleetalertsDtl.pop-desktop { background-color: rgba(0, 0, 0, 0.6); }

.popup-form.popFleetalertsDtl .table-desktop {
  background-color: #fff;
  height: auto;
  margin: 0 auto;
  width: 60%;
}

.popup-form.popFleetalertsDtl .col-desktop div {
  display: inline-block;
  width: 50%;
}

/* tabs */

.wid {
  display: inline-block;
  width: 60px;
  height: 100%;
  background-repeat: no-repeat;
}

.desktop .wid {
  background-position: 10px 5px;
  background-size: 80px auto;
  border-bottom: 10px solid transparent;
  height: 90px;
  width: 100px;
  -moz-background-size: 80px auto;
  -o-background-size: 80px auto;
  -webkit-background-size: 80px auto;
  
}

.fuelload, .fuelred, .fuelblue, .fuelgreen, .fuelorange,
.infringementsload, .infringementsred, .infringementsblue, .infringementsgreen, .infringementsorange,
.odometerload, .odometerred, .odometerblue, .odometergreen, .odometerorange,
.regoload, .regored, .regoblue, .regogreen, .regoorange,
.servicedueload, .serviceduered, .servicedueblue, .serviceduegreen, .servicedueorange,
.vehicleallocationload, .vehicleallocationred, .vehicleallocationblue, .vehicleallocationgreen, .vehicleallocationorange {
  background-size: 60px 60px;
}

.fuelload { background-image: url('../img/fuel.gif'); }

.fuelload-grey { background-image: url('../img/fuel-grey.gif'); }

.fuelred { background-image:url('../img/m_Fuel_Icon_red.png'); }

.fuelblue { background-image:url('../img/m_Fuel_Icon_blue.png'); }

.fuelgreen { background-image:url('../img/m_Fuel_Icon_DarkGreen.png'); }

.fuelorange { background-image:url('../img/m_Fuel_Icon.png'); }

.infringementsload { background-image:url('../img/infringement.gif'); }

.infringementsload-grey { background-image:url('../img/infringement-grey.gif'); }

.infringementsred { background-image:url('../img/m_Infringements_Icon_red.png'); }

.infringementsblue { background-image:url('../img/m_Infringements_Icon_blue.png'); }

.infringementsgreen { background-image:url('../img/m_Infringements_Icon_DarkGreen.png'); }

.infringementsorange { background-image:url('../img/m_Infringements_Icon.png'); }

.odometerload { background-image:url('../img/odometer.gif'); }

.odometerload-grey { background-image:url('../img/odometer-grey.gif'); }

.odometerred { background-image:url('../img/m_Odometer_Icon_red.png'); }

.odometerblue { background-image:url('../img/m_Odometer_Icon_blue.png'); }

.odometergreen { background-image:url('../img/m_Odometer_Icon_DarkGreen.png'); }

.odometerorange { background-image:url('../img/m_Odometer_Icon.png'); }

.regoload { background-image:url('../img/registration.gif'); }

.regoload-grey { background-image:url('../img/registration-grey.gif'); }

.regored { background-image:url('../img/m_Registration_Icon_red.png'); }

.regoblue { background-image:url('../img/m_Registration_Icon_blue.png'); }

.regogreen { background-image:url('../img/m_Registration_Icon_DarkGreen.png'); }

.regoorange { background-image:url('../img/m_Registration_Icon.png'); }

.servicedueload { background-image:url('../img/service-due.gif'); }

.servicedueload-grey { background-image:url('../img/service-due-grey.gif'); }

.serviceduered { background-image:url('../img/m_Service-Due_Icon_red.png'); }

.servicedueblue { background-image:url('../img/m_Service-Due_Icon_blue.png'); }

.serviceduegreen { background-image:url('../img/m_Service-Due_Icon_DarkGreen.png'); }

.servicedueorange { background-image:url('../img/m_Service-Due_Icon.png'); }

.vehicleallocationload { background-image:url('../img/vehicle-allocation.gif'); }

.vehicleallocationload-grey { background-image:url('../img/vehicle-allocation-grey.gif'); }

.vehicleallocationred { background-image:url('../img/m_Vehicle-Allocation_Icon_red.png'); }

.vehicleallocationblue { background-image:url('../img/m_Vehicle-Allocation_Icon_blue.png'); }

.vehicleallocationgreen { background-image:url('../img/m_Vehicle-Allocation_Icon_DarkGreen.png'); }

.vehicleallocationorange { background-image:url('../img/m_Vehicle-Allocation_Icon.png'); }


/* animated popups */

.animated3s {
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated4s {
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
/*
@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}

@-webkit-keyframes fadeIn-mobile {
  0% { opacity: 0; }
  99% { opacity: 0.4; }
  100% { opacity: 1; }
}

@keyframes fadeIn-mobile {
  0% { opacity: 0; }
  99% { opacity: 0.4; }
  100% { opacity: 1; }
}

.fadeIn-mobile {
  -webkit-animation-name: fadeIn-mobile;
          animation-name: fadeIn-mobile;
}

@-webkit-keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
          animation-name: fadeOut;
}
*/
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0.5;
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }
  50% { opacity: 1; }
}

@keyframes zoomIn {
  0% {
    opacity: 0.5;
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }
  50% { opacity: 1; }
}

.zoomIn,
.zoomIn-mobile {
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
}

@-webkit-keyframes zoomOut {
  0% { opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(.7, .7, .7);
            transform: scale3d(.7, .7, .7);
  }
}

@keyframes zoomOut {
  0% { opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(.7, .7, .7);
            transform: scale3d(.7, .7, .7);
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
          animation-name: zoomOut;
}

/* dashboard UI */

.dash-body {
  background-color: #f1f1f1;
  font-size: 15px;
}

.color-white { color: #fff; }

.dashboard .nav-selected {
  background-image: url(../img/sprite-icon-blue.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  color: #00457c !important;
}

.dashboard .navbar-default .nav-collapse .navbar-nav li a.dropdown-toggle:hover {
  background-image: url(../img/sprite-icon.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  color: #978f00 !important;
}

.fleet-alert { margin: 15px; }

.gradient {
  background-image: -ms-linear-gradient(left, #164874 0%, #568BB5 50%, #266399 100%);
  background-image: -moz-linear-gradient(left, #164874 0%, #568BB5 50%, #266399 100%);
  background-image: -o-linear-gradient(left, #164874 0%, #568BB5 50%, #266399 100%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #164874), color-stop(0.5, #568BB5), color-stop(1, #266399));
  background-image: -webkit-linear-gradient(left, #164874 0%, #568BB5 50%, #266399 100%);
  background-image: linear-gradient(to right, #164874 0%, #568BB5 50%, #266399 100%);
}

.panel-sky { 
  border: 1px solid #eee; 
  margin-bottom: 10px;
}

.panel-heading {
  height: 38px;
  padding-left: 25px;
  padding-top: 8px;
}

.panel-sky {
  border-color: #eee;
}

.panel-sky > .panel-heading {
  color: #fff;
  background-color: #164874;
  border-color: #ccc;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 38px;
  padding-left: 25px;
  padding-top: 8px;
  text-align:left;
}

.panel-sky > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #ccc;
}

.panel-sky > .panel-heading .badge {
  color: #d9edf7;
  margin-left: 10px;
}

.badge :hover{
  color: white;
  text-decoration: none;
}


.panel-body { padding: 8px; }

.panel-body-3, .panel-body-4 { padding: 0; }

.panel-body .Widget-0 td a {
  color: #BAB05A;
  font-size: 38px;
  text-decoration: none;
}

.panel-body .Widget-0 td:first-child a {
  color: #1D659C;
}

.panel-body .Widget-3 td a, .panel-body .Widget-4 td a {
  color: #1D659C;
  font-size: 22px;
  text-decoration: none;
}

.panel-body .Widget-3 td:first-child a, .panel-body .Widget-4 td:first-child a {
  color: #333;
  font-size: 15px;
}

.panel-body .Widget-3 tbody tr, .panel-body .Widget-4 tbody tr {
  border-top: 1px solid #ddd;
}

.panel-body .Widget-3 tr td, .panel-body .Widget-3 tr th,
.panel-body .Widget-4 tr td, .panel-body .Widget-4 tr th {
  border-right: 1px solid #ddd;
}

.panel-body .Widget-3 tr td:last-child, .panel-body .Widget-3 tr th:last-child,
.panel-body .Widget-4 tr td:last-child, .panel-body .Widget-4 tr th:last-child {
  border-right: 0;
}

.panel-body .Widget-3 tbody tr:nth-child(odd) td,
.panel-body .Widget-4 tbody tr:nth-child(odd) td {
  background-color: #f9f9f9;
}

li .panel-body table { text-align: center; }

li .panel-body table .f_c1 { color: #1D659C; }

li .panel-body table .f_c2 a { 
  color: #BAB05A; 
  text-decoration: none;
}

li .panel-body table .f_c3 a { 
  color: #AF003B; 
  text-decoration: none;
}

li .panel-body table .font-s { font-size: 22px; }

li .panel-body table .font-l { font-size: 38px; }

.overflow-y { overflow-y: auto; }

.shadow-bottom {
  background-color: #fff;
  box-shadow: 0 3px 6px #050505;
  height: 2px;
}

/* override bootstrap */

.navbar-nav { margin-top: 5px; }

.navbar-static-top {
  background-color: #fff;
  border-width: 0;
  margin-bottom: 0;
  z-index: 0;
}

.navbar-default .nav-collapse .navbar-nav li a {
  font-size: 16px;
  padding-top: 10px;
  padding-bottom: 11px;
}

.nav li a {
  line-height: 24px;
  padding: 6px 20px;
}

.navbar-nav > li > .dropdown-menu {
  background-color: #f1f1f1;
  border: 0;
  padding: 0 0;
}

.navbar-nav > .open > a,
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus {
  background-color: #fff !important;
}

.dropdown-menu > li { border-bottom: 1px solid #e0dfdf; }

.dropdown-menu > li:last-child { border-bottom: 0; }

.dropdown-menu > li > a {
  color: #00457c;
  padding: 10px;
}

.dropdown-menu > li > a:hover { background-color: #e2e2e2; }

.panel-body th {
  border-bottom: 0 !important;
  font-weight: normal;
  height: 37px;
  text-align: center;
  vertical-align: middle !important;
}

/* override */
.fixed-width { width: 100%; }

.header { background-color: #fff; }

.FA-section {
  margin: 0 auto;
  max-width: 1440px;
  min-width: 1024px;
}

.login-head-bar {
  height: 108px;
  position: relative;
}

.login-head-bar .logo { position: static; }

.login-head-bar .logo a#dev img { margin-left: 240px; }

.login-body, .loginalt-body{
  background-image: url(../img/login_banner.png);
  /*background-position: right -50px bottom;*/
  background-position: right -90px bottom;
  background-repeat: no-repeat;
  background-size: 87%;
  height: 300px;
}

.login-section, .loginalt-section {
  color: #fff;
  padding: 5px 0 0 240px;
  text-align: left;
}

.login-section:last-child, .loginalt-section:last-child {
  padding-bottom: 5px;
  padding-top: 9px;
}

.login-section .form-group, .loginalt-section .form-group { margin-bottom: 10px; }

.head-bar { height: 58px; }

.logout-bar {
  background-color: #164874;
  border-radius: 0 0 10px 10px;
  color: #fff;
  height: 30px;
  margin-right: 15px;
}

.logout-bar a {
  color: #fff;
  font-size: 18px;
  margin: 1px 0 0 0;
  text-decoration: none;
}

.logout-bar i {
  font-size: 13px;
  font-style: normal;
  margin: 5px 10px 5px 10px;
}

.gradient {
  background-image: -ms-linear-gradient(left, #164874 0%, #568BB5 50%, #266399 100%);
  background-image: -moz-linear-gradient(left, #164874 0%, #568BB5 50%, #266399 100%);
  background-image: -o-linear-gradient(left, #164874 0%, #568BB5 50%, #266399 100%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #164874), color-stop(0.5, #568BB5), color-stop(1, #266399));
  background-image: -webkit-linear-gradient(left, #164874 0%, #568BB5 50%, #266399 100%);
  background-image: linear-gradient(to right, #164874 0%, #568BB5 50%, #266399 100%);
}

.login-gradient, .loginalt-gradient {
  background-image: -ms-linear-gradient(left, #043560 0%, #5A779C 50%, #043560 100%);
  background-image: -moz-linear-gradient(left, #043560 0%, #5A779C 50%, #043560 100%);
  background-image: -o-linear-gradient(left, #043560 0%, #5A779C 50%, #043560 100%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #043560), color-stop(0.5, #5A779C), color-stop(1, #043560));
  background-image: -webkit-linear-gradient(left, #043560 0%, #5A779C 50%, #043560 100%);
  background-image: linear-gradient(to right, #043560 0%, #5A779C 50%, #043560 100%);
  /*box-shadow: 0 3px 6px #050505;*/
}

.wd11 {
  margin-left:5px;
  margin-right:10px;
  width: 200px;
}

.adv {
  padding:0px 15px;
}

.fixed-content {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow-y: auto;
}

.display-table {
  display: table;
  width: 100%;
}

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

.table-fit { height: 100%; }

/* Fleet Alert - tab */

.fleet-alert { margin: 15px; }

/* dashboard */

.logo {
  position: absolute;
  padding-top: 10px;
  z-index: 4;
}

.logo a#dev img {
  margin-left: 13px;
  margin-top: 1px;
}

.dash-section {
  margin: 0 auto;
  max-width: 1440px;
  min-width: 1024px;
}

.dash-header { height: 58px; }

.logout-bar {
  background-color: #164874;
  height: 30px;
  margin-right: 15px;
}

.logout-bar a {
  font-size: 18px;
  margin: 1px 0 0 0;
  text-decoration: none;
}

.logout-bar i {
  font-size: 13px;
  font-style: normal;
  margin: 5px 10px 5px 10px;
}

.dash-footer {
  background-color: #525252;
  bottom: 0;
  height: 50px;
  padding: 15px;
}

.dash-footer .dash-section div {
  border-right: 1px solid #5d5d5d;
  display: inline-block;
  line-height: 35px;
  text-align: center;
  width: 25%;
}

.dash-footer .dash-section div span a {
  color: #fff;
  text-decoration: none;
}

/* dashboard - tab */

.active-true span:last-child { color: #fff !important; }

.dash-tabs { background-color: #164874; }

.dash-tab {
  display: inline-block;
  height: 70px;
  text-align: center;
  width: 20%;
}

.dash-tab .dash-tabItem {
  display: table;
  height: 100%;
  width: 100%;
}

.dash-tab .dash-tabItem .pointer {
  display: table-cell;
  vertical-align: middle;
}

.dash-tab .dash-tabItem .pointer div { border-left: 1.5px outset #163149; }

.dash-tab:last-child .dash-tabItem .pointer div { border-right: 1.5px outset #163149; }

.dash-tab .dash-tabItem .pointer div span:first-child { margin-bottom: 8px; }

.sel-company {
  width: 400px;
  right: 15px;
  z-index: 3;
}

.sel-company .form-group .form-control {
  border-radius: 3em;
  font-size: 10px;
}

.badge {
  background-color: #ADA851;
  margin-bottom: 5px;
  vertical-align: middle;
}

.dash-tab .dash-tabItem .pointer div span:last-child {
  color: #a2c8ed;
  font-size: 24px;
  padding-left: 10px;
}

.navigation-bar {
  display: inline-block;
  padding: 20px 15px 0 15px;
}

.navigation-bar .icon { color: #164874; }

.panel-title { font-size: 16px; }

.panel-title .badge { margin-left: 10px; }

.table tbody tr td { border-top: 0; }

/* user and porfile */

.dashboard { background-color: #164874; }

.separator {
  background-color: #fff;
  box-shadow: 0 3px 6px #050505;
  height: 2px;
}

.round-s { border-radius: 5px; }

.round-l { border-radius: 12px; }

/* sysuser page*/
.sysuser-top,.sysuser-centre,.sysuser-bottom{
  width: 100%;
  /*margin-bottom: 20px;*/
  padding: 15px;
}

.sysuser-centre .panel-body > .form-group > label{
  color: red;
  padding-left: 20px;
}

.user_table thead tr th:nth-child(2), .user_table thead tr th:nth-child(3){
  width: 20%;
}

.user_table thead tr th:nth-child(4){
  width: 57%;
}

.ls_table thead tr th{
  color: #fff;
  background-color: #266399;
  text-align: left;
}

.ls_table thead tr th:nth-child(1){
  width: 3%;
  text-align: center;
}

.ls_table tbody tr td:nth-child(1){
  text-align: center;
}

.ls_table{
  border: 1px solid #ddd !important;
  border-bottom: 1px;
}

.vs_table thead tr th{
  color: #fff;
  background-color: #266399;
  text-align: left;
}

.vs_table thead tr th:nth-child(1){
  width: 10%;
  text-align: center;
}

.vs_table tbody tr td:nth-child(1){
  text-align: center;
}

.vs_table{
  border: 1px solid #ddd !important;
  border-bottom: 1px;
}

.driver_ls_table thead tr th{
  color: #fff;
  background-color: #266399;
}

.driver_ls_table thead tr th:nth-child(1){
  width: 11%;
  text-align: center;
}

.driver_ls_table tbody tr td:nth-child(1){
  text-align: center;
}

.driver_ls_table{
  border: 1px solid #ddd !important;
  border-bottom: 1px;
}

.fm_inline {
  margin-bottom:10px;
}

.fm_inline .form-control {
  width: 60%;
  display: inline;
  margin-left: 15px;
}

.fm_inline .control-label {
  width:33%;
}

.sysuser-top>div>div>form{
  width:100%;
  padding-bottom:10px;
}

.sysuser-top>div>div>form>input{
  width:60%;
}

li>.panel-body>table{
  text-align: center;
}
li>.panel-body table>tbody>tr>td{
  border-top:0;
}

li .panel-body table .f_c1 {
  color: #1D659C;
  /*font-size: 22;*/
}

li .panel-body table .f_c2 {
  color: #BAB05A;
  /*font-size: 22;*/
}

li .panel-body table .f_c3 {
  color: #AF003B;
  /*font-size: 22;*/
}

li .panel-body table .font-s { font-size: 22px; }

li .panel-body table .font-l { font-size: 38px; }

li.panel div {
  margin-bottom:8px;
}
.question {
  color: #ffffff;
}
/* sysprofile page*/
.sysprofile-top,.sysprofile-centre,.sysprofile-bottom{
  width:100%;
  /*margin-bottom:20px;*/
  padding: 15px;
}

.sysprofile-top>div>div>form{
  width:100%;
  padding-bottom:10px;
}

.sysprofile-top>div>div>form>input{
  width: 60%;
}


.sysprofile-centre > #company_list_chosen {
  margin-left: 15px;
}

.sp_table{
  margin-bottom:3px;
}

.fixed-width { width: 100%; }

.header { background-color: #fff; }

.FA-section {
  margin: 0 auto;
  max-width: 1440px;
  min-width: 1024px;
}

.modal {
  width: 80%;
  max-width: 800px;
}

.userDtlPopup {
  top: 10%;
  left: 10%;
  width: 80%;
  overflow-y:scroll;
  margin-left:0;
  max-width: 1000px;
}

.userDtlPopup .panel-heading {
  padding-top: 10px;
}

/*  Fuel Alerts*/
.fuelAlerts-centre{
  width: 100%;
  /*margin-bottom: 20px;*/
  padding: 15px;
}

.fuelAlerts-centre .panel-body > .form-group > label{
  color: red;
  padding-left: 20px;
}

.fuelAlerts-centre input{
  text-align: center;
}
.fleetAlertsConfigPopup {
  top: 10%;
  left: 22%;
  width: 60%;
  height: auto;
  overflow-y:scroll;
  margin-left:0;
}

.fleetAlertsConfigPopup2 {
  top: 10%;
  left: 22%;
  width: 60%;
  height: 80%;
  overflow-y:scroll;
  margin-left:0;
}

.wd50 {
  width: 35px;
}

.termscontent {
  font-size: 10.0pt;
  font-family: "Arial","sans-serif";
  /*max-height: 600px;
  max-width: 1020px;*/
}

.termscontent .title {
  text-align: center;
  font-weight: bold;
}

.termscontent p{
  margin: 2px 10px;
}

p.MsoBodyText {
  
}

p.MsoListNumber, li.MsoListNumber, div.MsoListNumber {
  text-align: justify;
}

p.MsoListNumber .span_1, div.MsoListNumber .span_1 {
  padding-right: 38px;
}

p.MsoListNumber .span_2, div.MsoListNumber .span_2 {
  padding-right: 30px;
}

p.MsoListNumber .span_3, div.MsoListNumber .span_3 {
  padding-right: 30px;
}

p.MsoListNumber .span_4, div.MsoListNumber .span_4 {
  padding-right: 29px;
}

p.MsoListNumber .span_5, div.MsoListNumber .span_5 {
  padding-right: 20px;
}

div.MsoListNumber2 .span_3, div.MsoListNumber3 .span_3, div.MsoListNumber4 .span_3 {
  padding-left: 50px;
}

p.MsoListNumber2, p.MsoListNumber3, div.MsoListNumber2, div.MsoListNumber3 {
  margin-left: 60px;
}

p.MsoListNumber4, div.MsoListNumber4 {
  margin-left: 110px
}

p.MsoListNumber2 .span_1, p.MsoListNumber3 .span_1, div.MsoListNumber2 .span_1, div.MsoListNumber3 .span_1 {
  padding-right: 35px;
}

.termfloat {
  float: left;
}

p.MsoListNumber3, div.MsoListNumber3  {
  margin-top: 16px;
}

p.Indent2, li.Indent2, div.Indent2 {
  margin-left: 60px;
}

.termscontent .termAccept {
  text-align: center;
  padding: 30px;
}

.termscontent button {
  margin-left: 50px;
}

.password {
  font-weight: bold;
}

.fleetDtlTable table{
  border: 1px solid #D8D8D8;
  width: 100%
}

.fleetDtlTable tr td {
  border: 1px solid #D8D8D8;
  padding: 0px 10px;
}

.dv-inline .form-group {
  display: inline;
}

.dv-inline .form-group .form-control{
  width: 50px;
  margin-left: 0;
}

.fleetAlertCfg {
  padding: 5px 20px;
  color: red;
  font-style: italic;
}

/* vehicle search */
.vehicle .search { padding: 10px; }

.vehicle .rows label,
.popup-vehicle .rows label {
  display: inline-block;
  width: 30%;
}

.vehicle .rows select, .vehicle .rows input,
.popup-vehicle .rows select, .popup-vehicle .rows input {
  display: inline-block;
  width: 60%;
}

.vehicle .rows,
.popup-vehicle .rows {
  display: inline-block;
  width: 50%;
}

.popup-vehicle {
  /*max-height: 480px;*/
  max-height:600px;
  max-width: 1028px;
  
}

.popup-vehicle .content {
  background-color: #fff;
  /*height: 440px;*/
  height: 560px;
  padding-top: 2px;
  overflow-y: auto;
}

.popup-vehicle .content .tab-content { /*height: 400px;*/ height: 520px; }

.popup-vehicle .content .tab-content .tab-pane {
  height: 100%;
  overflow-y: auto;
  padding: 8px;
}

.popup-vehicle .content .panel-body { text-align: left; }

/* costCtrChange */
.costCtrChange {
  font-size: 13px;
}

.costCtrChange .form-group {
  display: inline;
  margin-right: 15px;
}

.costCtrChange .form-group .control-label{
  width: 20%;
}

.costCtrChange .form-group .form-control{
  width: 20%;
}

.costCtrChange .form-group select{
  width: 50% !important;
}

.popup-content .popup-btn {
  background: #fff;
  text-align: left;
  padding: 10px 15px;
}

.popup-costCtrChange {
  /*max-height: 480px;*/
  max-height:550px;
  max-width: 640px;
}

.popup-costCtrChange .content {
  background-color: #fff;
  /*height: 440px;*/
  height: 550px;
}

.popup-costCtrChange .row {
  margin-left: 20px;
  margin-right: 0px;
}

.popup-costCtrChange hr {
  margin-top: 5px;
  margin-bottom:10px;
}

.popup-driverDtlChange {
  max-height: 450px;
  max-width: 850px;
}

.popup-driverDtlChange .content {
  background-color: #fff;
  height: 420px;
}

.popup-driverDtlChange .row {
  margin-left: 20px;
  margin-right: 0px;
}

.popup-driverDtlChange .popup-btn {
  background: #fff;
  text-align: left;
  padding: 10px 15px;
}

.popup-driverDtlChange hr {
  margin-top: 5px;
  margin-bottom:10px;
}

.vehicle td a {
  cursor: pointer;
  text-align: left !important;
}

.popTerms {
  max-width: 1180px;
  margin: 0 auto;
}

.popTerms .termscontent {
  background-color: #fff;
  padding-top: 2px;
  height: 680px;
  overflow-y: auto;
}

.gridster a {
  cursor: pointer;
}

.auPortal {
  padding-top: 5px;
  margin-right: 15px;
}

.auPortal a {
  color: #00457c;
  font-style: italic;
}

.field_pull_right >.form-group input {
  text-align: right;
}
.analytics_foot {
  height: 300px;
  background: #DDD;
  line-height: 280px;
}
.analytics_footnotes {
  border: 1px solid silver;
  border-radius: 5px;
  height: 150px;
  width: 60%;
  margin: 75px auto;
  text-align: center;
  line-height: 150px;
  background: #fff;  
  box-shadow: 0 0 10px #888;
}
.popdatepickeYYYYMM .ui-datepicker-calendar {
  display: none;
}

.padright15 {
  padding-right: 15px;
}