/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/layouts/SimpleLayout/index.scss ***!
  \****************************************************************************************************************************************************************************************************/
.m-app .login-container {
  width: 1920px !important;
  height: 1080px !important;
  overflow: auto;
}
/*!*******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/Login/login.scss ***!
  \*******************************************************************************************************************************************************************************************/
.login-container {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  background-color: #0a0d1a;
}
.login-container .login-car-box {
  width: 63.5%;
  height: 100%;
  background: url(../images/login-vehicle.4c4204611d7d9df56a809c4a9e3a4eae.png);
  background-size: 100% 100%;
}
.login-container .login-title {
  position: absolute;
  width: 510px;
  height: 89px;
  background: url(../images/login-title.d9124aed4e9c90a798be14506102d85b.png);
  background-size: 100% 100%;
}
.login-container .login-tab-box {
  width: 37.5%;
  height: 100%;
  background: linear-gradient(#0d243e, #0b1324);
  background: url(../images/login-tab-bg.da144069e6ff5e2cc394ca1c75114c19.png);
  background-size: 100% 100%;
  text-align: center;
  display: flex;
  align-items: center;
}
.login-container .login-tab-box .erp_buttons {
  margin-top: 30px;
  background-color: #2864f2;
  padding: 8px 12px;
  color: #fff;
}
.login-container .login-tabs {
  position: relative;
  width: 400px;
  color: white;
  margin: 0 auto;
  margin-top: 30%;
}
.login-container .login-tabs .ant-tabs-nav-wrap {
  border-bottom: 1px solid #0d1c32;
}
.login-container .login-tabs .ant-tabs-nav-list .ant-tabs-tab {
  width: 200px;
  box-sizing: border-box;
  height: 60px;
  font-size: 16px;
  font-family: PingFangSC;
  font-weight: 500;
  color: rgb(255, 255, 255);
  text-shadow: 0 0 12px #2864f2;
  text-align: center;
  margin-left: 0;
}
.login-container .login-tabs .ant-tabs-nav-list .ant-tabs-tab .ant-tabs-tab-btn {
  margin: 0 auto;
  color: white;
}
.login-container .login-tabs .ant-tabs-nav-list .ant-tabs-tab.ant-tabs-tab-active {
  background: linear-gradient(180deg, #0d2a50 0%, #0d2a4f 100%);
  color: rgb(255, 255, 255);
}

.login-item {
  margin-top: 30px;
}
.login-item li {
  position: relative;
}
.login-item li > .anticon {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 1;
}
.login-item li .error-tip {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgb(255, 87, 77);
}
.login-item li .ant-select {
  display: block;
}
.login-item li .ant-select .ant-select-selector {
  height: 40px;
  font-size: 16px;
  padding: 0 33px !important;
  background: rgba(22, 56, 146, 0.5) !important;
  border: 1px solid rgb(24, 116, 255) !important;
}
.login-item li .ant-select .ant-select-selector .ant-select-selection-item,
.login-item li .ant-select .ant-select-selector .ant-select-selection-placeholder {
  line-height: 40px !important;
}
.login-item li .ant-input-affix-wrapper {
  color: #c8d2ff;
  background: rgb(1, 10, 26);
  border: 1px solid transparent;
  border-radius: 4px;
}
.login-item li .ant-input-affix-wrapper-lg {
  padding: 11.5px 11px;
}
.login-item li .ant-input {
  background: transparent;
}
.login-item li input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #010a1a inset !important;
}
.login-item li .anticon {
  color: #0098ff;
}
.login-item .auth-code-box {
  display: flex;
  justify-content: space-between;
}

#normal_login .login-button {
  width: 100%;
  display: block;
  height: 48px;
  line-height: 48px;
  background: linear-gradient(180deg, #1081fe 0%, #3851eb 100%);
  border-radius: 4px;
  border: none;
  text-align: center;
  font-size: 18px;
  font-weight: normal;
  color: rgb(255, 255, 255);
}
#normal_login .login-button:hover, #normal_login .login-button:active, #normal_login .login-button:focus {
  color: rgb(177, 220, 248);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition-delay: 111111s;
  -webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
}

.passport-box {
  width: 100%;
  text-align: center;
}
.passport-box .qrCode-content {
  height: 260px;
  line-height: 260px;
  width: 260px;
  background: rgb(253, 253, 253);
  margin: 0 auto;
}
.passport-box .qrCode-content .qrCode-error-mask {
  position: absolute;
  height: 260px;
  width: 260px;
  font-weight: 500;
  color: white;
  text-align: center;
  background: rgba(1, 10, 26, 0.7);
}
.passport-box .qrCode-content .qrCode-error-mask .refresh {
  background: #e4393c;
  width: 80px;
  height: 30px;
  line-height: 30px;
  margin-left: 90px;
  margin-top: -100px;
}
.passport-box .qrCode-content .qrCode-success-mask {
  background-color: white;
  opacity: 1;
  position: absolute;
  height: 260px;
  width: 260px;
  font-weight: 500;
  color: black;
  text-align: center;
  padding-top: 50px;
}
.passport-box .qrCode-content .qrCode-img {
  width: 240px;
  height: 240px;
  text-align: center;
  padding-top: 10px;
}
.passport-box .notice-title {
  margin-top: 15px;
  color: #fff;
}
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/EasyRoadMap/index.scss ***!
  \******************************************************************************************************************************************************************************************************/
.road-map-container {
  width: 100%;
  display: flex;
  padding: 0 12px;
  margin-bottom: 22px;
}
.road-map-container .empty-view {
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
}
.road-map-container .empty-view .empty-line {
  width: 100%;
  height: 3px;
  background-color: rgb(19, 22, 38);
  margin-bottom: 10px;
}
.road-map-container .empty-view .empty-text {
  position: absolute;
  width: 100%;
}
.road-map-container .stop-item {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
}
.road-map-container .stop-item .spot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: rgb(35, 35, 46);
  border: 1px solid rgb(110, 110, 145);
  border-radius: 5px;
}
.road-map-container .stop-item .spot.isStaying {
  width: 22px;
  height: 22px;
  background: url(../images/staying_icon.fe928e9bc5c50c9183fb3ef992d6f769.png) no-repeat center;
  background-size: contain;
  border: none;
}
.road-map-container .stop-item .spot.isDepart, .road-map-container .stop-item .spot.isSkip {
  background: rgb(52, 52, 62);
  border: 1px solid rgb(13, 133, 255);
}
.road-map-container .stop-item .process-line-wrapper {
  position: relative;
  display: inline-block;
  flex: 1;
}
.road-map-container .stop-item .process-line-wrapper .default-line {
  width: 100%;
  display: inline-block;
  height: 3px;
  background-color: rgb(15, 19, 38);
  position: absolute;
  top: -2px;
  left: 0;
}
.road-map-container .stop-item .process-line-wrapper .process-line {
  display: inline-block;
  position: absolute;
  z-index: 9;
  height: 3px;
  background: linear-gradient(270deg, rgb(56, 80, 235) 0%, rgb(13, 133, 255) 100%);
  top: -2px;
  left: 0;
}
.road-map-container .stop-item.stop-item-first {
  max-width: 10px;
}
/*!***************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/BoardGroup/BoardItem/board.scss ***!
  \***************************************************************************************************************************************************************************************************************/
.board-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.board-item {
  max-width: 370px;
  min-width: 350px;
  flex: 1;
  height: 204px;
  background: rgb(27, 32, 56);
  border-radius: 2px;
  margin-right: 16px;
  margin-bottom: 16px;
  cursor: pointer;
}
.board-item .top-head {
  display: flex;
  width: 100%;
  background-color: #0a0d1a;
}
.board-item .head-left {
  width: 298px;
  height: 36px;
  background: url(../images/bg.797a2116d2970daa43413cd53f3b9f0b.png) no-repeat center;
  background-size: contain;
  font-size: 20px;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  position: relative;
}
.board-item .head-left .title {
  margin: 0 10px;
}
.board-item .head-left .sub-title {
  font-size: 12px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.6);
  line-height: 36px;
  max-width: 122px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.board-item .head-left .vehicle-icon {
  display: inline-block;
  width: 62px;
  height: 41px;
  background-size: contain;
  position: absolute;
  right: 0;
}
.board-item .head-left .vehicle-icon.DISPATCH {
  background: url(../images/car-icon.d2d9730c25a1526db495ed2ef4369a16.png) no-repeat center;
  background-size: contain;
}
.board-item .head-left .vehicle-icon.DISPATCH.offline {
  background: url(../images/offline_dispatch.1d6767a37fb56bf15d6eb7efe5170710.png) no-repeat center;
  background-size: contain;
}
.board-item .head-left .vehicle-icon.VENDING {
  background: url(../images/sell-car.21672ff9efe5a79daf6613ebed961be7.png) no-repeat center;
  background-size: contain;
}
.board-item .head-left .vehicle-icon.VENDING.offline {
  background: url(../images/offline.a2053203b52911eafad5d7271b3ed3fc.png) no-repeat center;
  background-size: contain;
}
.board-item .head-right {
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: normal;
  color: #ff9e0b;
  line-height: 36px;
  width: 83px;
  height: 36px;
  text-align: right;
  padding-right: 12px;
}
.board-item .head-right.normal {
  background: url(../images/normal.bd9186e2ff1ee76268ae1f3f2187b687.png) no-repeat center;
  background-size: contain;
  color: #14bab7;
}
.board-item .head-right.connection_lost {
  background: url(../images/connection_lost.b9317437b7e0854d229e37009f76ebf4.png) no-repeat center;
  background-size: contain;
  color: #ff9e0b;
}
.board-item .head-right.offline {
  background: url(../images/offline-icon.f49b6d6c845a0450cf1acdd1e4d61d05.png) no-repeat center;
  background-size: contain;
  color: rgba(255, 255, 255, 0.6);
}
.board-item .head-right.waring {
  background: url(../images/abnormal.5eaa2332615922205122aaba67b64af7.png) no-repeat center;
  background-size: contain;
  color: #ff463a;
}
.board-item .easy-roadmap {
  width: 100%;
  position: relative;
}
.board-item .easy-roadmap .timer-label {
  position: absolute;
  top: 15px;
  left: 30%;
  word-break: keep-all;
  white-space: nowrap;
  color: #fff;
  font-size: 12px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  max-width: 66%;
}
.board-item .easy-roadmap .going-laber {
  position: absolute;
  top: 15px;
  left: 30%;
  word-break: keep-all;
  white-space: nowrap;
  color: #fff;
  font-size: 12px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  max-width: 66%;
}
.board-item .status-fields {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 12px;
}
.board-item .field-item {
  display: flex;
  width: 50%;
  align-items: center;
  margin-bottom: 4px;
}
.board-item .field-item i {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
.board-item .field-item span {
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
}
.board-item .field-item .speed {
  background: url(../images/speed.56d9788b67ce8a0c4d34535e7cb8b217.png) no-repeat center;
  background-size: contain;
}
.board-item .field-item .status {
  background: url(../images/status.2353718ffa105973358ff453051c85aa.png) no-repeat center;
  background-size: contain;
}
.board-item .field-item .mileage {
  background: url(../images/mileage.14789b347e820f9b701f2e7659f15a03.png) no-repeat center;
  background-size: contain;
}
.board-item .field-item .power {
  background: url(../images/power.27d3dde789b97255ad8a83dbe9b67ee2.png) no-repeat center;
  background-size: contain;
}
.board-item .field-item .order {
  background: url(../images/order.a3036ca32249a2872f7b11cee86b4c7d.png) no-repeat center;
  background-size: contain;
}
.board-item .field-item .vehicleState {
  background: url(../images/vehicleState.f9e8b3ab4aeb4f37ded312704d06f087.png) no-repeat center;
  background-size: contain;
}
.board-item .alarm-event-container {
  height: 50px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.board-item .alarm-event-container .active-label-text {
  background: rgba(255, 87, 77, 0.2);
  border-radius: 1px;
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  display: inline-block;
  height: 24px;
  line-height: 16px;
}
/*!***************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/VehicleInitialDetail/InitialDetailInfo.scss ***!
  \***************************************************************************************************************************************************************************************************************************/
.initialDetailInfo {
  width: 100%;
  height: 600px;
  display: flex;
}
.initialDetailInfo .leftContainer {
  width: 20%;
  height: 100%;
  border-right: 1px solid #f0f0f0;
}
.initialDetailInfo .leftContainer .tabContainer {
  height: 70%;
  padding: 15px 10px 24px 24px;
  border-bottom: 1px solid #f0f0f0;
}
.initialDetailInfo .leftContainer .tabContainer .tabItem {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
}
.initialDetailInfo .leftContainer .tabContainer .tabItem .selected {
  background: #2e334d;
  width: 190px;
  padding-left: 10px;
}
.initialDetailInfo .leftContainer .tabContainer .tabItem .unSelected {
  width: 190px;
  padding-left: 10px;
}
.initialDetailInfo .leftContainer .timeContainer {
  padding: 14px 50px;
  color: #0d85ff;
  font-size: 15px;
}
.initialDetailInfo .rightContainer {
  width: 80%;
  padding: 24px 15px 0px 20px;
}
.initialDetailInfo .rightContainer .delay {
  color: red;
}
.initialDetailInfo .icon-starting {
  color: white;
}
.initialDetailInfo .icon-success span {
  height: 14px;
  width: 14px;
  color: white;
  background-color: green;
  border-radius: 50%;
}
.initialDetailInfo .icon-failed span {
  height: 14px;
  width: 14px;
  color: white;
  background-color: red;
  border-radius: 50%;
}
.initialDetailInfo .noData {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #0d85ff;
}
/*!***************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/VehicleInitialDetail/index.scss ***!
  \***************************************************************************************************************************************************************************************************************/
.vehicleInitialDetail {
  margin-left: 5px;
}
.vehicleInitialDetail .anticon svg,
.vehicleInitialDetail .anticon-info-circle svg,
.vehicleInitialDetail .icon svg {
  color: #0d85ff;
}

.vehicleInitialDetailModal .ant-modal-body {
  padding: 0px;
}
/*!***********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/RealtimeView/components/BoardMode/index.scss ***!
  \***********************************************************************************************************************************************************************************************************************/
.filter-option-area {
  width: 100%;
}
.filter-option-area .line1 {
  display: flex;
  align-items: center;
}
.filter-option-area .line2 {
  margin-top: 10px;
}
.filter-option-area .right {
  flex: 1;
  display: flex;
  justify-content: right;
}
.filter-option-area .right .btn-group {
  width: 160px;
}
.filter-option-area .right .btn-group {
  margin-right: 24px;
}
.filter-option-area .tab-button-group .tab-button-item {
  margin-right: 56px;
}

.row-group {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/MapMode/index.scss ***!
  \**************************************************************************************************************************************************************************************************/
#route-map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
#route-map .overlay-container {
  background: rgba(38, 43, 64, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.5);
  padding: 10px;
  width: auto;
  word-break: keep-all;
  white-space: nowrap;
  text-align: left;
}
#route-map .overlay-container ::after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: 6px solid transparent;
  border-top: 6px solid rgba(255, 255, 255, 0.16);
  position: absolute;
  bottom: -12px;
  left: calc(50% - 6px);
}
#route-map .overlay-container .label-text {
  color: #fff;
  font-size: 14px;
  font-family: JDZhengHT;
  font-weight: bold;
  word-break: keep-all;
  white-space: nowrap;
}
#route-map .overlay-container .alarm-text {
  font-family: PingFangSC;
  font-weight: normal;
  color: rgb(255, 87, 77);
  word-break: keep-all;
  white-space: nowrap;
  margin-left: 10px;
}
#route-map .overlay-container .city {
  color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
}
#route-map .overlay-container .city .city-name {
  font-size: 14px;
}
#route-map .overlay-container .station-vehicle {
  color: white;
}
#route-map .overlay-container .station-vehicle .divider {
  border: 1px dashed black;
  margin-left: 10.5px;
  margin-right: 5.5px;
}
#route-map .overlay-container .station-vehicle .title {
  font-size: 24px;
  font-weight: bold;
  margin-right: 2px;
}
#route-map .overlay-container .station-vehicle .sub-title {
  font-size: 12px;
}
/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/TabButton/index.scss ***!
  \****************************************************************************************************************************************************************************************************/
