/* 커스텀 스타일 적용 (커서 모양 이벤트 처리 없이 css로 변경)*/
.leaflet-container {
  cursor: crosshair !important;
}

.leaflet-dragging .leaflet-container {
  cursor: grabbing !important;
}

.leaflet-container:active {
  cursor: grabbing !important; /* 마우스 다운 시 */
}

.leaflet-control-custom {
  position: absolute;
  top: 0px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: nLone;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border-radius: 5px;

  /* 마우스 복사 방지 */
  user-select: none; /* 텍스트 선택 불가 */
}
.settings-icon {
  font-size: 20px;
}

.settings-icon:hover {
  cursor: pointer;
}

#checkboxContainer {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 40px;
  right: 0px;
  background-color: white;
  opacity: 0.8; /* 투명도 조정 */
  width: 280px; /* 너비 조정 */
  max-height: 355px; /* 최대 높이 설정 */
  overflow-y: auto;
  padding: 1rem 0 1rem 0; /* 패딩 조정 */
  border-radius: 0.5rem; /* 둥근 모서리 조정 */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2); /* 그림자 조정 */
  border: none;
  font-size: 0.6rem; /* 폰트 크기 조정 */
  color: #333; /* 글자색 조정 */
}

#checkboxContainer.active {
  display: flex;
}

.parent {
  display: flex;
  flex-direction: row;
  gap: 15px; /* 자식 요소들 사이의 간격 조절 */
}

.form-check {
  height: auto; /* 높이 자동 조정 */
  margin-bottom: 0.25rem; /* 간격 추가 */
  display: flex; /* Flexbox 사용 */

  align-items: center; /* 수직 가운데 정렬 */
  text-align: start; /* 텍스트 정렬 */
}

/* 스크롤바 스타일 */
#checkboxContainer::-webkit-scrollbar {
  width: 0.5rem;
}

#checkboxContainer::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 0.25rem;
}

#checkboxContainer::-webkit-scrollbar-thumb {
  background: #aaa;
  border-radius: 0.25rem;
}

#checkboxContainer::-webkit-scrollbar-thumb:hover {
  background: #888;
}

.options {
  font-weight: bold;
  margin-bottom: 0.5rem; /* 간격 추가 */
}

.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 간격 추가 */
}

#scaleRatio {
  position: absolute;
  bottom: 30px;
  left: 7px;
  background-color: rgba(255, 255, 255, 0.4);
  color: black;
  padding: 3px 6px;
  font-size: 10px;
  z-index: 1000;
}

/* 줌 레벨 표시 */
#zoom-range-container {
  position: absolute;
  top: 12px;
  left: 50px;
  z-index: 1000;
  font-size: 32px;
  padding: 5px;
  color: black; /* 텍스트 색상 */
  text-shadow: 1.5px 1.5px 0px white, -1.5px 1.5px 0px white,
    1.5px -1.5px 0px white, -1.5px -1.5px 0px white; /* 흰색 보더 효과 */
}

/* 선박 이름 텍스트 스타일 */
.ais-label {
  font-size: 14px; /* 글꼴 크기 */
  font-weight: bold; /* 굵은 글꼴 */
  color: black; /* 글자 색상 */
  text-align: center; /* 텍스트 가운데 정렬 */
  white-space: nowrap; /* 줄 바꿈 방지 */
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white,
    1px 1px 0 white; /* 흰색 테두리 */
}

.ais-label:hover {
  cursor: default;
}

.mouse-position {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
}

/* AIS 데이터 팝업 스타일 */

.custom-popup .leaflet-popup-content-wrapper {
  background: transparent;
  padding: 0;
  border-radius: 8px;
}

.custom-popup .leaflet-popup-content {
  margin: 0;
}

.custom-popup .leaflet-popup-tip {
  background-color: rgba(0, 0, 0, 0.45); /* 팝업 배경과 동일 */
  border: none; /* 테두리 제거로 깔끔하게 */
}

.custom-popup tr:hover td {
  background-color: rgba(255, 255, 255, 0.2);
  transition: background-color 0.2s ease;
}

/* 마우스 움직일 때 위경도 위치 표시 */
#custom-position-div {
  position: absolute;
  bottom: 6px;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 4px 8px;
  color: lightgray;
  font-size: 16px;
  z-index: 1000;
  left: 50%;
  font-weight: bold;
  transform: translateX(-50%);
}

@media (max-width: 768px) {
  .ais-popup {
    font-size: 12px !important;
    padding: 5px !important;
  }
  .ais-popup table {
    font-size: 12px !important;
  }
  .ais-popup th,
  .ais-popup td {
    padding: 3px !important;
  }
  #custom-position-div {
    left: auto; /* 왼쪽 정렬 해제 */
    right: 0px; /* 오른쪽 정렬 */
    bottom: 22px;
    transform: none; /* 중앙 정렬 해제 */
    font-size: 14px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .ais-popup {
    font-size: 14px !important;
    padding: 5px !important;
  }
  .ais-popup table {
    font-size: 14px !important;
  }
  .ais-popup th,
  .ais-popup td {
    padding: 3px !important;
  }
}

@media (min-width: 1025px) {
  .ais-popup {
    font-size: 14px !important;
    padding: 5px !important;
  }
  .ais-popup table {
    font-size: 14px !important;
  }
  .ais-popup th,
  .ais-popup td {
    padding: 3px !important;
  }
}

/* Custom colored markers */
.leaflet-div-icon.red-marker {
  background-color: red;
  border-radius: 50%; /* 원형으로 만듭니다 */
  width: 20px;
  height: 20px;
  border: 2px solid white; /* 가시성을 위한 흰색 테두리 */
  transform: translate(-50%, -50%); /* 아이콘 중앙 정렬 */
}

.leaflet-div-icon.blue-marker {
  background-color: blue;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid white;
  transform: translate(-50%, -50%);
}