.xtag-ctr,
.xtag-tag{
position:absolute;
box-sizing:border-box;
}

.xtag-point{
width:50px;
height:50px;
transform:translate(-50%, -50%);
}

.xtag-box{
min-width:48px;
min-height:48px;
}

.xtag-ctr{
z-index:3;
touch-action:none;
outline:2px solid rgba(255, 235, 59, 0.95);
background:rgba(255, 72, 72, 0.14);
}

.xtag-tag{
z-index:1;
}

.xtag-tag:hover{
z-index:2;
}

.xtag-inner{
position:relative;
width:100%;
height:100%;
}

.xtag-quit{
background:red;
color:#fff;
font:bold 16px/20px arial;
width:20px;
text-align:center;
cursor:pointer;
float:left;
margin:0;
position:absolute;
right:0;
bottom:0;
}

.xtag-pos-left-top .xtag-form,
.xtag-pos-left-top .xtag-text{
top:0;
right:calc(100% - 1px);
}

.xtag-pos-left-bottom .xtag-form,
.xtag-pos-left-bottom .xtag-text{
bottom:0;
right:calc(100% - 1px);
}

.xtag-pos-right-top .xtag-form,
.xtag-pos-right-top .xtag-text{
top:0;
left:calc(100% - 1px);
}

.xtag-pos-right-bottom .xtag-form,
.xtag-pos-right-bottom .xtag-text{
bottom:0;
left:calc(100% - 1px);
}

.xtag-focus{
position:absolute;
inset:0;
border:2px dashed rgba(214, 0, 28, 0.98);
outline:2px solid rgba(255, 255, 255, 0.95);
background:
linear-gradient(135deg, rgba(255,255,255,0.16) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.16) 75%, transparent 75%, transparent),
rgba(255, 64, 64, 0.18);
background-size:16px 16px;
background-image:none;
background-repeat:no-repeat;
background-position:center center;
box-sizing:border-box;
cursor:move;
touch-action:none;
}

#xtag-element{
position:relative;
}

.xtag-form{
background-color:rgba(255, 255, 255, 0.82);
width:220px;
border:1px solid #000;
position:absolute;
padding:5px;
z-index:4;
}

.xtag-input{
box-sizing:border-box;
padding:5px;
border:1px solid gray;
width:100%;
font:11px tahoma;
outline:0;
resize:none;
}

.xtag-save,
.xtag-close,
.xtag-delete{
border:1px solid #333;
padding:3px 5px;
font:bold 12px arial;
text-transform:uppercase;
margin-right:5px;
margin-top:5px;
cursor:pointer;
background-color:#58B000;
color:#fff;
}

.xtag-close{
background-color:#C66300;
}

.xtag-delete{
background-color:#C60005;
display:none;
}

.xtag-area{
width:100%;
height:100%;
border:1px dashed #fff;
outline:1px dashed #000;
box-sizing:border-box;
opacity:0.9;
background:rgba(255, 255, 255, 0.06);
}

.xtag-text{
background:rgba(255, 255, 255, 0.8);
padding:5px;
font:11px tahoma;
width:150px;
min-height:50px;
box-sizing:border-box;
border:1px solid #fff;
position:absolute;
display:none;
}

.xtag-tag:hover .xtag-area{
border:1px solid #fff;
outline:1px solid #000;
opacity:1;
}

.xtag-tag:hover .xtag-text{
display:block;
}

.xtag-select{
width:100%;
padding:3px;
box-sizing:border-box;
margin-bottom:5px;
border:1px solid gray;
}

.xtag-handle{
position:absolute;
width:24px;
height:24px;
border:2px solid #111;
background:#ffeb3b;
box-sizing:border-box;
touch-action:none;
z-index:5;
}

.xtag-handle-n,
.xtag-handle-s{
left:50%;
width:32px;
height:12px;
margin-left:-16px;
cursor:ns-resize;
}

.xtag-handle-e,
.xtag-handle-w{
top:50%;
width:12px;
height:32px;
margin-top:-16px;
cursor:ew-resize;
}

.xtag-handle-n{
top:-7px;
}

.xtag-handle-s{
bottom:-7px;
}

.xtag-handle-e{
right:-7px;
}

.xtag-handle-w{
left:-7px;
}

.xtag-handle-nw{
top:-11px;
left:-11px;
cursor:nwse-resize;
}

.xtag-handle-ne{
top:-11px;
right:-11px;
cursor:nesw-resize;
}

.xtag-handle-sw{
bottom:-11px;
left:-11px;
cursor:nesw-resize;
}

.xtag-handle-se{
right:-11px;
bottom:-11px;
cursor:nwse-resize;
}

.xtag-point .xtag-focus{
background-size:22px;
}

@media (hover:none){
.xtag-form{
width:190px;
}

.xtag-handle{
width:32px;
height:32px;
}

.xtag-handle-n,
.xtag-handle-s{
width:52px;
height:18px;
margin-left:-26px;
}

.xtag-handle-e,
.xtag-handle-w{
width:18px;
height:52px;
margin-top:-26px;
}

.xtag-handle-n{
top:-10px;
}

.xtag-handle-s{
bottom:-10px;
}

.xtag-handle-e{
right:-10px;
}

.xtag-handle-w{
left:-10px;
}

.xtag-handle-nw{
top:-16px;
left:-16px;
}

.xtag-handle-ne{
top:-16px;
right:-16px;
}

.xtag-handle-sw{
bottom:-16px;
left:-16px;
}

.xtag-handle-se{
right:-16px;
bottom:-16px;
}
}