.markerpic{position:relative;overflow-x:clip;margin:0 auto;height:fit-content;--marker-bg:#893f2b;--marker-color:#fff;--marker-br-color:rgb(255 255 255 / 50%);--marker-size:1;&.small{--marker-size:.8;}[data-id]{position:absolute;user-select:none;background:var(--marker-bg);border:1px solid var(--marker-br-color);color:var(--marker-color);border-radius:2em;outline:none;text-decoration:none !important;font-size:14px;line-height:1.4;font-family:sans-serif;max-width:150px;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;&:is(span)&.active{z-index:500;}&:is(span){padding:0 6px;z-index:100;zoom:calc(1 * var(--marker-size));&:hover{z-index:600;}}&:is(div){padding:0;height:4px;width:6px;max-width:unset;&.drag-element{max-width:6px;}}&[data-tip=on]{cursor:pointer;}}&.cir{[data-id]{font-size:11px;}}&.cir,&.num{[data-id]{cursor:pointer;border-radius:2em;}}&.nmt,&.tit{[data-id]{border-radius:4px;}}.tip{position:relative;cursor:pointer;--tip-max-width:30rem;&:before,&:after {--border-before:10px solid var(--marker-color);--border-after:10px solid var(--marker-bg);--border-unset:10px solid transparent;content:'';position:absolute;left:0;border:var(--border-unset);}&:before{}&:after{z-index:10;}&.arrow-top:before{bottom:calc(-100%);border-bottom:var(--border-before);}&.arrow-top:after{bottom:calc(-100% - 2px);border-bottom:var(--border-after);}&.arrow-top-left:before{top:calc(var(--tip-top) - 50% - 5px);left:var(--tip-left);border-left:var(--border-before);}&.arrow-top-left:after{top:calc(var(--tip-top) - 50% - 3px);left:calc(var(--tip-left) + 1px);border-left:var(--border-after);}&.arrow-top-right:before{top:calc(var(--tip-top) - 50% - 5px);left:calc(var(--tip-left) + var(--tip-width) - 200% + 1px);border-right:var(--border-before);}&.arrow-top-right:after{top:calc(var(--tip-top) - 50% - 3px);left:calc(var(--tip-left) + var(--tip-width) - 200% + 0px);border-right:var(--border-after);}&.arrow-bottom:before{top:calc(-100% + var(--arrow-height));border-top:var(--border-before);}&.arrow-bottom:after{top:calc(-100% + var(--arrow-height) - 2px);border-top:var(--border-after);}&.arrow-bottom-left:before{top:calc(-100% + 2px);left:var(--tip-left);border-left:var(--border-before);}&.arrow-bottom-left:after{top:calc(-100% - 0px);left:calc(var(--tip-left) + 1px);border-left:var(--border-after);}&.arrow-bottom-right:before{top:calc(-100% + 2px);left:calc(var(--tip-left) + var(--tip-width) - 200% + 1px);border-right:var(--border-before);}&.arrow-bottom-right:after{top:calc(-100% - 0px);left:calc(var(--tip-left) + var(--tip-width) - 200% + 0px);border-right:var(--border-after);}&.active{z-index:1010;}p,.bg{position:absolute;max-width:var(--tip-max-width);width:var(--tip-width);height:var(--tip-height);top:var(--tip-top);left:var(--tip-left);}p{color:var(--marker-color);padding:0 .8rem;font-size:smaller;line-height:1.6;z-index:20;overflow-y:auto;&::-webkit-scrollbar {width:4px;height:4px;}&::-webkit-scrollbar-track {background-color:unset;}&::-webkit-scrollbar-thumb {-webkit-border-radius:2px;border:none;background-color:#ffffff4d;&:hover {background-color:#ffffff80;}}}.bg{background:var(--marker-bg);border:1px solid var(--marker-color);border-radius:4px;z-index:1;}}&>img{padding:0 !important;margin:0;}@media (width<= 390px){--marker-size:.8;}@media (width<= 500px){&.small{--marker-size:.5;}&.tit{[data-id]{display:block;width:20px;height:20px;border-radius:2em;}}&.nmt,&.tit{[data-id]{cursor:pointer;border-radius:2em;}}}@media (width >500px){&.large{--marker-size:2;}&.nmt,&.tit{[data-id]{&:is(span){padding:0 8px;}}}}}