.tab-button-item {
  display: inline-block;
  width: auto;
  height: 60px;
  cursor: pointer;
}
.tab-button-item .title {
  font-size: 36px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 10px;
}
.tab-button-item .sub-title {
  font-size: 16px;
  font-family: PingFangSC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 4px;
}
.tab-button-item.isActive {
  background: url(../images/active-bg.8fed40c0250e4ceea48359268b41e9ab.png) no-repeat center 24px;
  background-size: contain;
}
.tab-button-item.isActive .title {
  color: rgb(255, 255, 255);
}
.tab-button-item.readOnly {
  cursor: default;
  background: none;
}

.tab-button-2 {
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 28px;
  cursor: pointer;
}
.tab-button-2.isActive {
  color: rgb(13, 133, 255);
}
.tab-button-2.readOnly {
  cursor: default;
  background: none;
}

.tab-button-3 {
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgb(255, 255, 255);
  padding: 12px 0;
  cursor: pointer;
}
.tab-button-3 .btn-icon {
  width: 22px;
  height: 21px;
}
.tab-button-3.isActive {
  background: rgb(27, 32, 56);
}
.tab-button-3.readOnly {
  cursor: default;
  background: none;
}
/*!************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/RealtimeView/components/SelectComp/index.scss ***!
  \************************************************************************************************************************************************************************************************************************/
.select-wrapper {
  width: 30%;
  max-width: 242px;
  margin-right: 16px;
}
.select-wrapper > span {
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  margin-right: 8px;
}
.select-wrapper .ant-select {
  width: calc(100% - 64px);
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/RealtimeView/index.scss ***!
  \**************************************************************************************************************************************************************************************************/
.real-time-content {
  height: 100%;
  width: 100%;
  display: flex;
  transform: translate3d(0, 0, 0);
}
.real-time-content .board-list {
  height: calc(100% - 130px);
  overflow-y: auto;
}
.real-time-content .left-area {
  position: relative;
  width: 96%;
  height: 100%;
  background: #0a0d1a;
}
.real-time-content .left-area .active-star svg {
  color: #ff574d;
}
.real-time-content .left-area .beidou-tag {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../images/beidou.37493a9310be0df64757f480b1665ab8.png) no-repeat center;
  background-size: contain;
  vertical-align: middle;
  margin-left: 6px;
}
.real-time-content .left-area .menu-tag.ant-tag {
  line-height: 16px;
  border-radius: 9px;
  font-size: 12px;
  color: #fff;
  background: rgb(255, 70, 58);
  border: 1px solid rgba(255, 255, 255, 0.29);
  border-radius: 8px;
  opacity: 0.5;
  margin-inline-end: 5px;
  margin-left: 8px;
}
.real-time-content .left-area .position-btn {
  display: inline-block;
  font-size: 14px;
  color: #0d85ff;
  font-family: PingFangSC;
  float: right;
}
.real-time-content .left-area .position-btn i {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  background: url(../images/position-icon.288b4c64b6011cb56de38d13f0f31fed.png) no-repeat center;
  background-size: 100%;
}
.real-time-content .left-area .ant-menu-title-content {
  width: 100%;
}
.real-time-content .left-area .group-ellipsis {
  display: flex;
  align-items: center;
  width: 100%;
}
.real-time-content .left-area .group-ellipsis .info-content {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  gap: 2px;
}
.real-time-content .left-area .group-ellipsis .info-content .text-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}
.real-time-content .left-area .group-ellipsis .info-content .number-content {
  flex: 0 0 auto;
  white-space: nowrap;
}
.real-time-content .left-area .group-ellipsis .icon-content {
  flex: 0 0 auto;
  margin-left: 4px;
}
.real-time-content .left-area .group-ellipsis .menu-tag {
  flex: 0 0 auto;
}
.real-time-content .left-area .left-menu-content {
  width: 100%;
  height: 100%;
  background: rgb(27, 32, 56);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  overflow-x: hidden;
}
.real-time-content .left-area .left-menu-content .station-menu {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
.real-time-content .left-area .left-menu-content .search-bar {
  padding: 20px;
}
.real-time-content .left-area .left-menu-content .search-bar .ant-select {
  width: 100% !important;
}
.real-time-content .left-area .left-menu-content .search-bar .ant-select .ant-select-selector {
  height: 40px;
  color: white;
}
.real-time-content .left-area .left-menu-content .search-bar .ant-select .ant-select-selection-placeholder {
  line-height: 36px;
}
.real-time-content .left-area .left-menu-content .search-bar .ant-select .ant-select-selection-search-input {
  height: 36px;
}
.real-time-content .left-area .left-menu-content .search-bar .ant-select .ant-select-selection-item {
  line-height: 36px;
}
.real-time-content .left-area .left-menu-content .left-menu {
  height: calc(100% - 80px);
  overflow-y: auto;
}
.real-time-content .left-area .left-menu-content .left-menu .vehicle-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.real-time-content .left-area .left-menu-content .left-menu .vehicle-title .position-btn {
  display: inline-block;
  font-size: 14px;
  color: #0d85ff;
  font-family: PingFangSC;
  float: right;
}
.real-time-content .left-area .left-menu-content .left-menu .vehicle-title .position-btn i {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  background: url(../images/position-icon.288b4c64b6011cb56de38d13f0f31fed.png) no-repeat center;
  background-size: 100%;
}
.real-time-content .left-area .left-menu-content .menu-level-2 .ant-menu-submenu-title {
  padding-left: 36px !important;
}
.real-time-content .left-area .left-menu-content .menu-level-2 > ul {
  background-color: rgba(0, 0, 0, 0.2);
}
.real-time-content .left-area .left-menu-content .ant-menu-item-only-child {
  padding-left: 48px !important;
}
.real-time-content .left-area.collapse {
  width: 0;
  transition: width 0.3s ease-out;
}
.real-time-content .left-area.expand {
  width: 340px;
  transition: width 0.3s ease-in;
}
.real-time-content .left-area .collapse-btn {
  width: 20px;
  height: 80px;
  background-color: #2e334d;
  border-radius: 10px;
  position: absolute;
  right: -6px;
  top: calc(50% - 40px);
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.real-time-content .left-area .collapse-btn i {
  width: 12px;
  height: 12px;
  background: url(../images/collapse.d0464f78e5410470cd18128706987b12.png) no-repeat center;
  background-size: contain;
}
.real-time-content .suspended-btn-area {
  width: 44px;
  height: 100px;
  margin-right: 12px;
  background: rgba(38, 43, 64, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.5);
  display: none;
  cursor: pointer;
}
.real-time-content .suspended-btn-area .search-icon {
  display: flex;
  flex-flow: column;
  align-items: center;
  font-size: 12px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.6);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.real-time-content .suspended-btn-area .search-icon i {
  display: block;
  margin: 8px 0;
  width: 16px;
  height: 16px;
  background: url(../images/ico-search.2839f2d51ab102a3e0b86a7c70300cbb.png) no-repeat center;
  background-size: contain;
}
.real-time-content .suspended-btn-area .expand-icon {
  text-align: center;
}
.real-time-content .suspended-btn-area .expand-icon i {
  display: inline-block;
  margin: 11px auto;
  width: 12px;
  height: 12px;
  background: url(../images/collapse.d0464f78e5410470cd18128706987b12.png) no-repeat center;
  background-size: contain;
  transform: rotate(-180deg);
}
.real-time-content .right-content {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.real-time-content .right-content .mapModeBar {
  background: rgba(38, 43, 64, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2px;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.5);
  position: absolute;
  width: calc(100% - 48px);
  left: 24px;
  top: 20px;
  z-index: 10;
}
.real-time-content .right-content .line2 {
  display: flex;
  align-items: center;
}
.real-time-content .right-content .line2 .tab-btn-wrapper {
  flex: 1;
}
.real-time-content .right-content .bread-line {
  display: flex;
  align-items: center;
  position: absolute;
  left: 24px;
  top: 90px;
}
.real-time-content .border-list-container {
  display: flex;
}

.popover-list {
  color: #fff;
}
/*!*****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/BoardGroup/index.scss ***!
  \*****************************************************************************************************************************************************************************************************/
.board-group {
  margin-top: 20px;
  height: calc(100% - 130px);
  overflow-y: auto;
}

.board-group-item {
  margin-bottom: 20px;
}
.board-group-item .label {
  font-size: 16px;
  font-family: PingFangSC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  vertical-align: middle;
  margin-bottom: 24px;
}
.board-group-item .label i {
  display: inline-block;
  width: 32px;
  height: 20px;
  background: url(../images/left-arrow.e7ccebb3dc475568da03a2c6c67432c0.png) no-repeat center;
  background-size: 100%;
  position: relative;
  top: 4px;
  margin-right: 4px;
}

.board-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/OrderList/index.scss ***!
  \****************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*其他*/
.my-car-info {
  margin-bottom: 15px;
  font-size: 16px;
}
.my-car-info li {
  display: inline-block;
  margin-right: 30px;
}
.my-car-info li:last-child {
  float: right;
  margin-top: 10px;
}
.my-car-info li .label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-right: 6px;
}
.my-car-info li .value {
  font-size: 24px;
  font-weight: bold;
  color: white;
}
.my-car-info li .schedule-time {
  font-size: 14px;
  color: white;
}

.hiddenPhone {
  display: none;
}

.showPhone {
  display: block;
}

.re-modal .ant-table-tbody > tr {
  height: 60px;
  white-space: nowrap;
}

.action {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: normal;
  color: #0d85ff;
  cursor: pointer;
}

.encryption:active, .encryption:hover {
  cursor: pointer;
}
/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/RealtimeView/components/MultiSelectComp/index.scss ***!
  \*****************************************************************************************************************************************************************************************************************************/
.multi-select-wrapper {
  width: 30%;
  max-width: 242px;
  margin-right: 16px;
}
.multi-select-wrapper > span {
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  margin-right: 8px;
}
.multi-select-wrapper .ant-select {
  width: calc(100% - 64px);
}
.multi-select-wrapper .checkbox-wrapper {
  padding: 5px;
}
.multi-select-wrapper .checkbox-wrapper .ant-checkbox,
.multi-select-wrapper .checkbox-wrapper .ant-checkbox-checked {
  margin-right: 4px;
}

.ant-select-item-option-selected .ant-select-item-option-state {
  display: none;
}

.ant-select-tree {
  background: rgb(27, 32, 56) !important;
}

.ant-select-tree .ant-select-tree-treenode {
  padding: 5px !important;
}

.ant-select-tree-switcher-noop {
  display: none;
}

.ant-select-tree-checkbox .ant-select-tree-checkbox-inner {
  background-color: #03040d;
}

.ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
  background-color: #0d85ff;
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Common/BreadCrumb/index.scss ***!
  \************************************************************************************************************************************************************************************************************/
.common-breadcrumb {
  height: 40px;
  padding: 9px 19px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-color: rgba(38, 43, 64, 0.6);
  border-radius: 2px;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.common-breadcrumb .ant-breadcrumb .ant-breadcrumb-link,
.common-breadcrumb .ant-breadcrumb .ant-breadcrumb-separator {
  color: white;
}
.common-breadcrumb .ant-breadcrumb .common-bread-item {
  cursor: pointer;
  color: white;
  transition: color 0.2s ease;
}
.common-breadcrumb .ant-breadcrumb .common-bread-item:hover {
  color: #0d82f9;
}
/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/SingleView/components/VideoGroup/index.scss ***!
  \**********************************************************************************************************************************************************************************************************************/
.video-item {
  width: 100%;
}
.video-item .video-wrap {
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0);
}
.video-item .no-video {
  width: 100%;
  height: 100%;
  font-size: 18px;
}
.video-item canvas {
  width: 100%;
  height: 100%;
}
.video-item .direction {
  position: absolute;
  color: #fff;
  top: 12px;
  left: 12px;
  width: 25px;
  height: 25px;
  font-size: 15px;
  text-align: center;
  line-height: 25px;
  background: linear-gradient(160deg, rgb(83, 131, 255) 0%, rgb(51, 99, 223) 24%, rgb(0, 42, 152) 100%);
  border-radius: 50%;
  z-index: 1;
}

.drag-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #000;
  box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.08);
}
.drag-view .ant-spin-spinning {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drag-view .video-control-wrapper {
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  background-color: #1b2038;
}
.drag-view .video-control-wrapper .btn-group {
  position: absolute;
  right: 9px;
}
.drag-view .video-control-wrapper .remotecall-content {
  position: absolute;
  top: 10px;
  right: 60px;
}
.drag-view .default-message {
  height: calc(100% - 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1b2038;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: rgb(200, 210, 255);
  user-select: none;
}
.drag-view .default-message div {
  text-align: center;
}
.drag-view .default-message div .camera {
  width: 99px;
  height: 88px;
}
.drag-view .default-message div .camera-notice {
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 12px;
}
.drag-view .default-message div .camera-btn {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 16px;
  margin-left: 10px;
}
.drag-view .default-message div .camera-btn:hover {
  color: #40a9ff;
}
.drag-view .audio-play-btn {
  position: absolute;
  right: 20px;
  top: 6px;
  cursor: pointer;
}
.drag-view .play-btn,
.drag-view .stop-btn {
  width: 42px;
  height: 42px;
  background: url(../images/ico-stop.aed03193caa06e58a6deab98c2daa54e.png) center no-repeat;
  background-size: 28px 28px;
  cursor: pointer;
}
.drag-view .play-btn {
  background: url(../images/ico-play.7835e177f45b646c6d5ffb88540a45e6.png) center no-repeat;
  background-size: 28px 28px;
}
.drag-view .paly-list-wrap {
  height: calc(100% - 62px);
  color: #c8d2ff;
  background: #1b2038;
}
.drag-view .paly-list-wrap .no-all-direction {
  width: 100%;
  height: 100%;
  font-size: 18px;
}
.drag-view .paly-list-wrap .list {
  background: #1b2038;
  height: 100%;
  padding: 0 12px 10px;
}
.drag-view .paly-list-wrap .list .item {
  position: relative;
  height: 25%;
  padding-bottom: 8px;
}
.drag-view .paly-list-wrap .list .item .video-wrap {
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0);
}
.drag-view .paly-list-wrap .list .item .no-video {
  width: 100%;
  height: 100%;
  padding-bottom: 4px;
  font-size: 18px;
}
/*!**********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/RemoteCallModal/index.scss ***!
  \**********************************************************************************************************************************************************************************************************/
.operation_area {
  padding-left: 10%;
  margin-bottom: 20px;
}
.operation_area .custom_round_btn {
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: #0d85ff;
  color: white;
  margin-right: 20px;
}
.operation_area .custom_round_btn:hover {
  background: #0869cc;
  border: 1px solid transparent;
  color: white;
}
.operation_area .ant-btn:focus {
  background: #0d85ff;
}

.collected_word_list {
  padding-left: 10%;
  padding-top: 20px;
}
.collected_word_list .list_area {
  border: 1px solid #36394d;
  width: 100%;
  height: 150px;
  padding: 12px;
  border-radius: 15px;
  overflow: auto;
}
.collected_word_list .list_area .word {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px 10px 20px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: rgba(10, 13, 26, 0.4);
  margin-bottom: 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.collected_word_list .list_area .word:hover {
  transform: scale(1.02);
}
.collected_word_list .list_area .word .delete_icon {
  width: 30px;
  height: 100%;
  text-align: center;
}
/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/ShadowSystem/components/simple.scss ***!
  \**************************************************************************************************************************************************************************************************************/
.overlay-container {
  background: rgba(38, 43, 64, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.5);
  padding: 10px;
  width: auto;
  word-break: keep-all;
  white-space: nowrap;
  text-align: left;
}
.overlay-container ::after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: 6px solid transparent;
  border-top: 6px solid rgba(255, 255, 255, 0.16);
  position: absolute;
  bottom: -12px;
  left: calc(50% - 6px);
}
.overlay-container .label-text {
  color: #fff;
  font-size: 14px;
  font-family: JDZhengHT;
  font-weight: bold;
  word-break: keep-all;
  white-space: nowrap;
}
.overlay-container .alarm-text {
  font-family: PingFangSC;
  font-weight: normal;
  color: rgb(255, 87, 77);
  word-break: keep-all;
  white-space: nowrap;
  margin-left: 10px;
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/UpdateDetailModal/index.scss ***!
  \************************************************************************************************************************************************************************************************************/
.update-detail-modal {
  top: 30%;
}

.confirm-silent-container {
  width: 326px;
}
.confirm-silent-container .ant-popover-content .ant-popover-inner {
  background-color: rgba(0, 0, 0, 0.9098039216);
  border: 1px solid #636262;
}
.confirm-silent-container .ant-popover-content .ant-popover-inner .ant-popover-message {
  border-bottom: 1px solid #7e7e7e;
  margin-bottom: 8px;
}
/*!*********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/SingleView/Tab/index.scss ***!
  \*********************************************************************************************************************************************************************************************************/
.tab-con {
  width: 100%;
  height: 44px;
  background: rgba(0, 0, 0, 0.4);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}
.tab-con .ant-row,
.tab-con .ant-col {
  height: 100%;
}
.tab-con .ant-col {
  cursor: pointer;
}
.tab-con .tab {
  display: block;
  width: 76px;
  height: 24px;
  line-height: 24px;
}
.tab-con .tab .red-bubble {
  background-color: red;
  width: 10px;
  height: 10px;
  border: 1px solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  right: 5px;
}
.tab-con .active-col {
  background: #1b2038;
}
.tab-con .active-tab {
  color: white;
  padding-left: 6px;
  background: url(../images/active_tab.6cbca15b25f0160f77e7249e9093b75c.png) no-repeat;
  background-size: 72px 24px;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Common/Enable/index.scss ***!
  \********************************************************************************************************************************************************************************************************/
.enable-con {
  position: relative;
  background: url(../images/situation-bg.671016966272168267466433bf7e0652.png) no-repeat;
  background-size: 100% 100%;
}
.enable-con .direction {
  position: absolute;
  right: 5px;
  top: -20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.enable-con .direction img {
  width: 20px;
  height: 20px;
}
.enable-con .car {
  background: url(../images/car.a7a1260cdaa7197fde6aae8072d62eb9.png) no-repeat;
  background-size: 100% 100%;
}
.enable-con .top {
  position: absolute;
  top: 0;
  left: 50%;
  background: url(../images/normal-top.64715c4c0bea0a9c67b0934312145bef.png) no-repeat;
  background-size: 100% 100%;
}
.enable-con .top-warn {
  background: url(../images/obstacle-top.ad2bde6311a7234bf49c30ea235c4879.png) no-repeat;
  background-size: 100% 100%;
}
.enable-con .right {
  position: absolute;
  right: 0;
  top: 50%;
  background: url(../images/normal-left.d0c7e1536cb72b47bbeeab122602a688.png) no-repeat;
  background-size: 100% 100%;
  transform: rotate(-180deg);
}
.enable-con .right-warn {
  background: url(../images/obstacle-left.db51a2f98b6f4207e2fc936d372c9f30.png) no-repeat;
  background-size: 100% 100%;
}
.enable-con .down {
  position: absolute;
  bottom: 0;
  left: 50%;
  background: url(../images/normal-down.ebba83872798557c732a261025b1b32f.png) no-repeat;
  background-size: 100% 100%;
}
.enable-con .down-warn {
  background: url(../images/obstacle-down.c600f252cb6634be4837eb693ca7d64f.png) no-repeat;
  background-size: 100% 100%;
}
.enable-con .left {
  position: absolute;
  left: 0;
  top: 50%;
  background: url(../images/normal-left.d0c7e1536cb72b47bbeeab122602a688.png) no-repeat;
  background-size: 100% 100%;
}
.enable-con .left-warn {
  background: url(../images/obstacle-left.db51a2f98b6f4207e2fc936d372c9f30.png) no-repeat;
  background-size: 100% 100%;
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/SingleView/Error/index.scss ***!
  \***********************************************************************************************************************************************************************************************************/
.ant-list-split .ant-list-item {
  border-bottom: 1px solid transparent !important;
}

.m_b_5 {
  margin-bottom: 5px;
}

.error-con {
  position: absolute;
  bottom: 0;
  top: 50px;
  left: 0;
  right: 0;
  width: 100%;
  padding: 5px 15px 0 15px;
}
.error-con .ant-list-item {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12px;
  padding: 10px 0;
}
.error-con .error-list {
  height: 100%;
  overflow-y: hidden;
  overflow-y: auto;
}
.error-con .error-list .error-detail {
  position: relative;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}
.error-con .error-list .error-detail .error-fatal {
  position: absolute;
  width: 35px;
  height: 35px;
  top: 0;
  right: 0;
  background: url(../images/fatal.61b922f88e89e5ca8b77f70ba76f695b.png) no-repeat;
  background-size: 35px 35px;
}
.error-con .error-list .error-detail:focus, .error-con .error-list .error-detail:active, .error-con .error-list .error-detail:hover {
  border: 1px solid #0d85ff;
  cursor: pointer;
}

.error-modal-con {
  color: rgba(255, 255, 255, 0.8);
}

.gray-color-font {
  color: rgba(255, 255, 255, 0.4);
}
/*!*********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/SingleView/Log/index.scss ***!
  \*********************************************************************************************************************************************************************************************************/
.ant-list-split .ant-list-item {
  border-bottom: 1px solid transparent !important;
}

.m_b_5 {
  margin-bottom: 5px;
}

.log-con {
  position: absolute;
  bottom: 0;
  top: 50px;
  left: 0;
  right: 0;
  padding: 5px 15px 0 15px;
}
.log-con .ant-list-item {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12px;
  padding: 10px 0;
}
.log-con .log-list {
  height: calc(100% - 40px);
  overflow-y: hidden;
  overflow-y: auto;
}
.log-con .log-list .log-detail {
  position: relative;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.bottom-btn {
  position: absolute;
  width: 100%;
  height: 40px;
  background: rgb(27, 32, 56);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}
.bottom-btn:hover, .bottom-btn:active {
  color: #0d85ff;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.log-modal-con {
  position: relative;
}
.log-modal-con .data-sum {
  position: absolute;
  bottom: 18px;
  color: rgba(255, 255, 255, 0.8);
}

.gray-color-font {
  color: rgba(255, 255, 255, 0.4);
}
/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/WarningListView/PopoverListBtn/index.scss ***!
  \********************************************************************************************************************************************************************************************************************/
.row-popover_btn {
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.row-btn {
  font-size: 14px;
  color: rgb(13, 133, 255);
  cursor: pointer;
  margin-right: 10px;
}

#popover-WebGL-output {
  width: 100%;
  height: 648px;
  overflow: hidden;
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
}
#popover-WebGL-output .websocket {
  width: auto;
  height: auto;
}
#popover-WebGL-output .CarInfo {
  width: 120px;
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 90px;
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 3px;
}
#popover-WebGL-output .light {
  width: 90%;
  display: flex;
  justify-content: center;
  margin: 0 auto 5px auto;
  border-radius: 8px;
  border: 1px solid #797979;
  padding: 3px 3px;
  background: #5d5f65;
}
#popover-WebGL-output .light div {
  width: 23px;
  height: 23px;
  margin: 0 3px;
  background-color: #999999;
  border-radius: 50%;
  opacity: 0.3;
}
#popover-WebGL-output .light_none {
  width: 90%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid #797979;
  padding: 3px 3px;
  background: #5d5f65;
}
#popover-WebGL-output .light_none div {
  width: 23px;
  height: 23px;
  margin: 0 3px;
  background-color: #999999;
  border-radius: 50%;
  opacity: 0.3;
}
#popover-WebGL-output .light_red {
  background-color: #ff0000 !important;
}
#popover-WebGL-output .light_green {
  background-color: #66ff00 !important;
}
#popover-WebGL-output .light_yellow {
  background-color: #ffff00 !important;
}
#popover-WebGL-output .light_red_major {
  background-color: #ff0000 !important;
  opacity: 1 !important;
}
#popover-WebGL-output .light_green_major {
  background-color: #66ff00 !important;
  opacity: 1 !important;
}
#popover-WebGL-output .light_yellow_major {
  background-color: #ffff00 !important;
  opacity: 1 !important;
}
#popover-WebGL-output .light_black {
  background-color: #000000 !important;
}
#popover-WebGL-output .light_no_light {
  background-color: #5d5f65 !important;
}
#popover-WebGL-output .light_red_unknown {
  background-color: #ff0000 !important;
  opacity: 0.3;
}
#popover-WebGL-output .light_green_unknown {
  background-color: #66ff00 !important;
  opacity: 0.3;
}
#popover-WebGL-output .light_yellow_unknown {
  background-color: #ffff00 !important;
  opacity: 0.3;
}
@keyframes twinkleRed {
  from {
    opacity: 0;
    background-color: #ff0000;
  }
  to {
    opacity: 1;
    background-color: #ff0000;
  }
}
@keyframes twinkleGreen {
  from {
    opacity: 0;
    background-color: #66ff00;
  }
  to {
    opacity: 1;
    background-color: #66ff00;
  }
}
@keyframes twinkleYellow {
  from {
    opacity: 0;
    background-color: #ffff00;
  }
  to {
    opacity: 1;
    background-color: #ffff00;
  }
}
#popover-WebGL-output .light_red_twinkle {
  background-color: #ff0000;
  animation-iteration-count: infinite;
  animation: twinkleRed 0.5s linear infinite alternate 0.5s;
}
#popover-WebGL-output .light_green_twinkle {
  background-color: #66ff00;
  animation-iteration-count: infinite;
  animation: twinkleGreen 0.5s linear infinite alternate 0.5s;
}
#popover-WebGL-output .light_yellow_twinkle {
  background-color: #ffff00;
  animation-iteration-count: infinite;
  animation: twinkleYellow 0.5s linear infinite alternate 0.5s;
}
#popover-WebGL-output .major {
  opacity: 1 !important;
  /*box-shadow: 1px 1px 1px;*/
}
#popover-WebGL-output .car_info {
  width: 100%;
  height: auto;
  margin: 7px auto 0 auto;
  background: #1e2129;
  border-radius: 3px;
}
#popover-WebGL-output .car_img {
  width: 100%;
  height: auto;
  padding-top: 10px;
}
#popover-WebGL-output .car_img img {
  width: 50px;
  height: 50px;
}
#popover-WebGL-output .car_steer_text,
#popover-WebGL-output .car_gear_text {
  line-height: 20px;
  font-size: 14px;
  color: #66ff00;
}
#popover-WebGL-output .timelabel_text {
  font-size: 14px;
  color: #ee0000;
  text-align: center;
  position: absolute;
  top: 20px;
  width: 100%;
  z-index: 100;
  display: block;
}
#popover-WebGL-output .traffic_light_text {
  line-height: 18px;
  font-size: 14px;
  color: #a3a3a3;
}
#popover-WebGL-output .selectCar {
  width: 200px;
  height: 30px;
  position: fixed;
  top: 5px;
  right: 5px;
  border: none 0;
}
#popover-WebGL-output .light_container {
  width: 120px;
  background-color: #1e2129;
  margin-top: 3px;
  padding: 5px;
  border-radius: 3px;
  color: #e6e6e6;
}
#popover-WebGL-output .light_information {
  width: 100%;
  height: 20px;
  padding: 0 5%;
  line-height: 20px;
  font-size: 12px;
  background-color: #494949;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
