@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: 100vh;
    .maptip {
        display: none;
        position: absolute;
        bottom: px2rem(80px);
        // right: px2rem(20px);
        color: white;
        width: 100%;
        left: 0;
        font-size: px2rem(20px * 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;
            }
        }
    }
    .othersystem {
        position: absolute;
        bottom: 4%;
        left: 35%;
        width: 30%;
        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;
        }
        .sys-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // margin-right: px2rem(20px * 2);
            color: white;
            font-size: px2rem(20px * 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 {
        .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: #010d85;
            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(20px * 2);
                color: #00e9ff;
            }
            .action {
                margin: 0 px2rem(24px * 2) px2rem(24px * 2);
            }
            .ckbg {
                background: url('../../assets/card-bg/frame_event@2x.png') no-repeat;
                background-size: 100% 100%;
                width: px2rem(663px * 2);
                height: px2rem(688px * 2);
                .title {
                    padding-left: px2rem(29px * 2);
                    padding-top: px2rem(22px * 2);
                    padding-bottom: px2rem(35px * 2);
                }
                .wz {
                    height: px2rem(433px * 2);
                    overflow-y: auto;
                    width: px2rem(614px * 2);
                    background: #000B70;
                    margin-left: px2rem(22px * 2);
                    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(42px * 2);
                        }
                        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;
                    >div {
                        order: 2;
                        flex: 0 0 50%;
                    }
                }
            }
            .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: calc(50% + px2rem(52px * 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(16px * 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);
            }
        }
    }
}