html{
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
    background: rgb(9, 9, 24);
    color: #fff;
    overflow: hidden;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, Arial, sans-serif;
    font-size: 17px;
    margin-left: 2px;
    width: 100%;
    height: 100%;
}

.biankaung {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,rgba(31,45,50,1),rgba(11,19,24,1))
}

.biankuang_top{
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-around;
}

.cameraContent{
    width: 36%;
    height: 92%;
    margin-top: 3%;
}

.shiyituImage{
    width: 36%;
    height: 89%;
    margin-top: 3%;
    background-color:#1e2e3d;
    position: relative;
}

.shiyituImage>img{
    width: 100%;
    height: 94%;
}

.video_canvas{
    width: 100%;
    height: 48%;
    position: relative;
}
.video_canvas1{
    margin-bottom: 10px;
}

.video_canvas_icon{
    position: absolute;
    top: 6%;
    left: 1%;
    width: 4%;
}

.title_bg{
    width: 100%;
}

.video_canvas_text{
    position: absolute;
    width: 40%;
    top: 9%;
    left: 6%;
    letter-spacing: 2px;
    font-size: 1vw;
}
.bofangImage{
    position:absolute;
}
.bofangImage1{
    top: 292px;
    left: 230px;
}
.bofangImage2{
    top: 292px;
    left: 70px;
}
.bofangImage3{
    top:538px;
    left: 70px;
}
.bofangImage4{
    top: 538px;
    left: 230px;
}
.bofangImage5{
    top: 314px;
    left: 356px;
}
.image{
    position: absolute;
}

