@import '../../styles/utils.scss';
.card-bg-container {
    box-sizing: border-box;
    background-image: url('../../assets/card-bg/frame_filter_center@2x.png');
    background-position: top center;
    background-repeat: repeat-y;
    background-size: cover;
    .card-border-bottom-left,
    .card-border-bottom-right,
    &::before,
    &::after {
        content: '';
        position: absolute;
        width: px2rem(40px * 2);
        height: px2rem(40px * 2);
        background-color: transparent;
        border-left: px2rem(1px) solid #00a3ff;
        border-top: px2rem(1px) solid #00a3ff;
        top: 0;
        left: 0;
    }
    .card-border-bottom-right,
    &::after {
        border-left: unset;
        border-right: px2rem(1px) solid #00a3ff;
        right: 0;
        left: unset;
    }
    .card-border-bottom-left,
    .card-border-bottom-right {
        bottom: 0;
        top: unset;
        border-bottom: px2rem(1px) solid #00a3ff;
        border-top: unset;
    }
}

.task-map-container {
    height: 100%;
    .maptip {
        display: none;
        position: absolute;
        bottom: px2rem(80px);
        // right: px2rem(20px);
        color: white;
        width: 100%;
        left: 0;
        font-size: px2rem(18px * 2);
        text-align: center;
        >div {
            max-width: 3rem;
            margin: auto;
            background: #060761;
            padding: 10px 20px;
            border-radius: 9px;
        }
        .tipitem {
            display: inline-block;
            min-width: px2rem(92px *2);
            // margin-top: px2rem(40px);
            margin-left: px2rem(40px);
            ;
            #marker {
                display: inline-block;
                vertical-align: middle;
                margin-right: 10px;
            }
        }
    }
    .openclose {
        position: absolute;
        bottom: 0.5%;
        text-align: center;
        left: 50%;
        transform: translate(-50%, -50%);
        // animation: myanimation 1s infinite;
        // @keyframes myanimation {
        //     from {
        //         bottom: 0.8%;
        //     }
        //     to {
        //         bottom: 1.3%;
        //     }
        // }
        img {
            width: px2rem(38px * 2);
            height: px2rem(38px * 2);
            margin: auto;
            animation-iteration-count: infinite;
        }
    }
    .othersystem {
        position: absolute;
        bottom: 5%;
        left: 34%;
        width: 32%;
        height: 15%;
        text-align: center;
        flex-direction: row;
        display: flex;
        justify-content: space-around;
        .othersystem1 {
            // background: #060761;
            // max-width: 80%;
            padding: px2rem(5px * 2) px2rem(10px * 2);
            border-radius: 9px;
            margin: auto;
            text-align: center;
            border-radius: px2rem(10px * 2);
            display: flex;
        }
        a {
            color: #fff;
            // background: #00a3ff;
            text-underline-offset: none;
        }
        a:hover {
            cursor: pointer;
        }
        @keyframes shakeY {
            from,
            to {
                transform: translate3d(0, 0, 0);
            }
            20%,
            60% {
                transform: translate3d(0, -10px, 0);
            }
            40%,
            80% {
                transform: translate3d(0, 10px, 0);
            }
        }
        .shakeY {
            animation-name: shakeY;
        }
        .sys-item:hover:after {
            content: '';
            background: rgba(255, 255, 255, 0.1);
            width: px2rem(90px * 4);
            height: px2rem(69px * 4);
            position: absolute;
            z-index: -1;
            border-radius: px2rem(40px * 4);
            ;
        }
        .sys-item {
            animation-duration: 1.5s;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // margin-right: px2rem(20px * 2);
            color: white;
            font-size: px2rem(18px * 2);
            font-weight: bold;
            .sys-item-img>img {
                width: px2rem(75px * 2);
                height: px2rem(75px * 2);
            }
            &[datatype='1'] {
                margin-right: px2rem(0px * 2);
            }
        }
    }
    .minemap-map {
        .tipc{
            z-index: 11111;
            position:absolute;
            top:-80px;
            transform: translateX(-50%);
            left:50%;
            padding:10px 20px;
            height:40px;
            font-size: 26px;
            background:rgba($color: #0567e9, $alpha: 0.85);
            border-radius: 10px;
            color: white;
            min-width:fit-content;
            width: fit-content;
            line-height: 40px;
            white-space: nowrap;
    
        }
        .pointerc:hover{
            cursor: pointer;
        }
        .minemap-popup-tip {
            display: none;
        }
        .minemap-popup-content {
            max-width: unset !important;
            padding: unset;
            min-width: px2rem(332px * 2);
            // width: 332px;
            border-radius: unset;
            @extend .card-bg-container;
            background: #030f2b;
            color: #fff;
            .title {
                padding: px2rem(22px * 2) px2rem(24px * 2) px2rem(15px * 2);
                box-sizing: border-box;
                // background: #003a8c;
                // border-radius: 1px;
                font-size: px2rem(18px * 2);
                color: #00e9ff;
            }
            .action {
                margin: 0 px2rem(24px * 2) px2rem(24px * 2);
                .el-button {
                    min-height: px2rem(40px * 2);
                    font-size: px2rem(14px * 2);
                }
            }
            .ckbg {
                background: url('../../assets/card-bg/frame_event@2x.png') no-repeat;
                background-size: 100% 100%;
                width: px2rem(663px * 2);
                height: px2rem(423px * 2);
                .title {
                    padding-left: px2rem(29px * 2);
                    padding-top: px2rem(23px * 2);
                    // padding-bottom: px2rem(35px * 2);
                }
                .wz {
                    height: px2rem(212px * 2);
                    overflow-y: auto;
                    width: px2rem(614px * 2);
                    background: #051B52;
                    margin-left: px2rem(22px * 2);
                    &::-webkit-scrollbar {
                        width: 6px;
                        background-color: #051B52;
                        border-left: 2px solid rgba($color: #000000, $alpha: 0);
                        opacity: 1;
                    }
                    &::-webkit-scrollbar-thumb {
                        background: #39d6fe;
                        border-radius: 3px;
                    }
                    table {
                        width: 100%;
                        font-size: px2rem(16px * 2);
                        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
                        font-weight: 400;
                        th {
                            opacity: 0.6;
                        }
                        tr {
                            height: px2rem(34px * 2);
                            border-bottom: 1px solid #030F2C;
                        }
                        td {
                            color: white;
                            opacity: 1;
                            text-align: center;
                        }
                    }
                }
                .wz::-webkit-scrollbar-thumb {
                    background: #39d6fe;
                    border-radius: 3px;
                }
                .content {
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: row;
                    padding-top: px2rem(20px * 2) !important;
                    padding-bottom: px2rem(14px * 2);
                    >div {
                        order: 2;
                        flex: 0 0 50%;
                    }
                    span:hover {
                        overflow: visible !important;
                        white-space: normal !important;
                    }
                }
            }
            .content {
                height: max-content;
                padding: px2rem(24px * 2);
                // background: #fff;
                >div {
                    display: flex;
                    font-size: px2rem(14px * 2);
                    line-height: px2rem(20px * 2);
                    margin-bottom: px2rem(10px * 2);
                    >span:first-child {
                        min-width: max-content;
                    }
                }
            }
           
        }
    }
    .address-type-card-container {
        &.in-detail {
            position: absolute;
            height: px2rem(554px * 2 - 182px + 390px * 2 - 172px + 48px);
            right: px2rem((939px + 30px + 30px) * 2);
            top: px2rem(65px * 2);
            // transform: translateY(calc(-50% - px2rem(52px / 2 * 2)));
            .address-type-card {
                top: 0;
                right: 0;
                animation: fadeInRight 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
            }
        }
    }
    .address-type-card {
        position: absolute;
        top: px2rem(83px * 2);
        right: px2rem(30px * 2);
        // min-width: px2rem(178px);
        // min-height: px2rem(293px);
        width: max-content;
        height: max-content;
        border-radius: 1px;
        padding: px2rem(27px * 2) px2rem(36px * 2);
        box-sizing: border-box;
        .el-checkbox__inner {
            width: px2rem(16px * 2);
            min-width: 14px;
            height: px2rem(16px * 2);
            min-height: 14px;
            background-color: transparent;
            &::after {
                width: px2rem(10px);
                height: px2rem(20px);
                left: px2rem(8px);
            }
        }
        .el-checkbox__label {
            color: #fff;
            padding-left: px2rem(28px);
        }
        .card-item {
            display: flex;
            align-items: center;
            margin-right: 0;
            padding-bottom: px2rem(40px);
            &>span {
                font-size: 14px;
                font-size: px2rem(15px * 2);
                font-weight: 400;
            }
            .tipicon {
                width: px2rem(25px * 2);
                height: px2rem(25px * 2);
                vertical-align: middle;
                margin-top: px2rem(-2px * 2);
                margin-right: px2rem(6px * 2);
            }
        }
    }
}