div.CommentSelection
{
    display: inline;      
    position: relative;      
}

div.CommentSelection::after
{
    display: inline;   
    content: url(images/pointers/comment.png);    
    position: absolute;
    visibility: visible;
}


div.CommentBlock::before
{
    content: "Comment Block: ";
    font-weight: bold;
    color: blue;
    display: inline-block;
    position: relative;
    margin-right: 5px;
}
div.CommentBlock 
{          
    display: none;
    opacity: 0.0;
    font-size: medium;
    font-family: Arial;
}
div.CommentBlock > textarea
{
    width: fit-content; 
    height: fit-content;
    min-width: 10em;
    resize: both;
    background-color: aqua;
}

div.CommentBlock > textarea::before
{
    display: block;
    content: "Post: "; /* attr(data-zxw-at-post); */
    width: fit-content; 
    background-color: antiquewhite;
    border: 1px solid black;
}

div.CommentSelection:hover > div.CommentBlock
{
    transition-property: all;
    transition-delay: 10s;
    transition-duration: 10s;                        
    opacity: 1.0;
    display: inline-block;
    position: absolute;        
    border: 1px solid black;            
    background-color: aquamarine;
    padding: 5px;
    /*
    margin-top: 1em;
    margin-left: 50px;
    left: 550px;            
    margin-top: - var(--CommentSelection-height);
    top: -50px;
    */
}

div.DISABLE_CommentSelection:hover:after
{
   content: "Boo:    " attr(class) "    " var(--CommentSelection-height);
   border: 1px solid black;
   background-color: aquamarine;
   /*
   content: "Boo" - var(--CommentSelection-height);
   */
}

div.CommentSelection:hover
{
    --CommentSelection-height: calc-size(height, size);
    background-color: yellow;
    cursor:  url(images/pointers/comment.png) 10 25,auto;            
}
div.CommentSelection:click
{
    background-color: red;
    cursor:  url(images/pointers/comment.png) 10 25,auto;            
}