.clickboard-point {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    transform: translate(-50%, -50%);
    transition: transform 0.05s linear;
    box-shadow: 0 .2rem .6rem #000000bf;
    text-align: center;
    line-height: 30px;
    color: #3f7cb6 !important;
    z-index: 2;
    display: block;
    font-size: 20px;
    font-weight: bold;
    box-sizing: content-box;
    border: 1px solid  #3f7cb6;
}

.clickboard-point:hover {
    border: 3px solid #3f7cb6;
    cursor: pointer;
}

.active-clickboard-point{
    z-index:3;
}

.clickboard-container {
    position: relative;
}

.clickboard-description {
    box-shadow: 0 .2rem .6rem #000000bf;
    background-color: white;
    position: absolute;
    color: rgb(0, 23, 56);
}

    .clickboard-description .title {
        font-size: 14px;
        color: rgb(0, 23, 56);
        border-bottom: 1px solid rgb(27, 49, 80);
        padding: 8px;
        white-space:nowrap;
        text-align:left;
    }

    .clickboard-description .description {
        font-size: 14px;
        color: rgb(0, 23, 56);
        padding: 8px;
        white-space: pre-wrap;
        /* word-wrap: break-word; */
        text-align: left;
        width: 699px;
        max-width: 450px;
        font-weight: normal;
        overflow-wrap: break-word;
        line-height:22px;
    }

.clickboard-overlay{
    background-color:black;
    position:absolute;
    left:0;
    right:0;
    top:0;
    opacity:0.05;
    bottom:0;
}

.point-pulse {
    animation: point-pulse 1.5s infinite;
}

/* Keyframes for the pulsing animation */
@keyframes point-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(0, 123, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}