#popover-WebGL-output .light_id {
  float: left;
}
#popover-WebGL-output .light_duration {
  float: right;
}
#popover-WebGL-output .light_stateText {
  line-height: 30px;
  font-size: 13px;
  color: #e6e6e6;
}
#popover-WebGL-output .lightList {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-left: 8px;
  border-radius: 3px;
}
#popover-WebGL-output .light_button {
  width: 24px;
  height: 16px;
  line-height: 16px;
  position: absolute;
  top: -8px;
  left: 50%;
  margin-left: -12px;
  background: #373737;
  border-radius: 3px;
}
/*!*********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/FieldGroup/fielditem.scss ***!
  \*********************************************************************************************************************************************************************************************************/
.fields-group-item {
  font-size: 14px;
  font-family: PingFang SC;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 10px;
  line-height: 30px;
  display: flex;
}
.fields-group-item .label-text,
.fields-group-item .value-text {
  flex: 1;
  max-width: 50%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-align: left;
}
.fields-group-item .label-text {
  max-width: 44%;
}
.fields-group-item .value-text {
  color: rgba(255, 255, 255, 0.8);
}
.fields-group-item .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  top: 4px;
  cursor: pointer;
}
.fields-group-item .icon img {
  display: inline-block;
  width: 100%;
  height: 100%;
}
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/FieldGroup/fields.scss ***!
  \******************************************************************************************************************************************************************************************************/
.fields-group-wrapper .title {
  display: flex;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #fff;
  align-items: center;
}
.fields-group-wrapper .title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 17px;
  background: #0d85ff;
  border-radius: 1px;
  margin-right: 6px;
}
/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/ErrorMessage/index.scss ***!
  \*******************************************************************************************************************************************************************************************************/
.error-message_wrapper .error-info {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
}
.error-message_wrapper .error-info > div {
  margin-right: 30px;
}
.error-message_wrapper .high-light {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgb(255, 255, 255);
}
.error-message_wrapper .error-detail {
  margin: 4px 10px;
  line-height: 20px;
}
/*!**************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/components/XMonitor/Monitor/ThreeMonitor.css ***!
  \**************************************************************************************************************************************************************************/
