.popover .arrow {
    position: absolute;
    display: block;
    width: 1rem;
    height: .5rem;
    margin: 0 .3rem;
  }
  
  .bs-popover-auto[x-placement^=right]>.arrow, .bs-popover-right>.arrow {
    left: calc(-.5rem - 1px);
    width: .5rem;
    height: 1rem;
    margin: .3rem 0;
  }
  .bs-popover-auto[x-placement^=left]>.arrow, .bs-popover-right>.arrow {
    right: calc(-.5rem - 1px);
    width: .5rem;
    height: 1rem;
    margin: .3rem 0;
  }
  
  .bs-popover-auto[x-placement^=bottom]>.arrow, .bs-popover-right>.arrow {
    top: calc(-.8rem - 1px);
    width: .5rem;
    height: 1rem;
    margin: .3rem 0;
  }

  .bs-popover-auto[x-placement^=top]>.arrow, .bs-popover-right>.arrow {
    bottom: calc(-.5rem - 1px);
    width: .5rem;
    height: 1rem;
    margin: .3rem 0;
  }
  
  .bs-popover-auto[x-placement^=left]>.arrow::before, .bs-popover-left>.arrow::before {
      right: 0;
      border-width: .5rem 0 .5rem .5rem;
      border-left-color: rgba(0, 0, 0, .25);
  }
  .bs-popover-auto[x-placement^=right]>.arrow::before, .bs-popover-right>.arrow::before {
    left: 0;
    border-width: .5rem .5rem .5rem 0;
    border-right-color: rgba(0, 0, 0, .25);
  }
  .bs-popover-auto[x-placement^=bottom]>.arrow::before, .bs-popover-bottom>.arrow::before {
    top: 0;
    border-width: 0 .5rem .5rem .5rem;
    border-bottom-color: rgba(0, 0, 0, .25);
  }
  
  .bs-popover-auto[x-placement^=top]>.arrow::before, .bs-popover-bottom>.arrow::before {
    bottom: 0;
    border-width: 0 .5rem .5rem .5rem;
    border-bottom-color: rgba(0, 0, 0, .25);
  }
  .bs-popover-auto[x-placement^=right], .bs-popover-right {
    margin-left: .5rem;
  }
  .bs-popover-auto[x-placement^=left], .bs-popover-right {
    margin-right: .5rem;
  }
  .bs-popover-auto[x-placement^=bottom], .bs-popover-right {
    margin-top: .5rem;
  }
  .bs-popover-auto[x-placement^=top], .bs-popover-right {
    margin-bottom: .5rem;
  }
  .popover .arrow::after, .popover .arrow::before {
      position: absolute;
      display: block;
      content: "";
      border-color: transparent;
      border-style: solid;
  }


  .item_type_mota {
   
}

.popover-body {
    padding: 0;
    color: #212529;
}
.popover .popover-body table {
    text-align: left;
    border: 1px solid #ccc;
}
.popover .popover-body table .heading-table {
    background: #0048cf;
    padding: 5px;
    color: #fff;
}
.popover .popover-body table td {
    text-align: left !important;
    padding: 5px;
    border: 1px solid #ccc;
}

#MapContainer .droppable-area  {
    /* display: flex;
    align-items: flex-end; */
}

.droppable-area {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 1px;
}

#MapContainer .ui-draggable-handle .info_ship_img {
    display: block;
    position: relative;
}
.length-ship {
    position: absolute;
    right: 0;
    top: -15px;
    font-size: 12px;
    font-weight: bold;
}
.progress-bar-percent {
    bottom: 10%;
    left: 18%;
    font-weight: bold;
}
.info_ship_img .progress {
    width: 70%;
    bottom: 5%;
    right: 4%;
}

.info_ship_img img {
    width: 100%;
}
.info_ship_img img {
    transform: rotate(180deg);
}

.progress-xxs {
    height: 3px;
}
.info_ship_text {
  position: absolute;
  top: -25px;
  z-index: 2;
  color: #fff;
  font-size: 9px;
}


.status-dot {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  position: absolute;
  bottom: 5%;
  right: 3%;
  z-index: 8;
}
.dot_red {
  background-color: #f00;
  -webkit-animation: dotred 2000ms infinite;
  -moz-animation: dotred 2000ms infinite; 
  -o-animation: dotred 2000ms infinite; 
  animation: dotred 2000ms infinite;    
}
.dot_orange {
  background-color: #ff7b00;
  -webkit-animation: dotorange 2000ms infinite;
  -moz-animation: dotorange 2000ms infinite; 
  -o-animation: dotorange 2000ms infinite; 
  animation: dotorange 2000ms infinite;
}
.dot_green {
  background-color: green;
  -webkit-animation: dotgreen 2000ms infinite;
  -moz-animation: dotgreen 2000ms infinite; 
  -o-animation: dotgreen 2000ms infinite; 
  animation: dotgreen 2000ms infinite;    
}

@keyframes dotorange { 
  0% { background-color: #fff;  } 
  100% { background-color: #ff7b00;  } 
}

@keyframes dotgreen { 
  0% { background-color: #FFF;  } 
  100% { background-color: green;  } 
}


@keyframes dotred { 
  0% { background-color: #fff;  } 
  100% { background-color: #f00;  } 
}




@keyframes moveAlongPath {
  from { offset-distance: 0%; }
to { offset-distance: 100%; }
}
.mapMotion{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.mapCloud{
  width: 550px;
  height: 330px;
  position: absolute;
  left: 20%;
  right: 20%;
  background-image: url(/assets/images/cloud.png);
  transform: scale(0.5);
  z-index: 1000;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: center;
}
.cloud_01 {
  offset-path: path('M -205.8732,102.9366 1958.3688,38.601225');
  animation: moveAlongPath 120s linear infinite;
}
.cloud_02 {
  offset-path: path('M -337.11737,180.13905 2079.3193,77.202451');
  animation: moveAlongPath 80s linear infinite;
}
.mapCar{
  width: 103px;
  height: 30px;
  position: absolute;
  left: 20%;
  right: 20%;
  background-image: url('/assets/images/blue-car.png');
  transform: scale(0.5);
  offset-rotate: reverse;
}
.car_01 {
  offset-path: path('m -417.64234,1400.2781 664.31129,8.1762 -2.15685,-817.61087 -389.59425,6.70502 -0.0996,638.63455 382.05085,2.0441 0.68575,143.6548 -646.56981,-8.1761z');
  animation: moveAlongPath 50s linear infinite;
}

.mapBird{
  width: 350px;
  height: 210px;
  position: absolute;
  left: 20%;
  right: 20%;
 
  background-size: 100% auto;
  background-repeat: no-repeat;
  z-index: 1000;
}

.bird_01 {
  background-image: url('/assets/images/flying-birds.png');
  offset-path: path('M -710.26255,231.60735 2223.4306,77.202451 2161.6686,-710.26255 -30.88098,-627.91327Z');
  animation: moveAlongPath 80s linear infinite;
}
.bird_02 {
  background-image: url('/assets/images/flying-birds.png');
  offset-path: path('M -3443.2293,226.46052 2084.4662,82.349281');
  animation: moveAlongPath 80s linear infinite;
}


#list_position{
display: none;
}
.draggable-item {
cursor: move;
z-index: 10;
position: absolute;
border-radius: 3px;
}

.portside_right .info_ship_img img {
  transform: rotate(0deg);
}

.portside_right  .info_ship_img .progress{
  right: 0%;
  left: 5%;
}

.portside_right   .status-dot{
  left: 3%;
  right: 0%;
}
.type_DULICH{
  display: none;
}