.public-nape-plot-details {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    z-index: 99;
    font-size: 16px;
    box-shadow: inset 0px 3px 20px 1px #5BC3D1;
    border: 1px solid #58BFCD;
    background: rgba(20, 66, 104, 0.8);
    border-radius: 16px;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: relative;
        border-radius: 8px 8px 0 0;
        width: 100%;
        height: 86px;
        box-sizing: border-box;
        border: 1px solid #3F7D93;

        .nav {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 50px;
            color: #fff;
            background: url(/img/icon/popup-nav-btn.png) no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
            font-size: 18px;
        }

        .nav.on {
            background: url(/img/icon/popup-nav-btn-sel.png) no-repeat;
            background-size: 100% 100%;
        }

        .close {
            position: absolute;
            top: 0;
            right: -30px;
            transform: translate(100%, 0);
            cursor: pointer;
        }
    }

    .content {
        display: flex;
        flex-direction: column;
        clear: both;
        width: 100%;
        height: 484px;
        margin-top: 0px;
        text-align: center;
        overflow: hidden;
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        border-radius: 0 0 8px 8px;


        .box {
            margin: 20px 25px;
            height: calc(100% - 40px);
            overflow-y: auto;

            &>div {
                margin-top: 20px;
                padding: 0 20px;
            }

            &>div:first-child {
                margin: 0;
            }

        }

        .zypz-box {

            &>div {
                display: flex;
                align-items: center;
                height: 120px;
                color: #A9D1D7;
                background: #0D1E34;

                .logo {
                    width: 90px;
                    height: 90px;
                    border-radius: 50%;
                }

                .titles-box {
                    margin-left: 30px;
                    display: flex;
                    align-items: flex-start;
                    flex-direction: column;

                    .title {
                        font-size: 18px;
                        font-weight: bold;
                    }

                    .time {
                        margin-top: 15px;
                        font-size: 14px;
                    }
                }
            }

        }

        .nscz-box {
            &>div {
                position: relative;
                height: 84px;
                margin-top: 10px;
                padding: 10px 20px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                background: rgba(102, 221, 233, 0.1);
                border-radius: 8px;
                font-size: 18px;
                color: #a9d1d7;

                .t-border {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: auto;
                    margin: auto;
                    width: 80%;
                    height: 1px;
                    background: linear-gradient(89deg,
                            rgba(102, 221, 233, 0) 0%,
                            #66dde9 51%,
                            rgba(102, 221, 233, 0) 100%);
                }

                .t-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    &>div {
                        flex: 1;
                    }

                    &>div:first-child {
                        text-align: left;
                        font-size: 18px;
                        font-weight: bold;
                        color: #66dde9;
                    }

                    &>div:last-child {
                        text-align: right;
                    }
                }

                .b-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    &>div {
                        flex: 1;
                    }

                    &>div:first-child {
                        text-align: left;
                        color: #fff;
                    }

                    &>div:last-child {
                        text-align: right;
                    }
                }
            }
        }

        .base-box {
            &>div {
                height: 120px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: #0D1E34;

                .current-val {
                    margin-top: 12px;
                    font-size: 32px;
                }
            }

            .plot-name {
                color: #62D4E0;
            }

            .plot-area {
                color: #53B5F9;
            }

            .plot-type {
                color: #9270DE;
            }
        }


    }
}