.index-top {
  /* height: 64px; */
  overflow: hidden;
}

.layui-nav {
  border-radius: 0;
}

.layui-breadcrumb {
  font-size: 35px;
  background-color: #393d49;
  margin-right: 20px;
  height: 62px;
  overflow: hidden;
}

.layui-layout-right .layui-breadcrumb a {
  color: white !important;
  font-size: 20px !important;
}

.layui-layout-right .layui-breadcrumb span {
  font-size: 20px !important;
}

.howen-dashboard {
  padding: 10px;
}

.howen-dashboard .content {
  height: 100%;
}

html,
body {
  height: 100%;
  background-color: white;
}

.howen-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#content {
  flex: 1;
  display: flex;
}

#video {
  flex: 1;
}

.fence_main {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}

.fence_main_right {
  flex: 1;
  overflow: hidden;
}

.fence_main_edit {
  display: none;
}

.fence_main_left {
  width: 450px;
}

.tv_left {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.fence_main_middle {
  width: 700px;
}

.tv_right {
  height: 100vh;
  flex: 3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* @media screen and (max-width: 1200px) {
    .fence_main_middle {
        width: 700px;
    }
    .body-playback .tv_left {
        width: 700px;
    }
} */
/* .fence_main_middle {
    width: 900px;
} */

.body-playback .tv_left {
  width: 900px;
}

/* 这里是视频模块的开始 */

.vedio_main {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  height: 100%;
}

.tv_control {
  height: 44px;
  line-height: 44px;
  background-color: #ffffff;
}

.tv_control_font {
  margin: 13px 5px 0 5px;
  font-size: 22px;
  margin-top: 13px;
  cursor: pointer;
}

.tv_control_font:hover {
  color: #0094ff;
}

.tv_event {
  height: 280px;
  overflow-x: auto;
}

.tv_event_table_content {
  height: calc(100% - 140px);
  overflow-y: auto;
}

.wrap {
  position: relative;
}

.real_time_tab_lable {
  width: 100px;
  height: 28px;
  float: left;
  text-align: center;
  line-height: 28px;
  border-bottom: 3px solid #eeeeee;
}

.real-time .layui-table-body td {
  border-left-width: 0px;
  border-right-width: 0px;
}

.layui-layout-right {
  margin-right: 30px;
}

.layui-layout-right dd.layui-this,
.layui-layout-right dd.layui-this a {
  background-color: transparent !important;
  color: black !important;
}

.layui-layout-right .layui-nav-more {
  top: 53%;
}

.layui-layout-right .layui-this::after,
.layui-nav-bar,
.layui-nav-tree .layui-nav-itemed::after {
  background-color: transparent;
}

.real_time_tab_lable:nth-of-type(4) {
  border-right: none;
}

.real_time_tab_lable span {
  cursor: pointer;
}

.real_time_tab_lable input {
  width: 0;
}

.real_time_tab_event_lable,
.real_time_tab_map_lable {
  width: 100px;
  height: 34x;
  line-height: 27px;
  margin-bottom: 0px;
  text-align: center;
  border-bottom: 3px solid #eeeeee;
  display: inline-block;
  box-sizing: border-box;
}

.real_time_tab_event_lable,
.real_time_tab_map_lable:nth-of-type(4) {
  border-right: none;
}

.real_time_tab_event_lable,
.real_time_tab_map_lable span {
  cursor: pointer;
}

.real_time_tab_map_lable input {
  width: 0;
}

.tab_btn_input {
  position: absolute;
  left: -999em;
}

.tab_content {
  width: 100%;
  position: absolute;
  left: 0;
  text-align: left;
  display: none;
}

.tv_video {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.tv_video_item_selected {
  border: 2px solid #009688;
  padding: 1px;
}

.tv_video_item_1 {
  box-sizing: border-box;
}

.tv_video_item_2 {
  box-sizing: border-box;
}

.tv_video_item_3 {
  box-sizing: border-box;
}

.tv_video_item_4 {
  box-sizing: border-box;
}

.tv_video_item_5 {
  box-sizing: border-box;
}

.tv_video_item_6 {
  box-sizing: border-box;
}

.tv_video_item_7 {
  box-sizing: border-box;
}

.tv_video_item_8 {
  box-sizing: border-box;
}

.tv_video_item_9 {
  box-sizing: border-box;
}

.tv_video_item_10 {
  box-sizing: border-box;
}

.tv_video_item_11 {
  box-sizing: border-box;
}

.tv_video_item_12 {
  box-sizing: border-box;
}

.tv_video_item_13 {
  box-sizing: border-box;
}

.tv_video_item_14 {
  box-sizing: border-box;
}

.tv_video_item_15 {
  box-sizing: border-box;
}

.tv_video_item_16 {
  box-sizing: border-box;
}

.tv_video_item_box {
  height: 100%;
  border: 1px solid #ffffff;
  box-sizing: border-box;
  background-color: black;
  display: flex;
  flex-direction: column;
}

.tv_video_item_box_title {
  height: 25px;
  line-height: 25px;
  flex-basis: 25px;
  padding-left: 10px;
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
  color: white;
  font-size: 9px;
}

.tv_video_item_box_ch {
  flex: 1;
}

.tv_video_item_box_hd {
  align-self: flex-end;
  margin-right: 10px;
  font-size: 25px;
  cursor: pointer;
}

.tv_video_item_box_hd:hover {
  color: #0094ff;
}

.tv_video_item_box_video_loading {
  background: url(https://howen.geo4net.com/vss/image/5-160914192R0-50.gif)
    no-repeat center center;
}

.tv_video_item_box_video {
  width: 100%;
  flex: 1;
  text-align: center;
  align-self: stretch;
  background: black;
  width: 100%;
  position: relative;
}

.tv_video_item_box_video > video {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: fill;
}

.tv_video_item_box_video > canvas {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: fill;
}

/* 这里是视频模块的结束 */
/* 这里时Real-time.html */

.real-time .layui-table-view {
  border-width: 0px;
  margin: 0;
}

.real-time .fence_main_left .layui-table-header {
  display: none;
}

#SEARCHDEVICE {
  border: 0;
}

.real-time-search-bar {
  background-color: #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
  border-top: 1px solid #dcdcdc;
  display: flex;
  margin: 5px 0;
  flex-direction: row;
}

.real-time-search-bar-checkbox {
  padding-left: 15px;
  margin-top: 10px;
}

.real-time-search-bar-ico {
  padding-left: 4px;
  margin-top: 10px;
  width: 50px;
}

.real-time-search-bar button {
  width: 50px;
  border: 0;
}

.body-real-time {
  overflow: hidden;
}

.vehicleType:after {
  content: "";
}

.vehicle_group {
  background: url(https://howen.geo4net.com/vss/image/group.png) left no-repeat;
  background-size: 14px 14px !important;
  height: 100% !important;
}

.vehicle_icon_0 {
  background: url(https://howen.geo4net.com/vss/image/vehicle_icon_0.png) center
    no-repeat;
}

.vehicle-fence-on {
  background: url(https://howen.geo4net.com/vss/image/fence-on.png) center
    no-repeat;
}

.vehicle-fence-off {
  background: url(https://howen.geo4net.com/vss/image/fence-off.png) center
    no-repeat;
}

.dingwei-on {
  background: url(https://howen.geo4net.com/vss/image/dingwei-on.png) center
    no-repeat;
}

.dingwei-off {
  background: url(https://howen.geo4net.com/vss/image/dingwei-off.png) center
    no-repeat;
}

.video-enable {
  background: url(https://howen.geo4net.com/vss/image/video_enable.png) center
    no-repeat;
}

.video-disable {
  background: url(https://howen.geo4net.com/vss/image/video_disable.png) center
    no-repeat;
}

.driver-bound {
  background: url(https://howen.geo4net.com/vss/image/driver_bound.png) center
    no-repeat;
}

.driver-unbound {
  background: url(https://howen.geo4net.com/vss/image/driver_unbound.png) center
    no-repeat;
}

.vehicle-state {
  height: 14px;
  width: 14px;
  margin-top: 4px;
  cursor: pointer;
  background-size: cover;
}

.listen_on {
  background: url(https://howen.geo4net.com/vss/image/listen_on.png) center
    no-repeat;
}

.listen_off {
  background: url(https://howen.geo4net.com/vss/image/listen_off.png) center
    no-repeat;
}

.vehicle-more {
  background: url(https://howen.geo4net.com/vss/image/vehicle_more.png) center
    no-repeat;
}

.vehicle-online {
  background: url(https://howen.geo4net.com/vss/image/vehicle_online.png) center
    no-repeat;
}

.vehicle-offline {
  background: url(https://howen.geo4net.com/vss/image/vehicle_offline.png)
    center no-repeat;
}

.location-online {
  background: url(https://howen.geo4net.com/vss/image/location_online.png)
    center no-repeat;
  padding: 12.5px;
  float: right;
}

.location-offline {
  background: url(https://howen.geo4net.com/vss/image/location_offline.png)
    center no-repeat;
  padding: 12.5px;
  float: right;
}

.monitor-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.playback-content {
  padding: 5px 0 5px 5px;
}

.monitor-content-top {
  height: 100%;
  flex: 1;
  box-sizing: border-box;
  overflow-y: auto;
}

.monitor-content-info-ptz {
  height: 360px;
}

/* 
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #f5f5f5;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(107, 98, 98, 0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(107, 98, 98, 0.3);
    background-color: #555;
}
 */
/*ç”µå­å›´æ ç›¸å…³*/

.fence_fence .fence_main_left_button {
  margin: 10px 0 0 10px;
}

.fence_main_left_button {
  height: 80px;
  box-sizing: border-box;
}

.fence_main_left_deviceno {
  flex: 1;
}

.fence_fence .fence_main_left {
  display: flex;
  flex-direction: column;
}

.fence_fence .fence_main_left_fence {
  flex: 1;
}

.layui-elem-field {
  height: 40px;
  margin: 0;
  box-sizing: border-box;
}

.fence_share_content {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}

.fence_share_head {
  flex: 2;
  overflow-y: auto;
}

.fence_fence_disabled {
  pointer-events: none;
}

.fence_share_driver {
  flex: 1;
}

.fence_share_content .items {
  margin-top: 20px;
}

.fence_share_content .items > div {
  margin: 10px;
}

.fence_main_add .fence_main_edit {
  display: inline;
}

.fence_main_add .datetimepicker table tr td span {
  width: 9%;
}

.fence_main_add .form-group > label {
  margin: 10px 0;
  display: block;
}

.fence_main_add .fence_main_left {
  padding: 10px;
}

/* 回放  */

.playback .fence_main_left {
  width: 300px;
  min-width: 200px;
  border-right: solid 1px #dcdcdc;
  padding: 5px;
  overflow-y: auto;
  overflow-x: hidden;
}

.playback .layui-form-checkbox[lay-skin="primary"] span {
  color: white;
}

.playback .layui-form-checked[lay-skin="primary"] i {
  font-weight: bold;
}

.playback #chart {
  height: calc(100% - 20px);
}

.playback #chart2 {
  height: 100%;
}

.body-playback {
  overflow: hidden;
}

/*服务器管理*/

.server-manage-menu {
  width: 100%;
  height: 100%;
}

.server-manage-menu ul li {
  height: 40px;
  line-height: 40px;
  border-bottom: solid 1px #dcdcdc;
  padding-left: 30px;
  cursor: pointer;
}

.server-manage-menu ul li:hover {
  background-color: #dcdcdc;
}

.server-manage-menuliSelected {
  background-color: #1e9fff !important;
  /* margin-right: 15px;
    margin-left: 15px;
    -moz-box-shadow: 10px 5px 0px #DCDCDC;
   
    box-shadow: 10px 5px 0px #DCDCDC;
    */
  color: white;
}

.server-manage-menu .iconfont {
  font-size: 20px;
}

.server-manage-menu .fence_main_left {
  width: 280px;
  min-width: 280px;
  /* margin: 10px 10px 12px 0;
    border: solid 1px #DCDCDC;
    box-sizing: border-box;
    -moz-box-shadow: 5px 5px 4px #DCDCDC;
   
    box-shadow: 5px 5px 4px #DCDCDC; */
}

.server-manage-menu .title {
  margin-left: 10px;
  margin-top: -5px;
}

.server-config-box p {
  margin: 10px 0px;
}

.server-config-box {
  margin-left: 20px;
  margin-top: 20px;
  box-sizing: border-box;
}

.server-config-box .required {
  color: red;
}

.server-config-box input {
  height: 30px;
  width: 200px;
  padding-left: 10px;
}

.server-config-box1 .layui-form-select {
  display: inline-block;
}

.server-config-box1 .layui-input {
  display: inline-block;
  width: 400px;
}

.server-config-box3 {
  padding: 20px 0 0 20px;
}

.server-config-box1-item {
  margin: 10px 0;
}

/*服务管理*/

.info-manage-menu .fence_main_middle {
  border-right: solid 1px #dcdcdc;
  width: 400px;
}

/* 车队和车辆管理 */

.howen_management {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.howen_management .howen_management_fleet,
.howen_management_role {
  flex: 1;
  overflow-y: hidden;
}

.howen_management_report_v {
  /* overflow-y: hidden; */
}

.howen_management .howen_management_vehicle,
.howen_management_role_user,
.howen_management_report_r {
  flex: 1;
  overflow-y: hidden;
}

/* .howen_management_fleet>div,
.howen_management_autodownload>div,
.howen_management_report_v>div,
.howen_management_report_r>div,
.howen_management_alarmstrategy>div,
.howen_management_role_user>div,
.howen_management_vehicle>div,
.howen_management_role>div {
    -moz-box-shadow: 5px 5px 4px #DCDCDC;
   
    box-shadow: 5px 5px 4px #DCDCDC;
} */

.howen_management_report_v,
.howen_management_report_r {
  margin-bottom: 5px;
}

.howen_management_report_v > div,
.howen_management_report_r > div,
.howen_management_vehicle > div {
  height: 100%;
  box-sizing: border-box;
}

.layui-form.layui-border-box.layui-table-view {
  margin: 0;
}

.howen_management_vehicle
  > div
  > div.layui-form.layui-border-box.layui-table-view {
  border-width: 0px;
}

.howen_management form {
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.howen_management .layui-collapse {
  height: 100%;
  overflow-y: auto;
  border-width: 1px;
}

.howen_server_sys_language_add,
.howen_management_fleet_add,
.howen_management_user_add,
.howen_management_oil_add,
.howen_management_role_add {
  padding: 20px;
  box-sizing: border-box;
  flex-direction: column;
}

.howen_management_vehice_add_batch form,
.howen_management_vehice_add form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.howen_management_vehice_add_batch
  .layui-collapse
  .howen_management_vehice_add
  .layui-collapse {
  flex: 1;
}

.howen_management_vehice_add_batch
  .layui-layer-btn
  .howen_management_vehice_add
  .layui-layer-btn {
  height: 24px;
  padding: 20px;
}

.howen_server_sys_language_add form,
.howen_management_driver_add form,
.howen_management_fleet_add form,
.howen_management_user_add form,
.howen_management_oil_add form,
.howen_management_role_add form {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 0px;
}

.howen_server_sys_language_add .layui-layer-btn,
.howen_management_driver_add .layui-layer-btn,
.howen_management_fleet_add .layui-layer-btn,
.howen_management_user_add .layui-layer-btn,
.howen_management_oil_add .layui-layer-btn,
.howen_management_role_add .layui-layer-btn {
  height: 24px;
  align-self: flex-end;
  position: fixed;
  bottom: 15px;
  right: 0px;
  left: 0;
  padding: 5px;
  background-color: white;
}

.layui-laypage {
  margin: 0 10px;
}

.imput_required:after {
  content: "*";
  color: red;
  margin-left: 3px;
}

.howen_management_vehice_add .layui-colla-content .layui-form-item {
  margin-bottom: 5px;
}

.server-manage-vehicle-icon-list li {
  display: inline-block;
  padding: 10px;
}

.howen_management_vehice_add_batch .layui-form-item,
h3 {
  margin-bottom: 5px;
}

.howen_management_vehice_add_batch {
  padding: 10px;
  box-sizing: border-box;
}

.howen_management .layui-border-box {
}

.howen_management_role_add .howen_management_role_add1,
.howen_management_alarmstrategy_add .howen_management_role_add1 {
  display: flex;
  flex-direction: row;
}

.howen_management_autodownload_add form {
  display: flex;
  flex-direction: row;
}

.howen_management_role_add1 {
  flex: 1;
}

/* .howen_management_alarmstrategy,
.howen_management_autodownload {
    margin: 10px 10px 10px 10px !important;
    border: solid 1px #DCDCDC;
} */

.howen_management_alarmstrategy .layui-form.layui-border-box.layui-table-view,
.howen_management_autodownload .layui-form.layui-border-box.layui-table-view {
  border-width: 0px;
}

.howen_management_autodownload_add,
.howen_management_alarmstrategy_add {
  box-sizing: border-box;
}

.howen_management_user_log .layui-table-tool .layui-unselect,
.howen_management_autodownload .layui-table-tool .layui-unselect {
  width: 200px;
  display: inline-block;
  vertical-align: bottom;
}

.howen_management_user_log .layui-table-tool .layui-unselect input,
.howen_management_autodownload .layui-table-tool .layui-unselect input {
  height: 30px !important;
}

.layui-layer {
  z-index: 100000;
}

.cell-operaion {
}

.cell-operaion i {
  padding: 0 5px;
  font-size: 12px !important;
}

.layui-btn i {
  padding: 0 5px;
  font-size: 12px !important;
}

.layui-btn + .layui-btn {
  margin-left: 2px;
}

/* 
.howen_management>div {
    margin: 10px 0 10px 10px !important;
} */

.howen-report .layui-laydate-main {
  width: 250px;
}

.howen-management .fence_main_left,
.howen-report-content .fence_main_left {
  width: 280px;
  min-width: 280px;
  background-color: #393d49;
}

.howen-management .fence_main_left .layui-nav-tree,
.howen-report-content .fence_main_left .layui-nav-tree {
  width: 100%;
  border-radius: 0px;
}

.howen-report .layui-laydate-range {
  width: 503px;
}

.howen-report .layui-laydate,
.howen-report.layui-laydate-hint {
  border: 0px solid #d2d2d2;
  box-shadow: 0 0px 0px transparent;
}

.howen_management_report_r {
  display: flex;
  flex-direction: column;
}

/* .howen-report div.layui-form.layui-border-box.layui-table-view {
    border-width: 0;
} */

.howen-report-c {
  flex: 1;
}

.howen_report_mileage .howen-report-t,
.howen_report_alrm .howen-report-t,
.howen_report_dms_adas .howen-report-t {
  box-shadow: 0px 0px 4px #dcdcdc !important;
  border-bottom-width: 0px !important;
  height: auto;
}

.howen_report_mileage .howen-report-c,
.howen_report_alrm .howen-report-c,
.howen_report_dms_adas .howen-report-c {
  box-shadow: 0px 0px 4px #dcdcdc !important;
  flex: 1;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
}

/* .howen_report_mileage .howen_management_report_r,
.howen_report_alrm .howen_management_report_r,
.howen_report_dms_adas .howen_management_report_r {
    -moz-box-shadow: 5px 5px 4px #DCDCDC;
   
    box-shadow: 5px 5px 4px #DCDCDC;
} */

.howen_management_alarmstrategy .layui-table-tool .layui-unselect,
.howen_report_alrm .layui-table-tool .layui-unselect,
.howen_report_dms_adas .layui-table-tool .layui-unselect,
.howen_report_flow_query-1 .layui-table-tool .layui-unselect {
  width: 310px;
  display: inline-block;
  vertical-align: bottom;
}

.howen_management_alarmstrategy .layui-table-tool .layui-unselect input,
.howen_report_alrm .layui-table-tool .layui-unselect input,
.howen_report_dms_adas .layui-table-tool .layui-unselect input,
.howen_report_flow_query-1 .layui-table-tool .layui-unselect input {
  height: 30px;
}

.map-content-bottom {
  text-align: center;
  padding-top: 7px;
}

.map-content-bottom span {
  font-size: 25px;
  cursor: pointer;
  color: #1e9fff;
}

.map-content-bottom span:hover {
  opacity: 0.8;
}

/*howen-dashboard*/

.howen-dashboard {
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.howen-dashboard-total {
  height: 110px;
  display: flex;
  flex-direction: row;
}

.howen-dashboard-total > div {
  font-size: 20px;
  margin: 10px;
  border-radius: 5px;
  border: 1px solid #eeeeee;
  flex: 1;
  display: flex;
  flex-direction: row;
}

.howen-dashboard-total > div > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.howen-dashboard-total > div > div > div {
  flex: 1;
  text-align: center;
}

.howen-dashboard-total img {
  height: 70px;
  width: 70px;
  vertical-align: middle;
  align-self: center;
  margin: 0 10px;
}

.howen-dashboard-total > div:hover,
.howen-dashboard-chart > div > div:hover {
  border: 1px solid #eeeeee;
  box-shadow: #eeeeee 0px 0px 10px inset;
  flex: 1;
}

.howen-dashboard-total-title {
  font-size: 16px;
  text-align: center;
  justify-content: center;
  align-items: flex-end;
  opacity: 0.5;
  display: flex;
}

.howen-dashboard-total-title + div {
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.howen-dashboard-chart > div {
  border-radius: 5px;
  flex: 1;
  display: flex;
  flex-direction: row;
}

.howen-dashboard-chart > div > div {
  border: 1px solid #eeeeee;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 10px;
  position: relative;
}

.howen-dashboard-chart > div > div .layui-btn-group {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1000;
  background-color: transparent;
}

.howen-dashboard-chart > div > div .layui-btn-group a {
  border: 0px !important;
}

.howen-dashboard-chart {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.howen-dashboard-chart-title {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  opacity: 0.7;
  font-weight: bold;
  margin: 0 10px;
  padding: 0 10px;
  border-bottom: 1px solid #dcdcdc;
}

.howen-dashboard-chart-title + div {
  flex: 1;
}

.change-password p {
  margin: 10px 0;
}

.change-password input {
  margin: 10px 0;
}

.layui-table-cell .layui-btn-xs {
  line-height: 20px;
}

.howen_management_alarmstrategy_add,
.howen_management_autodownload_add {
  position: relative;
  overflow-y: auto;
}

.howen_management_alarmstrategy_add .layui-layer-btn,
.howen_management_autodownload_add .layui-layer-btn {
  position: fixed;
  bottom: 0px;
  right: 0px;
  left: 0px;
  background-color: white;
}

/* .howen_management_autodownload_add .layui-tab-card {
    border-width: 0px;
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
} */

.howen_management_alarmstrategy_add form {
  padding-bottom: 60px;
}

.map_gps,
.map_location {
  margin-right: 2px;
  cursor: pointer;
  color: #1e9fff;
}

#howen-map {
  height: 100%;
}

#pic li img {
  height: 216px;
  width: 384px;
  margin: 10px;
  cursor: pointer;
}

#pic li img:hover {
  height: 236px;
  width: 404px;
  margin: 0;
  cursor: pointer;
}

#pic li {
  display: inline-block;
}

#pic li p {
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  font-weight: bold;
}

.fence_main_left_fence .layui-btn-xs,
.fence_main_left_deviceno .layui-btn-xs {
  height: 18px;
  line-height: 16px;
  width: 24px;
  padding: 0;
}

.link {
}

.layui-tree-search-search {
  width: 30px;
  line-height: 30px;
  text-align: center;
  background: #dcdcdc;
  cursor: pointer;
}

.layui-tree-search-key {
  flex: 1;
}

.layui-tree-search-key input {
  border: 0;
  height: 30px;
  padding: 0 10px;
  width: 100%;
}

.layui-tree-search-expand {
  width: 30px;
  line-height: 30px;
  text-align: center;
  background: #dcdcdc;
  cursor: pointer;
}

.layui-tree-search-expand-open {
}

.layui-tree-search-expand-close {
}

.layui-tree-search-tool {
  height: 30px;
  display: flex;
  border: 1px solid #dcdcdc;
  margin: 5px;
}

.layui-tree {
  overflow-y: scroll;
  height: calc(100% - 40px);
  margin-left: 10px;
  box-sizing: border-box;
  padding-bottom: 10px;
}

.layui-tree-search-tool .layui-unselect {
  background: #dcdcdc;
}

.layui-tree-search-tool .layui-unselect i {
  margin: 6px;
}

.layui-tab-item {
  overflow-y: hidden;
}

.layui-tab-item > div {
  height: 100%;
}

.body-playback .fence_main_right {
  overflow-y: hidden;
}

.mtop {
  margin-top: 75px;
  background-color: white;
  padding: 5px;
  border-radius: 5px;
}

.alarm_play {
  font-size: 16px;
}

.playing {
  background-color: #1e9fff !important;
  color: white !important;
}

.list-tiem {
  display: flex;
  height: 30px;
  border-left: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid #dcdcdc;
  line-height: 30px;
  box-sizing: border-box;
}

.list-tiem:hover {
  background-color: #f2f2f2;
}

/*         
.list-tiem::before {
    width: 30px;
    min-width: 30px;
    content: '\e649';
    text-align: center;
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 */

.list-tiem .span-car {
  flex: 1;

  padding-left: 5px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-tiem .span-ch {
  min-width: 210px;
}

.list-car2 {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

.list-car1 {
  height: 40px;
}

.monitor-content-top .list {
  height: 100%;
}

.list-tiem .span-car-icon::before {
  width: 30px;
  min-width: 30px;
  margin-right: 5px;
  font-family: "iconfont" !important;
  font-size: 20px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.span-car-icon-xe68c::before {
  content: "\e68c";
}

.span-car-icon-xe6a0::before {
  content: "\e6a0";
}

.span-car-icon-xe68e::before {
  content: "\e68e";
}

.span-car-icon-xe68f::before {
  content: "\e68f";
}

.span-car-icon-xe690::before {
  content: "\e690";
}

.span-car-icon-xe691::before {
  content: "\e691";
}

.span-car-icon-xe692::before {
  content: "\e692";
}

.span-car-icon-xe693::before {
  content: "\e693";
}

.span-car-icon-xe694::before {
  content: "\e694";
}

.span-car-icon-xe688::before {
  content: "\e688";
}

.span-car-icon-xe696::before {
  content: "\e696";
}

.span-car-icon-xe697::before {
  content: "\e697";
}

.span-car-icon-xe698::before {
  content: "\e698";
}

.span-car-icon-xe699::before {
  content: "\e699";
}

.span-car-icon-xe69a::before {
  content: "\e69a";
}

.span-car-icon-xe69c::before {
  content: "\e69c";
}

.span-car-icon-xe69d::before {
  content: "\e69d";
}

.span-car-icon-xe69f::before {
  content: "\e69f";
}

.list-tiem .span-car-icon::before {
  color: #dcdcdc;
}

.list-tiem .span-car-fleet::before {
  width: 30px;
  min-width: 30px;
  margin-right: 5px;
  content: "\e660";
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #1e9fff;
}

.list-tiem .span-line {
  text-align: center;
  overflow: hidden;
  font-size: 19px;
}

.list-tiem .span-op {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  color: #0094ff;
}

.list-s-checkbox {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

.list-checkbox {
  color: #5fb878;
}

.list-tiem .list-checkbox {
  width: 30px;
  min-width: 30px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

.list-tiem .span-1 {
  width: 20px;
  min-width: 20px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-car {
  font-size: 12px;
}

.list-tiem-s {
  display: flex;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  background-color: #e6e6e6;
  border: 1px solid #dcdcdc;
  box-sizing: border-box;
}

.list-tiem-s .input {
  flex: 1;
  border: 0;
  position: relative;
  display: flex;
}

.span-1 {
  color: #dcdcdc;
}

.span-1-red::before {
  color: red !important;
}

.span-1-green::before {
  color: green !important;
}

.span-1-green2 {
  color: green !important;
}

.input-res {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  border: 1px solid #dcdcdc;
  box-shadow: 3px 3px 3px #888888;
  background: white;
  height: 200px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
}

.input-res li {
  height: 30px;
  padding: 0 10px;
  margin: 0;
  cursor: pointer;
}

.input-res li:hover {
  background-color: #1e9fff;
}

.list-tiem-s input {
  flex: 1;
  border: 0;
  padding-left: 5px;
}

.list-s-combox,
.howen_date {
  background-color: white;
}

.list-s-combox {
  color: #c2c2c2;
}

.list-s-search-online-all {
  color: green;
  position: relative;
}

.list-s-search-online {
  color: green;
}

#test3 .list {
  height: 100%;
}

#test3 .list-tiem-s {
  border: 0px;
  border-bottom: 1px solid #dcdcdc;
}

.monitor-content-top .list-tiem-s {
  border: 0px;
  border-bottom: 1px solid #dcdcdc;
  border-top: 1px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
}

.list-tiem-combox {
  display: flex;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  background-color: #dcdcdc;
  border: 1px solid #dcdcdc;
  box-sizing: border-box;
}

.combox-input {
  display: flex;
  flex: 1;
  position: relative;
}

.combox-input input {
  flex: 1;
  border: 0;
  padding-left: 10px;
}

.list-tiem-combox .combox-content {
  position: absolute;
  top: 30px;
  z-index: 99999;
  background-color: white;
  width: 100%;
  border: 1px solid #dcdcdc;
  height: 400px;
  display: none;
  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
}

.list-tiem-combox .combox-content .list-car1 {
  position: absolute;
  left: 0;
  right: 0;
  background-color: white;
  border: 0px;
  border-bottom: 1px solid #dcdcdc;
}

.list-tiem-combox .combox-content .list-car2 {
  margin-top: 30px;
  overflow: auto;
  height: 370px;
}

#tree2 {
  height: 30px;
}

.howen-report-chart {
  display: flex;
  flex-direction: column;
  padding: 0 0 10px 10px;
}

.howen-report-chart #chart {
  flex: 1;
}

.howen-report-chart-tool {
  padding: 10px 15px;
  background-color: #f2f2f2;
}

.fence_main_left .layui-nav-tree dd a {
  padding: 0 0 0 35px;
}

.layui-form-label {
  width: unset;
}

.evi li {
  display: inline-block;
  vertical-align: bottom;
}

.evi-item {
  width: 300px;
  height: 280px;
  margin: 20px 20px 0px 0;
  border: 1px solid #dcdcdc;
  flex-direction: column;
  display: flex;
}

.evi-item-img {
  flex: 1;
  cursor: pointer;
}

.evi-item-title {
  /* height: 30px;
    line-height: 30px; */
  padding-left: 10px;
}

.evi-item-title-alarmtype {
  margin-left: 10px;
  color: red;
}

.evi-item-location span {
  padding-right: 5px;
  color: #1e9fff;
  cursor: pointer;
}

.evi-item-op {
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  color: #1e9fff;
  cursor: pointer;
}

.evi-item-location {
  height: 20px;
  line-height: 20px;
  padding-left: 10px;
  font-size: 12px;
}

.evi-item-img .layui-carousel {
  height: 100%;
  width: 100%;
}

.evi-body {
  padding: 10px 0 0 10px;
  box-sizing: border-box;
}

.evi-body .layui-form-select {
  display: inline-block;
  height: 30px;
}

.evi-body .layui-form-select input {
  height: 30px;
}

.evi-body .layui-breadcrumb {
  background-color: white;
}

.evi-body .layui-breadcrumb a {
  vertical-align: middle;
}

.evi-body .layui-breadcrumb span {
  vertical-align: middle;
}

.evi-breadcrumb {
  padding-left: 10px;
}

.howen-report-chart-tool {
  margin-top: 10px;
}

.evi-body .layui-tab-title li:first-child i {
  display: none;
}

.evi-body .layui-tab {
  height: 100%;
}

.evi-body .layui-tab-content {
  height: calc(100% - 36px);
}

.evi-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.evi-item-2 {
  height: 240px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.evi-play {
  flex: 1;
}

.evi-item-map {
  height: 100%;
  flex: 4;
}

.evi-item-3 {
  margin: 20px 20px 0px 0;
  border: 1px solid #dcdcdc;
  cursor: pointer;
  display: inline-block;
}

.evi-item-3-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* height: 30px; */
  background-color: #000000;
  padding: 10px;
  color: white;
}

.evi-item-3-del {
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-top: 80px solid red;
  border-left: 100px solid transparent;
}

.evi-item-3-del-icon {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 25px;
  color: white;
}

.evi-item-3 > div {
  /* width: 300px; */
  /* height: 200px; */
  position: relative;
}

.evi-item-2 .evi-item-img {
  text-align: center;
}

.evi-play {
  display: flex;
  box-sizing: border-box;
}

.evi-item img {
  height: 100%;
  width: 100%;
}

.evi-play-map {
  flex: 1;
}

.evi-play-video {
  padding: 0 10px 0 0;
}

.evi-item-2 .evi-item-3-play {
  line-height: 300px;
  font-size: 50px;
}

.howen-report-content .layui-tab {
  height: 100%;
}

.howen-report-content .layui-tab-content {
  height: calc(100% - 46px);
}

.howen-management .layui-tab-title {
  padding: 10px 0px 0 10px;
}

.howen-report-content .layui-tab-title {
  padding: 10px 0px 0 10px;
}

.layui-layer .layui-laydate,
.layui-laydate-hint {
  border: 0 !important;
  box-shadow: 0px 0px 0px !important;
}

.playback-content .layui-laydate,
.layui-laydate-hint {
  border: 0 !important;
  box-shadow: 0px 0px 0px !important;
}

.evi-body #chart {
  overflow-y: auto;
  height: calc(100% - 65px);
}

.fence_main_right .layui-upload {
  margin: 10px;
}

.evi .layui-none {
  text-align: center;
  padding: 16px;
  color: #999;
}

.howen-report-content .fence_main_left {
  overflow-y: auto;
}

.evi-item .evi-item-img {
  height: 220px;
  width: 300px;
}

.preview {
  margin-left: 30px;
}

.server_sys_alarm_color {
  overflow-y: auto;
  padding-left: 20px;
  padding-bottom: 20px;
  padding-top: 20px;
}

.server_sys_alarm_color .layui-form-checkbox {
  margin: 5px 10px;
}

#alarm_content > span {
  margin: 0 0 10px 0;
  display: block;
}

#alarm_content {
  margin-bottom: 10px;
}

.server_sys_alarm_color_body .layui-btn-container .layui-btn-primary {
  display: none;
}

.howen_management {
  height: 100%;
}

.howen-management .layui-tab {
  height: 100%;
}

.howen-management .layui-tab-content {
  height: calc(100% - 46px);
}

.osm-car-lable {
  width: auto !important;
  height: auto !important;
  white-space: nowrap;
  outline: none;
  padding: 6px;
  border: 0;
  border-radius: 5px;
  background-color: #ffffff;
}

.layui-table-tool-panel li.layui-form {
  display: none;
}

.fence_main_split_v {
  width: 6px;
  min-width: 6px;
  border-left: 1px #dcdcdc solid;
  border-right: 1px #dcdcdc solid;
  display: flex;
  align-items: center;
}

.fence_main_split_v_hand {
  cursor: col-resize;
  height: 30px;
  flex: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.fence_main_split_v_hand i {
  height: 1px;
  width: 6px;
  display: block;
  background: rgba(23, 35, 61, 0.45);
}

.fence_main_split_h {
  height: 6px;
  border-top: 1px #dcdcdc solid;
  border-bottom: 1px #dcdcdc solid;
  justify-content: center;
  display: flex;
}

.fence_main_split_h_hand {
  height: 6px;
  width: 30px;
  min-height: 6px;
  box-sizing: border-box;
  cursor: row-resize;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.fence_main_split_h_hand i {
  height: 6px;
  width: 1px;
  display: block;
  background: rgba(23, 35, 61, 0.45);
}

.real-time .fence_main_left {
  overflow-x: auto;
}

.tv_event .layui-tab {
  height: 100%;
}

.tv_event .layui-tab .layui-tab-content {
  height: calc(100% - 36px);
}

.tv_event .layui-tab .wrapbox {
  height: 100%;
}

.tv_event .layui-tab .wrapbox .table-head {
  margin-right: 17px;
  background-color: #f2f2f2;
}

.tv_event .layui-tab .wrapbox {
  background-color: #f2f2f2;
}

.tv_event .layui-tab .wrapbox .table-head th {
  box-sizing: border-box;
  border-top: 0px;
}

.tv_event .layui-tab .wrapbox table {
  margin: 0;
}

.tv_event .layui-tab .table-body#dms_adas,
.tv_event .layui-tab .table-body#alarm {
  height: calc(100% - 71px);
}

.tv_event .layui-tab .table-body .tv_video_item_10 {
  box-sizing: border-box;
}

.body-real-time .tv_event .layui-tab .layui-table {
  width: auto;
}

.tv_event .layui-tab .layui-tab-item {
  overflow: hidden;
}

.body-real-time .tv_event .layui-tab .layui-table > div {
  width: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.tv_event .layui-tab .layui-table .span-map_gps {
  display: none;
}

.tv_event .layui-tab .layui-table .alarm-red {
  color: red;
}

.tv_event .layui-tab-title {
  background-color: #ffffff;
}

.real-time .fence_main_left {
  display: flex;
  flex-direction: column;
}

.real-time .monitor-content-bottom {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-x: hidden;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
  position: relative;
  height: 30px;
  line-height: 30px;
}

.monitor-content-bottom-pzt {
  height: 320px;
}

.monitor-content-bottom-collapse_transform {
  transform: rotate(-0deg) !important;
  -ms-transform: rotate(-0deg) !important;
  /* IE9 */
  -moz-transform: rotate(-0deg) !important;
  /* Firefox */
  -webkit-transform: rotate(-0deg) !important;
  /* Safariå’ŒChrome */
  -o-transform: rotate(-0deg) !important;
  /* Opera */
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  /*Firefox 4 */
  -webkit-transition: all 0.5s ease-in-out;
  /* Safariå’ŒChrome */
  -o-transition: all 0.5s ease-in-out;
  /* Opera */
}

.monitor-content-bottom-collapse_transform180 {
  transform: rotate(180deg) !important;
  -ms-transform: rotate(180deg) !important;
  /* IE9 */
  -moz-transform: rotate(180deg) !important;
  /* Firefox */
  -webkit-transform: rotate(180deg) !important;
  /* Safariå’ŒChrome */
  -o-transform: rotate(180deg) !important;
  /* Opera */
  transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  /*Firefox 4 */
  -webkit-transition: all 0.5s ease-in-out;
  /* Safariå’ŒChrome */
  -o-transition: all 0.5s ease-in-out;
  /* Opera */
}

.monitor-content-bottom-pzt .pie {
  position: relative;
  margin: 10px;
  padding: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
}

.pie li,
.monitor-content-bottom-pzt .center {
  background-color: #eeeeee;
  border: 1px solid white;
  box-sizing: border-box;
  cursor: pointer;
}

.pie li:hover,
.monitor-content-bottom-pzt .center:hover {
  box-shadow: rgb(11, 234, 235) 0px 0px 10px inset;
}

.monitor-content-bottom-pzt-table {
  width: 100%;
  height: 100%;
}

.monitor-content-bottom-pzt-table td {
  padding: 5px 10px;
}

.monitor-content-bottom-pzt-fun {
  width: 120px;
}

.monitor-content-bottom-pzt-fun i {
  cursor: pointer;
}

.monitor-content-bottom-pzt-fun label {
  padding: 0 20px;
}

.monitor-content-bottom-pzt-fun-ch label {
  vertical-align: middle;
  margin-right: 10px;
}

#presets {
  border: 1px solid #eeeeee;
  height: 30px;
  padding: 0 20px;
}

#presets option {
  height: 30px;
}

.monitor-content-bottom-pzt .center {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 19px;
  left: 20px;
  border-radius: 50%;
  background: url("/vss/image/ref.png") no-repeat center center / 70% 70%;
  background-color: #eeeeee;
  background-position: 10px 10px;
  border: 1px solid white;
  box-sizing: border-box;
}

.monitor-content-bottom-pzt .layui-form-switch {
  margin-top: 0;
}

.monitor-content-bottom-pzt .slice {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
}

.monitor-content-bottom-pzt img {
  margin-top: 25px;
  margin-left: 8px;
  width: 17px;
}

.monitor-content-bottom-pzt .slice-one {
  transform: rotate(-22.5deg) skewY(-45deg);
}

.monitor-content-bottom-pzt .slice-one img {
  transform: skewY(45deg) rotate(22.5deg);
}

.monitor-content-bottom-pzt .slice-two {
  transform: rotate(22.5deg) skewY(-45deg);
}

.monitor-content-bottom-pzt .slice-two img {
  transform: skewY(45deg) rotate(22.5deg);
}

.monitor-content-bottom-pzt .slice-three {
  transform: rotate(67.5deg) skewY(-45deg);
}

.monitor-content-bottom-pzt .slice-three img {
  transform: skewY(45deg) rotate(22.5deg);
}

.monitor-content-bottom-pzt .slice-four {
  transform: rotate(112.5deg) skewY(-45deg);
}

.monitor-content-bottom-pzt .slice-four img {
  transform: skewY(45deg) rotate(22.5deg);
}

.monitor-content-bottom-pzt .slice-five {
  transform: rotate(157.5deg) skewY(-45deg);
}

.monitor-content-bottom-pzt .slice-five img {
  transform: skewY(45deg) rotate(22.5deg);
}

.monitor-content-bottom-pzt .slice-six {
  transform: rotate(202.5deg) skewY(-45deg);
}

.monitor-content-bottom-pzt .slice-six img {
  transform: skewY(45deg) rotate(22.5deg);
}

.monitor-content-bottom-pzt .slice-seven {
  transform: rotate(247.5deg) skewY(-45deg);
}

.monitor-content-bottom-pzt .slice-seven img {
  transform: skewY(45deg) rotate(22.5deg);
}

.monitor-content-bottom-pzt .slice-eight {
  transform: rotate(292.5deg) skewY(-45deg);
}

.monitor-content-bottom-pzt .slice-eight img {
  transform: skewY(45deg) rotate(22.5deg);
}

.real-time .monitor-content-bottom-collapse {
  position: absolute;
  width: 35px;
  height: 35px;
  top: 0;
  right: 0;
  text-align: center;
  z-index: 1000;
  transform: rotate(180deg);
}

.real-time .monitor-content-bottom-collapse .iconfont {
  line-height: 35px;
  font-size: 24px;
  cursor: pointer;
}

/* .real-time .monitor-content-bottom>div {
    display: flex;
    flex-direction: column;
    border: 1px #dcdcdc solid;
    margin: 0 5px;
    padding: 5px;
    min-width: 60px;
    width: 60px;
    text-align: center;
} */

.index-top-menu li a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
  padding: 0 15px !important;
  /*åŠ å®½åº¦width属来兼容部分浏览*/
}

.layui-layout-right .layui-badge-dot {
  margin: -15px 6px 0 0 !important;
}

.layui-layout-left1 {
  display: flex;
}

.evi-item-3-title .download {
  float: right;
}

@media screen and (max-width: 1366px) {
  .layui-layout-left1 span {
    display: none;
  }
}

.layui-laydate.layui-laydate-range {
  z-index: 99999999;
}

.howen-message {
  padding: 20px;
  opacity: 0.8;
}

.howen-message-item {
  background-color: #eeeeee;
  border-radius: 10px;
  padding: 10px 20px;
  margin-bottom: 20px;
  display: inline-block;
  max-width: 600px;
}

.howen-message-title {
  opacity: 0.8;
  margin-bottom: 10px;
}

.howen-message-content {
  font-size: 16px;
}

.howen-message-bottom {
  margin-top: 20px;
}

.howen-message-loadmore {
  display: none;
  justify-content: center;
  height: 40px;
  align-items: center;
}

.howe-loading {
  font-size: 24px !important;
  opacity: 0.8;
  display: inline-block;
  animation: mymove 1s infinite;
  -webkit-animation: mymove 1s infinite;
  /*Safari and Chrome*/
}

@keyframes mymove {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes mymove
/*Safari and Chrome*/ {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.howen-msg-mark,
.howen-msg-down {
  display: none;
}

.howen-m-20 {
  margin: 10px 0;
}

.howen_management_driver_add form > div:first-child {
  display: flex;
  flex: 1;
}

.howen_management_driver_add form > div:first-child > div:first-child {
  display: flex;
  flex: 1;
  margin-bottom: 70px;
}

.howen_management_driver_add form > div:first-child > div:first-child > div {
  flex: 1;
}

.howen_management_driver_add
  form
  > div:first-child
  > div:first-child
  > div:last-child {
  margin-left: 20px;
}

.layui-upload-img {
  height: 140px;
}

#render-fleet .list-tiem-combox {
  height: 38px;
  line-height: 1.3;
  line-height: 38px\9;
  box-sizing: border-box;
  background-color: #dcdcdc;
  border: 1px solid #dcdcdc;
  box-sizing: border-box;
}

#render-fleet .list-s-checkbox {
  line-height: 1.3;
  line-height: 38px\9;
  padding-top: 8px;
}

.howen_management_driver .layui-border-box {
  border-width: 0;
}

.howen_management_autodownload_add #test2 .list {
  flex: 1;
}

.howen_management_vehicle .howen-fleet-select {
  vertical-align: top !important;
}

#globalParamId .layui-unselect {
  display: inline-block;
}

.body-playback .fence_main_right {
  overflow-y: auto;
  height: 100%;
}

.layui-input-block {
  margin-left: 200px;
  min-height: 36px;
}

.howen-alarm-selected-item {
  display: inline-block;
  padding: 2px 10px 2px 0;
}

.howen-alarm-selected-item label {
  vertical-align: middle;
}

.howen-alarm-selected-item input {
  vertical-align: middle;
}

.howen-alarm-selected-title {
  padding: 10px 0 10px 15px;
  font-size: 20px;
}

.howen-alarm-selected-box {
  padding: 10px 5px;
  border-top: 1px solid #eeeeee;
  border-radius: 5px;
  margin: 0 10px;
}

.howen-alarm-selected-list {
  width: 350px;
  min-height: 30px;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  align-items: center;
  padding: 0 5px;
  flex: 1;
  background-color: white;
}

.howen-alarm-selected-list li {
  display: inline-block;
  margin: 2px 5px;
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
  box-sizing: border-box;
  padding: 3px 3px;
}

.howen-alarm-selected-list li span {
  white-space: nowrap;
}

.howen-alarm-selected-list li i {
  padding: 0 5px;
  cursor: pointer;
}

.howen-alarm-selected-view {
  width: 350px;
  display: flex;
  flex-direction: row;
  border: 1px solid #dcdcdc;
  position: relative;
}

.howen-alarm-selected {
  box-sizing: border-box;
  position: absolute;
  width: inherit;
  top: 35px;
  height: 400px;
  overflow-y: scroll;
  border: 1px solid #dcdcdc;
  display: none;
  z-index: 100;
  background-color: white;
  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
}

.howen-alarm-selected-more {
  width: 30px;
  justify-content: center;
  align-items: center;
  display: flex;
  background-color: #eeeeee;
  cursor: pointer;
}

.howen-alarm-selected-item label {
  display: none;
}

#alarmtypes {
  display: inline-flex;
  vertical-align: bottom;
}

.layui-table-tool a {
  margin-left: 5px;
  height: 30px;
}

.layui-table-tool {
  line-height: unset !important;
}

.howen_management_alarmstrategy_add .howen-alarm-selected-more {
  display: none;
}

.howen_management_alarmstrategy_add .howen-alarm-selected {
  display: inline;
  height: 500px;
  border: 0px;
  box-sizing: border-box;
  padding: 0;
}

.howen_management_alarmstrategy_add #test1 {
  box-sizing: border-box;
}

.playback-time-list .layui-table {
  margin: 0;
  width: auto;
}

.playback-time-list .table-head {
  overflow-x: hidden;
  margin-right: 17px;
  background-color: #f2f2f2;
}

.playback-time-list .table-body {
  height: 200px;
  overflow-y: auto;
}

.playback-time-list .table-body td {
  white-space: nowrap;
}

.playback-time-list th div,
.playback-time-list td div {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.timerBar {
  overflow-x: hidden;
}

.evi-share {
  position: fixed;
  width: 40px;
  height: 40px;
  z-index: 1000;
  right: 30px;
  bottom: 100px;
}

.evi-share .icon-fenxiang {
  font-size: 40px;
}

.fuel-sensor-option i {
  font-size: 20px;
  padding: 0 5px;
  cursor: pointer;
}

.howen_management_alarmstrategy_add .howen-alarm-selected-view {
  width: 100%;
}

.context-menu-root {
  z-index: 10000;
}

.howen_management_alarmstrategy_add .howen-alarm-selected {
  height: 474px !important;
}

.context-menu-list {
  z-index: 10000 !important;
}

.howen_management_alarmstrategy_add .howen-alarm-selected-list {
  display: none;
}

/**
 * ContextJS Styles
 * For use WITHOUT Twitters Bootstrap CSS
 */

.nav-header {
  display: block;
  padding: 3px 15px;
  font-size: 11px;
  font-weight: bold;
  line-height: 20px;
  color: #999;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  text-align: left;
}

.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}

.dropdown-menu .divider {
  *width: 100%;
  height: 1px;
  margin: 9px 1px;
  *margin: -5px 0 5px;
  overflow: hidden;
  background-color: #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

.dropdown-menu a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: #333333;
  white-space: nowrap;
  text-decoration: none;
}

.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
  color: #ffffff;
  text-decoration: none;
  background-color: #0088cc;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(
    linear,
    0 0,
    0 100%,
    from(#0088cc),
    to(#0077b3)
  );
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
  color: #ffffff;
  text-decoration: none;
  background-color: #0088cc;
  background-color: #0081c2;
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(
    linear,
    0 0,
    0 100%,
    from(#0088cc),
    to(#0077b3)
  );
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-repeat: repeat-x;
  outline: 0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

.dropdown-menu .disabled > a,
.dropdown-menu .disabled > a:hover {
  color: #999999;
}

.dropdown-menu .disabled > a:hover {
  text-decoration: none;
  cursor: default;
  background-color: transparent;
}

.open {
  *z-index: 1000;
}

.open > .dropdown-menu {
  display: block;
}

.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  border-top: 0;
  border-bottom: 4px solid #000000;
  content: "\2191";
}

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 1px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu > .dropdown-menu.drop-left {
  left: -100%;
}

.dropdown-submenu:hover .dropdown-menu {
  display: block;
}

.dropdown-submenu > a:after {
  display: block;
  float: right;
  width: 0;
  height: 0;
  margin-top: 5px;
  margin-right: -10px;
  border-color: transparent;
  border-left-color: #cccccc;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  content: " ";
}

.dropdown-submenu:hover > a:after {
  border-left-color: #ffffff;
}

.dropdown .dropdown-menu .nav-header {
  padding-right: 20px;
  padding-left: 20px;
}

/**
 *  Context Styles
 */

.dropdown-context .nav-header {
  cursor: default;
}

.dropdown-context:before,
.dropdown-context-up:before,
.dropdown-context-left:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: "";
}

.dropdown-context:after,
.dropdown-context-up:after,
.dropdown-context-left:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: "";
}

.dropdown-context-up:before,
.dropdown-context-up:after {
  top: auto;
  bottom: -7px;
  z-index: 9999;
}

.dropdown-context-up:before {
  border-right: 7px solid transparent;
  border-top: 7px solid #ccc;
  border-bottom: none;
  border-left: 7px solid transparent;
}

.dropdown-context-up:after {
  border-right: 6px solid transparent;
  border-top: 6px solid #ffffff;
  border-left: 6px solid transparent;
  border-bottom: none;
}

.dropdown-context-left:before {
  left: auto;
  right: 9px;
}

.dropdown-context-left:after {
  left: auto;
  right: 9px;
}

.dropdown-context-sub:before,
.dropdown-context-sub:after {
  display: none;
}

.dropdown-context .dropdown-submenu:hover .dropdown-menu {
  display: none;
}

.dropdown-context .dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.compressed-context a {
  padding-left: 14px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
}

.compressed-context .divider {
  margin: 5px 1px;
}

.compressed-context .nav-header {
  padding: 1px 13px;
}

.dynamic-menu-src {
  display: none;
}

.selected_ch_list_play,
.selected_ch_list_down {
  cursor: pointer;
}

.layui-table-fixed,
.layui-table-body .layui-table-body {
  overflow: hidden;
}

.layui-table-fixed table {
  overflow-y: hidden;
}

.table-filter-input {
  width: 200px !important;
  display: inline !important;
  height: 30px !important;
  margin: 0 10px;
  vertical-align: bottom;
}

.table-filter {
  overflow: hidden;
  padding: 5px;
}

.iconfont-size-20 {
  font-size: 22px;
  width: 40px;
  height: 29px;
}

.howen_management_vehice_add .list-tiem-combox {
  height: 38px;
  line-height: 38px;
}

.list-s-search-filter,
.list-s-search-info {
  position: absolute;
  top: 40px;
  border-width: 1px;
  width: 200px;
  border-radius: 2px;
  background-color: #fff;
  border-style: solid;
  border-color: #eee;
  display: none;
  color: black;
}

.list-s-search-filter dt,
.list-s-search-info dt {
  text-align: left;
  padding: 2px 5px;
  color: black;
  font-size: 14px;
}

.list-s-search-filter dt:hover,
.list-s-search-info dt:hover {
  background-color: #f6f6f6;
  transition: 0.5s all;
}

.list-s-search-filter-select::before {
  content: "\e71d";
  padding: 0 10px;
  color: #dcdcdc;
}

.list-s-search-filter-split {
  height: 1px;
  background-color: #dcdcdc;
  box-sizing: border-box;
  padding: 0px !important;
}

.list-s-search-filter-select-select::before {
  color: #1e9fff !important;
}

.list-tiem-s > span {
  border-right: 1px solid #dcdcdc;
}

.input > span {
  border-right: 1px solid #dcdcdc;
}

.list-s-search-info tr {
  padding: 5px;
}

.list-s-search-info td {
  padding: 0 15px;
  font-size: 14px;
}

.index-top-menu .layui-nav-child dd {
  padding: 0 10px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

.index-top-menu .layui-nav-child dd:hover {
  background-color: #f2f2f2;
  color: #000;
}

.layui-tab-title dt {
  display: inline;
  position: absolute;
  top: 10px;
  right: 40px;
  cursor: pointer;
  opacity: 0.6;
}

.layui-tab-title dt:last-child {
  display: inline;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  opacity: 0.6;
}

.layui-tab-title dt:hover {
  opacity: 0.8;
  -moz-transition: opacity 1s;
  /* Firefox 4 */
  -webkit-transition: opacity 1s;
  /* Safari and Chrome */
  -o-transition: opacity 1s;
  /* Opera */
}

.fence_main_middle-flex1 {
  flex: 1 !important;
}

.tv_event-height-100 {
  height: 100% !important;
}

.table-header-filter,
.table-header-filter-dms {
  font-size: 14px;
  padding: 0 5px;
  opacity: 0.6;
  cursor: pointer;
}

#alarm-types ul,
#alarm-no-types ul {
  display: none;
}

#alarm-types > div,
#alarm-no-types > div {
  border: 0;
}

#alarm-types .howen-alarm-selected-more,
#alarm-no-types .howen-alarm-selected-more {
  display: none;
}

.body-real-time .howen-alarm-selected {
  left: -30px;
}

.evi-body #page {
  padding: 15px 0 10px;
}

.howe-filter-alarm .layui-form {
  padding: 20px;
}

.howe-filter-alarm #alarm-types .howen-alarm-selected {
  display: unset;
  position: unset;
  width: unset;
  height: unset;
  overflow-y: unset;
  border: unset;
}

.howe-filter-alarm .howen-alarm-selected-view {
  width: unset;
}

.send-txt {
  padding: 0;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.send-txt-left {
  width: 300px;
  height: 100%;
}

.send-txt-right {
  flex: 1;
  height: 100%;
  display: flex;
  overflow: auto;
  flex-direction: column;
}

.send-txt-splt {
  width: 5px;
  background-color: #e5e5e5;
}

.send-txt-txt {
  height: 100px;
}

#send-txt-device-tree,
#send-txt-device-tree .list {
  height: 100%;
}

#send-txt-device-tree .list-car2 {
  height: calc(100% - 30px);
}

.send-txt-device-title {
  height: 40px;
  line-height: 55px;
  padding-left: 10px;
}

.send-txt-txt-device {
  flex: 1;
  margin: 10px 5px 0 5px;
}

.grid-demo-bg1 {
  line-height: 100px;
  padding-left: 5px;
}

.grid-demo {
  margin: 5px;
}

.send-txt-txt-device .wrapbox {
  height: calc(100% - 20px);
  box-sizing: border-box;
}

.send-txt-txt-device #gps {
  height: 307px;
  overflow-y: auto;
}

.send-txt-txt-device .layui-table {
  margin: 0;
}

.hw-device-driver {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hw-device-driver > div:first-child {
  height: 51px;
  background-color: #f2f2f2;
  line-height: 51px;
  padding-left: 10px;
}

.hw-device-driver > div:last-child {
  flex: 1;
}

.device-parameter-send-device .layui-row,
.howen_management_device_driver .layui-row {
  height: 100%;
}

.howen_management_device_driver .monitor-content-top {
  padding: 0;
}

.playback-content .howen_date {
  width: 100% !important;
}

.device-parameter-send-device .layui-table-tool-temp {
  padding-right: 0px;
}

#device-full-state {
  margin-left: 20px;
}

.map-content
  > .map-content-middle
  > .map-content-middle-speed
  > span:last-child {
  display: inline-block;
  width: 100%;
  word-wrap: break-word;
  white-space: normal;
}

.howen-dashboard #alarm-types .layui-form-checkbox {
  height: 20px !important;
}

.howen-dashboard .howen-alarm-selected-view {
  width: 550px;
}

.howen-dashboard .howen-alarm-selected {
  top: -200px;
  height: 300px;
}

.howen_management_vehice_parameter_send .monitor-content-top .list {
  height: calc(100% - 45px);
}

.body-real-time .table-body td div {
  word-break: break-word;
}

.howen_report_flow_query-1 .layui-laydate {
  box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
}

.fence_share_head .layui-form input[type="number"] {
  width: 150px;
  display: inline-block;
}

.fence_share_head .layui-form .layui-word-aux {
  display: inline-block;
  float: none;
}

.evi-detail2 {
  display: flex;
  height: 100%;
}

.evi-play2 {
  flex: 3;
  display: flex;
  flex-direction: column;
}

.evi-video2 {
  flex: 3;
  display: flex;
  overflow: hidden;
}

.evi-video2 .evi-play-video2 {
  flex: 1;
  background-color: #000;
}

.evi-video2 .evi-item-4 {
  width: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

.evi-driver2-split1 {
  height: 10px;
}

.evi-driver2 {
  flex: 2;
  display: flex;
  overflow-y: hidden;
}

.evi-video2 .evi-item-4 .evi-item-3 {
  width: 100%;
  margin: 0px;
  cursor: pointer;
  display: inline-block;
}

.evi-driver2 .evi-driver2-item {
  flex: 1;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  display: flex;
  overflow-y: auto;
  box-sizing: border-box;
}

.evi-driver2 .evi-driver2-item > div {
  flex: 1;
  margin: 10px;
  box-sizing: border-box;
  overflow: auto !important;
  overflow: hidden;
}

.evi-driver2-item h3 {
  border-bottom: 1px solid #dcdcdc;
  padding-bottom: 10px;
}

.evi-driver2-item table {
  width: 100%;
}

.evi-driver2 .evi-driver2-item > div tr td:first-child {
  text-align-last: justify;
  padding: 0 10px 10px 0px;
}

.evi-driver2 .evi-driver2-item > div tr td:last-child {
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
  padding: 0 10px 10px 0px;
}

.evi-driver2 .evi-driver2-split {
  width: 10px;
}

.evi-body2 {
  padding: 10px;
  box-sizing: border-box;
}

.evi-play-map2 {
  flex: 2;
  padding-left: 10px;
  box-sizing: border-box;
}

.howen_management_virtualalarmstrategy_add .howen-alarm-selected-more,
.howen_management_virtualalarmstrategy_add .howen-alarm-selected-view > ul {
  display: none;
}

.howen_management_virtualalarmstrategy_add .howen-alarm-selected {
  top: 0;
  border: 0;
  bottom: 0;
  right: 0;
  height: 530px !important;
}

.howen_management_virtualalarmstrategy_add .howen-alarm-selected-view {
  border: 0;
  width: 100%;
}

.howen_management_virtualalarmstrategy_add .howen-alarm-selected {
  display: block;
}

.howen_management_alarmstrategy_add .howen-alarm-selected-more,
.howen_management_alarmstrategy_add .howen-alarm-selected-view > ul {
  display: none;
}

.howen_management_alarmstrategy_add .howen-alarm-selected {
  top: 0;
  border: 0;
  bottom: 0;
  right: 0;
  height: 540px !important;
}

.howen_management_alarmstrategy_add .howen-alarm-selected-view {
  border: 0;
  width: 100%;
}

.howen_management_alarmstrategy_add .howen-alarm-selected {
  display: block;
}

.server-manage-node .fence_main_right {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.server-manage-node .server-config-box1 {
  flex: 1;
  overflow: auto;
  margin: 0;
  padding: 20px;
}

s .server-manage-node .server-config-box-btn {
  height: 40px;
  display: flex;
  flex-direction: row-reverse;
  margin-right: 20px;
  align-items: center;
}

.howen-report-speed .layui-form-select {
  width: 200px;
  display: inline-block;
  height: 30px;
}

.howen-report-speed .layui-select-title {
  height: 30px;
}

.howen-report-speed .layui-select-title input {
  height: 30px;
}

.table-filter .layui-btn-group .layui-btn:nth-child(2),
.table-filter .layui-btn-group .layui-btn:nth-child(3) {
  border-left: 0 !important;
}

.table-filter .layui-btn-group .layui-btn {
  box-sizing: border-box;
}

.playback-events .howen-alarm-selected-view {
  width: 292px !important;
}

.playback-events .layui-form-checkbox[lay-skin="primary"] span {
  color: #666;
}

.body-playback
  .tv_event
  .layui-tab-content
  .layui-form.layui-border-box.layui-table-view {
  height: 100% !important;
}

.body-playback
  .tv_event
  .layui-tab-content
  .layui-form.layui-border-box.layui-table-view
  .layui-table-box {
  height: calc(100% - 41px) !important;
}

.body-playback
  .tv_event
  .layui-tab-content
  .layui-form.layui-border-box.layui-table-view
  .layui-table-box
  .layui-table-body.layui-table-main {
  height: calc(100% - 31px) !important;
}

.playback-fence {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  z-index: 100000;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
  border-radius: 5px;
}

.playback-fence .iconfont {
  color: #666;
}

.iconfont-normal {
  color: #1e9fff !important;
}

.playback-fence-f {
  position: absolute;
  top: 0;
  left: 35px;
  width: 350px;
  height: 400px;
  z-index: 100000;
  background: #ffffff;
  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
  box-sizing: border-box;
  display: none;
}

.playback-fence-box {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.playback-fence-box-tools > div {
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}

.playback-fence-box-tools {
  height: 50px;
  background-color: white;
  padding: 10px;
}

.playback-fence-box-tools .iconfont {
  color: #5fb878;
}

.playback-fence-box-fence {
  flex: 1;
  overflow: auto;
}

.alarm-event-table tr td:first-child {
  padding-right: 10px;
}

#derive,
.trip_export {
  position: absolute !important;
  margin-top: -32px;
  right: 0;
  border: 1px solid #ccc;
  width: 17px;
  height: 15px;
  padding: 5px;
  text-align: center;
  cursor: pointer;
  transition: 0.5s all;
  color: #333;
  line-height: 15px;
  margin-right: 15px;
}

.playback-fence-box-fence li {
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  border-bottom: 1px solid #f2f2f2;
}

.playback-fence-box-fence li span {
  color: rgb(102, 102, 102, 0.8);
}

.playback-fence-box-fence li:hover {
  background-color: #f2f2f2;
}

.playback-fence-box-fence-nogroup {
  padding-left: 70px !important;
}

.playback-fence-box-fence .playback-fence-box-fence-area {
  padding-left: 70px;
}

.playback-fence-box-fence-group {
  background-color: #dcdcdc;
}

.playback-fence-f .iconfont::before {
  width: 25px;
  display: inline-block;
}

.playback-fence-box-fence-area-checkboxed:before {
  color: #5fb878;
  content: "\e685";
  display: inline-block;
}

.playback-fence-box-fence-area-checkbox:before {
  color: #5fb878;
  content: "\e686";
  width: 25px;
  display: inline-block;
}

.icon-method-draw-image1:before {
  content: "\e6aa";
  display: inline-block;
}

.evi-driver2 .evi-driver2-item:last-child tr:first-child td:last-child {
  color: red;
  font-size: 20px;
  font-weight: bold;
}

.laydate-day-mark-green:after {
  background-color: green !important;
}

.laydate-day-mark-red:after {
  background-color: red !important;
}

.tv_left .layui-form-item {
  min-height: 46px;
  background-color: black;
}

.tv_event.timerBar .layui-table-view .layui-table-box,
.tv_event.timerBar .layui-table-view {
  height: 100% !important;
  border: 0;
}

.tv_event.timerBar .layui-table-view .layui-table-body {
  height: calc(100% - 30px) !important;
}

.howen-table-box {
  height: 100%;
  overflow-y: hidden;
}

.howen-table-box .layui-table {
  margin: 0;
  table-layout: fixed;
}

.howen-table-box .table-head .layui-table {
  margin: 0;
  table-layout: fixed;
  margin-right: 20px;
}

.howen-table-box .table-head {
  background-color: #f2f2f2;
  overflow: hidden;
  height: 31px;
}

.howen-table-box .table-body-box {
  position: relative;
}

.howen-table-box th div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.howen-table-box .table-body {
  table-layout: fixed;
  overflow: auto;
  width: 100%;
  height: calc(100% - 31px);
}

.howen-table-box .table-body .table-body-box {
  height: 31px;
  line-height: 31px;
}

.howen-table-box .table-body-inner > div {
  height: 31px;
  display: inline-flex;
  line-height: 31px;
  box-sizing: border-box;
}

.howen-table-box .table-body-inner > div:hover {
  background-color: #fafafa;
}

.howen-table-box .table-body-inner > div > span:first-child {
  padding: 0 10px;
  border-width: 0px 0px 1px 1px;
  border-style: solid;
  border-color: #e6e6e6;
  box-sizing: border-box;
}

.howen-table-box .table-head .layui-table > th,
.howen-table-box .table-body-inner > div > span {
  padding: 0 10px;
  border-width: 0px 0px 1px 1px;
  border-style: solid;
  border-color: #e6e6e6;

  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#CLOUDTIP {
  color: red;
  margin-top: 10px !important;
}

.channel-table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  border-radius: 2px;
  border-color: #e6e6e6;
}

.channel-table > div {
  display: flex;
  margin: 5px;
}

.channel-table > div > span:first-child {
  width: 80px;
}

.howen_management_oil_binding {
  grid-template-columns: 1fr 1fr;
  display: grid;
  height: 100%;
}

.howen_management_oil_binding_left {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.howen_management_oil_tool {
  height: 51px;
  line-height: 51px;
  padding: 5px 0 0px 10px;
  box-sizing: border-box;
  background-color: #e6e6e6;
}

.howen_management_oil_list {
  flex: 1;
}

.howen_management_oil_binding_right {
  flex: 1;
}

.oil-info table tr {
  height: 30px;
  line-height: 30px;
}

.oil-info table tr td {
  padding: 5px;
}

.oil-info table tr td:first-child {
  background-color: #e6e6e6;
}

.howen_management_fleet_add .howen-fleet-select .list-tiem-combox {
  height: 36px;
}

.howen_management_fleet_add
  .howen-fleet-select
  .list-tiem-combox
  .combox-content {
  top: 40px;
}

.evi-item-3-del {
  display: none;
}

.evi-item-3-del-icon {
  display: none;
}

#chart2_tv_event .derive {
  top: 5px !important;
  right: 5px;
  margin: 0 !important;
}

.fence_main_left_button > * {
  margin-top: 5px;
}

.layui-layer-tips .layui-layer-content {
  color: #000 !important;
}

.layui-layer-tips .layui-layer-content table {
  margin: 0;
}

.layui-layer-tips .layui-layer-content .tree-device {
  margin: 0 10px;
  font-size: 26px;
}

.layui-btn-group button:hover {
  color: #000;
}

.layui-btn-group {
  white-space: nowrap;
}

.layui-btn-group button {
  background: #dcdcdc;
  color: #000;
}

.layui-btn-group button[select] {
  background: #1e9fff;
  color: white;
}

.live_main_middle {
  flex: 7;
}

.live_main_right {
  flex: 3;
}

.tree-row {
  height: 31px;
  border-bottom: 1px solid #e6e6e6;
  place-items: center;
}

.tree-row-channel-video {
  width: 20px;
}

.tree-row-fleet {
  display: flex;
  align-items: center;
}

.tree-row-device {
  display: grid;
  place-items: center;
}

.tree-row:hover {
  background-color: #f2f2f2;
}

.tree-device {
  flex: 1;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  white-space: nowrap;
}

.tree-row-device-device {
  display: flex;
  align-items: center;
  width: 100%;

  box-sizing: border-box;
  border: 0;
}

.tree-row-channel {
  display: flex;
  align-items: center;
}

.tree-speed {
  text-align: right;
}

.tree-location {
  width: 100%;
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.fleet-box {
  height: 100%;

  margin: auto;
}

.fleet {
  height: calc(100% - 30px);
  width: 100%;
  overflow: auto;
  margin: auto;
}

.tree-checkbox {
  width: 30px;
  text-align: center;
  display: inline-block;
  color: #0094ff;
}

.icon-gengduo3 {
  color: #0094ff;
}

.tree-fleet {
  margin-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  flex: 1;
}

.tree-fleet::before {
  content: "\e71e";
  display: inline-block;
  width: 30px;
  text-align: center;
  color: #0094ff;
  font-size: 16px;
}

.tree-device::before {
  display: inline-block;
  width: 30px;
  text-align: center;
  font-size: 20px;
}

.tree-title::before {
  display: inline-block;
  width: 30px;
  text-align: center;
}

.tree-title {
  width: 100%;
  box-sizing: border-box;
  display: initial;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offline::before {
  color: #dcdcdc;
}

.online-color {
  color: green;
}

.alarm-color {
  color: red;
}

.icon-none {
  content: "";
  display: inline-block;
  width: 30px;
  text-align: center;
}

.tree-row-title {
  position: sticky;
  top: 0px;
  background-color: #f2f2f2;
  width: 100%;
}

.tree-row-tools {
  position: sticky;
  background-color: #f2f2f2;
  width: 100%;
  height: 31px;
  line-height: 31px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
}

.tree-row-tools input {
  border: 0;
  outline: 0;
  flex: 1;
  height: 20px;
}

.layui-layer-tips dl {
  margin: 0;
  color: black;
}

.icon-paixu1,
.icon-paixu {
  font-size: 20px;
}

.tree-channel {
  font-size: 12px;
  padding: 0;
  border-spacing: 0;
  place-self: flex-start;
  height: 31px;
  box-sizing: border-box;
  overflow: hidden;
}

.tree-channel td {
  font-size: 12px;
  padding: 0 2px 0 0;
  text-align: center;
}

.fleet-commbox {
  height: 30px;
  border: 1px solid #dcdcdc;
  box-sizing: border-box;
  display: flex;
}

.fleet-commbox > span {
  width: 30px;
  text-align: center;
  align-self: center;
}

.fleet-commbox > div {
  flex: 1;
  align-self: center;
  padding: 0 5px;
}

.span-map_gps {
  display: none;
}

#tab_type_event_content .content {
  /* height: calc(100% - 40px); */
  height: 100%;
}

#tab_type_alarm_content .content,
#tab_type_alarm_dms_content .content {
  height: calc(100% - 40px);
}

.howen-alarm-selected-box .iconfont::before,
.howen-alarm-selected-title .iconfont::before {
  color: #1e9fff;
  content: "\e686";
}

.howen-alarm-selected-box .iconfont[checked]::before,
.howen-alarm-selected-title .iconfont[checked]::before {
  color: #1e9fff;
  content: "\e685";
}

.howen-alarm-selected-box .iconfont[indeterminate]::before,
.howen-alarm-selected-title .iconfont[indeterminate]::before {
  color: #1e9fff;
  content: "\e6aa";
}

.map-info-windows > div > span:first-child {
  font-weight: bold;
  margin-right: 10px;
}

.map-info-windows > div > span:first-child::after {
  content: ":";
}

.map-info-windows .map-info-alarmtxt {
  color: red;
}

.map-info-windows > div {
  word-wrap: break-word;
  padding: 2px 0;
}

.maptalks-msgBox h2 {
  font-size: 20px !important;
}

.tree-row[select] {
  background-color: beige;
}

.monitor-content-bottom-ops span:nth-child(even) {
  margin-right: 5px;
}

.monitor-content-bottom-ops span:nth-child(odd) {
  font-weight: bold;
  margin-right: 5px;
}

.monitor-content-bottom-ops span:nth-child(odd)::after {
  content: ":";
}

.row-state-location .iconfont::before {
  width: 30px;
  display: inline-block;
  text-align: center;
  color: #1e9fff;
  cursor: pointer;
}

.row-state-location .no-ref::before {
  color: #dcdcdc;
}

.chenge-map {
  display: flex;
  flex-direction: column;
}

.chenge-map .icon-map {
  position: relative;
}

.chenge-map .icon-map ul {
  position: absolute;
  left: 35px;
  top: 0;
  background: #ffffff;
  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
  color: #666;
  border-radius: 5px;
  padding: 0px;
  min-width: 150px;
  padding: 5px 0;
  list-style: none;
}

.chenge-map .icon-map ul li {
  padding: 5px 10px;
}

.chenge-map .icon-map ul li:hover {
  background-color: #dcdcdc;
}

.chenge-map > span {
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
  border-radius: 5px;
  color: #666;
}

/* 
.chenge-map>span:hover {
    color: #1E9FFF;
} */

.tree-row-tools input {
  padding: 0 5px;
}

.fleet-commbox-val {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-box form .layui-col-xs6 {
  display: flex;
  flex-direction: column;
}

.email-box form {
  margin-bottom: 10px;
}

.email-box form .layui-col-xs6 span {
  margin: 10px 0;
}

.email-box form .layui-col-xs6 span::after {
  content: "*";
  color: red;
  margin: 5px 5px;
}

.email-push-content form > div {
  display: flex;
  flex-direction: column;
}

.email-push-content form > div lable {
  margin: 10px 0;
}

.email-push-content form > div lable.required::after {
  content: "*";
  color: red;
  margin: 5px 5px;
}

.fleet .iconfont::before {
  cursor: pointer;
}

.fleet .tree-fleet::before,
.fleet .tree-device::before {
  cursor: unset;
}

.Map-bubble-body {
  overflow: auto;
}

.howen-alarm-selected-item .iconfont {
  font-size: 14px;
}

.howen-alarm-selected-title {
  background-color: #f2f2f2;
}
.howen-alarm-selected-title span {
  font-size: 14px;
}