/*标绘*/
.plot-helper-control-point-div {
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-radius: 100%;
  background-color: #ffffff;
  opacity: 0.6;
  cursor: move;
}

.ol-plot-text-editor {
  position: relative;
  textarea {
    resize: none;
  }
  &-close {
    position: absolute;
    top: -8px;
    right: -8px;
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid #585858;
    border-radius: 16px;
    box-sizing: border-box;
    background-color: #ffffff;
    &:before {
      position: absolute;
      bottom: 0px;
      left: 5px;
      content: '';
      width: 2px;
      height: 100%;
      background-color: #585858;
      display: inline-block;
      transform: rotate(-45deg);
    }
    &:after {
      position: absolute;
      bottom: 0px;
      left: 5px;
      content: '';
      width: 2px;
      height: 100%;
      background-color: #585858;
      display: inline-block;
      transform: rotate(45deg);
    }
    &:hover {
      cursor: pointer;
      border: 2px solid #1b9de8;
      &:before {
        background-color: #1b9de8;
      }
      &:after {
        background-color: #1b9de8;
      }
    }
  }
  &-resize {
    display: none;
    position: absolute;
    bottom: 4px;
    right: 0px;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENkUzQkZBOEY5Q0UxMUU3ODk3MjhBNDExQzVGQzdDMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENkUzQkZBOUY5Q0UxMUU3ODk3MjhBNDExQzVGQzdDMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ2RTNCRkE2RjlDRTExRTc4OTcyOEE0MTFDNUZDN0MzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ2RTNCRkE3RjlDRTExRTc4OTcyOEE0MTFDNUZDN0MzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+naaIiwAAAIRJREFUeNpiYCAeOADxfyh2+P//PwMIMzFQCFhIUPsBiA8iscGAkVybQc4HAYq9gMuACUC8H4phwABJzICQwQeQQpy2sTDwgciC5LePQHwBKcD4oWxY3AsAsT6UfRE5LcAC5sCABCLIC47oyRMICqBORgYXkNRegMcCLDSpnRKJBgABBgB5djrWUPTZYwAAAABJRU5ErkJggg==") 0px 0px no-repeat;
    background-size: 100%;
    &:hover {
      cursor: pointer;
      border-color: #1b9de8;
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozN0Y5MDFFMUY5Q0YxMUU3QkNEREEwRjQ4NjU5MjYxNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozN0Y5MDFFMkY5Q0YxMUU3QkNEREEwRjQ4NjU5MjYxNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM3RjkwMURGRjlDRjExRTdCQ0REQTBGNDg2NTkyNjE2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM3RjkwMUUwRjlDRjExRTdCQ0REQTBGNDg2NTkyNjE2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FiWm3QAAAOtJREFUeNrMU0EOgjAQpLQHbnLRkPgI+YHwFA0P0JfIXROeov4AH0EgXtQbh5Z1t1IhRhMCHNxDd7LZbLczU2Z1DG+fB9xmR8KqgjCPvBNh2xoYomsjF/xuVer8xnWwvjcDwDgDvj5hfihiTAvCWeSFupZcfWRv93qPvcUz/c0BAx+PZbukpHJRhcBgUx+swh+QSA5DYYEzeGSrWWoIU8AmhIv1VGvvJjfXAamJLZm4YNJeENqeoGgkNWqS0DAxb0jUWzqy9I2VHSVJmZGsTB/j056WzTdtqfTawklxi9DgRvGajN4yDh3wFGAA+e1f3BQ3XV8AAAAASUVORK5CYII=") 0px 0px no-repeat;
      background-size: 100%;
    }
  }
  &:hover {
    .ol-plot-text-editor-close {
      display: inline-block;
    }
    .ol-plot-text-editor-resize {
      display: inline-block;
    }
  }
}