body,
html {
  width: 100%;
  height: 100%;
  position: relative;
}
#WebGL-output {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.websocket {
  width: auto;
  height: auto;
}
.CarInfo {
  width: 120px;
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 10px;
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 3px;
}
.light {
  width: 90%;
  display: flex;
  justify-content: center;
  margin: 0 auto 5px auto;
  border-radius: 8px;
  border: 1px solid #797979;
  padding: 3px 3px;
  background: #5d5f65;
}
.light div {
  width: 23px;
  height: 23px;
  margin: 0 3px;
  background-color: #999999;
  border-radius: 50%;
  opacity: 0.3;
}
.light_none {
  width: 90%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid #797979;
  padding: 3px 3px;
  background: #5d5f65;
}
.light_none div {
  width: 23px;
  height: 23px;
  margin: 0 3px;
  background-color: #999999;
  border-radius: 50%;
  opacity: 0.3;
}
.light_red {
  background-color: #ff0000 !important;
}
.light_green {
  background-color: #66ff00 !important;
}
.light_yellow {
  background-color: #ffff00 !important;
}
.light_red_major {
  background-color: #ff0000 !important;
  opacity: 1 !important;
}
.light_green_major {
  background-color: #66ff00 !important;
  opacity: 1 !important;
}
.light_yellow_major {
  background-color: #ffff00 !important;
  opacity: 1 !important;
}
.light_black {
  background-color: #000000 !important;
}
.light_no_light {
  background-color: #5d5f65 !important;
}
.light_red_unknown {
  background-color: #ff0000 !important;
  opacity: 0.3;
}
.light_green_unknown {
  background-color: #66ff00 !important;
  opacity: 0.3;
}
.light_yellow_unknown {
  background-color: #ffff00 !important;
  opacity: 0.3;
}
@keyframes twinkleRed {
  from {
    opacity: 0;
    background-color: #ff0000;
  }
  to {
    opacity: 1;
    background-color: #ff0000;
  }
}
@keyframes twinkleGreen {
  from {
    opacity: 0;
    background-color: #66ff00;
  }
  to {
    opacity: 1;
    background-color: #66ff00;
  }
}
@keyframes twinkleYellow {
  from {
    opacity: 0;
    background-color: #ffff00;
  }
  to {
    opacity: 1;
    background-color: #ffff00;
  }
}
.light_red_twinkle {
  background-color: #ff0000;
  animation-iteration-count: infinite;
  animation: twinkleRed 0.5s linear infinite alternate 0.5s;
}
.light_green_twinkle {
  background-color: #66ff00;
  animation-iteration-count: infinite;
  animation: twinkleGreen 0.5s linear infinite alternate 0.5s;
}
.light_yellow_twinkle {
  background-color: #ffff00;
  animation-iteration-count: infinite;
  animation: twinkleYellow 0.5s linear infinite alternate 0.5s;
}
.major {
  opacity: 1 !important;
  /*box-shadow: 1px 1px 1px;*/
}
.car_info {
  width: 100%;
  height: auto;
  margin: 7px auto 0 auto;
  background: #1e2129;
  border-radius: 3px;
}
.car_img {
  width: 100%;
  height: auto;
  padding-top: 10px;
}
.car_img img {
  width: 50px;
  height: 50px;
}
.car_steer_text,
.car_gear_text {
  line-height: 20px;
  font-size: 14px;
  color: #66ff00;
}
.timelabel_text {
  font-size: 14px;
  color: #ee0000;
  text-align: center;
  position: absolute;
  top: 20px;
  width: 100%;
  z-index: 100;
  display: block;
}
.traffic_light_text {
  line-height: 18px;
  font-size: 14px;
  color: #a3a3a3;
}
.selectCar {
  width: 200px;
  height: 30px;
  position: fixed;
  top: 5px;
  right: 5px;
  border: none 0;
}
.light_container {
  width: 120px;
  background-color: #1e2129;
  margin-top: 3px;
  padding: 5px;
  border-radius: 3px;
  color: #e6e6e6;
}

.light_information {
  width: 100%;
  height: 20px;
  padding: 0 5%;
  line-height: 20px;
  font-size: 12px;
  background-color: #494949;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.light_id {
  float: left;
}
.light_duration {
  float: right;
}
.light_stateText {
  line-height: 30px;
  font-size: 13px;
  color: #e6e6e6;
}
.lightList {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-left: 8px;
  border-radius: 3px;
}
.light_button {
  width: 24px;
  height: 16px;
  line-height: 16px;
  position: absolute;
  top: -8px;
  left: 50%;
  margin-left: -12px;
  background: #373737;
  border-radius: 3px;
}
.global_config {
  width: auto;
  height: 40px;
  background-color: #1e2129;
  position: absolute;
  bottom: 10px;
  right: 140px;
  border-radius: 5px;
  overflow: hidden;
}
.contral_icon {
  width: 23px;
  height: 40px;
  padding: 9px 5px;
  float: right;
}
.contral_icon img {
  width: 100%;
  height: 100%;
}
.global_config_data {
  width: auto;
  height: 100%;
  float: right;
  border-right: solid 1px #5f5f5f;
}
.config_data_item {
  width: 30px;
  height: 40px;
  display: inline-block;
}
.config_item_icon {
  width: 20px;
  height: 21px;
  margin: 2px 5px 1px 5px;
}
.config_item_icon img {
  width: 100%;
  height: 100%;
}
.config_item_text {
  width: 100%;
  height: 16px;
  line-height: 16px;
  font-size: 10px;
  color: #fff;
  text-align: center;
}

/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/EventPlayBack/bar.scss ***!
  \*************************************************************************************************************************************************************************************************/