.image1{
    left: 12px;
    top: 280px;
    transform: rotateZ(150deg);
    width: 120px;
    height: 150px;
}
.image2{
    left: 120px;
    top: 280px;
    transform: rotateZ(-150deg);
    width: 120px;
    height: 150px;
}
.image3{
    left: 10px;
    top: 440px;
    transform: rotateZ(30deg);
    width: 120px;
    height: 150px;
}
.image4{
    left: 90px;
    top: 440px;
    transform: rotateZ(-30deg);
    width: 120px;
    height: 150px;
}
.image5{
    left: 345px;
    top: 310px;
}
.imageContet{
    position: absolute;
    bottom: -10px;
    left: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.imageContet img{
    width: 50px;
}

.imageContet2{
    position: absolute;
    bottom: -20px;
    left: 190px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

video{
    width: 100%;
    height: 90%;
    position: absolute;
    top: 9%;
    left: 0;
    object-fit: cover;
}

.pitchColor{
    border: 1px solid chartreuse;
}

.remoteControl{
    height: 92%;
    position: relative;
    width: 25%;
    margin-top: 3%;
}

.facility_control{
    width: 100%;
    height: 97%;
    background: rgba(31, 46, 61, 1);
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.Controls{
    height: 30%;
    width: 54%;
    position: relative;
}
.Controls>img{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.Controls_bg1{
    top: 6%;
    width: 88%;
}
.Controls_bg2{
    width: 100%;
}
.Controls_bg3{
    top: 34%;
    width: 28%;
}
.Controls_bg4{
    top: 40%;
    width: 15%;
}

.Controls_icon{
    z-index: 5;
    width: 10%;
}

.Controls_icon:hover{
    cursor: pointer;
}
.Controls_icon1{
    top: 10%;
    width: 14% !important;
}
.Controls_icon2{
    left: 26% !important;
    top: 20%;
}
.Controls_icon3{
    left: 14% !important;
    top: 40%;
}
.Controls_icon4{
    left: 26% !important;
    top: 68%;
}
.Controls_icon5{
    top: 82%;
    width: 14% !important;
}
.Controls_icon6{
    left: 75% !important;
    top: 68%;
}
.Controls_icon7{
    left: 86% !important;
    top: 40%;
}
.Controls_icon8{
    top: 21%;
    left: 75% !important;
}

.control_btn{
    width: 100%;
    height: 5%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.control_btn>span{
    display: flex;
    justify-content: center;
}

.Zoom,.Location{
    width: 16%;
    height: 84%;
}

.square_small{
    width: 44%;
    height: 93%;
    background: rgba(39,83,97,1);
    border: 1px solid rgb(64, 229, 240);
    display: flex;
    justify-content: center;
    align-items: center;
}

.square_small>img{
    width: 56%;
}

.subtract_left{
    position: absolute;
    right: 35%;
    top: 23%;
    width: 7%;
}

.add_right{
    position: absolute;
    right: 8%;
    top: 23%;
    width: 7%;
}

.add_right:hover{
    cursor: pointer;
}

.presetting_list{
    height: 54%;
    width: 82%;
    display: flex;
    flex-direction: column;
    font-size: 1vw;
}

.camera_speed{
    top: 23% !important;
    left: 72% !important;
    color: #ffffff;
}

.windshield{
    width: 7%;
    height: 78%;
    align-items: center;
    background: rgba(39, 83, 97, 1);
    border: 1px solid rgb(64, 229, 240);
}

.windshield>img{
    width: 68%;
}

.square_small:hover,.windshieldImage:hover,.subtract_left:hover,.add_right:hover{
    cursor: pointer;
    opacity: 0.8;
}

.rotate_speed{
    width: 30%;
    height: 78%;
    background: rgba(39,83,97,1);
    border: 1px solid rgb(64, 229, 240);
    font-size: 0.8vw;
    color: #40E5F0;
    position: relative;
}
.rotate_speed>span{
    left: 5%;
    position: absolute;
    top: 16%;
}

.list_title{
    display: flex;
    justify-content: space-between;
    color: #40E5F0;
}

.list_title>span{

    display: flex;
    align-items: center;
    opacity: 0.6;
}

.list_title>span:hover{
    cursor: pointer;
}

.list_title>span>img{
    margin-right: 6px;
    width: 28%;
}

.list_content{
    height: 88%;
    overflow-y: scroll;
}

.list_content::-webkit-scrollbar,.pathTable2::-webkit-scrollbar,.pathTable3::-webkit-scrollbar{
    background-color: rgba(0,0,0,0);
    width: 5px;
}

.list_content::-webkit-scrollbar-thumb,.pathTable2::-webkit-scrollbar-thumb,.pathTable3::-webkit-scrollbar-thumb{
    background-color: #40455A;
    border-radius: 10px;
}

.list_content>ul{
    list-style: none;
    padding: 0 0 0 4%;
    margin: 0;

}
.list_content>ul>li{
    height: 2.2vw;
    color: #E7F5F6;
    position: relative;
    display: flex;
    align-items: center;
}

.local_name{
    margin-left: 6%;
    width: 57%;
    display: inline-block;
    white-space: nowrap; /* 禁止文本换行 */  
    overflow: hidden; /* 隐藏溢出部分 */  
    text-overflow: ellipsis; /* 当文本溢出时显示省略号 */  
}

.tourOption{
    width:43%;
}

.caozuo{
    width: 30%;
}

.caozuo,.tourOption{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.caozuo>img{
    width: 24%;
}
.tourOption>img{
    width: 18%;
}

.caozuo>img:hover,.tourOption>img,.addPreset>img:hover{
    cursor: pointer;
}

.pathName{
    display: flex;
    width: 100%;
    height: 11%;
    align-items: center;
    justify-content: space-between;
}

.addPreset{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 90px;
}

.addPreset>img{
    width: 27%;
}

.tableTitle{
    font-size: 1vw;
}

.presetName{
    width: 25%;
}

.presetSpeed{
    width: 25%;
}

.pathSetting{
    display: none;
    height: 100%;
}

.presetTime{
    width: 25%;
}

.option{
    width: 10%;
}

.pathTable2,.pathTable3{
    max-height: 60%;
    overflow-y: scroll;
}

.pathTable3>table>tbody>tr>td{
    text-align: center;
    padding: 10px 0;
}

.quedin{
    border: 1px solid rgb(64, 229, 240);
    background: radial-gradient(rgba(39,83,97,0),rgba(39,83,97,0),rgba(39,83,97,1),rgba(39,83,97,1));
    color: #40E5F0;
}

.quexiao{
    border: 1px solid #767c97;
    background: radial-gradient(rgba(39,83,97,0),rgba(39,83,97,0),rgba(176,189,212,0.2),rgba(176,189,212,0.2));
    color: #c6d3ec;
}

.addImage{
    height: 30px;
    width: 100%;
    position: relative;
}

.addImage>img{
    position: absolute;
    right: 0;
    width: 8%;
}

.addImage>img:hover{
    cursor: pointer;
}

.setDiv{
    width: 100%;
    height: 2.4vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.speedInput,.pathIimeInput{
    width: 70%;
    height: 76%;
    border-radius: 3px;
    background-color: rgba(0,0,0,0);
    color: #ffffff;
    border: 1px solid #41476B;
    padding: 0;
    outline: none;
    text-align: center;
}

.zheGai{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgb(1,1,1,0.5);
    z-index: 50;
    display: none;
}

.oneKeyButton{
    position: absolute;
    right: 4%;
    top: 2%;
    width: 15%;
    height: 5%;
    font-size: 1vw;
}

.oneKeyButton>span{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.openDevice{
    border: 1px solid #43e7f2;
    color: #43e7f2;
    background: linear-gradient(45deg, rgb(67,231,242,0.4),rgb(67,231,242,0.2),rgb(0,0,0,0),rgb(0,0,0,0),rgb(0,0,0,0),rgb(67,231,242,0.2),rgb(67,231,242,0.4)),
    linear-gradient(135deg,rgb(67,231,242,0.4),rgb(67,231,242,0.2),rgb(0,0,0,0),rgb(0,0,0,0),rgb(0,0,0,0),rgb(67,231,242,0.2),rgb(67,231,242,0.4));
}

.closeDevice{
    display: none;
    border: 1px solid #767c97;
    color: #c6d3ec;
    background: linear-gradient(45deg, rgb(118,124,151,0.4),rgb(118,124,151,0.2),rgb(0,0,0,0),rgb(0,0,0,0),rgb(0,0,0,0),rgb(118,124,151,0.2),rgb(118,124,151,0.4)),
    linear-gradient(135deg,rgb(118,124,151,0.4),rgb(118,124,151,0.2),rgb(0,0,0,0),rgb(0,0,0,0),rgb(0,0,0,0),rgb(118,124,151,0.2),rgb(118,124,151,0.4));
}

.oneKeyButton:hover{
    cursor: pointer;
}

.patrolTask{
    width: 40%;
    height: 40%;
    background-color: #222F3D;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 18%;
    border: 1px solid #40486A;
    display: none;
}

.taskOption{
    height: 65%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 4%;
}

.taskOption>div{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 60%;
    height: 25%;
}

.taskListTitle{
    width: 96%;
    height: 8%;
    border-bottom: 1px solid #40486A;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2%;
    font-size: 1.2vw;
}

.patroTitle{
    width: 20%;
    font-size: 1vw;
}

.taskInput{
    width: 70%;
    border: 1px solid #41476B;
    height: 60%;
    font-size: 1vw;
}

.presetButton,.presetButton1{
    height: 12%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.presetButton>span,.presetButton1>span{
    width: 10%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1vw;
}

.presetButton>span,.presetButton1>span:hover{
    cursor: pointer;
}

.presetButton1{
    margin-top: 6%;
}

.presetButton1>span{
    width: 20% !important;
    height: 72% !important;
}

.select_page1>option,.select_page>option{
    background-color:rgba(31, 46, 61, 1) ;
    color: #fff;
    font-size: 1vw;
}

.select_page1,.select_page{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    color: #ffffff;
    border-radius: 3px;
    outline: none;
    font-size: 1vw;
    text-align: center;
    border: 1px solid #41476B ;
}

.select_page1{
    border: none;
}

.select_page{
    width: 75% !important;
    height: 81% !important;
}

.quxiaoImage{
    width: 2%;
}

.pathTitle{
    font-size: 1vw !important;
}