/*
* Howen CSS
*/


/*
* Index
*/

.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 
*/

.howen-dashboard {
    padding: 10px;
}

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


/*
* Howen-common
*/

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

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

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

#video {
    flex: 1;
}

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

.fence_main_right {
    flex: 1;
}

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

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

@media screen and (min-width: 1280px) {
    .fence_main_middle {
        width: 900px;
    }
    .body-playback .tv_left {
        width: 900px;
    }
}


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

.video_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_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: 15px;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    color: white;
}

.tv_video_item_box_ch {
    flex: 1;
    color: white;
    position: absolute;
    margin-left: 5px;
    margin-top: 3px;
}

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

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

.tv_video_item_box_video_loading {
    background: url('/assets/custom/img/loading.gif') no-repeat center center / cover;
    background-size: 60px;
}

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

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

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

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

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

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

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

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

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

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

.driver-unbound {
    background: url(../img/driver_unbound.png) center no-repeat;
}

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

.listen_on {
    background: url(../img/listen_on.png) center no-repeat;
}

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

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

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

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

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

.location-offline {
    background: url(../img/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: 1;
}

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

.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_vehicle,
.howen_management_role_user {
    margin-right: 20px;
}


/* .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;
    margin-bottom: 60px;
}

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

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

.howen_management_vehice_add {
    overflow-y: scroll;
}

.howen_management_vehice_add .layui-layer-btn {
    height: 24px;
    ;
    position: fixed;
    padding: 20px;
    left: 0;
    bottom: 0px;
    background-color: white;
    right: 0;
}

.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_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: absolute;
    bottom: 0px;
    right: 0px;
}

.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_role_add1>div {
    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 {
    width: 200px;
    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 {
    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 {
    margin: 0 10px;
    border-radius: 5px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

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

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

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

.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;
    content: '\e64e';
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.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: rgb(102, 102, 102, 0.8);
}

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

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

.howen_date,
span,
.video_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: 5px;
}

.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: 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 {
    overflow-x: hidden;
    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 .tv_video_item_10 {
    box-sizing: border-box;
}

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

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

.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 {
    height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-x: hidden;
    align-items: center;
    padding: 0 10px;
    display: flex;
}

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

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