.custorm-control_bar {
  width: 100%;
  height: 77px;
  background: rgba(27, 32, 56, 0.5);
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}
.custorm-control_bar .control_bar {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  justify-content: space-around;
}
.custorm-control_bar .control_bar .play-btn,
.custorm-control_bar .control_bar .stop-btn {
  display: inline-block;
  width: 48px;
  height: 48px;
  cursor: pointer;
  border-radius: 50%;
  margin-left: 30px;
  opacity: 1;
}
.custorm-control_bar .control_bar .play-btn {
  background: url(../images/ico-play.7835e177f45b646c6d5ffb88540a45e6.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.custorm-control_bar .control_bar .stop-btn {
  background: url(../images/ico-stop.aed03193caa06e58a6deab98c2daa54e.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.custorm-control_bar .control_bar .play-time {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
  color: white;
}
.custorm-control_bar .control_bar .progress-bar {
  position: relative;
  width: 75%;
  height: 24px;
  touch-action: none;
}
.custorm-control_bar .control_bar .progress-bar:focus {
  outline: none;
}
.custorm-control_bar .control_bar .progress-bar .track {
  padding: 0;
  cursor: pointer;
  outline: none;
}
.custorm-control_bar .control_bar .progress-bar .track:focus {
  border: 0;
  outline: none;
}
.custorm-control_bar .control_bar .progress-bar .track .main {
  width: 100%;
  outline: none;
  height: 26px;
  top: 0;
  position: absolute;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.custorm-control_bar .control_bar .progress-bar .track .main:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 11px;
  background-color: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  transition: height 0.1s;
  outline: none;
}
.custorm-control_bar .control_bar .progress-bar .track .main .inner-seek-block {
  position: absolute;
  width: 100%;
  height: 11px;
  transition: height 0.1s, opacity 0.4s;
  transform-origin: 0 0;
}
.custorm-control_bar .control_bar .progress-bar .track .main:focus {
  border: 0;
  outline: none;
}
.custorm-control_bar .control_bar .progress-bar .track .main .seek-hover {
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 1;
}
.custorm-control_bar .control_bar .progress-bar .track .main .connect {
  background-color: rgba(255, 255, 255, 0.39);
  z-index: 3;
  transform-origin: 0 0;
}
@media (hover) {
  .custorm-control_bar .control_bar .progress-bar .track .main:hover:before {
    height: 16px;
  }
  .custorm-control_bar .control_bar .progress-bar .track .main:hover .inner-seek-block {
    height: 16px;
  }
}
.custorm-control_bar .control_bar .progress-bar .thumb {
  pointer-events: none;
  position: absolute;
  width: 18px;
  height: 18px;
  left: -6px;
  z-index: 4;
  top: 3px;
}
.custorm-control_bar .control_bar .progress-bar .thumb .handler {
  border-radius: 100%;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0;
  transform: scale(0.4);
  transition: transform 0.2s, opacity 0.2s;
}
.custorm-control_bar .control_bar .progress-bar .thumb.active .handler {
  opacity: 1;
  transform: scale(1);
}
.custorm-control_bar .control_bar .progress-bar .hover-time {
  text-shadow: 1px 1px 1px #000;
  position: absolute;
  line-height: 18px;
  font-size: 16px;
  color: #ddd;
  bottom: 5px;
  left: 0;
  top: -22px;
  padding: 5px 10px;
  opacity: 0;
  pointer-events: none;
  text-align: center;
}
.custorm-control_bar .control_bar .progress-bar .hover-time.active {
  opacity: 1;
}
.custorm-control_bar .control_bar .progress-bar:hover .track .main .seek-hover {
  opacity: 1;
}
.custorm-control_bar .control_bar .control-btn-group {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
  margin-left: 26px;
  background: transparent;
  display: flex;
}
.custorm-control_bar .control_bar .control-btn-group > div {
  margin-right: 20px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.8);
  padding: 2px 4px;
  cursor: pointer;
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/AccidentManagement/index.scss ***!
  \*************************************************************************************************************************************************************************************************************/
.accident-wrapper {
  height: 90%;
  overflow: hidden;
}
.accident-wrapper .accident-list {
  height: 90%;
  overflow: auto;
}
.accident-wrapper .accident-list .accident-item {
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.accident-wrapper .accident-list .accident-item .accident-item_head {
  margin-top: 8px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.accident-wrapper .accident-list .accident-item .accident-item_head .create-time {
  margin-left: 8px;
  margin-right: 8px;
}
.accident-wrapper .accident-list .accident-item .accident-item_head .row-item {
  display: flex;
}
.accident-wrapper .accident-list .accident-item .accident-item_head .row-item i {
  flex: 1;
}
.accident-wrapper .accident-list .accident-item .accident-item_head .share-btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../images/share_btn.cbe6886f04599dced3edec1ca75ff5df.png) no-repeat center;
  background-size: contain;
  position: absolute;
  right: 8px;
  cursor: pointer;
}
.accident-wrapper .accident-list .accident-item .accident-info {
  padding: 4px;
  margin: 4px;
  box-sizing: border-box;
  border-radius: 4px;
}
.accident-wrapper .accident-list .accident-item .accident-info .field_accidentTime,
.accident-wrapper .accident-list .accident-item .accident-info .field_technicalSupportAccidentType,
.accident-wrapper .accident-list .accident-item .accident-info .field_technicalSupportAccidentLevel,
.accident-wrapper .accident-list .accident-item .accident-info .field_accidentDesc {
  margin-bottom: 0px;
}
.accident-wrapper .accident-list .accident-item .accident-info .field_snapshotAttachmentUrlList {
  margin-top: 25px;
}
.accident-wrapper .accident-list .accident-item .operation-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}
.accident-wrapper .empty-text {
  height: calc(100% - 44px);
  text-align: center;
  color: white;
  position: relative;
  top: 40%;
}
.accident-wrapper .creat-accident_btn {
  position: absolute;
  height: 25px;
  bottom: 5px;
  left: 40%;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
.accident-wrapper .creat-accident_btn .add-icon {
  margin-left: 10px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  border: 1px solid;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
}
/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/SingleView/components/RightContainer/index.scss ***!
  \**************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.gray {
  color: #98989d;
}

.red {
  color: #ff574d;
}

.origin {
  color: #ff9e0b;
}

.green {
  color: #14bab7;
}

.right-con {
  position: relative;
  width: 100%;
  height: 100%;
  background: black;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  display: flex;
  flex-flow: column;
}
.right-con .label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  padding-top: 2px;
}
.right-con .value {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}
.right-con .value .gps-signal-icon,
.right-con .value .scene-signal-num {
  height: 24px;
  width: 32px;
}
.right-con .value .no-signal,
.right-con .value .have-signal,
.right-con .value .scene-signal-str {
  margin-left: 10px;
}
.right-con .value .no-signal {
  color: #ff574d;
}

.station {
  position: relative;
}
.station-con {
  width: 100%;
  height: 145px;
  background: #1b2038;
  padding: 10px;
}
.station-con .header-box {
  margin-bottom: 15px;
}
.station-con .header-box .right-info .path-img {
  width: 20px;
}
.station-con .header-box .right-info .license {
  font-size: 24px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  margin: 0 8px 0 5px;
}
.station-con .header-box .right-info .vehicle-type {
  font-size: 13px;
  font-family: PingFangSC;
  font-weight: 500;
  color: #0d85ff;
  border: 1px solid #0d85ff;
  border-radius: 2px;
  padding: 0 5px;
}
.station-con .header-box .left-info {
  font-size: 18px;
}
.station-con .header-box .left-info .vehicle-status {
  padding: 4px 18px;
  border-radius: 2px;
}
.station-con .header-box .left-info .normal {
  background: rgba(20, 186, 183, 0.1);
  color: #14bab7;
}
.station-con .header-box .left-info .alarm {
  background: rgba(255, 87, 77, 0.1);
  color: #ff574d;
}
.station-con .header-box .left-info .lost {
  background: rgba(255, 158, 11, 0.1);
  color: #ff9e0b;
}
.station-con .header-box .left-info .offline {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.station-con .foot-box {
  justify-content: flex-end;
}
.station-con .site-more-info {
  color: #0d85ff;
}
.station-con .site-more-info:hover {
  cursor: pointer;
  color: #0869cc;
}
.station-con .site-more-info-active {
  color: #0d85ff;
}
.station-pop {
  position: absolute;
  top: 30px;
  right: 103%;
  z-index: 1069;
}
.station-pop-content {
  width: 610px;
  height: 172px;
  background: rgba(0, 0, 0, 0.8);
  font-size: 16px;
  z-index: 9999;
}
.station-pop-content .field-item {
  width: 100%;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-family: PingFang SC;
  margin-bottom: 8px;
}
.station-pop-content .field-item .field-label {
  width: 100px;
  text-align: left;
}
.station-pop-content .field-item .field-text {
  flex: 1;
  color: #fff;
}
.station-pop-content .ant-row {
  margin: 0 !important;
}
.station-pop-content .vehicleVersion {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.station-pop-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  right: -6px;
  bottom: 60px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.5);
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -moz-transform: rotate(45deg);
  /* Firefox */
  -webkit-transform: rotate(45deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(45deg);
  /* Opera */
  z-index: 99999;
}

.order-con {
  width: 100%;
  flex: 1;
  max-height: 380px;
  background: #1b2038;
  margin: 2px 0;
  padding: 10px;
}
.order-con .triangle {
  margin-top: 4px;
}
.order-con .update-detail-btn {
  width: 66px;
  height: 20px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgb(13, 133, 255);
  margin-left: 12px;
  cursor: pointer;
}
.order-con .battery {
  position: relative;
  width: 36px;
  height: 18px;
  border-radius: 2px;
  margin-left: 8px;
}
.order-con .battery:before {
  content: "";
  position: absolute;
  right: -2px;
  width: 2px;
  height: 6px;
  top: 50%;
  margin-top: -3px;
  background-color: #d8d8d8;
}
.order-con .battery.normal {
  border: 1px solid #d8d8d8;
  padding: 1px;
}
.order-con .battery.normal .progress {
  background-color: #14bab7;
}
.order-con .battery .inner {
  width: 32px;
  height: 14px;
}
.order-con .battery .inner .progress {
  height: 100%;
}
.order-con .battery .warn {
  background-color: #ff9e0b !important;
}
.order-con .ant-carousel .slick-dots-bottom {
  bottom: 0;
}

.enable {
  width: 100%;
  background: #1b2038;
}

@media (max-width: 1500px) {
  .enable {
    padding-top: 20px;
  }
}
@media (min-width: 1501px) and (max-width: 1700px) {
  .enable {
    padding-top: 60px;
  }
}
@media (min-width: 1701px) {
  .enable {
    padding-top: 46px;
  }
}
.tabCard-con {
  position: relative;
  width: 100%;
  flex: 1;
  max-height: calc(100vh - 414px);
  min-height: 440px;
  background: #1b2038;
}

.ant-row {
  margin: 2px 0;
}

.encryption {
  padding-left: 5px;
  cursor: pointer;
}

.cross {
  cursor: pointer;
}

.isKnown .ant-form-item-label {
  max-width: 300px;
  word-break: break-all;
}

.more-btn {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../images/more.f8654fe76d8c023cb9fc18d6faf9ae2c.png) no-repeat center;
  background-size: contain;
  margin-left: 6px;
  cursor: pointer;
  vertical-align: middle;
}

.station-info-pop {
  width: 666px;
  height: 468px;
}
.station-info-pop .station-info_field {
  margin-top: 8px;
  font-size: 14px;
}
.station-info-pop .station-info_field:last-child {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.station-info-pop .user-phone {
  margin: 0 12px 0 20px;
}
.station-info-pop .map-wrapper {
  margin-top: 20px;
}

.station-name {
  display: inline-block;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
  vertical-align: middle;
}

.station-usecase {
  margin-left: 10px;
}

.schedule-detail-group {
  display: flex;
  justify-content: space-between;
}
.schedule-detail-group .detail-list {
  display: flex;
}
.schedule-detail-group .detail-list .detail-item {
  margin-right: 20px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
}
.schedule-detail-group .detail-list .detail-item :first-child {
  color: rgba(255, 255, 255, 0.4);
  margin-right: 5px;
}

.normal {
  color: rgba(255, 255, 255, 0.4);
}

.accident-form .ant-upload {
  font-size: 24px;
  color: #fff;
}
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/RoadStation/index.scss ***!
  \******************************************************************************************************************************************************************************************************/
.time-line {
  margin-top: 20px;
  height: 104px;
  background: linear-gradient(180deg, #141627, #000000);
  border-radius: 2px;
}
.time-line .list {
  width: 1030px;
  margin: 0 auto;
  padding: 10px 0 7px 0;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  display: flex;
  flex-direction: row;
}
.time-line .item {
  position: relative;
  flex-shrink: 0;
  color: #c8d2ff;
  text-align: center;
  cursor: pointer;
  height: 72px;
}
.time-line .item .plan-route {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: #c8d2ff;
  z-index: 0;
}
.time-line .item .plan-route .actual-route {
  height: 100%;
  width: 100%;
  background: #0066ff;
}
.time-line .item:first-child, .time-line .item:last-child {
  cursor: default;
}
.time-line .item.finished:before {
  background: #0066ff;
}
.time-line .item.staying {
  color: #53aaf4;
}
.time-line .item.staying:before {
  top: 19px;
  background: #0066ff;
}
.time-line .item.staying .dot {
  position: relative;
  z-index: 1;
}
.time-line .item.staying .dot-inner {
  width: 21px;
  height: 21px;
}
.time-line .item.incomplete .time {
  position: absolute;
  left: -35px;
  top: -6px;
}
.time-line .item.incomplete .dot {
  position: relative;
  z-index: 1;
}
.time-line .item.incomplete .dot-inner {
  width: 20px;
  height: 20px;
}
.time-line .item .dot {
  border-radius: 50%;
  margin: 0 auto;
  padding: 7px;
  padding-top: 9px;
  display: inline-block;
}
.time-line .item .dot-inner {
  position: relative;
  z-index: 2;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  margin: 0 auto;
}
.time-line .item .overtime {
  color: #aa1919;
}
.time-line .item .tip {
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.time-line .item .time {
  font-size: 14px;
  height: 20px;
  line-height: 20px;
}
.time-line .item .time img {
  margin-right: 5px;
}
.time-line .item .btn {
  width: 88px;
  height: 28px;
  margin: 10px auto 0;
  line-height: 26px;
  font-size: 14px;
  color: #53aaf4;
  text-align: center;
  border: 1px solid rgb(83, 170, 244);
  border-radius: 4px;
}

.stop_icon_box {
  display: flex;
  justify-content: left;
}
.stop_icon_box .stop_icon {
  min-width: 50px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 2px;
  font-size: 12px;
  font-family: PingFangSC;
  font-weight: normal;
  border: 1px solid rgb(255, 87, 77);
  color: rgb(255, 87, 77);
  padding: 0 4px;
}
.stop_icon_box .icon_start {
  border: 1px solid rgb(20, 186, 183);
  color: rgb(20, 186, 183);
}
.stop_icon_box .icon_pickup {
  border: 1px solid rgb(255, 158, 11);
  color: rgb(255, 158, 11);
}
.stop_icon_box .icon_unloading {
  border: 1px solid rgb(255, 87, 77);
  color: rgb(255, 87, 77);
}
.stop_icon_box .stop_name {
  margin-left: 8px;
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: 500;
  color: rgb(255, 255, 255);
  text-overflow: ellipsis;
  max-width: 200px;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
}

.schedule_detail_box {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  width: 280px;
}
.schedule_detail_box .schedule_time {
  margin-left: 10px;
}

.re-ant-tool-tip .ant-tooltip-content .ant-tooltip-inner {
  width: 280px;
  padding: 12px;
}

.none-roadStation {
  height: 40px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 20px;
}
.none-roadStation img {
  width: 16px;
  margin-right: 5px;
}

.ant-tooltip {
  max-width: 300px !important;
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/RoadStation/stopRoteMap.scss ***!
  \************************************************************************************************************************************************************************************************************/
.stopRoteMap-content {
  margin-top: 20px;
  height: 104px;
  background: linear-gradient(180deg, #141627, #000000);
  border-radius: 2px;
}
.stopRoteMap-content .list {
  margin: 0 auto;
  padding: 10px 0 7px 0;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  display: flex;
  flex-direction: row;
  max-width: 1030px;
}
.stopRoteMap-content .list .item {
  position: relative;
  flex-shrink: 0;
  color: #c8d2ff;
  text-align: center;
  cursor: pointer;
  height: 72px;
}
.stopRoteMap-content .list .item:first-child .plan-route {
  content: "";
  height: 0px;
}
.stopRoteMap-content .list .item:last-child .plan-route {
  left: -50%;
}
.stopRoteMap-content .list .item .plan-route {
  content: "";
  position: absolute;
  top: 16px;
  left: -50%;
  width: 100%;
  height: 1px;
  background: #c8d2ff;
  z-index: 0;
}
.stopRoteMap-content .list .item .plan-route .actual-route {
  height: 100%;
  width: 100%;
  background: #0066ff;
}
.stopRoteMap-content .list .item.finished:before {
  background: #0066ff;
}
.stopRoteMap-content .list .item.incomplete .time {
  position: absolute;
  left: -60px;
  top: -6px;
}
.stopRoteMap-content .list .item.incomplete .plan-route {
  content: "";
  position: absolute;
  top: 16px;
  left: -50%;
  width: 100%;
  height: 1px;
  background: #c8d2ff;
  z-index: 0;
}
.stopRoteMap-content .list .item.incomplete .plan-route .actual-route {
  height: 100%;
  width: 100%;
  background: #0066ff;
}
.stopRoteMap-content .list .item.init .plan-route {
  background: #c8d2ff;
}
.stopRoteMap-content .list .item.init .plan-route .actual-route {
  background: #c8d2ff;
}
.stopRoteMap-content .list .item .dot {
  border-radius: 50%;
  margin: 0 auto;
  padding: 7px;
  padding-top: 9px;
  display: inline-block;
}
.stopRoteMap-content .list .item .dot-inner {
  position: relative;
  z-index: 2;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  margin: 0 auto;
}
.stopRoteMap-content .list .item .overtime {
  color: #aa1919;
}
.stopRoteMap-content .list .item .tip {
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.stopRoteMap-content .list .item .time {
  font-size: 14px;
  height: 20px;
  line-height: 20px;
}
.stopRoteMap-content .list .item .time img {
  margin-right: 5px;
}
.stopRoteMap-content .list .item .btn {
  width: 88px;
  height: 28px;
  margin: 10px auto 0;
  line-height: 26px;
  font-size: 14px;
  color: #53aaf4;
  text-align: center;
  border: 1px solid rgb(83, 170, 244);
  border-radius: 4px;
}
/*!***************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/TimeLine/index.scss ***!
  \***************************************************************************************************************************************************************************************************/
.time-bar-wrapper {
  margin-left: 30px;
  max-height: 600px;
  overflow-y: auto;
}

.time-bar-item {
  display: flex;
  color: rgba(255, 255, 255, 0.8);
}
.time-bar-item .high-light {
  color: rgb(255, 255, 255);
}
.time-bar-item .info-content {
  flex: 1;
  margin-top: -5px;
  margin-left: 8px;
  padding-bottom: 16px;
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: normal;
}

.icon-wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.icon-wrapper .circle-point,
.icon-wrapper .circle-point-key {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  margin-bottom: 2px;
}
.icon-wrapper .circle-point-key {
  background-color: #03a2ff;
}
.icon-wrapper .border-image {
  flex: 1;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  margin: 2px 0;
}
/*!***************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/SingleView/components/WorkOrderRecord/index.scss ***!
  \***************************************************************************************************************************************************************************************************************************/
.work-order-record-wrapper {
  background: rgb(27, 32, 56);
  border-radius: 2px;
  padding: 16px 16px 0px 10px;
  position: relative;
}
.work-order-record-wrapper .work-order-record-table .ant-table .ant-table-cell:first-child {
  border: none;
}
.work-order-record-wrapper .work-order-record-table .ant-table .ant-table-thead .ant-table-row-expand-icon-cell {
  background-color: transparent !important;
}
.work-order-record-wrapper .work-order-sum {
  width: 100%;
  background: rgb(27, 32, 56);
  border-radius: 0 0 2px 2px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.16);
  height: 53px;
  color: rgb(152, 152, 157);
  padding: 18px 16px;
}
/*!***********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/SingleView/components/EventRecord/index.scss ***!
  \***********************************************************************************************************************************************************************************************************************/
.event-record-wrapper {
  background: rgb(27, 32, 56);
  border-radius: 2px;
  padding: 16px 16px 0px 10px;
}
/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/SingleView/components/ManualEventRecord/index.scss ***!
  \*****************************************************************************************************************************************************************************************************************************/
.manual-event-record-wrapper {
  background: rgb(27, 32, 56);
  border-radius: 2px;
  padding: 16px 16px 0px 10px;
}
/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/SingleView/single.scss ***!
  \*************************************************************************************************************************************************************************************************/
.single-vehicle-monitor-page {
  height: 100%;
  height: calc(100vh - 60px);
}
.single-vehicle-monitor-page #WebGL-output {
  background: #000;
}
.single-vehicle-monitor-page .map-view {
  width: 100%;
  height: calc(100% - 210px);
  background-size: 100% 100%;
  display: flex;
  flex-flow: column;
}
.single-vehicle-monitor-page .map-view .tab-container {
  flex: 1;
  max-height: calc(100% - 12px);
  position: relative;
  overflow-y: auto;
}
.single-vehicle-monitor-page .cars-nums {
  position: relative;
  font-size: 20px;
  color: #c8d2ff;
}
.single-vehicle-monitor-page .cars-nums .car-status-num {
  margin-right: 27px;
}
.single-vehicle-monitor-page .cars-nums::before {
  content: "";
  display: inline-block;
  margin-right: 12px;
  width: 3px;
  height: 16px;
  position: relative;
  top: 1px;
  background: #0066ff;
}
.single-vehicle-monitor-page .cars-nums .copy-btn {
  display: inline-block;
  margin-left: 12px;
  width: 22px;
  height: 22px;
  background: url(../images/copy.e9a91367af077c07ff8e37784750fe86.png) no-repeat center;
  background-size: contain;
  cursor: pointer;
}
.single-vehicle-monitor-page .monitor-container {
  position: relative;
  width: 100%;
  height: 96%;
  background: rgba(0, 33, 116, 0.2);
}
.single-vehicle-monitor-page .monitor-container #route-map {
  height: 100%;
}
.single-vehicle-monitor-page .monitor-container .tools {
  position: absolute;
  left: 12px;
  bottom: 12px;
  overflow: hidden;
  display: flex;
  height: 56px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.5);
}
.single-vehicle-monitor-page .monitor-container .tools .item {
  width: 52px;
  height: 32px;
  margin-top: 13px;
  list-style: none;
  background-size: contain;
  box-sizing: border-box;
}
.single-vehicle-monitor-page .monitor-container .tools .mapMode {
  background: url(../images/map.7b586a55bb00f4b8c0608cef53ba3bae.png) center no-repeat;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.single-vehicle-monitor-page .monitor-container .tools .mapMode.active {
  background: url(../images/map_active.56bdfd799ae339f6d01838f783e83525.png) center no-repeat;
}
.single-vehicle-monitor-page .monitor-container .tools .angle_p {
  background: url(../images/p.82b06e437ddcd55ad344399e9846f0df.png) center no-repeat;
}
.single-vehicle-monitor-page .monitor-container .tools .angle_p.active {
  background: url(../images/p_active.df58490015adceac8061e9bc57b53e5e.png) center no-repeat;
}
.single-vehicle-monitor-page .monitor-container .tools .angle_t {
  background: url(../images/t.7243978b48f258a85fa677587b874dbd.png) center no-repeat;
}
.single-vehicle-monitor-page .monitor-container .tools .angle_t.active {
  background: url(../images/t_active.d6bfab3b4984395e9246202cf1a750c5.png) center no-repeat;
}
.single-vehicle-monitor-page .monitor-container .tools .angle_f {
  background: url(../images/f.89048002cf5448685d355d751ef61e06.png) center no-repeat;
}
.single-vehicle-monitor-page .monitor-container .tools .angle_f.active {
  background: url(../images/f_active.8bb81e2414d5de1804428e051fb341c1.png) center no-repeat;
}
.single-vehicle-monitor-page .monitor-container .tools .threeMode {
  background: url(../images/3Dicon_active.43326351ac405f68e997592a4f9e32f3.png) center no-repeat;
}
.single-vehicle-monitor-page .content-wrapper {
  display: flex;
  height: 100%;
}
.single-vehicle-monitor-page .left-container {
  flex: 0 0 19.5%;
  height: 100%;
  background: rgb(27, 32, 56);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
}
.single-vehicle-monitor-page .video-container {
  height: 100%;
}
.single-vehicle-monitor-page .middle-container {
  flex: 0 0 59.5%;
  padding: 0 20px;
  background-color: #000;
}
.single-vehicle-monitor-page .top-tabs-container {
  width: 100%;
  height: 40px;
  background: linear-gradient(270deg, rgb(0, 0, 0) 0%, rgb(20, 27, 67) 100%);
  border: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 16px;
}
.single-vehicle-monitor-page .top-tabs-container .tab-container {
  width: 88px;
  cursor: pointer;
  height: 40px;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.single-vehicle-monitor-page .top-tabs-container .tab-container .tab-label,
.single-vehicle-monitor-page .top-tabs-container .tab-container .tab-label-active {
  margin-bottom: 5px;
}
.single-vehicle-monitor-page .top-tabs-container .tab-container .tab-label-active {
  color: #00a2ff;
}
.single-vehicle-monitor-page .top-tabs-container .tab-container .tab-ink-active {
  width: 64px;
  height: 4px;
  background: rgba(13, 133, 255, 0.6);
}
.single-vehicle-monitor-page .top-tabs-container .tab-container-active {
  cursor: pointer;
  background: linear-gradient(0deg, rgba(13, 133, 255, 0.3) 0%, rgba(51, 128, 254, 0) 100%);
}
.single-vehicle-monitor-page .right-container {
  width: 21%;
  height: 100%;
  position: relative;
}
.single-vehicle-monitor-page .right-container .tabs-view {
  margin: 16px auto 0;
}
.single-vehicle-monitor-page #three-mode {
  display: none;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/MemoryMonitor/index.scss ***!
  \********************************************************************************************************************************************************************************************************/
.memory-monitor {
  position: fixed;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 4px;
  font-size: 12px;
  font-family: monospace;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  user-select: none;
  cursor: pointer;
  width: 120px;
}
.memory-monitor.top-left {
  top: 10px;
  left: 10px;
}
.memory-monitor.top-right {
  top: 10px;
  right: 10px;
}
.memory-monitor.bottom-left {
  bottom: 10px;
  left: 10px;
}
.memory-monitor.bottom-right {
  bottom: 10px;
  right: 10px;
}
.memory-monitor.collapsed {
  opacity: 0.7;
}
.memory-monitor.collapsed:hover {
  opacity: 1;
}
.memory-monitor.expanded {
  opacity: 1;
  width: 180px;
}
.memory-monitor .memory-monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.memory-monitor .memory-monitor-title {
  font-weight: bold;
}
.memory-monitor .memory-monitor-percentage.normal {
  color: #4caf50;
}
.memory-monitor .memory-monitor-percentage.warning {
  color: #ff9800;
}
.memory-monitor .memory-monitor-percentage.critical {
  color: #f44336;
}
.memory-monitor .memory-monitor-details {
  padding: 8px 10px;
}
.memory-monitor .memory-monitor-detail {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 11px;
}
.memory-monitor .memory-monitor-progress {
  height: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.memory-monitor .memory-monitor-progress .memory-monitor-progress-bar {
  height: 100%;
  transition: width 0.5s ease;
}
.memory-monitor .memory-monitor-progress .memory-monitor-progress-bar.normal {
  background-color: #4caf50;
}
.memory-monitor .memory-monitor-progress .memory-monitor-progress-bar.warning {
  background-color: #ff9800;
}
.memory-monitor .memory-monitor-progress .memory-monitor-progress-bar.critical {
  background-color: #f44336;
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/MemoryMonitor/MemoryDashboard.scss ***!
  \******************************************************************************************************************************************************************************************************************/
.memory-dashboard {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  width: 80%;
  max-width: 1000px;
  max-height: 80vh;
  overflow: auto;
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.memory-dashboard .ant-card {
  width: 100%;
  height: 100%;
}
.memory-dashboard .dashboard-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.memory-dashboard .ant-statistic-title {
  font-size: 14px;
}
.memory-dashboard .ant-statistic-content {
  font-size: 20px;
}
/*!*************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/ChooseCockpit/components/SelectMode/index.scss ***!
  \*************************************************************************************************************************************************************************************************************************/
.cockpit-mode-select {
  font-size: 16px;
  font-family: PingFang SC;
  color: rgb(255, 255, 255);
  width: 178px;
  height: 48px;
  border: 1px solid rgb(180, 181, 189);
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
  padding-left: 16px;
  position: relative;
  z-index: 90;
  cursor: pointer;
}
.cockpit-mode-select.click {
  border: 2px solid rgba(0, 162, 255, 0.2);
}
.cockpit-mode-select span {
  font-weight: normal;
  line-height: 48px;
}
.cockpit-mode-select .icon {
  width: 48px;
  height: 46px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  justify-content: center;
  align-items: center;
}
.cockpit-mode-select .icon img {
  width: 16px;
  height: 16px;
}
.cockpit-mode-select .dropdown-list {
  position: absolute;
  border-radius: 2px;
}
.cockpit-mode-select .dropdown-list.up {
  left: 0px;
  bottom: 48px;
}
.cockpit-mode-select .dropdown-list.down {
  left: 0px;
  top: 48px;
}
.cockpit-mode-select .dropdown-list .option {
  cursor: pointer;
  padding-left: 16px;
  width: 177px;
  height: 48px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgb(255, 255, 255);
  background-color: #2e334d;
  line-height: 48px;
}
.cockpit-mode-select .dropdown-list .option:hover {
  background-color: #24283d;
  color: rgb(0, 162, 255);
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/CockpitBoardHeader/index.scss ***!
  \*************************************************************************************************************************************************************************************************************/
.cockpit-board-header {
  display: flex;
  width: 100%;
  height: 109px;
  border-radius: 4px;
}
.cockpit-board-header .cockpit-board-conatiner {
  width: 50%;
  display: flex;
  padding-left: 24px;
}

.vertical-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200px;
}
.vertical-container .label {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
}
.vertical-container .value {
  font-size: 30px;
  font-family: JDZhengHT;
  font-weight: normal;
  color: rgb(255, 255, 255);
}

.avatar-conatiner {
  width: 300px;
  display: flex;
  align-items: center;
  position: relative;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgb(255, 255, 255);
}
.avatar-conatiner img {
  width: 72px;
  height: 72px;
}
.avatar-conatiner .icon {
  position: absolute;
  bottom: 13px;
  left: 16px;
  width: 40px;
  height: 20px;
  background: rgb(27, 32, 56);
  border: 1px solid rgb(105, 123, 163);
  border-radius: 10px;
  text-align: center;
  font-size: 12px;
}
.avatar-conatiner .title {
  margin-left: 24px;
  font-size: 18px;
}
/*!*************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/layouts/MainLayout/components/SwitchBoard/index.scss ***!
  \*************************************************************************************************************************************************************************************************************************/
.switch-cockpit-board {
  width: 766px;
  height: 323px;
  color: #ffffff;
  top: 60px;
  right: 40px;
  position: absolute;
  background: rgb(46, 51, 77);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
.switch-cockpit-board .header {
  height: 87px;
  background: rgba(10, 13, 26, 0.2);
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
  padding: 20px 22px 19px 41px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
}
.switch-cockpit-board .header .select-mode {
  display: flex;
  align-items: center;
}
.switch-cockpit-board .header .quit-cockpit {
  width: 120px;
  height: 40px;
  background: linear-gradient(180deg, rgb(56, 80, 235) 0%, rgb(13, 133, 255) 100%) !important;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  color: rgb(255, 255, 255) !important;
}
.switch-cockpit-board .cockpit-info-container {
  height: 236px;
}
.switch-cockpit-board .cockpit-info-container .dividing-line {
  width: 722px;
  height: 1px;
  margin-left: 22px;
  background: rgb(27, 32, 56);
}
.switch-cockpit-board .cockpit-info-container .info {
  height: 117px;
  padding-left: 22px;
  display: flex;
  align-items: center;
}
.switch-cockpit-board .cockpit-info-container .info .icon {
  width: 44px;
  height: 20px;
  background: rgb(27, 32, 56);
  border: 1px solid rgb(105, 123, 163);
  border-radius: 20px;
  font-size: 14px;
  font-family: PingFang SC;
  text-align: center;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  padding: 2px 4px;
  display: block;
  line-height: 22px;
  margin: 9px 0px;
}
.switch-cockpit-board .cockpit-info-container .info .avatar-conatiner {
  width: 66px;
  margin-right: 24px;
}
.switch-cockpit-board .cockpit-info-container .info .change-status-btn {
  width: 295px;
  height: 81px;
  position: relative;
  background: rgb(27, 32, 56);
  border: 1px solid;
  box-shadow: linear-gradient(180deg, rgb(11, 140, 244) 0%, rgb(56, 80, 235) 100%) 1 1;
  border-radius: 4px;
  margin-right: 22px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 16px;
  padding-right: 4px;
}
.switch-cockpit-board .cockpit-info-container .info .change-status-btn::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 4px;
  padding: 1px;
  background: linear-gradient(180deg, rgb(11, 140, 244) 0%, rgb(56, 80, 235) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.switch-cockpit-board .cockpit-info-container .info .change-status-btn .left {
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.switch-cockpit-board .cockpit-info-container .info .change-status-btn .work-time {
  height: 37px;
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgb(0, 162, 255);
}
.switch-cockpit-board .cockpit-info-container .info .change-status-btn .work-time.rest {
  color: rgba(255, 255, 255, 0.8);
}
.switch-cockpit-board .cockpit-info-container .info .change-status-btn .right {
  width: 73px;
  height: 73px;
  background: linear-gradient(180deg, rgb(56, 80, 235) 0%, rgb(13, 133, 255) 100%);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgb(255, 255, 255);
}
.switch-cockpit-board .cockpit-info-container .info .change-status-btn .right.widen {
  width: 104px;
}
.switch-cockpit-board .cockpit-info-container .info .change-status-btn .right:hover {
  cursor: pointer;
}
.switch-cockpit-board .cockpit-info-container .info .change-status-btn .right .btn-icon {
  margin-top: 10px;
  width: 29px;
  height: 29px;
}
.switch-cockpit-board .cockpit-info-container .info .change-status-btn .right .btn-icon.work {
  background: url(../images/unhover_work.3c957d49c1261744b61eeada4b2da1f0.png) no-repeat center;
  background-size: contain;
}
.switch-cockpit-board .cockpit-info-container .info .change-status-btn .right .btn-icon.work.isHover {
  background: url(../images/hover_work.a35a1bea63b55e78931fc646c7016669.png) no-repeat center;
  background-size: contain;
}
.switch-cockpit-board .cockpit-info-container .info .change-status-btn .right .btn-icon.rest {
  background: url(../images/unhover_rest.892df6fa0470502748ce6eca57f2323a.png) no-repeat center;
  background-size: contain;
}
.switch-cockpit-board .cockpit-info-container .info .change-status-btn .right .btn-icon.rest.isHover {
  background: url(../images/hover_rest.f26a3b9f5e86bcaf88ddca78eba68c97.png) no-repeat center;
  background-size: contain;
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/layouts/MainLayout/index.scss ***!
  \**************************************************************************************************************************************************************************************************/
.jd-warter-mark {
  height: 100%;
  width: 100%;
}

.page-header {
  display: flex;
  width: 100vw;
  height: 60px;
  background: linear-gradient(180deg, rgba(13, 133, 255, 0.2) 0%, rgba(56, 80, 235, 0.2) 100%), linear-gradient(rgb(10, 13, 26), rgb(10, 13, 26));
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
}
.page-header .logo {
  width: 16.5%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 12px;
}
.page-header .logo .logo-icon {
  width: 191px;
  height: 34px;
  background: url(../images/logo.c65fa9eb7bcbeb44cabbfc057144c64b.png) no-repeat center;
  background-size: 100%;
}
.page-header .header-nav {
  display: flex;
  color: #fff;
  align-items: center;
  flex: 1;
}
.page-header .header-nav .nav-item-btn {
  width: 96px;
  height: 60px;
  opacity: 0.6;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}
.page-header .header-nav .nav-item-btn.isActive {
  background: url(../images/tab-btn_bg.25711b464bbc31a19aebbdcdf58fa948.png) no-repeat center;
  background-size: contain;
}
.page-header .header-nav .nav-item-btn.hidden {
  display: none;
}
.page-header .dropdown-link {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgb(255, 255, 255);
  cursor: pointer;
  margin-right: 10px;
}
.page-header .dropdown-link img {
  width: 30px;
  height: 30px;
}
.page-header .dropdown-link .user-name {
  margin-left: 10px;
}
.page-header .dropdown-link .down-icon svg {
  width: 12px;
  height: 12px;
  color: rgb(255, 255, 255);
  margin: 0 20px 0 8px;
}
.page-header .loginOut-remoteControl {
  position: absolute;
  right: 20px;
  font-size: 14px;
  padding: 4px 13px;
}
.page-header .loginOut-remoteControl img {
  width: 24px;
  height: 24px;
}
.page-header .change-cockpit-btn {
  margin-right: 29px;
  width: 120px;
  height: 32px;
  background: linear-gradient(180deg, rgb(56, 80, 235) 0%, rgb(13, 133, 255) 100%);
  border-radius: 2px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.page-header .change-cockpit-btn .btn-icon {
  background: url(../images/cockpit_btn_icon.8d768fe8da5df980683e7bece4a7f092.png) no-repeat center;
  background-size: contain;
  width: 48px;
  height: 32px;
}
.page-header .change-cockpit-btn span {
  width: 64px;
  display: block;
  text-align: center;
}
.page-header .cockpitmode-header {
  height: 34px;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 24px;
}
.page-header .cockpitmode-header .mode-header-icon {
  width: 34px;
  height: 34px;
  background: url(../images/cockpit_header_icon.6e80b209ebc794d9d3b0c8a2a1712b59.png) no-repeat center;
  background-size: contain;
}
.page-header .cockpitmode-header .cockpit-number {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgb(255, 255, 255);
  margin-left: 6px;
  margin-right: 3px;
}
.page-header .cockpitmode-header .cockpit-status-tag {
  width: 54px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  opacity: 12;
  line-height: 20px;
  text-align: center;
}
.page-header .cockpitmode-header .cockpit-status-tag.work {
  background: rgba(20, 186, 183, 0.12);
}
.page-header .cockpitmode-header .cockpit-status-tag .cockpit-status-icon {
  width: 6px;
  height: 6px;
  background: rgb(255, 255, 255);
  opacity: 80;
  border-radius: 50%;
  display: inline-block;
  margin-right: 2px;
  margin-bottom: 2px;
}
.page-header .cockpitmode-header .cockpit-status-tag .cockpit-status-icon.work {
  background: rgb(20, 186, 183);
}
.page-header .cockpitmode-header .cockpit-status-tag .cockpit-status {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
}
.page-header .cockpitmode-header .cockpit-status-tag .cockpit-status.work {
  color: rgb(20, 186, 183);
}

.main-content {
  width: 100%;
  height: calc(100% - 60px);
  background-color: #0a0d1a;
  overflow-y: auto;
}

.right-flow-box {
  position: fixed;
  height: calc(100% - 60px);
  overflow-y: auto;
  overflow: visible;
  right: -10px;
  bottom: 0;
  background: #0a0d1a;
  z-index: 99;
}
.right-flow-box .left-collapse-btn {
  left: -10px;
  transform: rotate(-180deg);
}

.flow-suspended-btn {
  display: block;
  position: fixed;
  z-index: 10;
  top: 30%;
  right: 10px;
  width: 44px;
  background: rgba(38, 43, 64, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2px 0 0 2px;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.5);
}
.flow-suspended-btn .expand-icon {
  text-align: center;
}
.flow-suspended-btn .expand-icon i {
  display: inline-block;
  margin: 11px auto;
  width: 12px;
  height: 12px;
  background: url(../images/collapse.d0464f78e5410470cd18128706987b12.png) no-repeat center;
  background-size: contain;
}
.flow-suspended-btn .icon-box {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: center;
  font-size: 12px;
  font-family: PingFangSC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.6);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
.flow-suspended-btn .icon-box i {
  display: block;
  margin: 8px 0;
  width: 16px;
  height: 16px;
}
.flow-suspended-btn .icon-box .small-bell {
  background: url(../images/bell.972bba2189895d5389e3791dd8a2eda6.png) no-repeat center;
  background-size: contain;
}
.flow-suspended-btn .icon-box .alarm-num {
  position: absolute;
  top: -8px;
  right: 0;
  width: auto;
  min-width: 16px;
  max-width: 50px;
  height: 16px;
  background: rgb(255, 70, 58);
  border: 1px solid rgba(255, 255, 255, 0.29);
  border-radius: 8px;
  text-align: center;
  line-height: 12px;
  font-size: 12px;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
  visibility: hidden;
}
.flow-suspended-btn .icon-box .alarm-num.showRedIcon {
  visibility: visible;
}
.flow-suspended-btn .icon-box .work-order {
  width: 28px;
  height: 28px;
  background: url(../images/work_order_icon.a4208ed28f329b3548d69ed5251ec7d6.png) no-repeat center;
  background-size: contain;
}

.m-app .layout {
  width: 1920px !important;
  height: 1080px !important;
  overflow: auto;
}

.alarm-event-list {
  height: calc(100% - 100px);
  overflow-y: auto;
  padding-bottom: 20px;
}
.alarm-event-list .ant-collapse-borderless {
  background-color: transparent;
}
.alarm-event-list .ant-collapse-borderless > .ant-collapse-item {
  border: none;
}
.alarm-event-list .ant-collapse > .ant-collapse-item > .ant-collapse-header {
  color: #fff;
  width: 200px;
  height: 39px;
  background: linear-gradient(90.29deg, rgba(13, 133, 255, 0.6) 0%, rgba(51, 128, 254, 0.59) 0%, rgba(51, 128, 254, 0) 100%, rgba(51, 128, 254, 0) 100%);
  box-sizing: border-box;
  padding: 8px;
}
.alarm-event-list .ant-collapse > .ant-collapse-item > .ant-collapse-content {
  margin-bottom: 10px;
}
.alarm-event-list .ant-collapse-content-box {
  padding: 0;
}
.alarm-event-list .ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
  padding: 0;
}

.issue-event-list {
  height: calc(100vh - 180px);
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: 20px;
  margin-bottom: 6px;
}

.message-card {
  width: 360px;
  height: 126px;
  position: fixed;
  right: 24px;
  background: linear-gradient(90deg, rgb(39, 48, 101) 0%, rgb(27, 32, 56) 100%);
  border-radius: 4px;
  padding-top: 12px;
  padding-left: 40px;
  z-index: 9999;
}
.message-card.first {
  top: 83px;
}
.message-card.second {
  top: 240px;
}
.message-card .icon {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 62px;
  height: 62px;
}
.message-card .title {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgb(255, 255, 255);
  margin-bottom: 8px;
}
.message-card .msg-content {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
}
.message-card .bottom-handle-btns {
  margin-top: 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: end;
}
.message-card .bottom-handle-btns button {
  margin-right: 16px;
}

.switch-container {
  border-radius: 4px;
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2);
  background: rgb(46, 51, 77);
}
.switch-container .logout-btn {
  padding-left: 12px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/layouts/MainLayout/components/WorkOrderDrawer/index.scss ***!
  \*****************************************************************************************************************************************************************************************************************************/
.workorder-drawer-container {
  height: 100%;
}
.workorder-drawer-container .workorder-drawer-title {
  height: 52px;
  background: linear-gradient(90deg, rgba(13, 133, 255, 0.2) 0%, rgba(0, 162, 255, 0.1) 100%), linear-gradient(rgb(27, 32, 56), rgb(27, 32, 56));
  padding-left: 12px;
  line-height: 52px;
  display: flex;
}
.workorder-drawer-container .workorder-drawer-title .title-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url(../images/work_order_icon.a4208ed28f329b3548d69ed5251ec7d6.png) no-repeat center;
  background-size: contain;
  margin-right: 5px;
  margin-top: 12px;
}
.workorder-drawer-container .workorder-drawer-title span {
  display: inline-block;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
}
.workorder-drawer-container .workorder-drawer-content {
  background: #1a2441;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  height: calc(100% - 52px);
  padding: 1px 14px 16px 12px;
  overflow-y: scroll;
}
.workorder-drawer-container .workorder-drawer-content .no-workorder {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  padding-top: 200px;
}
.workorder-drawer-container .workorder-drawer-content .no-workorder .no-workorder-icon {
  display: inline-block;
  width: 116px;
  height: 100px;
  background: url(../images/no_workorder_icon.0f0bc49bf6eb0a15c0a126c0ed852641.png) no-repeat center;
  background-size: contain;
}
.workorder-drawer-container .workorder-drawer-content .no-workorder span {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.4);
}
/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/layouts/MainLayout/components/WorkOrderDrawer/WorkOrderCardUI.scss ***!
  \***************************************************************************************************************************************************************************************************************************************/
.work-order-card-container {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  margin-top: 16px;
}
.work-order-card-container .vehicle-name-container {
  height: 30px;
  display: flex;
  justify-content: space-between;
  background: linear-gradient(90deg, rgb(50, 62, 125) 0%, rgb(10, 13, 26) 100%);
  border-image: linear-gradient(176.74deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) 1 1;
  border-radius: 2px 0 0 0;
  padding-left: 12px;
  line-height: 30px;
}
.work-order-card-container .vehicle-name-container.redbg {
  background: linear-gradient(90deg, rgba(255, 70, 58, 0.4) 0%, rgb(10, 13, 26) 100%), linear-gradient(rgb(5, 9, 26), rgb(5, 9, 26));
  border: 1px solid;
  border-image: linear-gradient(179.18deg, rgb(255, 70, 58) 0%, rgba(249, 69, 57, 0) 100%) 1 1;
  border-radius: 2px 0 0 2px;
}
.work-order-card-container .vehicle-name-container .hasten-icon,
.work-order-card-container .vehicle-name-container .report-reminder-icon {
  margin-left: 9px;
  width: 44px;
  height: 26px;
}
.work-order-card-container .vehicle-name-container .report-reminder-icon {
  width: 56px;
}
.work-order-card-container .vehicle-name-container .vehicle-name {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
.work-order-card-container .vehicle-name-container .station-name {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  padding-left: 5px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 36px;
  max-width: 122px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.work-order-card-container .work-order-info-container {
  padding: 12px 12px 0px 12px;
}
.work-order-card-container .bottom-btns {
  margin-top: 12px;
  display: flex;
  justify-content: end;
  margin-bottom: 12px;
}
.work-order-card-container .bottom-btns button {
  margin-right: 12px;
}
.work-order-card-container .card-bottom-btn {
  margin: auto;
  cursor: pointer;
  width: 78px;
  height: 0;
  border-width: 0 12px 20px 12px;
  border-style: none solid solid;
  border-color: transparent transparent rgb(46, 51, 77);
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  padding-left: 4px;
}
.work-order-card-container .card-bottom-btn img {
  width: 20px;
  height: 20px;
}

.work-order-card-field {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
}
.work-order-card-field .label {
  color: rgba(255, 255, 255, 0.4);
  margin-right: 8px;
}
.work-order-card-field .value {
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 8px;
}

.work-order-record {
  background: rgb(10, 13, 26);
  width: 328px;
  max-height: 92px;
  padding: 12px;
  overflow-y: scroll;
  margin-top: 12px;
  margin-bottom: 12px;
}
.work-order-record .record {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
}
.work-order-record .record .icon {
  width: 5px;
  height: 5px;
  display: inline-block;
  background: url(../images/record-icon.d74086d2aac78792e477ef6acfe4615d.png) no-repeat center;
  background-size: contain;
  position: relative;
  top: -2px;
}
.work-order-record .record .time {
  margin-left: 5px;
  color: rgba(255, 255, 255, 0.4);
}
.work-order-record .record .msg {
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.8);
}
.work-order-record .record .connect {
  margin-left: 2px;
  width: 1px;
  height: 26px;
  border: 0;
  border-left: 1px dotted rgb(52, 52, 62);
}
/*!**********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/IssueStatusIcon/index.scss ***!
  \**********************************************************************************************************************************************************************************************************/
.issue-type-icon {
  height: 30px;
  text-align: center;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: normal;
}
.issue-type-icon span {
  margin-right: -12px;
}
.issue-type-icon.short-green {
  background: url(../images/issue_status_green_short.fdc94ab1b1d6f7d1e3138a90ab79fc22.png) center no-repeat;
  background-size: 70px 30px;
  width: 70px;
  color: rgb(20, 186, 183);
}
.issue-type-icon.long-green {
  background: url(../images/issue_status_green_long.67caaa1a79c5b50c0a476ce8b2231ffd.png) center no-repeat;
  background-size: 90px 30px;
  width: 90px;
  color: rgb(20, 186, 183);
}
.issue-type-icon.blue {
  background: url(../images/issue_status_blue.1e42c975d8833dcfdc75b636335cb583.png) center no-repeat;
  background-size: 70px 30px;
  width: 70px;
  color: rgb(13, 133, 255);
}
.issue-type-icon.yellow {
  background: url(../images/issue_status_yellow.0b2a0638b0c6ae6396e165e0bd0cc7ca.png) center no-repeat;
  background-size: 70px 30px;
  width: 70px;
  color: rgb(255, 158, 11);
}
.issue-type-icon.red {
  background: url(../images/issue_type_urgent.f20378695f1c29f87033f4c03500596b.png) center no-repeat;
  background-size: 80px 30px;
  width: 80px;
  color: rgb(255, 87, 77);
}
/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/layouts/MainLayout/components/WorkOrderDrawer/IssueVideo.scss ***!
  \**********************************************************************************************************************************************************************************************************************************/
.issue-video-box {
  width: 100%;
  height: 100%;
  justify-content: center;
  background-color: #000;
  position: relative;
  display: flex;
}
.issue-video-box > div {
  width: 100%;
  height: 100%;
}
.issue-video-box .mask-wrapper {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}
.issue-video-box .delay-time {
  display: none;
  height: 24px;
  min-width: 150px;
  position: absolute;
  top: 2px;
  left: 50%;
  margin-left: -75px;
  font-family: PingFangSC;
  font-size: 14px;
  color: #ff574d;
  line-height: 24px;
  border-radius: 2px;
  padding: 2px 5px;
}
.issue-video-box .delay-time img {
  width: 12px;
  margin-right: 6px;
}
.issue-video-box .direction {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: rgb(0, 0, 0);
  border-radius: 2px;
  opacity: 60;
  line-height: 24px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgb(255, 255, 255);
}
.issue-video-box .glass-box {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 24px;
  height: 24px;
  text-align: center;
  padding: 3px;
  background: rgb(0, 0, 0);
  border-radius: 2px;
  opacity: 0.8;
}
.issue-video-box .glass-box:active, .issue-video-box .glass-box:hover {
  cursor: pointer;
}
.issue-video-box .glass-box img {
  width: 12px;
}

.rtc_media_player {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.message-tip-area {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}
.message-tip-area span {
  font-size: 16px;
}
.message-tip-area .close-pop-btn {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 10px;
}
.message-tip-area .camera {
  width: 79px;
  height: 70px;
}
.message-tip-area .open-msg {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 10px;
}

.issue-video-modal canvas {
  border: 1px solid rgb(20, 54, 143);
}
.issue-video-modal .ant-modal-body {
  padding: 0 !important;
  position: relative;
}
.issue-video-modal .ant-modal-header {
  background: #14368f;
  color: #fff;
}
.issue-video-modal .ant-modal-header .ant-modal-title {
  color: #fff;
}
.issue-video-modal .anticon svg {
  color: #fff;
}
.issue-video-modal .delay-time {
  display: none;
  height: 24px;
  min-width: 150px;
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -75px;
  font-family: PingFangSC;
  font-size: 14px;
  color: #ff574d;
  line-height: 24px;
  border-radius: 2px;
  padding: 2px 5px;
}
.issue-video-modal .delay-time img {
  width: 12px;
  margin-right: 6px;
}

.issue-video-btn-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.issue-video-btn-container .four-way-btn-container {
  width: 98px;
  height: 24px;
  background: rgb(3, 4, 13);
  border: 1px solid rgb(54, 57, 77);
  border-radius: 2px;
  display: flex;
  padding-left: 2px;
  justify-content: center;
  align-items: center;
}
.issue-video-btn-container .four-way-btn-container .four-way-btn {
  cursor: pointer;
  text-align: center;
  width: 22px;
  height: 20px;
  background: linear-gradient(180deg, rgb(13, 41, 86) 0%, rgb(28, 36, 68) 100%);
  border-radius: 1px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  margin-right: 2px;
}
.issue-video-btn-container .four-way-btn-container .four-way-btn.select {
  background: linear-gradient(180deg, rgb(13, 133, 255) 0%, rgb(56, 80, 235) 100%);
  font-weight: 500;
  color: rgb(255, 255, 255);
}
.issue-video-btn-container .play-btn,
.issue-video-btn-container .stop-btn {
  width: 32px;
  height: 32px;
  margin-left: 5px;
  background: url(../images/ico-stop.aed03193caa06e58a6deab98c2daa54e.png) center no-repeat;
  background-size: 28px 28px;
  cursor: pointer;
}
.issue-video-btn-container .stop-btn {
  background: url(../images/ico-play.7835e177f45b646c6d5ffb88540a45e6.png) center no-repeat;
  background-size: 28px 28px;
}

.issue-video-container {
  width: 328px;
  height: 216px;
  text-align: center;
  margin-bottom: 12px;
}
.issue-video-container .default-message {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1b2038;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: rgb(200, 210, 255);
  user-select: none;
  flex-direction: column;
}
.issue-video-container .default-message .camera {
  width: 99px;
  height: 88px;
}
.issue-video-container .default-message .camera-btn {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 16px;
}
.issue-video-container .default-message .camera-btn:hover {
  color: #40a9ff;
}
/*!***************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/RemoteControl/index.scss ***!
  \***************************************************************************************************************************************************************************************************/
.control-view {
  width: 100%;
  max-width: 1920px;
  height: 100%;
  box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.08);
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
.control-view .no-all-direction {
  margin-top: 30px;
}
.control-view .vehicle {
  position: absolute;
  right: 9%;
  top: 33%;
  width: 26.8%;
  height: 39.8%;
  background: url(../images/enable-bg.7bb232c063e86a07b7a134ac981a3d4e.png) no-repeat center;
  background-size: 100% 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.control-view .config-btn {
  width: 95px;
  height: 36px;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 6px;
  background: #163892;
  cursor: pointer;
  position: fixed;
}
.control-view .video-content {
  width: 81.6%;
  display: flex;
  justify-content: left;
  flex-flow: row wrap;
  height: 62%;
  margin: 0 auto;
}
.control-view .video-content .item {
  width: 33.3%;
  position: relative;
  height: 50%;
}
.control-view .video-content .item .remote-video {
  height: 100%;
}
.control-view .video-content .item:last-child {
  left: 33.3%;
}
.control-view .map-3d {
  position: absolute;
  left: 75px;
  top: 33%;
  width: 32%;
  height: 66%;
}
.control-view .map-3d .monitor {
  height: 100%;
  width: 100%;
}
.control-view .video-wrapper {
  width: 1592px;
  height: 648px;
  background: url(../images/video-bg.c9c864b31dbcfb8ef241b23ff59df0e4.jpeg) no-repeat center;
  background-size: contain;
  margin: 0 auto;
}
.control-view .remote-call {
  position: absolute;
  right: 24%;
  bottom: 10%;
}

.contorl-confirm-Modal .ant-modal-confirm-content {
  color: #fff !important;
}

.error-page-modal .ant-modal-confirm-body .ant-modal-confirm-title {
  color: #fff;
}
/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/RemoteControl/components/AngleDashboard/index.scss ***!
  \*****************************************************************************************************************************************************************************************************************************/
.angle-dashboard {
  width: 199px;
  height: 100%;
  margin-left: 67px;
  position: relative;
  top: calc(50% - 120px);
}
.angle-dashboard .angle-dashboard-icon {
  display: block;
  width: 199px;
  height: 199px;
  background: url(../images/angle-board.2d8daf5cc2e1ee60973e559d092f385e.png) no-repeat center;
  background-size: contain;
  position: absolute;
}
.angle-dashboard .angle-direction {
  position: absolute;
  z-index: 2;
  width: 90px;
  height: 80px;
  left: calc(50% - 45px);
  top: 70px;
}
.angle-dashboard .angle-direction .board-title {
  text-align: center;
  font-family: PingFangSC;
  font-size: 12px;
  color: rgb(255, 255, 255);
  margin-top: 4px;
}
.angle-dashboard .angle-direction .center-box {
  display: flex;
  justify-content: center;
}
.angle-dashboard .angle-direction .realtime-angle {
  flex: 1;
  font-size: 10px;
  color: #00f7ff;
  text-align: center;
}
.angle-dashboard .angle-direction .realtime-angle span {
  width: 44px;
  display: block;
}
.angle-dashboard .angle-direction .realtime-angle span:last-child {
  font-size: 16px;
}
.angle-dashboard .angle-direction .target-angle {
  font-size: 10px;
  color: #ff1313;
  text-align: center;
  margin-left: 8px;
}
.angle-dashboard .angle-direction .target-angle span {
  width: 31px;
  display: block;
}
.angle-dashboard .angle-direction .target-angle span:last-child {
  font-size: 16px;
}
.angle-dashboard .angle-pointer {
  display: flex;
  justify-content: center;
  position: relative;
}
.angle-dashboard .angle-pointer .target-angle-pointer {
  display: inline-block;
  width: 158px;
  height: 158px;
  background: url(../images/target.3e3393d61c4e89e5c2f07e4d19791453.png) no-repeat top;
  background-size: contain;
  position: absolute;
  top: 22px;
}
.angle-dashboard .angle-pointer .realtime-angle-pointer {
  display: inline-block;
  width: 158px;
  height: 158px;
  background: url(../images/realtime.6dafe91f82884879bb7db47744de1aae.png) no-repeat top;
  background-size: contain;
  position: absolute;
  top: 18px;
}
.angle-dashboard .control-btn-group {
  position: absolute;
  width: 188px;
  left: 10px;
  top: 158px;
}
.angle-dashboard .control-btn-group i {
  cursor: pointer;
  display: inline-block;
  width: 84px;
  height: 32px;
}
.angle-dashboard .control-btn-group .turn-left-btn {
  background: url(../images/turn-left.0aa5b4bf735b3b9e0fa02d489444a809.png) no-repeat center;
  background-size: 100% 100%;
}
.angle-dashboard .control-btn-group .turn-right-btn {
  background: url(../images/turn-right.55161bc049058b14ff0ff2dc134b6d27.png) no-repeat center;
  background-size: 100% 100%;
  float: right;
}
.angle-dashboard .control-btn-group .back-to-normal {
  width: 100%;
  height: 38px;
  display: block;
  background: url(../images/blackToRight.b356baa878a449b6152603df1e0df2c0.png) no-repeat center;
  background-size: 100% 100%;
}
/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/RemoteControl/components/SpeedDashboard/index.scss ***!
  \*****************************************************************************************************************************************************************************************************************************/
.speed-dashboard {
  width: 199px;
  height: 100%;
  position: relative;
  top: calc(50% - 120px);
  margin-left: 16px;
}
.speed-dashboard .speed-dashboard-icon {
  position: absolute;
  display: block;
  width: 199px;
  height: 199px;
  background: url(../images/speed-board.91907e6d0fe715173bbae879b7be71a6.png) no-repeat center;
  background-size: contain;
}
.speed-dashboard .speed-direction {
  position: absolute;
  z-index: 2;
  width: 90px;
  height: 80px;
  left: calc(50% - 45px);
  top: 70px;
}
.speed-dashboard .speed-direction .board-title {
  text-align: center;
  font-family: PingFangSC;
  font-size: 12px;
  color: rgb(255, 255, 255);
  margin-top: 4px;
}
.speed-dashboard .speed-direction .center-box {
  display: flex;
  justify-content: center;
}
.speed-dashboard .speed-direction .realtime-speed {
  width: 24px;
  font-size: 10px;
  color: #00f7ff;
  text-align: center;
}
.speed-dashboard .speed-direction .realtime-speed span {
  width: 38px;
  display: block;
}
.speed-dashboard .speed-direction .realtime-speed span:last-child {
  font-size: 16px;
}
.speed-dashboard .speed-direction .target-speed {
  width: 24px;
  font-size: 10px;
  color: #ff1313;
  text-align: center;
  margin-left: 20px;
}
.speed-dashboard .speed-direction .target-speed span {
  width: 31px;
  display: block;
}
.speed-dashboard .speed-direction .target-speed span:last-child {
  font-size: 16px;
}
.speed-dashboard .speed-pointer {
  display: flex;
  justify-content: center;
  position: relative;
}
.speed-dashboard .speed-pointer .target-speed-pointer {
  display: inline-block;
  width: 190px;
  height: 190px;
  background: url(../images/speed-target.ac0fcda5bbfd52444e26bbec3124eff9.png) no-repeat top;
  background-size: contain;
  position: absolute;
  top: 10px;
}
.speed-dashboard .speed-pointer .realtime-speed-pointer {
  display: inline-block;
  width: 190px;
  height: 190px;
  background: url(../images/speed-realtime.2ffb74b27f4fe16a52c47c1b44a1562e.png) no-repeat top;
  background-size: contain;
  position: absolute;
  top: 10px;
}
.speed-dashboard .control-btn-group {
  position: absolute;
  top: 158px;
  width: 188px;
  left: 10px;
}
.speed-dashboard .control-btn-group i {
  cursor: pointer;
  display: inline-block;
  width: 84px;
  height: 32px;
}
.speed-dashboard .control-btn-group .slow-down-btn {
  background: url(../images/slow-down.12f115019b45a62aed58c83386caf80a.png) no-repeat center;
  background-size: 100% 100%;
}
.speed-dashboard .control-btn-group .speed-up-btn {
  background: url(../images/add-speed.7a96a4caaaaaa15798dc9db5cbd3d452.png) no-repeat center;
  background-size: 100% 100%;
  float: right;
}
.speed-dashboard .control-btn-group .brake-btn {
  width: 100%;
  height: 38px;
  display: block;
  background: url(../images/brake.e22081e73f66a97bcc7422b0bbd4062a.png) no-repeat center;
  background-size: 100% 100%;
}
/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/RemoteControl/components/ControlModule/index.scss ***!
  \****************************************************************************************************************************************************************************************************************************/
.dashboard-container {
  width: 570px;
  height: 36%;
  position: absolute;
  z-index: 2;
  left: 36.6%;
  background: url(../images/bg-center.b450649dd1c0939c31045fe9068f604e.png) no-repeat center;
  background-size: 100% 100%;
  bottom: 8px;
}
.dashboard-container .dashboard-head {
  padding: 16px 23px 6px;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.dashboard-container .dashboard-head .btn-group {
  width: 160px;
}
.dashboard-container .dashboard-head .btn-group .btn-active {
  background: linear-gradient(180deg, rgb(0, 129, 255) 0%, rgb(0, 71, 206) 100%);
}
.dashboard-container .dashboard-head .remote-control-mode {
  width: 150px;
  margin-left: 25px;
  display: flex;
  align-items: center;
  color: #fff;
}
.dashboard-container .dashboard-head .remote-control-mode .normal-icon {
  display: inline-block;
  margin-right: 6px;
  width: 15px;
  height: 15px;
  background: url(../images/normal.bacac92604fcf7dac1d02c64576543d4.png) no-repeat center;
  background-size: contain;
}
.dashboard-container .dashboard-head .remote-control-mode .error-mode-icon {
  display: inline-block;
  margin-right: 6px;
  width: 15px;
  height: 15px;
  background: url(../images/error-mode.7b3c57dd182b50f33270ca893a2c66d1.png) no-repeat center;
  background-size: contain;
}
.dashboard-container .dashboard-head .communication-status {
  margin-left: 40px;
  display: flex;
  align-items: center;
  color: #fff;
}
.dashboard-container .dashboard-head .communication-status .error-icon {
  display: inline-block;
  margin-right: 6px;
  width: 19px;
  height: 19px;
  background: url(../images/error.0f2879f770c5767d9e9d6ffc2f42f20a.png) no-repeat center;
  background-size: contain;
}
.dashboard-container .control-content {
  display: flex;
  margin: 0 auto;
  position: relative;
  width: calc(100% - 20px);
  height: calc(100% - 67px);
  background: url(../images/dashboard-bg.cc7e4322ae17af6327bb5c147777162f.png) no-repeat center;
  background-size: 100% 100%;
  padding: 13px 13px 0px;
  align-items: center;
}
.dashboard-container .control-content .speed-control-track {
  display: flex;
}
.dashboard-container .control-content .slider-track {
  width: 12px;
  height: 198px;
  border: 1px solid rgb(195, 195, 195);
  border-radius: 2px;
  position: relative;
}
.dashboard-container .control-content .direction-control {
  width: 12px;
  height: 198px;
  position: relative;
  margin-left: 14px;
}
.dashboard-container .control-content .direction-control i {
  display: inline-block;
  width: 55px;
  height: 20px;
  position: absolute;
  z-index: 10;
  cursor: pointer;
}
.dashboard-container .control-content .direction-control i:nth-child(2) {
  top: calc(50% - 10px);
  background: url(../images/stop.91bd318607b3db3bdd114176688550ec.png) no-repeat center;
  background-size: 100% 100%;
}
.dashboard-container .control-content .direction-control i:first-child {
  top: -1px;
  background: url(../images/go-ahead.98a97b7c8563881996be6a8b65ed9572.png) no-repeat center;
  background-size: 100% 100%;
}
.dashboard-container .control-content .direction-control i:last-child {
  bottom: -1px;
  background: url(../images/back.28995847ed848bf390d357f6c480aea0.png) no-repeat center;
  background-size: 100% 100%;
}
.dashboard-container .control-content .dashboard-wrapper {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  height: 100%;
  align-items: center;
}

.slider-thumb {
  width: 28px;
  height: 29px;
  background: rgb(60, 110, 240);
  border-radius: 5px;
  position: absolute;
  left: -8px;
  visibility: hidden;
}
.slider-thumb:nth-child(2) {
  top: calc(50% - 15px);
}
.slider-thumb:first-child {
  top: -1px;
}
.slider-thumb:last-child {
  bottom: -1px;
}
.slider-thumb.slider-active {
  visibility: visible;
}

.control-modal-info {
  height: 200px;
  width: 200px;
  text-align: center;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
/*!**********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/EnableComponent/index.scss ***!
  \**********************************************************************************************************************************************************************************************************/
.fault-box {
  position: relative;
  width: 246px;
  height: 222px;
  margin: 20px auto;
}
.fault-box .top-con {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 106px;
  height: 56px;
  background: url(../images/fault-no-t.12e6c5406e6453aa09d434cd3c236f62.png) top center no-repeat;
  background-size: contain;
}
.fault-box .top-con.error {
  height: 41px;
  background: url(../images/fault-t.9ff8d60df3c7598a8205322d914ad058.png) top center no-repeat;
  background-size: contain;
}
.fault-box .bottom-con {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 106px;
  height: 56px;
  background: url(../images/fault-no-b.505266955da94bc5bfd0bad9e7c8f267.png) top center no-repeat;
  background-size: contain;
}
.fault-box .bottom-con.error {
  height: 41px;
  background: url(../images/fault-b.72913b0ff6a07970cb72e190be2df6de.png) top center no-repeat;
  background-size: contain;
}
.fault-box .left-con {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 63px;
  height: 142px;
  background: url(../images/fault-no-l.dd87e906b65a8c33be117df44fb6cace.png) top center no-repeat;
  background-size: contain;
}
.fault-box .left-con.error {
  width: 80px;
  background: url(../images/fault-l.74d904c20796a541c6103cdc0ad21dc2.png) top center no-repeat;
  background-size: contain;
}
.fault-box .right-con {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 63px;
  height: 142px;
  background: url(../images/fault-no-r.e0b6088af99c5414118d4486d225ded4.png) top center no-repeat;
  background-size: contain;
}
.fault-box .right-con.error {
  width: 80px;
  background: url(../images/fault-r.374feb0a4cde24e119f06589e0fcad54.png) top center no-repeat;
  background-size: contain;
}
.fault-box .center-con {
  width: 102px;
  height: 114px;
  padding: 56px 15px 20px;
  color: #c8d2ff;
  font-size: 16px;
  text-align: center;
  background: url(../images/fault-tip.39addcee6b1b125981c7b1e4c6dd9388.png) top center no-repeat;
  background-size: contain;
}
/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/views/RemoteControl/components/DelayTimeRecord/index.scss ***!
  \******************************************************************************************************************************************************************************************************************************/
.delay-record-wrapper {
  width: 33.4%;
  height: 23.8%;
  background: url(../images/bg-right.aebce3964421da02e29757f0cbd63bf6.png) no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  right: 14px;
  bottom: 10px;
}
.delay-record-wrapper .delay-record-list {
  display: flex;
  align-items: center;
  padding: 16px;
}
.delay-record-wrapper .delay-record-list .delay-item {
  flex: 1;
  text-align: center;
  position: relative;
}
.delay-record-wrapper .delay-record-list .delay-item .delay-value {
  font-family: PingFangSC;
  font-size: 28px;
  color: rgb(0, 247, 255);
}
.delay-record-wrapper .delay-record-list .delay-item i {
  display: block;
  font-style: normal;
  font-family: PingFangSC;
  font-size: 15px;
  color: rgb(255, 255, 255);
}
.delay-record-wrapper .delay-record-list .delay-item .mark-label {
  width: 20px;
  height: 20px;
  background: rgb(4, 79, 134);
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  position: absolute;
  right: 20px;
  top: 50%;
}
.delay-record-wrapper .btn-wrapper .pass-btn {
  display: inline-block;
  width: 149px;
  height: 86px;
  position: absolute;
  left: 56px;
  bottom: 10px;
}
.delay-record-wrapper .btn-wrapper .pass-btn.disabled {
  background: url(../images/pass-btn.04f4e7b8c8d96fb4934e22299563a7f5.png) no-repeat center;
  background-size: contain;
}
/*!******************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/base.scss ***!
  \******************************************************************************************************************************************************************************/
@charset "UTF-8";
.ant-form-item .ant-input-group .ant-select,
.ant-form-item .ant-input-group .ant-cascader-picker {
  width: 150px;
}

.ant-select-clear {
  right: 30px;
  border-radius: 12px;
}

.ant-scroll-number {
  width: 26px;
  height: 15px;
  overflow: hidden;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: 0 0 0 1000px rgb(22, 56, 146) inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
}

#root {
  /* header样式 */
}
#root .content {
  height: calc(100% - 120px);
  width: 100%;
  min-width: 1700px;
  min-height: 500px;
  display: flex;
  flex-flow: column;
  overflow: auto;
}
#root .header {
  display: flex;
  align-items: center;
}
#root .header .middle-logo-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#root .header .middle-logo-wrapper i {
  height: 80px;
  width: 80%;
  display: inline-block;
  background-size: 100% 100%;
  max-width: 584px;
  position: relative;
  left: -40px;
}
#root .header .ant-select-single {
  font-size: 16px;
}
#root .header .ant-select-selector {
  color: #0098ff;
  background-color: transparent !important;
  border: 1px solid #40a9ff !important;
  border-radius: 2px;
}
#root .header .ant-select-arrow {
  color: #40a9ff !important;
}
#root .env-label {
  margin-right: 10px;
  color: #0098ff;
  font-size: 20px;
}
#root .top-right {
  display: flex;
  text-align: right;
  margin-right: 10px;
}
#root .header-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  padding: 0 16px;
  align-items: center;
  box-sizing: border-box;
  background: rgb(60, 110, 240);
  box-shadow: 0px 5px 14px 0px rgba(0, 0, 0, 0.12);
  color: #fff;
  line-height: 16px;
  font-size: 16px;
}
#root .header-wrapper .company-name {
  line-height: 24px;
  font-family: JDLANGZHENGTI--GB1-0;
  font-size: 22px;
  color: rgb(255, 255, 255);
}
#root .header-wrapper .logo {
  margin-right: 20px;
}
#root .header-wrapper .news-list {
  position: fixed;
  top: 80px;
  right: 0;
  z-index: 2;
}
#root .header-wrapper .ant-tabs {
  line-height: 2.3;
}
#root .header-wrapper .ant-tabs-nav {
  margin: 0 !important;
  color: #fff;
}
#root .header-wrapper .ant-tabs-nav::before {
  border: none !important;
}
#root .header-wrapper .ant-tabs-tab {
  font-size: 16px;
}
#root .header-wrapper .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #fff;
}
#root .header-wrapper .ant-tabs-ink-bar {
  background: rgb(255, 255, 255);
}
#root .header-wrapper .tablist-wrapper {
  margin-left: 90px;
}
#root .header-wrapper .right {
  display: flex;
  text-align: right;
  justify-content: flex-end;
  flex: 1;
}
#root .header-wrapper .icon {
  margin-right: 20px;
  position: relative;
  cursor: pointer;
}
#root .header-wrapper .alarm-icon {
  font-style: normal;
  display: inline-block;
  height: 20px;
  width: 21px;
  border-radius: 100%;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
}
#root .header-wrapper .message-num {
  position: absolute;
  top: -8px;
  color: #e1251b;
  right: -5px;
}
#root .login-page-header {
  padding: 18px 20px;
}

.ant-table-tbody tr > td {
  vertical-align: middle;
}

.popover-content div {
  cursor: pointer;
}

/*# sourceMappingURL=vehicle-5c4a901a5456233026cb.min.css.map*/