.ui-cst-tatics-container {
  position: relative;
  display: flex;
}
.ui-cst-tatics-container .canvas-container {
  position: absolute;
}
.ui-cst-tatics-container .object {
  position: absolute;
  text-align: center;
  display: inline-grid;
}
.ui-cst-tatics-container .object img {
  margin: auto auto;
}
.ui-cst-tatics-container .object input {
  background-color: transparent;
  text-align: center;
  width: 100px;
  justify-self: center;
}
.ui-cst-tatics-container .object .description {
  color: white;
  background: transparent;
  border: none;
  box-shadow: none;
  width: 50px;
  text-align: center;
}
.ui-cst-tatics-container .object .ui-rotatable-handle {
  background-image: url(../images/tatics-sketch/spin_button.png);
  background-size: 10px 10px;
  width: 10px;
  height: 10px;
  top: -10px !important;
}
.ui-cst-tatics-container .object .ui-rotatable-handle:after {
  background-color: black;
  content: '';
  width: 1px;
  height: 200%;
  position: absolute;
  top: 60%;
  left: 83%;
  transform: rotate(-51deg);
  transform-origin: 100% 0;
  z-index: -1;
}
.ui-cst-tatics-container .ui-cst-field-object-menu {
  border: 1px solid black;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.9);
  display: inline-flex;
}
.ui-cst-tatics-container .ui-cst-field-object-menu .delete-button {
  cursor: pointer;
  border-radius: 8px;
}
.ui-cst-tatics-container .ui-cst-field-object-menu .move-button {
  cursor: move;
  border-radius: 8px;
  background-image: url(../images/tatics-sketch/move_icon.png);
  background-size: 20px;
  width: 20px;
  height: 20px;
}
.ui-cst-tatics-container .ui-cst-icon-straight-line {
  background-image: url(../images/tatics-sketch/straight_line.png);
  width: 40px;
  height: 26px;
}
.ui-cst-tatics-container .ui-cst-icon-straight-line-dashed {
  background-image: url(../images/tatics-sketch/straight_line_dashed.png);
  width: 40px;
  height: 26px;
}
.ui-cst-tatics-container .ui-cst-icon-curve-line {
  background-image: url(../images/tatics-sketch/curve_line.png);
  width: 40px;
  height: 26px;
}
.ui-cst-tatics-container .ui-cst-icon-curve-line-dashed {
  background-image: url(../images/tatics-sketch/dashed_curve.png);
  width: 40px;
  height: 26px;
}
.ui-cst-tatics-container .ui-cst-icon-arrow {
  background-image: url(../images/tatics-sketch/straight_arrow.png);
  width: 40px;
  height: 26px;
}
.ui-cst-tatics-container .ui-cst-icon-arrow-dashed {
  background-image: url(../images/tatics-sketch/arrow_dashed.png);
  width: 40px;
  height: 26px;
  margin: 5px 0;
  background-position-y: 5px;
}
.ui-cst-tatics-container .ui-cst-icon-arrow-curve {
  background-image: url(../images/tatics-sketch/curve_arrow.png);
  width: 40px;
  height: 26px;
  background-position-y: 5px;
}
.ui-cst-tatics-container .ui-cst-icon-arrow-dashed-curve {
  background-image: url(../images/tatics-sketch/dashed_curve_arrow.png);
  width: 40px;
  height: 26px;
  background-position-y: 5px;
}
.ui-cst-tatics-container .ui-cst-tatics-draggableBox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex: 1;
  overflow: hidden;
  overflow-x: visible;
}
.ui-cst-tatics-container .ui-cst-tatics-draggableBox > * {
  margin: 5px auto;
}
.ui-cst-tatics-container .ui-cst-tatics-draggableBox .ui-cst-label-text {
  background-image: url(../images/tatics-sketch/icon_text.png);
  width: 21px;
  height: 20px;
  background-position: -2px -3px;
}
.ui-cst-tatics-container .label-text input {
  min-height: 20px;
}
.ui-cst-tatics-container .label-text input:hover {
  border: 1px dashed #9bca47;
}
.ui-cst-tatics-container .pen-option {
  background-repeat: no-repeat;
  margin: 5px auto;
}
.ui-cst-tatics-container .pen-option:hover {
  transform: scale(1.5, 1.5);
  -ms-transform: scale(1.5, 1.5);
  -webkit-transform: scale(1.5, 1.5);
}
.ui-cst-tatics-container .ui-cst-tatics-background-toolbox {
  text-align: center;
}
.ui-cst-tatics-container .ui-cst-tatics-background-toolbox .background-icon-button {
  cursor: pointer;
  width: 30px;
  height: 40px;
  background-size: 30px 40px;
  background-image: url(../images/tatics-sketch/full_field.png);
  transform: rotate(90deg);
}
.ui-cst-tatics-container .background-option {
  width: 80px;
  height: 80px;
  background-size: 80px 80px;
  margin: 5px auto;
}
.ui-cst-tatics-container .ui-cst-ball {
  width: 20px;
  height: 20px;
  background-image: url(../images/tatics-sketch/ball.png);
  background-size: 20px;
}
.ui-cst-tatics-container .ui-cst-cone {
  width: 20px;
  height: 20px;
  background-image: url(../images/tatics-sketch/cone.png);
  background-size: 20px;
}
.shirt > *,
.shirt-green > *,
.shirt-red > * {
  margin: 0 auto;
  font-size: 11px;
}
.ui-cst-tatics-container .ui-cst-shirt-green {
    width: 20px;
    height: 20px;
    background-size: 20px;
    background-image: url(../images/tatics-sketch/shirt_green.svg);
}
.ui-cst-tatics-container .ui-cst-shirt {
    width: 20px;
    height: 20px;
    background-image: url(../images/tatics-sketch/shirt.svg);
    background-size: 20px;
}
.ui-cst-tatics-container .ui-cst-shirt-white {
    width: 20px;
    height: 20px;
    background-image: url(../images/tatics-sketch/shirt_white.svg);
    background-size: 20px;
}
.ui-cst-tatics-container .ui-cst-shirt-white-no-line {
    width: 20px;
    height: 20px;
    background-image: url(../images/tatics-sketch/shirt_white_no_line.svg);
    background-size: 20px;
}    
.ui-cst-tatics-container .ui-cst-shirt-red {
    width: 20px;
    height: 20px;
    background-image: url(../images/tatics-sketch/shirt_red.svg);
    background-size: 20px;
}
.ui-cst-tatics-container .ui-cst-shirt-blue {
    width: 20px;
    height: 20px;
    background-image: url(../images/tatics-sketch/shirt_blue.svg);
    background-size: 20px;
}
.ui-cst-tatics-container .ui-cst-shirt-brown {
    width: 20px;
    height: 20px;
    background-image: url(../images/tatics-sketch/shirt_brown.svg);
    background-size: 20px;
}
.ui-cst-tatics-container .ui-cst-shirt-orange {
    width: 20px;
    height: 20px;
    background-image: url(../images/tatics-sketch/shirt_orange.svg);
    background-size: 20px;
}
.ui-cst-tatics-container .ui-cst-shirt-yellow {
    width: 20px;
    height: 20px;
    background-image: url(../images/tatics-sketch/shirt_yellow.svg);
    background-size: 20px;
}
.ui-cst-tatics-container .ui-cst-shirt-navy-blue {
    width: 20px;
    height: 20px;
    background-image: url(../images/tatics-sketch/shirt_navy_blue.svg);
    background-size: 20px;
}
.ui-cst-tatics-container .ui-cst-shirt-sky-blue {
    width: 20px;
    height: 20px;
    background-image: url(../images/tatics-sketch/shirt_sky_blue.svg);
    background-size: 20px;
}
.ui-cst-tatics-container .ui-cst-custom-icon {
  max-width: 30px;
  max-height: 100px;
}
.ui-cst-tatics-container .ui-cst-custom-icon img {
  max-width: 30px;
  max-height: 100px;
  display: block;
  margin: auto;
}
.ui-cst-tatics-container .ui-cst-yellow-cone {
  width: 20px;
  height: 20px;
  background-image: url(../images/tatics-sketch/yellow_cone.png);
  background-size: 20px;
}
.ui-cst-tatics-container .ui-cst-white-orange-cone {
  width: 20px;
  height: 20px;
  background-image: url(../images/tatics-sketch/white_orange.png);
  background-size: 20px;
}
.ui-cst-tatics-container .ui-cst-ladder {
  width: 20px;
  height: 20px;
  background-image: url(../images/tatics-sketch/ladder.png);
  background-size: 20px;
}
.ui-cst-tatics-container .ui-cst-player-blue {
  width: 33px;
  height: 22px;
  background-image: url(../images/tatics-sketch/player_blue.png);
  background-size: 33px;
}
.ui-cst-tatics-container .ui-cst-player-dark-blue {
  width: 33px;
  height: 22px;
  background-image: url(../images/tatics-sketch/player_dark_blue.png);
  background-size: 33px;
}
.ui-cst-tatics-container .ui-cst-player-red {
  width: 33px;
  height: 22px;
  background-image: url(../images/tatics-sketch/player_red.png);
  background-size: 33px;
}
.ui-cst-tatics-container .ui-cst-player-gray {
  width: 33px;
  height: 22px;
  background-image: url(../images/tatics-sketch/player_gray.png);
  background-size: 33px;
}
.ui-cst-tatics-toolbar-container {
  display: flex;
  flex-direction: column;
}
.ui-cst-tatics-toolbar-container .ui-cst-tatics-drawing-toolbox {
  width: 80px;
  text-align: center;
  background-color: #dcdcdc;
}
.ui-cst-tatics-drawing-toolbox #btnPenOption button {
  cursor: pointer;
}
.ui-cst-tatics-field .taticsLoading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(112, 112, 112, 0.5);
  z-index: 112;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(150, 150, 150, 0.5);
}
.ui-cst-tatics-field .taticsLoading .loadingImage {
  height: 50px;
  padding: 50px 50px;
  width: 50px;
}
.ui-cst-tatics-field .ui-cst-tatics-background-image {
  position: absolute;
}