.logo2{
    font-size: 20px;
    color: #fff;
}
.loadingContainer{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.droneWarp {
    background-color: #f2f2f2;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.corePageContainerNew{
    height: calc(100% - 40px) !important;
}
.droneHeaderContainer {
    height: 64px;
    background-color: #3a9ae4;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 20px;
}

.droneHeaderContainer .user:hover .dropDown {
    display: block;
    transition-delay: 5s;
}

.droneHeaderContainer .user {
    position: relative;
    line-height: 34px;
    padding-left: 20px;
    z-index: 999;
    color: #fff;
    font-size: 13px;
}

.droneHeaderContainer .dropDown {
    display: none;
    position: absolute;
    top: 34px;
    right: 0;
    padding: 15px;
    background-color: #fff;
    color: #666;
    box-shadow: 0 0 8px rgb(0 0 0 / 15%);
    z-index: 999;
}

.droneHeaderContainer .dropDown .arrow {
    left: 80%;
    transform: translateX(-80%);
    background: transparent;
    position: absolute;
    display: block;
    width: 8px;
    height: 8px;
    overflow: hidden;
    background: 0 0;
    pointer-events: none;
    top: -8px;
}

.droneHeaderContainer .dropDown .arrow .arrow-content {
    box-shadow: -2px -2px 5px rgb(0 0 0 / 6%);
    transform: translateY(4.24264069px) rotate(45deg);
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 6px;
    height: 6px;
    margin: auto;
    background-color: #fff;
    content: '';
    pointer-events: auto;
}

.droneHeaderContainer .dropDown .link {
    line-height: 16px;
    margin: 15px 0;
    white-space: nowrap;
}

.droneBodyContainer {

    display: flex;
    flex-direction: row;
    height: calc(100vh - 64px);
}

.menuContainer {
    height: 100%;
    background-color: #fff;
    overflow-y: auto;
    overflow-x: hidden;
}

.droneContent{
    display: flex;
    flex-direction: column;
    margin: 10px 0 0 10px;
    flex: 1;
    background-color: #fff;
    height: calc(100% - 10px);
    overflow: hidden;
}

/* 面包屑 */
.breadCrumbs {
    height: 40px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.breadCrumbs .l {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.breadCrumbs .r {
    padding-right: 15px;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.breadCrumbs .open {
    height: 100%;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.breadCrumbs .open .icon-right {
    font-size: 14px;
    color: #999;
}

.breadCrumbs .crumbs {
    padding-left: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

.breadCrumbs .crumbs .home {
    margin-right: 10px;
}

.breadCrumbs .crumbs .home .icon-home {
    font-size: 14px;
    color: #1877F2;
    margin-right: 10px;
}

.breadCrumbs .crumbs .link {
    color: #999;
}

.breadCrumbs .crumbs .current {
    color: #333;
}

.breadCrumbs .crumbs .arrow {
    padding: 0 3px;
}

.breadCrumbs .operation {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.breadCrumbs .operation li {
    position: relative;
    margin: 0 1px;
    padding: 0 8px;
    font-size: 12px;
    color: #2572fd;
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.breadCrumbs .operation li::before {
    content: "";
    display: block;
    width: 1px;
    height: 12px;
    background-color: #ddd;
    position: absolute;
    right: 0;
    top: 11px;
}

.breadCrumbs .operation li:last-child::before {
    width: 0;
}

.breadCrumbs .operation li:hover {
    background-color: #1877F2;
    color: #fff;
}

.breadCrumbs .operation li:hover::before {
    width: 0;
}

.breadCrumbs .operation li:hover .icon {
    color: #fff;
}

.breadCrumbs .operation li.down:hover .dropDown {
    display: block;
}

.breadCrumbs .operation .icon {
    padding-right: 4px;
    font-size: 12px;
    color: #2572fd;
}

.breadCrumbs .operation .icon-yichang {
    color: red;
}

.breadCrumbs .operation .icon-zhengchang {
    color: #1bbe6b;
}

.breadCrumbs .user:hover .dropDown {
    display: block;
}

.breadCrumbs .user {
    position: relative;
    line-height: 34px;
    padding-left: 20px;
}

.breadCrumbs .dropDown {
    display: none;
    position: absolute;
    top: 34px;
    right: 0;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 0 8px rgb(0 0 0 / 15%);
    z-index: 999;
}

.breadCrumbs .dropDown .arrow {
    left: 80%;
    transform: translateX(-80%);
    background: transparent;
    position: absolute;
    display: block;
    width: 8px;
    height: 8px;
    overflow: hidden;
    background: 0 0;
    pointer-events: none;
    top: -8px;
}

.breadCrumbs .dropDown .arrow .arrow-content {
    box-shadow: -2px -2px 5px rgb(0 0 0 / 6%);
    transform: translateY(4.24264069px) rotate(45deg);
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 6px;
    height: 6px;
    margin: auto;
    background-color: #fff;
    content: '';
    pointer-events: auto;
}

.breadCrumbs .dropDown .link {
    line-height: 16px;
    margin: 15px 0;
    white-space: nowrap;
}

.topbackContainer {
    display: none;
    flex-direction: row;
    align-items: center;
    background-color: #fff;
    height: 40px;
    width: 100%;
    box-shadow: 1px 3px 1px #eee;
}

.topbackContainer .back,
.topbackContainer .menu {
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}

.topbackContainer .menu {
    font-size: 20px;
    color: #3A926D;
    font-weight: bold;
}

.topbackContainer .tit {
    width: calc(100vw - 40px - 40px);
    font-size: 14px;
    text-align: center;
    color: #333;
}

.topbackContainer .menu .erpfont {

    font-size: 16px;
    color: #999;
}

@media screen and (max-width: 760px) {
    .topbackContainer {
        display: flex;
    }

    .breadCrumbs {
        display: none;
    }
}
/* 列表 */
.droneTitleBar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 15px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 99;
}
.coreModalFormContent {
    background-color: #fff;
    padding: 15px;
}

.coreModalFormContent .form {

    background-color: #fff;
}

.coreModalFormContent .form>li{
    display: flex;
    flex-direction: column;
}

.coreModalFormContent .form>li .label{
    width: 90px;
    line-height: 32px;
    color: #999;
    font-size: 13px;
    text-align: right;
    padding-right: 3px;
}

.coreModalFormContent .form>li .con {
    flex: 1;
}

.coreModalFormContent .inputBoxBase {
    width: 100%;
}
.droneSearchList{
    padding: 0 !important;
}

/* 编辑 */
.droneEditPageContent .box{
    margin-bottom: 30px;
}
.droneEditPageContent .box:last-child{
    margin-bottom: 0;
}
.droneEditPageContent .tit{
    padding-left: 25px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

@media screen and (max-width: 760px) {
    .menuContainer{
        position: fixed;
        left: 0;
        top: 0;
        z-index: 9999 !important;
        height: 100vh;
        transition: all .3s;
        width: 100vw;
        transform: translateX(-100%);
    }
    .droneHeaderContainer{
        display: none;
    }
    .droneBodyContainer{
        height: 100vh;
    }
    .droneContent{
        margin: 0;
        height: 100%;
        background-color: #f5f5f5;
    }
}

.cockpitContainer{
    max-width: 750px;
    margin: 0 auto;
    min-height: 100vh;
    background-color: #F2F1F1;
}
#cockpitCamera {
    position: relative;
    background: #000;
    width: 100%;
    height: calc(100vw * (9 / 16));
}
#cockpitCamera2 {
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #2b2b2b;
    width: calc(100vh * (16 / 9));
    height: 100vh;
}
#cockpitCamera .jessibuca-controls{
    display: none !important;
}
#cockpitCamera .easyplayer-controls{
    display: none !important;
}
#cockpitCamera .easyplayer-loading-logo .easyplayer-loading-img{
    background: none !important;
}
#cockpitCamera .easyplayer-loading-text::before{
    content: '视频加载中...';
}
#cockpitCamera .tip{
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 12px;
    color: #fff;
}
#cockpitCamera .tip img{
    width: 9px;
    margin-right: 5px;
}
.videoWebView{
    position: relative;
    height: fit-content;
}
.videoWebView video{
    width: 100%;
}
.videoWebView .note{
    height: 36px;
    width: 100%;
    color: #fff;
    background: rgba(0, 0, 0, 1);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 12px;

}
.videoWebView .note .icon{
    width: 20px;
    height: 20px;
    margin-right: 4px;
}
.videoWebView .btn{
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width:  90px;
    height: 36px;
    border-radius: 0 !important;
    opacity: 1;

    background: linear-gradient(90deg, #0097FF 0%, #7DCAFF 90%);
    font-family: PingFang SC;
    font-size: 14px !important;
    color: #FFFFFF;
}
.travelSuggestions {
    margin: 12px 12px 0 12px;
    padding: 0 12px 0 18px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    height: 60px;
    border-radius: 12px;
    cursor: pointer;
}
.travelSuggestions .text{
    font-size: 16px;
    color: #333;
    font-weight: 700;
}
.travelSuggestions .right{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.travelSuggestions .img{
    width: auto;
    height: 50px;
    border-radius: 8px;
    margin-right: 10px;
}
.travelSuggestions .icon{
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url(../images/right.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.travelSuggestionsMask{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 998;
    background-color: rgba(0, 0, 0, 0.75);
    left: 0;
    top: 0;
}
.travelSuggestionsModal{
    border-radius: 10px 10px 0px 0px;
    position: fixed;
    width: 100%;
    height: fit-content;
    max-height: 100%;
    z-index: 999;
    background-color: #fff;
    left: 0;
    bottom: 0;
   
}
.travelSuggestionsModal .hd{
    position: relative;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #1A1C1E;
}
.travelSuggestionsModal .close{
    position: absolute;
    top: 17px;
    right: 17px;
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../images/close@1x.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}
.travelSuggestionsModal .bd{
    overflow-y: auto;
    padding: 0 25px;
    max-height: calc(100vh - 50px - 44px - 25px - 40px);
}
.travelSuggestionsModal .bd .img{
    width: 100%;
    height: auto;
}
.travelSuggestionsModalCloseBtn{    
    margin: 15px auto 0 auto;
    height: 44px;
    width: calc(100% - 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: linear-gradient(90deg, #0097FF 0%, #7DCAFF 100%);
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    margin-bottom: 25px;
}

.cockpitContent{
    padding: 12px;
}
.cockpitStep{
    width: 100%;
    background-color: #fff;
    border-radius: 12px;
    background-image:url('../images/lcbg@1x.png') ;
    background-repeat: no-repeat;
    background-size: contain;
}
.cockpitStep .hd{
   font-size: 16px;
   color: #333;
   font-weight: 700;
   padding: 13px 18px;
}
.cockpitStep .bd{
    padding: 8px 18px 18px 18px;
    background-color: #fff;
    width: 100%;
    border-radius: 12px;
}
.cockpitStep .step{
    position: relative;
   
    margin: 8px 0;
    display: flex;
    align-items: center;
    flex-direction: row;
}
.cockpitStep .step:last-child{
    margin-bottom: 0;
}
.cockpitStep .step .info{
    margin-left: 10px;
    padding: 6px 8px;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
}
.cockpitStep .step .info img{
    width: 75px;
    height: 30px;
}
.cockpitStep .step .t{
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 21px;
}
.cockpitStep .step .t .state{
    margin-left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 21px;
    border: 1px solid #FF8C00;
    border-radius: 4px;
    color: #FF8C00;
    font-size: 12px;
    font-weight: normal;
}
.cockpitStep .step .t .state.ing{
    border: 1px solid #5cd91f;
    color: #5cd91f;
}
.cockpitStep .step.ok .info{
    background-color: #EFF9FF;
}
.cockpitStep .step.ok .t{
    color: #0097FF;
}
.cockpitStep .step.active .icon{
    background-color: #0097FF;
    color: #fff;
} 
.cockpitStep .step .p{
    font-size: 11px;
    color: #999;
}
.cockpitStep .step .icon,.cockpitStep .step .img{
    width: 30px;
    height: 30px;
}
.cockpitStep .step2::after{
    content: "";
    border: 1px dashed #0097FF;
    height: 20px;
    position: absolute;
    left: 15px;
    top: 43px;
}
.cockpitStep .step2::before{
    content: "";
    border: 1px dashed #0097FF;
    height: 20px;
    position: absolute;
    left: 15px;
    top: -15px;
}
.cockpitStep .step3::before{
    content: "";
    border: 1px dashed #0097FF;
    height: 20px;
    position: absolute;
    left: 15px;
    top: 43px;
}
.cockpitStep .step img{
    width: 100%;
    height: 100%;
}
.cockpitStep .step .icon{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0097FF;
    border-radius: 15px;
    font-size: 18px;
    color: #0097FF;
}
.cockpitContainer .nn{
    text-align: center;
    font-size: 14px;
    color: #767676;
    padding: 15px 0 0 0;
}

.cockpitContainer .submitBtn,.cockpitCompleteContainer .submitBtn{
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 255px;
    height: 44px;
    border-radius: 50px;
    font-size: 20px;
    color: #fff;
    background: linear-gradient(90deg, #0097FF 0%, #7DCAFF 100%);
}
.cockpitContainer .submitBtn .s,.cockpitCompleteContainer .submitBtn .s{
    font-size: 14px;
    opacity: 0.8;
    margin-left: 6px;
}
.cockpitContainer .submitBtn2{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 88px;
    line-height: 1.5;
    border-radius: 12px;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(90deg, #0097FF 0%, #7DCAFF 100%);
}
.cockpitContainer .submitBtn2 .s{
    font-size: 24px;
}
.cockpitContainer .submitBtn .s,.cockpitCompleteContainer .submitBtn .s{
    font-size: 14px;
    opacity: 0.8;
    margin-left: 6px;
}

.cockpitContainer .startBtn{
    margin-top: 15px;
}
.cockpitCompleteContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 82px;
    margin: 0 auto;
    min-height: 100vh;
    background-color: #F2F1F1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image:url('../images/sbg.png') ;
    background-repeat: no-repeat;
    background-size: contain;
}
.cockpitCompleteContainer .icon img{
    width: 130px;
    height: 130px;
}
.cockpitCompleteContainer .text{
    font-size: 18px;
    color: #333;
    margin-top: 30px;
}
.cockpitCompleteContainer .againBtn{
    margin-top: 40px;
}
.cockpitCompleteContainer .cancelBtn{
    border: 1px solid #0097FF;
    width: 255px;
    height: 44px;
    border-radius: 50px;
    font-size: 18px;
    color: #0097FF;
    background-color: #fff;
    margin-top: 40px;
}
.cockpitCompleteContainer .note{
    margin-top: 15px;
    font-size: 14px;
    color: #767676;
}
.guideVideo{
    width: 100%;
    height: auto;
}
.coreEditPageContentNew .form .con video{
    width: 104px !important;
    height: 104px !important;
}


.dmPaginationContainer {
    padding: 15px;
}
.mobilePaginationContainer {
    padding: 10px;
    border-top: 1px solid #eee;
    background-color: #fff;
}
.coreEditPageContentNew .permissionFun {
    flex: 1;
}

.permissionFun .ant-checkbox-wrapper {
    font-size: 14px !important;
    color: #414852;
}

.permissionFun .level1 {
    border: 1px solid #eee;
    margin-bottom: 15px;
}

    .permissionFun .level1 .con {
        padding: 10px;
    }

    .permissionFun .level1 .tit1 {
        height: 40px;
        background-color: #f2fbff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-left: 15px;
        cursor: pointer;
    }

        .permissionFun .level1 .tit1 .icon-down {
            font-size: 14px;
            color: #333;
            cursor: pointer;
            padding: 10px;
            margin-right: 10px;
            transition: transform .24s;
        }

            .permissionFun .level1 .tit1 .icon-down::before {
                content: "\e65f";
            }

            .permissionFun .level1 .tit1 .icon-down.show {
                transform: rotate(-90deg);
            }

.permissionFun .ant-checkbox {
    top: 0;
}

.permissionFun .level1 .name {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: bold;
}

.permissionFun .level2 {
    border: 1px solid #eee;
    margin-bottom: 10px;
}

    .permissionFun .level2:last-child {
        margin-bottom: 0;
    }

    .permissionFun .level2 .tit2 {
        height: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-left: 15px;
        border-bottom: 1px solid #eee;
        font-weight: bold;
        cursor: pointer;
    }

        .permissionFun .level2 .tit2 .icon-down {
            font-size: 14px;
            color: #333;
            cursor: pointer;
            padding: 10px;
            font-weight: normal;
            transition: transform .24s;
        }

            .permissionFun .level2 .tit2 .icon-down.close {
                transform: rotate(-90deg);
            }

.permissionFun .level3 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 15px;
    padding-bottom: 5px;
}

    .permissionFun .level3 .it {
        margin-bottom: 10px;
        width: calc(100% / 6);
    }

@media screen and (max-width: 1200px) {
    .permissionFun .level3 .it {
        width: calc(100% / 4);
    }
}

@media screen and (max-width: 960px) {
    .permissionFun .level3 .it {
        width: calc(100% / 3);
    }
}

@media screen and (max-width: 768px) {
    .permissionFun .level3 .it {
        width: calc(100% / 2);
    }
}

@media screen and (max-width: 640px) {
    .permissionFun .level3 .it {
        width: calc(100% / 1);
    }
}




/* 角色管理 */
.functionalPermissionsNew {
    flex: 1;
    border: none;
    border-bottom: none;
}

    .functionalPermissionsNew .permissionsGroup {
        border: 1px solid #edf1f5;
        margin-bottom: 15px;
    }

    .functionalPermissionsNew .groupName {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 46px;
        padding: 0 15px;
        border-bottom: 1px solid #edf1f5;
        background-color: #efefef;
        cursor: pointer;
    }

        .functionalPermissionsNew .groupName .name {
            font-weight: bold;
        }

    .functionalPermissionsNew .childMenus {
        background-color: #fff;
        padding: 15px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding-bottom: 5px;
        border-bottom: none;
    }

        .functionalPermissionsNew .childMenus .menu {
            margin-bottom: 10px;
            width: calc(100% / 6);
        }

    .functionalPermissionsNew .ant-checkbox-wrapper {
        font-size: 14px !important;
        color: #414852;
    }

.coreEditPageContent .ant-checkbox {
    top: 0;
}

.functionalPermissionsNew .icon-xiangyoujiantou {
    font-size: 14px;
    color: #333;
    cursor: pointer;
    padding: 10px;
    transition: transform .24s;
}

    .functionalPermissionsNew .icon-xiangyoujiantou.show {
        transform: rotate(-90deg);
    }

    .functionalPermissionsNew .icon-xiangyoujiantou.close {
        transform: rotate(-0);
    }

@media screen and (max-width: 1200px) {
    .functionalPermissionsNew .childMenus .menu {
        width: calc(100% / 4);
    }
}

@media screen and (max-width: 960px) {
    .functionalPermissionsNew .childMenus .menu {
        width: calc(100% / 3);
    }
}

@media screen and (max-width: 768px) {
    .functionalPermissionsNew .childMenus .menu {
        width: calc(100% / 2);
    }
}

@media screen and (max-width: 640px) {
    .functionalPermissionsNew .childMenus .menu {
        width: calc(100% / 1);
    }
}

.dataPermissionsDreamcomp .item-1, .dataPermissionsDreamcomp .formName {
    width: 250px !important;
}

.orderDetail{
    padding: 0 20px 0 25px;
}
.orderDetail .orderUser .tit{
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
.orderDetail .orderUser ul{
    margin-top: 10px;
}
.orderDetail .orderUser ul li{
   line-height: 24px;
   color: #666;
}
.orderDetail .project{
   margin-top: 10px;
}
.orderDetail .project img{
    width: 100px !important;
    height: 80px !important;
}
.orderDetail .project .item{
    width: 100px;
}
.orderDetail .orderAmount{
    margin-top: 15px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.orderDetail .orderAmount .amount{
    display: flex;
    flex-direction: row;
}
.orderDetail .orderAmount .amount i{
    width: 40px;
}
.orderDetail .orderAmount .payAmount{
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
}
.orderDetail .orderAmount .payAmount i{
   color: red;
}
.orderDetail .orderInfo{
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #eee;
}
.orderDetail .orderInfo .tit{
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
.orderDetail .orderInfo ul{
    margin-top: 10px;
}
.orderDetail .orderInfo ul li{
   line-height: 24px;
   color: #666;
}
.orderDetail .ImgPreview{
    margin-top: 15px;
}
.orderDetail .ImgPreview .tit{
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.droneProjectPageContainer .status.status1{
    color: rgb(6, 211, 49);
}
.droneProjectPageContainer .status.status2{
    color: rgb(243, 79, 106);
}
.droneProjectPageContainer .status.status3{
    color: rgb(233, 157, 66);
}
.droneProjectPageContainer .status.status4{
    color: rgb(233, 157, 66);
}

.uploadAudioModal .uploadBtn{
    position: relative;
    overflow: hidden;
    width:fit-content;
}
.uploadBtn .fileInput{
    opacity: 0;
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;   
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.uploadAudioModal .form{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.uploadAudioModal .form .tip{
    padding-left: 15px;
    font-size: 12px;
    color: #999;
}
.uploadAudioModal .list{
    margin-top: 20px;
    border: 1px solid #eee;
}
.uploadAudioModal .list .thead{
    height: 40px;
    width: 100%;
    border-bottom: 1px solid #eee;
    background-color: #fafafa;
    font-weight: bold;
}
.uploadAudioModal .list .item-list{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}
.uploadAudioModal .list .item-list .item{
    padding-left: 5px;
}
.uploadAudioModal .list .item-list .item-1{
    width: 40%;
}
.uploadAudioModal .list .item-list .item-2{
    width: 25%;
}
.uploadAudioModal .list .item-list .item-3{
    width: 25%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.uploadAudioModal .list .item-list .item-4{
    width:10%;
}
.uploadAudioModal .list .tbody{
    padding: 5px 0;
    color: #666;
    font-size: 13px;
    overflow: auto;
    max-height: calc(100vh - 150px);
}
.uploadAudioModal .list .tbody .tr{
    padding: 8px 0;
}
.uploadAudioModal .list .iconN{
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ccc;
    border-radius: 50%;
    margin-right: 5px;
}
.uploadAudioModal .list .wait .iconN,.uploadAudioModal .list .upload .iconN{
    background-color: #1877F2;
}
.uploadAudioModal .list .end .iconN{
    background-color: #52c41a;
}
.uploadAudioModal .list .error .iconN{
    background-color: red;
}
.uploadAudioModal .list .error .item-2{
    color: red;
}
.uploadAudioModal .list .end .item-3{
    color: #999;
}
.uploadAudioModal .list .item-4 .icon{
    font-size: 16px;
    cursor: pointer;
}
.uploadAudioModal .total{
    margin-top: 10px;
    display: flex;
    flex-direction: column;

}
.uploadAudioModal .total .t1{
    font-weight: bold;
}
.uploadAudioModal .total .t2{
    color: red;
}
.audiosDispositon .dispositon{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
}
.audiosDispositon .dispositon:last-child{
    margin-bottom: 0;
}
.audiosDispositon .dispositon .item1{
    width: 100px;
}
.audiosDispositon .dispositon .item2{
    width: 100px;
    margin: 0 5px;
}
.audiosDispositon .dispositon .item3{
    width: 160px;
}
.audiosDispositon .dispositon .item4{
   margin-left: 10px;
   color: #1877F2;
   cursor: pointer;
}
.testContainer 
{
    width: 80%;
    height: 200px;
    background-color: #fff;
    border: 3px solid #1877F2;
    position: fixed;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
  transform: translate(-50%,-50%);
    display:flex;
    z-index: 9999;
}
.distanceContainer{
    margin-top: 12px;
    padding: 16px 47px;
    background-color: #ffff;
    border-radius: 12px;
}
.distanceContainer .hd{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.distanceContainer .hd .location{
    margin-right: -6px;
}
.distanceContainer .hd .location img{
    width: 15px;
}
.distanceContainer .hd .aircraft{
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: -26px;
}
.distanceContainer .hd .aircraft img{
   width: 55px;
}
.distanceContainer .bd{
    position: relative;
    height: 8px;
    background-color: #EAEAEA;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.distanceContainer .bd .ico{
    display: inline-block;
    width: 10%;
    height: 100%;
    position: relative;
}
.distanceContainer .bd .ico::after{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    content: '';
    width: 6px;
    height: 5px;
    background-image:url('../images/icon5.png') ;
    background-size: contain;
}
.distanceContainer .progress{
    height: 100%;
    width: 10%;
    background-color: #0097FF;
    position: absolute;
    top: 0;
    left: 0;
}
.distanceContainer .ft{
    margin-top: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.distanceContainer .ft .t{
    font-size: 12px;
    color: #1A1A1A;
}
.distanceContainer .ft .mi{
    font-size: 14px;
    color: #0097FF;
    font-weight: bold;
}
.playAudioContainer{
    margin: 12px;
    border-radius: 12px;
    background-color: #fff;
}
.playAudioContainer{
    position: relative;
    padding: 130px 0 64px;
    font-size: 14px;
    color: #0097FF;
}
.playAudioContainer .bd{
    position: relative;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.playAudioContainer  .bd .t{
    height: 18px;
}
.playAudioContainer .icon{
    margin-top: 15px;
    width: 90px;
    height: 90px;
}
.playAudioContainer .icon img{
    width: 100%;
    height: 100%;
    position: relative;
}
.playAudioContainer .bgLine{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.playAudioContainer .bgLine .bg1{
    width: 100%;
    background-image: url(../images/pl1.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100px;
    position: absolute;
    bottom: 20px;
    left: 0;
    z-index: 1;
}
.playAudioContainer .bgLine .bg2{
    width: 100%;
    background-image: url(../images/pl2.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100px;
    position: absolute;
    bottom: 20px;
    left: 0;
    z-index: 2;
}
.playAudioContainer .bgLine .bg3{
    width: 100%;
    background-image: url(../images/pl3.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100px;
    position: absolute;
    bottom: 20px;
    left: 0;
    z-index: 3;
}
/* 航拍模式 */
.cockpitHpContainer{
    width: 100vw;
    height: 100vh;
    background-color: #2b2b2b;
    /* background-image: url(../images/temp1.png); */
    background-size: cover;
    position: relative;
}
.hpModeContainer{
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 999;
}

.hpModeContainer .waypoint{
    padding: 0 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    top: 12px;
    left: 12px;
    width:fit-content;
    height: 25px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.75);
    font-size: 12px;
    color: #fff;
}
.hpModeContainer .waypoint .img{
    margin-left: 5px;
    width: 15px;
    height: 15px;  
}
.hpModeContainer .waypointProposal{       
    position: absolute;
    top: 12px;
    left: 140px;   
}
.hpModeContainer .waypointProposalBox{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 8px;
    width:fit-content;
    height: 25px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.75);
    font-size: 12px;
    color: #fff;
}
.hpModeContainer .waypointProposal .icon01{
    width: 10px;
    height: 10px;
    border: 1px solid #0097FF;
    border-radius: 50%;
}
.hpModeContainer .waypointProposal .icon02{
    margin:0 5px;
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../images/hp5@1x.png);
    background-size: cover;
}

.hpModeContainer .waypointProposal .imgBox{
    position: absolute;
    top: 33px;
    left: 23px;
    width: 100px;
    height: 75px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.75);
}
.hpModeContainer .waypointProposal .imgBox::after{
    position: absolute;
    top: -6px;
    left: 4px;
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent; /* 左边框透明 */
    border-right: 4px solid transparent; /* 右边框透明 */
    border-bottom: 6px solid black; /* 底部边框为三角形底边 */
}
.hpModeContainer .waypointProposal .imgBox .ant-image{
    width: 100% !important;
    height: 100% !important;
}
.hpModeContainer .waypointProposal .imgBox img{
    width: 100% !important;
    height: 100% !important;
}

.hpModeContainer .circle-warp{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 142px;
    height: 142px;
    border-radius: 100px;
    position: absolute;
    bottom: 21px;
    left: 21px;

     z-index: 2;
}
.hpModeContainer.guide .circle-warp{
    background: rgba(255, 255, 255, 0.28);
}
.hpModeContainer.ios .circle-warp{
    left: 45px;
}
.hpModeContainer .circle-container {
    position: relative;
    width: 120px;
    height: 120px;
    /* overflow: hidden; */
  }
   
  .circle-part1 {
    position: absolute;
    top: -8px;
    left: 30px;
    width: 60px;
    height: 60px;
    /* background: rgba(0, 0, 0, 0.75); */
    border-radius: 60px 0 0 0;
    transform: rotate(45deg);
    /* width: 82px; */
    /* height: 46px; */
    /* background-image: url(../images/yunTaiRightBtn@1x.png); */
    /* background-repeat: no-repeat;
    background-size: 46px 82px; */
  }
   .circle-part1::after{
    content: '';
    width: 82px;
    height: 46px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -23px;
    margin-left: -41px;
    background-image: url(../images/yunTaiTopBtn@1x.png);
    background-repeat: no-repeat;
    background-size: 82px 46px;
    transform: rotate(-45deg);
  } 

  .circle-part2 {
    position: absolute;
    top: 30px;
    right: -8px;
    width: 60px;
    height: 60px;
    /* background: rgba(0, 0, 0, 0.75); */
    border-radius: 0 60px 0 0;
    transform: rotate(45deg);
  }
  .circle-part2::after{
    content: '';
    width: 46px;
    height: 82px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -41px;
    margin-left: -23px;
    background-image: url(../images/yunTaiRightBtn@1x.png);
    background-repeat: no-repeat;
    background-size: 46px 82px;
    transform: rotate(-45deg);
  } 
  .circle-part3 {
    position: absolute;
    bottom: -8px;
    right: 30px;
    width: 60px;
    height: 60px;
    /* background: rgba(0, 0, 0, 0.75); */
    border-radius: 0 0 60px 0;
    transform: rotate(45deg);
  }
  .circle-part3::after{
    content: '';
    width: 82px;
    height: 46px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -23px;
    margin-left: -41px;
    background-image: url(../images/yunTaiBottomBtn@1x.png);
    background-repeat: no-repeat;
    background-size: 82px 46px;
    transform: rotate(-45deg);
  } 
  .circle-part4 {
    position: absolute;
    bottom: 30px;
    left: -8px;
    width: 60px;
    height: 60px;
    /* background: rgba(0, 0, 0, 0.75); */
    border-radius: 0 0 0 60px;
    transform: rotate(45deg);
  }
  .circle-part4::after{
    content: '';
    width: 46px;
    height: 82px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -41px;
    margin-left: -23px;
    background-image: url(../images/yunTaiLeftBtn@1x.png);
    background-repeat: no-repeat;
    background-size: 46px 82px;
    transform: rotate(-45deg);
  } 
  .circle-part1.active::after, .circle-part2.active::after, .circle-part3.active::after, .circle-part4.active::after{
    opacity: 0.7;
  }
  .circleCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 25px;
    transform: translate(-50%,-50%);
    background: rgba(44, 44, 44, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 50px;
  }
  .circle-container .optBtn{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .circle-container .optBtn .img{
   
    transform: rotate(-45deg);
  }

  .circle-container .optBtn.circle-part2 .img,.circle-container .optBtn.circle-part4 .img{
    height: 16px;
  }
  .circle-container .optBtn.circle-part1 .img,.circle-container .optBtn.circle-part3 .img{
    width: 16px;
  }

  .optBtn.active{
    background: rgba(222, 242, 255, 0.25);
  }
.yunTai {
    border-radius: 40px;
    padding: 10px;
    position: absolute;
    bottom: 0;
    left: 6px;
   
}
.yunTai .down,.yunTai .top,.yunTai .center{     
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.75);
    font-size: 11px;
    color: #fff;
}
.yunTai .center{
  margin: 10px 0;
}

.yunTai .down .icon,.yunTai .top .icon,.yunTai .center .icon{
    margin-bottom: 3px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: cover;    
}
.yunTai .down .icon{
    background-image: url(../images/hp2@1x.png);   
}
.yunTai .top .icon{
    background-image: url(../images/hp1@1x.png);   
}
.yunTai .center .icon{
    background-image: url(../images/hp3@1x.png);   
}
.hpModeContainer .photographCon{
    position: absolute;
    right: 8px;
    bottom: 38px;
    padding: 10px;
    border-radius: 60px;
    z-index: 9;
}
.hpModeContainer .photograph{
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.75);
    font-size: 14px;
    color: #fff;
}

.hpModeContainer .photograph .icon{
    margin-bottom: 3px;
    display: inline-block;
    width: 36px;
    height: 36px;
    background-image: url(../images/hp4@1x.png);
    background-size: cover;    
}

.hpModeContainer .photograph:active,.hpModeContainer .wideAngle:active,.hpModeContainer .delay:active,.yunTai .top:active,.yunTai .center:active,.yunTai .down:active{
    background: rgba(222, 242, 255, 0.25);
}

.hpModeContainer .wideAngle{
    position: absolute;
    right: 114px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.75);
    font-size: 11px;
    color: #fff;
    z-index: 9;
}
.hpModeContainer .wideAngle .icon{
    margin-bottom: 3px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../images/hp6@1x.png);
    background-size: cover;    
}
.hpModeContainer .delay{
    position: absolute;
    right: 114px;
    bottom: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.75);
    font-size: 11px;
    color: #fff;
    z-index: 9;
}
.hpModeContainer .delay.isDelay{
    color: #FF8C00;
}
.hpModeContainer .delay .icon{
    margin-bottom: 3px;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(../images/hp9@1x.png);
    background-size: cover;    
}
.hpModeContainer .delay.isDelay .icon{
    background-image: url(../images/hp10@1x.png);  
}

.hpModeContainer .delay.isPhotograph{
    color: #fff;
}

.hpModeContainer .delay.isPhotograph .icon{
    background-image: url(../images/hp9@1x.png);  
}
.hpModeContainer .photograph.isPhotograph .icon,.hpModeContainer .wideAngle.isPhotograph .text,.hpModeContainer .wideAngle.isPhotograph .icon,.hpModeContainer .delay.isPhotograph .text,.hpModeContainer .delay.isPhotograph .icon{
    opacity: 0.3;
}

.hpModeContainer .PhotoCount{
    padding: 0 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    bottom: 10px;
    right: 32px;
    width:fit-content;
    height: 25px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.75);
    font-size: 12px;
    color: #fff;
    z-index: 9;
}
.hpModeContainer .PhotoCount .icon{
    margin-right: 5px;
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../images/hp5@1x.png);
    background-size: cover;    
}
.hpModeContainer .zoom{
    padding: 10px 6px 6px 4px;
    background: rgba(0, 0, 0, 0.75);
    position: absolute;
    bottom: 175px;
    right: 18px;
    color: #fff;
    display: flex;
    flex-direction: row;
    z-index: 9;
}
.hpModeContainer .zoom .chi{
    position: relative;
    display: flex;
    flex-direction: column;
}
.hpModeContainer .zoom .chi .ico{
    display: inline-block;
    width: 0;
    height: 0;
    background-color: #FF5900;
    border-radius: 8px;
    position: absolute;
    right: -5px;
    top: 16px;
}
.hpModeContainer .zoom .chi .c2{
    display: inline-block;
    width: 14px;
    height: 20px;
    background-image: url(../images/icon8.png);
    background-size: cover;    
    margin-bottom: 3px;
}
.hpModeContainer .zoom .chi .c1{
    display: inline-block;
    width: 14px;
    height: 23px;
    background-image: url(../images/icon9.png);
    background-size: cover;    
}
.hpModeContainer .zoom .cnum{
    margin-right: 6px;
    position: relative;
    top: -3px;
    display: flex;
    flex-direction: column;
    font-size: 10px;
}
.hpModeContainer .zoom .cnum .n{
    margin-bottom: 12px;
}
.hpModeContainer .zoom .cnum .n:last-child{
    margin-bottom: 0;
}

.hpModeContainer .zoomNew{
    padding: 0 4px;
    width: 102px;
    height: 48px;
    border-radius: 190px;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    right: 16px;
    bottom: 156px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
} 
.hpModeContainer .zoomNew .zItem{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
  
}
.hpModeContainer .zoomNew .zItem span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

.hpModeContainer .zoomNew .zItem.active span{
    color: #FF8C00;
    font-size: 15px;
    width: 40px;
    height: 40px;
}

.hpModeContainer .restCamera{
    padding: 0 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    top:12px;
    right: 18px;
    width:fit-content;
    height: 25px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.75);
    font-size: 12px;
    color: #fff;
    z-index: 9;
}
.hpModeContainer .model{
    display: none;
}
.hpModeContainer .model2{
    position: absolute;
    top: 0;
    left: 50%;
    transform:translateX(-50%);
    z-index: 1;
    opacity: 0;
    width: calc(100vh * (16 / 9));
    height: 100vh;
}
.hpModeContainer.guide .model{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1;
}
.hpModeContainer.guide .model .cancelBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #FFFFFF;
    width: 148px;
    height: 44px;
    border-radius: 50px;
    font-size: 20px;
    font-weight: 600;
    font-family: PingFang SC;
    color: #fff;
    position: absolute;
    bottom: 27px;
    left: 50%;
    transform: translateX(-50%);
}
.hpModeContainer.guide .model .tip{
    position: absolute;
    padding: 4px 8px;
    background-color: #0097FF;
    border: 1px solid #EDEEF2;
    border-radius: 8px;
    width: fit-content;
    font-size: 12px;
    color: #FFF;
    line-height: 1.5;    
}
.hpModeContainer.guide .model .tip1{
    width: 164px;
    bottom: 95px;
    left: 170px;
}
.hpModeContainer.guide .model .tip1::before{
    content: '';
    display: inline-block;
    width: 6px;
    height: 12px;
    background-image: url(../images/arrow@1x.png);
    background-size: cover;    
    margin-top: -6px;
    position: absolute;
    left: -6px;
    top: 50%;
    transform: rotate(180deg);
}
.hpModeContainer.guide .model .tip2{
  
    bottom: 82px;
    right: 137px;
}
.hpModeContainer.guide .model .tip2::before{
    content: '';
    display: inline-block;
    width: 6px;
    height: 12px;
    background-image: url(../images/arrow@1x.png);
    background-size: cover;    
    margin-top: -6px;
    position: absolute;
    right: -6px;
    top: 50%;
}
.hpModeContainer.guide .model .tip3{
    left: 50%;
    transform: translate(-50%,100%);
    top: 50%;
    
}
.hpModeContainer.guide .model .tip3::before{
    content: '';
    display: inline-block;
    width: 6px;
    height: 12px;
    background-image: url(../images/arrow@1x.png);
    background-size: cover;    
    margin-top: -6px;
    position: absolute;
    left: 50%;
    margin-left: -3px;
    top: -3px;
    transform: rotate(-90deg);
}

.hpModeContainer.guide .iconCener{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: inline-block;
    width: 17px;
    height: 17px;
    background-image: url(../images/hp7@1x.png);
    background-size: cover;    
}

.hpModeContainer.guide .yunTai {
    background: rgba(255, 255, 255, 0.28);
    z-index: 2;
}
.hpModeContainer.guide .yunTai {
    background: rgba(255, 255, 255, 0.28);
}
.hpModeContainer.guide .photographCon{  
    background: rgba(255, 255, 255, 0.28);
    z-index: 2;
}
.hpModeContainer.ios .yunTai{
    left: 30px;    
}
.hpModeContainer.ios .model .tip1{
    left: 194px;    
}
.hpModeContainer input[type="range"] {
    -webkit-appearance: none; /* 移除默认样式 */
    appearance: none;
    width: 104px;
    height: 0;
    transform: rotate(-90deg);
    position: absolute;
    top: 56px;
    right: -40px;
    z-index: 99;
  }
  .hpModeContainer  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%; /* 设置滑动条轨道的宽度 */
    height: 10px; /* 设置滑动条轨道的高度 */
    background: rgb(0, 0, 0,0); /* 设置滑动条轨道的背景色 */
    border-radius: 10px; /* 设置滑动条轨道的圆角 */
  }
  .hpModeContainer  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* 移除滑块的默认样式 */
    appearance: none;
    width: 14px; /* 设置滑块的宽度 */
    height: 14px; /* 设置滑块的高度 */
    background: #FF5900; /* 设置滑块的背景色 */
    cursor: pointer; /* 设置鼠标悬停时的光标样式 */
    border-radius: 8px;
  }

  .hpModeContainer .tipsDblclick{
    padding: 0 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 25px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.75);
    font-size: 12px;
    color: #fff;
    overflow: hidden;
  }
  .hpModeContainer .tipsDblclick .ant-carousel,.hpModeContainer .tipsDblclick .slick-list{
    height: 25px !important;
    color: #fff;
    font-size: 12px;
  }
  .hpModeContainer .tipsDblclick .ant-carousel .slick-dots{
    display: none !important;
  }
  .hpModeContainer .tipsDblclick .ant-carousel .slick-slide {
    height: 25px !important;
    line-height: 25px !important;
    background-color: rgba(0, 0, 0, 0.75);
  }
  @media screen and (max-width: 760px) {
    .hpModeContainer .tipsDblclick .ant-carousel .slick-slide {
        height: 25px !important;
        line-height: 25px !important;
        background-color: rgba(0, 0, 0, 0.75);
      }
  }
.status.qiyong{
    color: #1bbe6b;
}
.status.jinyong{
    color: red;
}
.checkSupportAudioModal {
    padding: 15px;
}
.checkSupportAudioModal .submitBtn{
    margin-top: 50px;
    width: 100%;
    height: 44px;
    color: #fff;
    font-size: 18px;
    background: linear-gradient(90deg, #0097FF 0%, #7DCAFF 100%);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.centerImg{
    position: absolute;
    transform: translate(-50%,-50%);
    width: 17px;
    height: 17px;
}
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .jessibuca-controls{
    display: none !important;
  }

  .coreEditPageContentNew.project .form .label{
    width: 100px !important;
  }
  .audiosDispositon .pictures li{
    position: relative;
  }
  .audiosDispositon .pictures li .icon-guanbi1{
    position: absolute;
    top: -12px;
    right: -5px;
    z-index: 99;
  }
  .audiosDispositon .pictures img{
    width: 84px !important;
    height: 32px !important;
  }
    .packages .inputBoxBase{
    align-items:flex-start;
  }
   .packages .label{
    line-height: 32px;
   }
  .packages .hd{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .packages .hd .input{
    width: 250px;
    margin-left: 10px;
  }
.packages .list{
    width: fit-content;
    padding: 10px 10px 0 10px;
    background-color: #fafafa;
    margin-top: 6px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.packages .list .packageItem{
    background-color: #fff;
    padding: 5px;
    width: fit-content;
    margin: 0 10px 10px 0;
}
.packages .list .packageItem .ad{
   
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.packages .list .packageItem .ad .text{
    font-size: 12px;
    margin-top: 5px;
    color: #999;
}
.coreEditPageContentNew .packages .pictures:first-child{
    margin-right: 10px !important;
}
.coreEditPageContentNew .packages .pictures li:last-child{
    margin-right: 0 !important;
}
.packageItem .tp{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
}
.packageItem .tp .input{
    width: 104px;
    margin-right: 10px;
    font-size: 11px !important;
}
.packageItem .tp .ant-select-selection-item{
    font-size: 11px !important;
}
.packageItem .uploadCon{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.packageItem .delBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 218px;
    height: 28px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid rgb(255, 120, 117);
    color: rgb(255, 120, 117);
}
.projectTemplate .templateItem{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.projectTemplate .templateItem .del{
    margin-left: 10px;
    color: #1877F2;
    cursor: pointer;
}
.projectTemplate .pictures li{
    width: 84px !important;
    height: 32px !important;
    margin: 0 0 0 10px !important;
}
.projectTemplate .inputBoxBase {
    align-items: flex-start;
  
}
.projectTemplate .label {
  line-height: 32px;
}
.projectTemplate .list{
    margin-top: 10px;
}
.projectTemplate .templateItem .item2{
    margin-left: 10px;
}
.projectTemplate .templateItem .item3{
    margin-left: 10px;
}

.projectTimesPrice .label{
    line-height: 32px;
}
.projectTimesPrice .inputBoxBase {
    align-items: flex-start;
}
.projectTimesPrice .list{
    margin-top: 10px;
}
.projectTimesPrice .list .timesPriceItem{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.projectTimesPrice .list .del{
   cursor: pointer;
   color: #1877F2;   
}
.projectTimesPrice .list .item1,.projectTimesPrice .list .item2,.projectTimesPrice .list .item3{
    margin-right: 10px;
}

.ClipsParamKeys .paramItem{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 5px 0;
}
.ClipsParamKeys .paramItem .key{
    width: 70px;
}