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

/* Estilo se movio a video-live.css */
/* #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;
    padding-left: 20px;
    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;
}

.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(/assets/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;
    width: 100%;
    height: 100%;
}

/* 这里是视频模块的结束 */
/* 这里时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;
    padding: 10PX 0 0PX 10PX;
    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: 40px;
    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_management_fleet_add,
.howen_management_user_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_management_driver_add form,
.howen_management_fleet_add form,
.howen_management_user_add form,
.howen_management_role_add form {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 0px;
}

.howen_management_driver_add .layui-layer-btn,
.howen_management_fleet_add .layui-layer-btn,
.howen_management_user_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 {
    padding: 20px;
    box-sizing: border-box;
}

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

.howen_management_autodownload .layui-table-tool .layui-unselect input {
    height: 30px;
}

.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;
    min-width: 200px;
    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-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-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: #666666cc;
}

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

.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: 200px;
    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: #17233d73;
}

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

.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 {
    height: calc(100% - 31px);
    overflow-y: scroll;
    overflow-x: scroll;
    background-color: #ffffff;
}

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

.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: #0beaeb 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: 1280px) {
    .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 10px;
    font-size: 20px;
    font-weight: bold;
}

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

.howen-alarm-selected-list {
    width: 300px;
    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;
}

.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: 300px;
    display: flex;
    flex-direction: row;
    border: 1px solid #dcdcdc;
    position: relative;
}

.howen-alarm-selected {
    position: absolute;
    top: 35px;
    height: 400px;
    overflow-y: scroll;
    border: 1px solid #dcdcdc;
    padding: 5px;
    display: none;
    z-index: 100;
    border-radius: 2px;
    background-color: white;
}

.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 {
    padding-top: 5px;
    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 #ffffff80;
    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 #00000033;
    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 #00000033;
    -moz-box-shadow: 0 5px 10px #00000033;
    box-shadow: 0 5px 10px #00000033;
    -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: #00000033;
    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-right: 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: 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;
}