.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,
#video1 {
    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;
}

.tv_control_font_hover {
    cursor: pointer;
}

.tv_control_font_hover: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;
}

.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(/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(../image/group.png) left no-repeat;
    background-size: 14px 14px !important;
    height: 100% !important;
}

.vehicle_icon_0 {
    background: url(../image/vehicle_icon_0.png) center no-repeat;
}

.vehicle-fence-on {
    background: url(../image/fence-on.png) center no-repeat;
}

.vehicle-fence-off {
    background: url(../image/fence-off.png) center no-repeat;
}

.dingwei-on {
    background: url(../image/dingwei-on.png) center no-repeat;
}

.dingwei-off {
    background: url(../image/dingwei-off.png) center no-repeat;
}

.video-enable {
    background: url(../image/video_enable.png) center no-repeat;
}

.video-disable {
    background: url(../image/video_disable.png) center no-repeat;
}

.driver-bound {
    background: url(../image/driver_bound.png) center no-repeat;
}

.driver-unbound {
    background: url(../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(../image/listen_on.png) center no-repeat;
}

.listen_off {
    background: url(../image/listen_off.png) center no-repeat;
}

.vehicle-more {
    background: url(../image/vehicle_more.png) center no-repeat;
}

.vehicle-online {
    background: url(../image/vehicle_online.png) center no-repeat;
}

.vehicle-offline {
    background: url(../image/vehicle_offline.png) center no-repeat;
}

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

.location-offline {
    background: url(../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;
    min-height: 350px;
}

.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;
}

.howen_date,
span,
.vedio_main,
li {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#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;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.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 {
    display: flex;
    flex-direction: column;
    height: calc(100% - 65px);
}

.evi-body #chart .chart-item {
    flex: 1;
    overflow-y: auto;
}

.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;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.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;
    user-select: none;
}

.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: .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 .3s;
    -webkit-transition: all .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;
    user-select: none;
}


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


.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: 10px 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-txt .layui-row {
    display: grid;
    grid-template-columns: auto 1fr;
}

::-webkit-resizer {
    display: none;
}

.send-txt-txt .layui-row .layui-col-xs3 {
    width: unset;
}

.send-txt-txt .layui-row .layui-col-xs9 {
    width: unset;
}

.send-txt-txt .layui-row::before {
    display: none;
}


#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: .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;


}

.fuel-sensor-option {
    user-select: none;
}

#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_gps_content .content {
    height: calc(100% - 40px);
    /* height: 100%; */
}

#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 div:nth-child(even) {
    margin-right: 5px;
}

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

.monitor-content-bottom-ops div: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;
}

.index-top-handle-lang .layui-nav-more {
    display: none;
}

.howen-input-alarm-tips {
    display: none;
    color: red;
    font-size: 12px;
}

.driver-name-select input {
    height: 32px;
}

.video-plugin {
    position: relative;
}

.video-plugin-box {
    position: absolute;
    top: 27px;
    left: 0;
    width: 380px;
    box-shadow: 0 0 10px #f2f2f2;
    background-color: white;
    z-index: 10000;
    padding: 30px;
}

.video-plugin-box-lable {
    display: flex;
}


.video-plugin i.icon-yduifuxuankuangxuanzhong,
.video-plugin i.icon-yduifuxuankuang {
    font-size: 22px;
}

.video-plugin i.icon-yduifuxuankuangxuanzhong:hover,
.video-plugin i.icon-yduifuxuankuang:hover {
    color: #0094ff;
}

.video-plugin .txt {
    margin: 0px 0 0 5px;
    vertical-align: top;
}

.video-plugin .txt:hover {
    color: #0094ff;
    cursor: pointer;

}

.video-plugin .icon-youxia {
    font-size: 12px;
    margin: 0 0 0 -7px;
}

.video-plugin .start {
    margin-left: 10px;
}

.video-plugin .collapse {
    border: 0;
    text-decoration: underline;
}

.howen_management_report_r2 .layui-unselect {
    max-height: 30px;
    display: inline-block;
}


.howen_management_report_r .layui-unselect input {
    height: 30px;

}

.howen_management_report_r .layui-unselect {
    vertical-align: bottom;
}

.howen-report-chart-tool-trend>* {
    vertical-align: middle;
}


.howen_management>.layui-laydate {
    border: 1px solid #d2d2d2;
    box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
}

.howen_management_report_op-class .layui-table-body tr td:nth-child(n+5) {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}

.monitor-content-bottom-ops div {
    display: inline-block;
}


#rPaper {
    width: 960px;
    height: 540px;
    position: relative;
}

.moveUp,
.moveLeft,
.openVideo,
.moveDown,
.moveRight,
.moveUpiHood,
.moveDowniHood {
    text-align: center;
    /* background: chartreuse; */
    padding: 2px;
    border: 1px solid #000000;
    border-radius: 50px;
    margin: 0 5px;
}

#adasDemarcateVideoDom {
    width: 100%;
    height: 100%;
}

#ppcDemarcateVideoDom {
    width: 100%;
    height: 100%;
}

.moveLeft {
    display: inline-block;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

.moveRight {
    display: inline-block;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

#stopVideo {
    text-align: center;
    padding: 2px;
    border: 1px solid #000000;
    margin: 0 15px 10px;
}

#rPaper .tv_video_item_box {
    border: none;
}

#rPaper2 .tv_video_item_box {
    border: none;
}

#rPaper3 .tv_video_item_box {
    border: none;
    overflow: hidden;
}

.demarcateDialog {
    flex: 1;
    margin-left: 230px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
}

.demarcateDialog .row2 {
    width: 50%;
    display: flex;
    padding: 5px;
    box-sizing: border-box;
    align-items: center;
}

.resizable-rect {  
    position: absolute;  
    width: 200px;  
    height: 100px;  
    background-color: #62292b70;  
    border: 1px solid #000;  
}  
.corner {  
    position: absolute;  
    width: 10px;  
    height: 10px;  
    background-color: #3aad1c;  
    cursor: nw-resize;   
}  
.top-right, .bottom-left { 
    cursor: ne-resize;
}
.active {  
    border-color: #3aad1c; /* 当拖动时改变边框颜色 */  
}  
.divider {  
    position: absolute;
    height: 5px;  
    background-color: #f4061b;  
    cursor: ns-resize;  
    pointer-events: none; /* 初始时不响应拖动，稍后用JavaScript添加 */  
    z-index: 1;
}  
.divider.draggable {  
    pointer-events: auto; /* 变为可拖动时启用 */  
}
.divider-text {
    position: absolute; /* 绝对定位 */ 
    transform: translate(-50%, -50%); /* 向回移动自身宽高的一半，实现居中 */  
    left: 50%; /* 向左移动50% */  
    /* 其他样式 */  
    width: 100%; /* 示例宽度 */  
    height: 1px; /* 示例高度 */  
    text-align: center;
    font-size: 12px;
    color: #FFFFFF;
}
.unselectable {  
    -webkit-user-select: none; /* Chrome all / Safari all */  
    -moz-user-select: none;    /* Firefox all */  
    -ms-user-select: none;     /* IE 10+ */  
    user-select: none;         /* Likely future */  
}