body {
  background-color: #3D3D3D;
  color: #ffffff;
  overflow-x: hidden;
}

.navbar {
  position: fixed;
  min-height: 0px;
  margin-bottom: 0px;
  border: transparent;
  z-index: 2000;
}

.clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical>.btn-group:before, .btn-group-vertical>.btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
  display: table;
  content:none;
}

.navbar-inverse {
  background-color: #22222200;
  border-color: #08080800;
  background-image: linear-gradient(to bottom, #3c3c3c00 0, #22222200 100%);
  height: 70px;
  width: 100%;
}

.navbar-header {
  float: left;
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  overflow: hidden;
  height: 70px;
}

.navbar-inverse .navbar-nav>.active>a {
  color: #ffffff;
  background-color: #e7e7e700;
  background-image:none;
  box-shadow: none;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
  color: #fff;
  background-color: #08080800;
}

.navbar-inverse .navbar-nav>li>a {
  color: #ffffff;
}

.navbar-mid {
  width: 100%;
  display: flex;
}

.navbar>.container-fluid .navbar-brand {
  margin: auto;
}

.table-striped>tbody>tr:nth-child(odd)>td{
  background-color:#23232374;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color:#23232374;
}

.navbar-right {
  width: 130px;
}

.col-md-12 {
  width: 100%;
  color: #fff;
}

.headers {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  height: 150px;
}

.form-horizontal .form-group {
  margin-right: -15px;
  margin-left: -15px;
  display: flex
;
  justify-content: center;
}

.bestLap {
  color: #ff7fff;
}

.table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td {
  border: 1px solid #dddddd00;
}

.table-bordered {
  border: 1px solid #dddddd00;
}

.navbar-nav>li>a {
  font-family: "微软雅黑","Unica One", cursive ;
  font-weight: 800;
  font-size: 18px;
  box-sizing: border-box;
cursor :pointer;
display :inline;
font-size: 18px;
width: auto;
height: auto;
line-height: 80px;
list-style-image: none;
list-style-position :outside;
list-style-type :none;
text-align :left;
text-size-adjust: 100%;
text-transform :uppercase;
text-decoration: none; 
color:#dddddd
}

.navbar-brand {
  float: left;
  height: 100%;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  justify-content: space-between;
  width: 72%;
  height: 100%;
  align-items: center;
}

.col-md-5 {
  width: 100px;
}

.col-md-6 {
  width: 100%;
}

.header-media {
  height: 40px;
  width: 40px;
  display: flex !important;
  margin: 0 5px;
  align-items: flex-end;
  justify-content: center;
}

.container {
  padding-top: 75px;
}

.navbar-collapse.collapse{
  display: flex !important;
  align-items: center;
}

.page-header {
  border-bottom: #eeeeee00;
}

.navbar-collapse {
  padding-right: 15px;
  padding-left: 15px;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 0px solid transparent;
  -webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, .1);
  box-shadow: inset 0 0px 0 rgba(255, 255, 255, .1);
}

.ACimg {
  position: relative;
  height: 200px;
  left: 34px;
}

/* From Uiverse.io by vinodjangid07 */ 
.loader {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

.truckWrapper {
  width: 200px;
  height: 100px;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: flex-end;
  overflow-x: hidden;
}
/* truck upper body */
.truckBody {
  width: 130px;
  height: fit-content;
  margin-bottom: 6px;
  animation: motion 1s linear infinite;
}
/* truck suspension animation*/
@keyframes motion {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(0px);
  }
}
/* truck's tires */
.truckTires {
  width: 130px;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px 0px 15px;
  position: absolute;
  bottom: 0;
}
.truckTires svg {
  width: 24px;
}

.road {
  width: 100%;
  height: 1.5px;
  background-color: #282828;
  position: relative;
  bottom: 0;
  align-self: flex-end;
  border-radius: 3px;
}
.road::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 100%;
  background-color: #282828;
  right: -50%;
  border-radius: 3px;
  animation: roadAnimation 1.4s linear infinite;
  border-left: 10px solid white;
}
.road::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 100%;
  background-color: #282828;
  right: -65%;
  border-radius: 3px;
  animation: roadAnimation 1.4s linear infinite;
  border-left: 4px solid white;
}

.lampPost {
  position: absolute;
  bottom: 0;
  right: -90%;
  height: 90px;
  animation: roadAnimation 1.4s linear infinite;
}

@keyframes roadAnimation {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-350px);
  }
}