.presenceWrap {
    background-color: #d9edf6;
    padding: 10px;
    border-radius: 20px;

    .presenceHead {
        background-color: #83cce6;
        padding: 10px 20px 13px;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .mapImg {
        padding: 20px;
        border-radius: 10px;
        background-color: #fff;

        .mapInteractive {
            position: relative;

            img {
                width: 100%;
                display: block;
            }

            .mapHotspots {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;

                .mapNums {
                    text {
                        font-size: 62px;
                        fill: #1a1a1a;
                    }
                }

                .mapPoint {
                    cursor: pointer;

                    .pulseRing {
                        fill: #00844926;
                        stroke: var(--green);
                        stroke-width: 3;
                        stroke-opacity: 0.35;
                        transform-box: fill-box;
                        transform-origin: center;
                        animation: mapPulse 2s ease-out infinite;
                        transition: 0.3s;
                    }

                    .hitArea {
                        fill: transparent;
                    }

                    &:hover {
                        .pulseRing {
                            fill: #00844940;
                            stroke-opacity: 0.8;
                            animation-play-state: paused;
                            transform: scale(1.25);
                        }
                    }
                }
            }

            .mapTooltip {
                position: absolute;
                z-index: 5;
                transform: translate(-50%, calc(-100% - 18px));
                background-color: var(--green);
                color: var(--white);
                padding: 8px 16px;
                border-radius: 8px;
                white-space: nowrap;
                text-align: center;
                pointer-events: none;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.25s;

                &::after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 100%;
                    transform: translateX(-50%);
                    border: 8px solid transparent;
                    border-top-color: var(--green);
                }

                .tipState {
                    font-size: 18px;
                }

                .tipCount {
                    font-size: 15px;

                    &:empty {
                        display: none;
                    }
                }

                &.show {
                    opacity: 1;
                    visibility: visible;
                }
            }
        }
    }
}

@keyframes mapPulse {
    0% {
        transform: scale(0.7);
        stroke-opacity: 0.6;
    }

    70% {
        transform: scale(1.35);
        stroke-opacity: 0;
    }

    100% {
        transform: scale(0.7);
        stroke-opacity: 0;
    }
}

.devgTable {
    width: 100%;

    .tableInner {
        border-bottom: none;
        width: 100%;
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;

        th,
        td {
            padding: 12px 18px;
        }

        thead {
            tr {
                background: linear-gradient(to right, #008449 0%, #97b43d 100%);

                th {
                    color: var(--white);
                    font-weight: 700;
                    text-align: center;

                    &:first-child {
                        text-align: left;
                    }

                    &:not(:last-child) {
                        border-right: 3px solid var(--white);
                    }
                }
            }
        }

        tbody {
            tr {
                td {
                    border-bottom: 2px solid var(--pale);
                    text-align: right;

                    &:first-child {
                        text-align: left;
                        border-bottom: 2px solid #008449;
                    }
                }

                &.totalRow {
                    td {
                        font-weight: 700;
                    }
                }
            }
        }
    }
}

.imgBox {
    &.shadowBox {
        height: 100%;

        img {
            width: 100%;
            height: auto;
        }
    }
}

/* responsive */
@media (max-width: 767px){
    .tableWrap {
        .tableInner {
            table {
                th, td {
                    white-space: nowrap;
                }
            }
        }
    }
}