.sidebar {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 96px);
  width: 100%;
  background: var(--neutral-white, #FEFEFE);
  padding: 20px;
  gap: 16px;
  border-right: 1px solid var(--tory-blue-100);
  box-shadow: 1px 1px 20px 0px rgba(0, 0, 0, 0.10);
}


.sidebar h4 {
  /* margin: 10px 0 0 0; */
  color: var(--neutral-black, #0a0a0a);
  font-weight: 600;
}

.sidebar-right {
  width: 100%;
  border-right: none;
  border-left: 1px solid var(--tory-blue-100);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

/* .sidebar-right>div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
} */

.list-event {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: scroll;
  flex: 1;
}

.list-event::-webkit-scrollbar {
  display: none;
}

.event-status-count {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--neutral-white, #FEFEFE);
}

.event-status-count>div {
  display: flex;
  gap: 10px;
}

.event-status-count .circle-status {
  width: 15px;
  height: 15px;
  box-shadow: none !important;
}

.detail-list {
  display: flex;
  flex-direction: column;
  background: var(--white-abs);
  border: 2px solid var(--neutral-200);
  border-radius: 4px;
  padding: 16px;
  gap: 6px;
}

.detail-list pre {
  margin: 0;
}

.detail-list.active {
  border: solid 1px var(--primary-500);
}

.detail-list.emergency {
  border-color: var(--danger-600);
}

.detail-list.danger {
  border-color: var(--warning-300);
}

.detail-list.no-movement {
  border-color: #F89438;
}

.detail-list.shock {
  border-color: #BE33FF;
}

.detail-list.dismissed {
  opacity: 50%;
  border: 1px solid var(--neutral-200, #aaabae);
  color: var(--neutral-600, #aaabae);
}

.detail-list.report,
.detail-list.event {
  cursor: pointer;
}

.info-1 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.text-1 {
  font-size: 14px;
  color: var(--neutral-800);
  line-height: 125%;
  flex: 1;
}

.text-2 {
  font-weight: 500;
  font-size: 22px;
  color: var(--black);
  line-height: 125%;
  flex: 3;
}

.info-2 {
  display: flex;
  gap: 10px;
}

.info-2 .info-1 {
  width: 50%;
}

h4.report-card-title {
  font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.page-content {
  overflow: hidden;
  height: 100%;
  padding: 20px;
  background: var(--neutral-100);
}

.section-tabs input[type="radio"] {
  display: none;
}

.header-wrap {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--neutral-300);
}

.header-tabs {
  display: flex;
}

.header-tabs label {
  cursor: pointer;
  padding: 2px 24px;
  border-bottom: 2px solid transparent;
  font-size: 24px;
  font-weight: 500;
  color: var(--neutral-500);
}

.header-tabs input[type="radio"]:not(:checked)+label:hover {
  background: var(--white);
}

.header-tabs input[type="radio"]:checked+label {
  font-weight: 700;
  color: var(--primary-500);
  border-color: var(--primary-500);
}

.worker-status-count,
.box-category {
  display: flex;
  align-items: center;
  gap: 10px;
}

.worker-status-count {
  position: relative;
  z-index: 1;
}

.mobile-worker-status-count,
.mobile-box-category {
  display: grid;
  justify-content: end;
  /* Align items to the end (right side) */
  align-items: flex-end;
  gap: 5px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-map .status-item,
.map .status-item {
  flex-direction: column;
  background-color: #EAEAEA;
  padding: 6px;
  border-radius: 4px;
  gap: 2px;
  flex: 1;
}

.working_status {
  color: #191C1E;
  font-weight: 700;
}
.status-item span {
  color: #191C1E;
}

.status-map .status-item.total {
  background: #C2DAF5;
}
.status-map .status-item.active-working {
  background-color: #4FB876;
}
.status-map .status-item.inactive {
  background-color: #C5C8C6;
}
.status-map .status-item.insite {
  background-color: #B4E6C1;
}
.status-map .status-item.outsite {
  background-color: #FEE2E2;
}

.status-count {
  display: flex;
  gap: 6px;
  align-items: center;
}

.sidebar .status-item {
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 4px;
  flex: 1;
  height: fit-content;
}

.sidebar .status-item>div {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.event-status-count>div:first-child .status-item {
  align-items: flex-start;
}

.sidebar .status-item>div:first-child {
  align-items: flex-end;
  width: 100%;
}

.status-item__count-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
  width: 100%;
}

.danger .status-item__count-wrap span {
  display: flex;
  width: 28px;
  line-height: 125%;
}

.danger .status-item__count-wrap {
  align-items: center;
}

.status-item .circle-status {
  box-shadow: 0px 0px 10px 0px var(--success-400);
  display: flex;
}

.status-item.emergency {
  background-color: var(--danger-600);
}

.status-item.danger {
  background-color: var(--warning-400);
}

.status-item.no-movement {
  background-color: #F89438;
}

.status-item.shock {
  background-color: #BE33FF;
}

.status-item.dismissed {
  background-color: #969696;
}

.event-status-count>div:last-child img {
  width: 24px;
}

.event-status-count>div:last-child .status-item {
  padding: 5px;
}

.event-status-count>div:last-child .status-item>div:first-child {
  align-items: flex-start;
  width: 100%;
  gap: 0;
}

.event-status-count>div:last-child .status-item>div:first-child>span {
  flex: 1;
}

.status-item__total-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.status-item__total-wrap span {
  font-weight: 400;
}

.status-item__total {
  font-weight: 700;
}

.status-item__count {
  font-size: 24px;
  font-weight: 700;
}

.circle-status.danger {
  background-color: var(--warning-400);
  box-shadow: 0px 0px 10px 0px var(--warning-400);
}

.circle-status.emergency {
  background-color: var(--danger-600);
  box-shadow: 0px 0px 10px 0px var(--danger-600);
}

.circle-status.rest {
  background-color: var(--neutral-400);
  box-shadow: none;
}

.tab-content {
  height: 0;
  max-height: 0;
  visibility: hidden;
  /* overflow: auto; */
  display: none;
}

.tab-content.status {
  display: flex;
  /* gap: 20px; */
}

.tab-content.event {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tab-content input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-color: #8f9193;
  accent-color: var(--primary-500);
}

.header-wrap:has(#tab1:checked)~.panel-tabs>.tab-content:nth-of-type(1),
.header-wrap:has(#tab2:checked)~.panel-tabs>.tab-content:nth-of-type(2),
.header-wrap:has(#tabMessage:checked)~.panel-tabs>.tab-content:nth-of-type(3),
.header-wrap:has(#tabEvent:checked)~.panel-tabs>.tab-content:nth-of-type(4) {
  max-height: 82.5vh;
  visibility: visible;
  padding-top: 10px;
  height: 82.5vh;
  display: flex;
}

.header-status {
  display: flex;
  justify-content: space-between;
}

.select-message {
  gap: 12px;
  align-items: center;
}

.status-map {
  background-color: var(--neutral-white, #FEFEFE);
  border: 1px solid var(--tory-blue-100, #E3ECFB);
  box-shadow: 1px 1px 20px 0px rgba(0, 0, 0, 0.10);
  border-radius: 4px;
  flex: .6;
  padding: 20px;
  position: relative;
}

.korea-map {
  display: flex;
  position: relative;
  height: 100%;
}

.korea-map svg {
  display: flex;
  position: absolute;
  height: 100%;
  flex: 1;
  z-index: 0;
  width: 100%;
  filter: drop-shadow(16px 16px 0px #C7D1DD);
}

text.regionText {
  font-size: 25px;
  text-align: center;
  font-weight: 500;
  color: #102341;
}

.korea-map svg polyline,
.korea-map svg path {
  fill: #F6F8FD;
  stroke: #B6BACE;
  stroke-miterlimit: 1;
}

.korea-map svg polyline::after,
.korea-map svg path::after {
  display: flex;
  content: 'Testsets';
}

.korea-map svg polyline.active,
.korea-map svg path.active {
  fill: var(--tory-blue-500);
}

.korea-map svg polyline.active::after,
.korea-map svg path.active::after {
  content: 'test';
}

.korea-map span {
  position: absolute;
  font-size: 16px;
  line-height: 125%;
  font-weight: 500;
  color: var(--tory-blue-950, #102341);
  z-index: 1;
  /* -webkit-text-stroke: 1px var(--tory-blue-100); */
}

.status-card-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  flex: 1.15;
  gap: 5px;
  grid-auto-rows: max-content;
  overflow: auto;
  padding-left: 20px;
  padding-right: 4px;
  padding-block: 3px;
}

.status-card-container::-webkit-scrollbar {
  width: 4px;
}

.status-card-container::-webkit-scrollbar-track {
  background: transparent;
}

.status-card-container::-webkit-scrollbar-thumb {
  background: var(--neutral-400);
}

.status-card-container::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-500);
}

.status-card {
  background: var(--neutral-white, #FEFEFE);
  padding: 10px;
  gap: 6px;
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  grid-template-columns: 1fr;
  border-radius: 4px;
  border: 1px solid var(--tory-blue-100, #E3ECFB);
  box-shadow: 1px 1px 20px 0px rgba(0, 0, 0, 0.10);
  height: fit-content;
}

.status-card.active {
  outline: 3px solid var(--tory-blue-500);
}

.status-card__title,
.status-card__worker.all-worker {
  /* grid-column: span 2; */
}

.status-card__title {
  display: flex;
  justify-content: space-between;
  color: var(--neutral-black);
  align-items: center;
}

.status-card__title-text {
  font-size: 20px;
  font-weight: 600;
  line-height: 125%;
}

.status-card__worker {
  display: flex;
  gap: 8px;
  padding: 6px;
  /* background: rgba(245, 247, 249, 0.80); */
  border-radius: 4px;
  align-items: center;
  justify-content: center;
}

.status-card__worker.total {
  background-color: #C2DAF5;
}
.status-card__worker.outsite {
  background-color: #FEE2E2;
}
.status-card__worker.insite {
  background-color: #B4E6C1;
}
.status-card__worker.inactive {
  background-color: #C5C8C6;
}

.status-card__worker.all-worker {
  /* display: flex;
  align-items: center;
  justify-content: center; */
}

.status-card__date {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: #6D6E70;
}

.status-card__worker img {
  width: fit-content;
  height: fit-content;
}

.status-card__worker-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  align-items: center;
}
.status-card__worker-content span {
  color: #191C1E;
}

.status-card__worker-total {
  display: flex;
  gap: 2px;
}

.status-card__worker-total span:first-child {
  font-weight: 700;
}

.worker-wrap {
  width: 100%;
  display: grid;
  /* grid-template-columns: repeat(4, calc(25% - 18px));
    grid-template-rows: repeat(auto-fill, max-content); */
  flex-wrap: wrap;
  gap: 6px;
  /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
}

.specialty-block {
  gap: 10px;
}

.specialty-row {
  gap: 48px;
  align-items: center;
  /* justify-content: space-between ; */
}

.specialty-row:nth-child(5n) {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--neutral-300);
}

.specialty-row:nth-child(5n + 1) {
  /* padding-top: 5px; */
}

.specialty-row:last-child {
  padding-bottom: 0;
  border: none;
}

.detail-specialty {
  align-items: center;
  gap: 8px;
}

.detail-specialty span {
  font-weight: 500;
  font-size: 16px;
  width: 48px;
}

.detail-specialty span:first-of-type {
  display: inline-block;
  width: 112px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-right: 6px;
}

.worker-row {
  gap: 5px;
}

.worker-card {
  width: 27px;
  height: 27px;
  border-radius: 4px;
  background: var(--success-400, #4fb876);
}

.worker-tooltip {
  visibility: hidden;
  position: absolute;
  margin-top: 1%;
  margin-left: 1%;
  background-color: var(--white);
  color: var(--neutral-black, #0A0A0A);
  font-size: 16px;
  font-weight: 500;
  padding: 10px;
  border-radius: 0px 15px 15px 15px;
  border: 2px solid #135A78;
  opacity: 0;
  transition: opacity 0.3s;
}

.worker-card:hover .worker-tooltip {
  visibility: visible;
  opacity: 1;
}

.worker-card:nth-child(5n) {
  margin-right: 15px;
}

.worker-card:last-child {
  margin: 0;
}

/* WORKER CARD STATE */
.worker-card.danger {
  box-shadow: 0px 0px 5px 0px #facc15;
}

.worker-card.emergency {
  box-shadow: 0px 0px 5px 0px #db3636;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #dc2626;
  }

  70% {
    box-shadow: 0px 0px 20px 0px #dc2626;
  }

  100% {
    box-shadow: 0 0 0 0 #dc2626;
  }
}

.worker-status {
  height: 15px;
  width: 15px;
  border-radius: 40px;
  background-color: var(--success-400);
}

.tab-content.map .worker-status {
  border-radius: 16px;
}

.map-image .worker-status {
  position: absolute;
  top: 50%;
  right: 40%
}

.map-image .worker-status {
  filter: drop-shadow(0px 0px 10px var(--success-400));
  right: 30%;
}

.map-image .worker-status.emergency {
  filter: drop-shadow(0px 0px 10px #DC2626);
  right: 35%;
}

.map-image .worker-status.danger {
  filter: drop-shadow(0px 0px 10px #FACC15);
  right: 50%;
}

.map-image .worker-status.checked-in {
  filter: none;
  right: 45%;
}

.worker-status.checked-in,
.worker-card.cl-100001,
.worker-card.checked-in {
  background-color: var(--neutral-700);
}

.worker-status.rest,
.worker-card.cl-100003,
.worker-card.rest {
  border: 2px solid var(--success-400, #4FB876);
  background-color: transparent;
}

.worker-card.danger,
.worker-card.cl-100005,
.worker-card.cl-101003,
.worker-status.danger {
  background-color: var(--warning-400);
}

.status-map .worker-card.cl-100005,
.status-map .worker-card.cl-101003,
.status-map .worker-status.danger {
  box-shadow: 0px 0px 5px var(--warning-400);
}

.worker-card.emergency,
.worker-card.cl-100006,
.worker-status.emergency {
  /* background-color: var(--danger-600); */
  background-color: transparent;
  border: 2px solid var(--danger-600, #DC2626);
}

/* .status-map .worker-card.cl-100006,
.status-map .worker-status.emergency {
} */

.worker-card.checked-out,
.worker-card.cl-100004,
.worker-status.checked-out {
  /* border: 2px solid var(--neutral-400); */
  background-color: var(--neutral-900);
}

.worker-card.offsite,
.worker-card.cl-100008,
.worker-status.offsite {
  border: 2px solid var(--success-400);
  /* background-color: var(--white); */
}

.worker-card.overtime,
.worker-card.cl-100009,
.worker-status.overtime {
  background-color: var(--overtime-400);
}

.status-map .worker-status.overtime {
  background-color: transparent;
  border: 2px solid var(--indication-success2, #B4E6C1);
}

.worker-card.no-movement,
.worker-card.cl-101001,
.worker-status.no-movement {
  background-color: var(--no-movement-400);
}

.status-map .worker-card.cl-101001,
.status-map .worker-status.no-movement {
  box-shadow: 0px 0px 5px var(--no-movement-400);
}

.worker-card.shock,
.worker-card.cl-101002,
.worker-status.shock {
  background-color: var(--shock-400);
}

.status-map .worker-card.cl-101002,
.status-map .worker-status.shock {
  box-shadow: 0px 0px 5px var(--shock-400);
}

.circle-status {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: var(--success-400);
}

.worker-data,
.worker-subdata {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex: 1;
}

.worker-name {
  font-weight: 600;
}

/* -- MODAL -- */
.modal-background {
  display: flex;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 100;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
  /* visibility: visible;
  opacity: 1; */

  color: var(--green1);
}
/* 
#modal-program {
  display: none;
} */

.modal-background.modal-open {
  display: flex;
  opacity: 1;
  visibility: visible;
  background: rgba(0, 0, 0, 0.5);
}

.modal-box {
  /* display: none; */
  /* background: var(--neutral-050); */
  background: #F5F7F9;
  padding: 36px;
  border-radius: 4px;
  width: 35.7%;
  gap: 20px;
}

.modal-open .modal-box {
  display: flex;
}

.modal-title {
  justify-content: space-between;
}

.modal-title h3 {
  font-weight: 600;
}

.modal-close {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.modal-filter {
  justify-content: flex-end;
  gap: 12px;
}

._sectiondetailComplaint {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #FEFEFE;
  border: 1px solid var(--neutral-300, #c5c6c9);
}

.modal-table
 {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #FEFEFE;
  border: 1px solid var(--neutral-300, #c5c6c9);
  height: 100%;
  overflow: hidden;
}

.modal-table {
  height: 100%;
}

._boxColumDetailComplaint {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 3;
  height: 100%;
  overflow: hidden;
}

._groupTitle {
  gap: 20px;
  display:flex ;
  flex-direction: column;
}

._areaDetail {
  grid-template-columns: 1fr 1fr 1fr;
  display: grid;
  gap: 20px;
}

._rowDetailComplaint {
  display: flex;
  flex-direction: row;
  gap: 5px
}

._rowDetailComplaint ._titleComplaint {
  color: var(--black);
  font-weight: 700;
  min-width: 95px;
}

._areaContentComplaint {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #FEFEFE;
  border: 1px solid var(--neutral-300, #c5c6c9);
  height: 100%;
  overflow: auto;
}

._bxDateComplaint {
  margin-left: auto;
}

/* .modal-table:has(.modal-report-content) {
  height: auto;
} */

#modal-program .modal-table {
  height: 600px;
  overflow: auto;
}

#modal-program .modal-table::-webkit-scrollbar {
  width: 8px;
}

#modal-program .modal-table::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
}

.label-v:has(.icon-eye-toggle) {
  position: relative;
}

.icon-eye-toggle {
  position: absolute;
  height: 0;
  right: 3%;
  top: 55%;
  cursor: pointer;
}

.icon-eye-toggle-findPass {
  position: absolute;
  height: 0;
  right: 1%;
  top: 25%;
  cursor: pointer;
}

.flex:has(.input-group) {
  gap: 16px;
  width: 100%;
}

.flex .input-group {
  width: 100%;
}

.modal-report-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* max-height: 45vh; */
  /* min-height: 35vh; */
  overflow: auto;
}

.report-image {
  width: 239px;
  height: 319px;
  background: #c4c4c4;
}

.content-image {
  width: 100%;
}

.report-content {
  font-size: 16px;
}

.report-date {
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  padding-top: 10px;
}

.input-group input:not([type="radio"]) {
  width: 100%;
}

.radio-wrap,
.radio-item {
  display: flex;
  gap: 4px;
}

.radio-wrap {
  gap: 16px;
}

.radio-item,
.radio-item label {
  cursor: pointer;
}

.radio-item input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-500);
}

.container-button {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* RESPONSIVE SCREEN WHEN BROWSER IS NOT IN FULL SCREEN */
@media only screen and (min-height: 945px) and (max-height: 980px) {

  .header-wrap:has(#tab1:checked)~.panel-tabs>.tab-content:nth-of-type(1),
  .header-wrap:has(#tab2:checked)~.panel-tabs>.tab-content:nth-of-type(2),
  .header-wrap:has(#tabMessage:checked)~.panel-tabs>.tab-content:nth-of-type(3) {
    /* max-height: 80vh;
    height: 80vh; */
    /* overflow: hidden; */
  }
}

.gaps {
  gap: 13px !important;
}

/* MAP */
.map-container {
  width: 100%;
  height: 100%;
}

.map-image {
  text-align: center;
  display: none;
  transition-duration: 0.5s;
}

.ol-viewport,
.map-image {
  transition: opacity 0.3s ease;
  /* Menentukan properti dan durasi transisi */
}

.map-container-tab {
  background: var(--neutral-white, #fcfcfd);
  /* margin-top: 10px; */
  /* padding: 20px; */
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  position: relative;
}

.mobile-map-container-tab {
  background: var(--neutral-white, #fcfcfd);
  /* margin-top: 10px; */
  /* padding: 20px; */
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  width: 100%;
  position: relative;
}

.category-event {
  width: 100%;
  position: absolute;
  z-index: 20;
  /* padding: 10px; */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
}

.mobile-category-event {
  position: absolute;
  z-index: 20;
  /* padding: 10px; */
  display: flex;
  flex-direction: row;
  justify-content: end;
  gap: 10px;
}

.box-category {
  right: 0px;
  position: absolute;
}

.label-icon {
  width: 15px;
  height: 15px;
  background: var(--neutral-400, #aaabae);
  border-radius: 50%;
}

.label-text {
  color: var(--neutral-950, #191c1e);
  font-size: 14px;
  font-weight: 400;
}

.filter-map {
  display: flex;
  flex-direction: row;
  border-radius: 4px;
  border: 1.5px solid var(--neutral-300, #c5c6c9);
  height: 34px;
}

.zoom,
.zoom-out {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(90deg);
  padding: 6px 8px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 0px 0px 4px 4px;
  border-top: 1px solid var(--neutral-300, #c5c6c9);
  background: var(--neutral-050, #f9f9fa);
  cursor: pointer;
}

.zoom-out {
  border-radius: 0;
}

.zoom:active,
.zoom-out:active,
.back:active {
  opacity: 0.5;
}

.back {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(90deg);
  padding: 6px 8px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 4px 4px 0px 0px;
  background: var(--neutral-050, #f9f9fa);
  cursor: pointer;
}

.ol-attribution ul {
  display: none;
}

.ol-zoom {
  /* display: none; */
}

.ol-zoom .ol-return-home {
  background-image: url(/bp2mi.kr/plugins/openlayers/my-location.svg);
}

.rotate {
  transform: rotate(90deg);
}

/* section message */
._colTabMsg {
  width: 100%;
  flex-direction: column;
}

._containerInput {
  display: flex;
  width: 100%;
  gap: 20px;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
}

._containerInput label {
  color: #17519A;
  font-size: 14px;
  min-width: 80px;
  font-weight: 500;
}

._boxDate label {
  /* width: 17%; */
  flex: 1;
}

._boxInputText {
  flex: 2;
}

._boxInputText input {
  width: 100%;
}

._boxNewMassage {
  display: flex;
  gap: 10px;
}

._boxDropDown,
._boxDate {
  display: flex;
  gap: 10px;
  align-items: center;
}

._boxDropDown {
  flex: 1;
}

._boxDropDown ._selectFilter {
  /* width: 200px; */
  /* min-width: 197px; */
  width: 100%;
}

._boxDate {
  flex: 1.9;
}

._boxDate input {
  /* width: 150px; */
  /* min-width: 174px; */
  flex: 2;
}

._boxNewMassage button {
  height: 36px;
  font-size: 16px;
  display: flex;
  flex-direction: row-reverse;
  gap: 5px;
}

._ContainerListTabulator {
  /* display: flex; */
  width: 100%;
  /* height: 814px; */
  height: 77vh;
  background-color: #ffffff;
  margin-top: 10px;
  border-radius: 4px;
  padding: 0 10px;
}

.event ._ContainerListTabulator {
  margin-top: 0;
}

._ContainerListTabulator .tabulator-header {
  background-color: transparent !important;
  border-bottom: 1px solid #5791aa;
}

.type-emergency,
.type-120002 {
  background-color: #FEE2E2;
  color: #DC2626;
  height: fit-content;
  padding: 3px 7px;
  border-radius: 4px;
}

.type-notification,
.type-120003 {
  background-color: #ffc65b;
  color: rgb(145, 96, 4);
  height: fit-content;
  padding: 3px 7px;
  border-radius: 4px;
}

.type-blue,
.type-general,
.type-120001 {
  background-color: #9EBEFA;
  color: #2151D7;
  height: fit-content;
  padding: 3px 7px;
  border-radius: 4px;
}

._modalMsg {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  display: none;
}

._containerModalMsg {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

._bodyModal {
  background-color: #ffffff;
  width: 69%;
  height: 864px;
  padding: 36px;
  border-radius: 4px;
}

._titleMdlMsg {
  font-size: 20px;
  font-weight: 600;
}

._rowModal {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 20px;
}

._mdlLeft {
  padding: 20px;
  border: 1px solid #c5c6c9;
  width: 50%;
  height: 691px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}

._boxTitleMdl {
  /* display: flex; */
  width: 100%;
  justify-content: start;
  gap: 10px;
  align-items: baseline;
}

._boxTitleMdl ._fChild {
  /* background-color: red; */
  /* width: 54px; */
  height: fit-content;
  padding: 3px 7px;
  color: #ffffff;
  margin: 0 !important;
  float: left;
}

._boxTitleMdl ._sChild {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  display: flex;
  padding-left: 4px;
  position: relative;
}

._boxMsgFoto {
  flex-direction: column;
  gap: 4px;
  display: flex;
  width: 100%;
  overflow-y: auto;
}

._boxMsgFoto p {
  margin: 0;
}

._containerMdlFoto {
  width: 239px;
  height: 319px;
  background-color: #c4c4c4;
}

._containerMdlFoto img {
  width: 100%;
  height: 100%;
  background-size: cover;
}

._boxMdlDesc {
  width: 100%;
  /* padding: 8px; */
  height: 181px;
  /* border: 1px solid #AAABAE; */
}

._boxModalBtn {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-direction: row;
}

._btnModalNo {
  border: 1px solid var(--danger-500, #ed3131);
  background-color: #ffffff;
  width: 50px;
  height: 36px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--danger-500, #ed3131);
}

._btnModalMsg {
  background-color: #135a78;
  width: 50px;
  height: 36px;
  margin-top: 20px;
  font-size: 14px;
  float: right;
}

._btnModalMsg2 {
  width: 50px;
  height: 36px;
  margin-top: 20px;
  font-size: 14px;
  float: right;
}

._mdlRight {
  padding: 20px;
  border: 1px solid #c5c6c9;
  width: 50%;
  height: 691px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

._boxDateMdl {
  display: flex;
  gap: 8px;
  align-items: center;
}

._boxDateMdl p {
  margin: 0;
}

._modalNewMsg {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 60;
  display: none;
}

._boxTitleNewModal {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.inputs {
  width: 100%;
}

._boxTitleNewModal p {
  font-size: 16px;
  margin: 0;
  color: #5c5f61;
}

._boxRadioBtn {
  display: flex;
  width: 100%;
  gap: 20px;
  color: #0a0a0a;
  font-size: 16px;
  margin-top: 6px;
}

._boxRadioBtn input[type="radio"] {
  -ms-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  accent-color: #135a78;
}

._boxInputNew {
  width: 100%;
  display: flex;
  flex-direction: column;
}

._boxInputNew p {
  font-size: 16px;
  margin: 0;
  color: #5c5f61;
}

._boxInputNew input {
  border: 1px solid #aaabae;
  height: 36px;
  border-radius: 4px;
  padding: 8px;
  margin-top: 4px;
}

._boxCkEditor {
  width: 100%;
  flex-direction: column;
  display: flex;
  gap: 4px;
}

._boxCkEditor p {
  margin: 0;
  font-size: 16px;
  color: #5c5f61;
}

div.ck-editor__editable {
  min-height: 430px;
}

/* end section message */

.messages .tabulator .tabulator-tableholder,
.event .tabulator .tabulator-tableholder {
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.messages .tabulator .tabulator-header,
.event .tabulator .tabulator-header {
  font-weight: 700;
  font-size: 16px;
}

.event .tabulator-row .tabulator-frozen {
  background-color: white;
}

.tab-content .tabulator .tabulator-header .tabulator-col:first-of-type,
.tab-content .tabulator-row .tabulator-cell:first-of-type {
  padding-left: 10px;
}

.event .tabulator .status-item {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 7px;
  height: fit-content;
  color: var(--white);
  border-radius: 2px;
}

.messages .tabulator-row .tabulator-cell,
.event .tabulator-row .tabulator-cell {
  align-items: center;
}

.event .tabulator-row .tabulator-cell:has(.status-item) {
  justify-content: center;
}

/* #_listMdlSend .tabulator-cell {
  justify-content: center;
} */

/* #_listMdlSend .text-center{
  justify-content: center;
} */

.korea-map span#chungnam {
  top: 37%;
  right: 63%;
  width: 50px;
  word-wrap: break-word;
  hyphens: auto;
}

.korea-map span#jeju {
  top: 86%;
  right: 70%;
}

.korea-map span#gyeongnam {
  top: 58%;
  right: 35%;
}

.korea-map span#gyeongbuk {
  top: 38%;
  right: 28%;
}

.korea-map span#jeonbuk {
  top: 52%;
  right: 56%;
}

.korea-map span#chungbuk {
  top: 31%;
  right: 46%;
  width: 50px;
  word-wrap: break-word;
  hyphens: auto;
}

.korea-map span#gangwon {
  top: 16%;
  right: 37%;
}

.korea-map span#gyeonggi {
  top: 25.5%;
  right: 54%;
}

.korea-map span#jeonnam {
  top: 66%;
  right: 60%;
}

.korea-map span#ulsan {
  top: 55%;
  right: 22%;
}

.korea-map span#busan {
  top: 61%;
  right: 22%;
}

.korea-map span#daegu {
  top: 49%;
  right: 35%;
}

.korea-map span#daejeon {
  top: 41%;
  right: 52%;
}

.korea-map span#incheon {
  top: 19.5%;
  right: 68%;
}

.korea-map span#seoul {
  top: 19%;
  right: 59%;
}

.korea-map span#gwangju {
  top: 62%;
  right: 62%;
}

.korea-map span#sejong {
  top: 36%;
  right: 55%;
}

/* budi */
.sidebar:first-child {
  align-items: center;
}

.bx-sidebar-img {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: transparent;
  cursor: pointer;
}

.sidebar-img.active {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: var(--tory-blue-100, #E3ECFB);
}


.bx-tabulator-complaint {
  height: calc(100% - 40px);
}

.sidebar-right .col-sidebar-right {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 16px;
  height: 100%;
}

.tabulator-tooltip {
 display: none;
}

.tooltip-origin-data {
  display: inline-block;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.tooltip-origin-data:hover .tabulator-tooltip {
  left: 40%;
  bottom: -15px;
  z-index: 100;
  display: block;
  position: absolute;
  width: max-content;
  max-width: 85%;
  text-wrap: balance;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--tory-blue-500, #2779D0);
  background: var(--neutral-white, #FEFEFE);
  box-shadow: 0px 4px 7.3px 0px rgba(0, 0, 0, 0.16);
}

#tabulator-complaint.tabulator .tabulator-tableholder {
  border-left: none;
  border-right: none;
}

.tabulator .tabulator-header {
  background-color: #17519A ;

}
#tabulator-complaint.tabulator  .tabulator-header .tabulator-col {
  color: #fff !important;
}

._containerNewMap.modal-open {
  display: flex;
  opacity: 1;
  visibility: visible;
  background: rgba(0, 0, 0, 0.5);
}

._containerNewMap {
  display: flex;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 100;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
  color: var(--green1);
  background-color: rgba(0, 0, 0, 0.5);
}
._canvasModalMap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 60%;
  padding: 36px;
  /* height: 40vh; */
  border: 1px solid var(--tory-blue-200, #C2DAF5);
  background: var(--screen-bg, #F5F7F9);
}

._bxTitlNewMap {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

._bxTitlNewMap h3 {
  color: var(--neutral-black);
  font-weight: 600;
}

._columnLeft {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  height: 100%;
}

._columnGrid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 2fr;
}

._canvasBg:first-child {
  overflow: auto;
  height: calc(81% - 0px);
}
._canvasBg:nth-child(2) {
  overflow: auto;
  height: calc(100% - 0px);
}

._canvasBg {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: 4px;
  padding: 20px;
  border: 1px solid var(--neutral-400, #D9D9D9);
  background: var(--neutral-white, #FEFEFE);
}

._canvasBg h2 {
  font-size: 14px;
  color: #0A0A0A;
  font-weight: 700;
}

._canvasBg h3 {
  font-size: 20px;
  color: #0A0A0A;
  font-weight: 600;
}

._contentModal {
  display: flex;
  flex-direction: column;
  /* gap: 1px; */
}
._contentModal span {
  padding: 4px 0;
  font-size: 14px;
  color: #0A0A0A;
  font-weight: 400;
}
._contentModalRow {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-transform: capitalize;
}

._contentModalRow h2 {
  /* min-width: 100px; */
  flex: 1;
}

._contentModalRow span {
  flex: 1;
}

._bxGrid2 {
  /* display: grid;
  grid-template-columns: 1fr 1fr; */
  display: flex;
  flex-direction: row;
  gap: 20PX;
  /* height: calc(70vh - 0vh); */
  height: calc(54vh - 0vh);
}

._modalBody {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 2.5;
  background-color: #FCFCFD;
  border: 1px solid  #c5c6c9;
  /* max-height: 750px; */
}

._modalBody span {
  font-size: 14px;
  color: #0A0A0A;
}

._bxComplaintModal span{
  color: #0A0A0A;
  font-size: 20px;
  font-weight: 600;
}

._bxImgCompaint {
  aspect-ratio: 16 / 9;
  height: 300px;
}
._bxImgCompaint img{
  width: 100%;
  height: 100%;
}

._bxMdlTextArea,
._bxMdlTextArea textarea  {
  height: 100%;
}

._bxModalBtn {
  display: flex;
  flex-direction: row;
  gap: 20px;
  /* margin-left: auto; */
  align-items: center;
}

.detail-log {
  gap: 10px;
}

._bxModalBtn .detail-log .log-name {
  font-size: 14px;
  color: #8f9193;
  padding-right: 5px;
}

._bxModalBtn .detail-log .log-value {
  font-size: 14px;
  color: #191c1e;
  padding-right: 5px;
}

._btncomplaintContainer {
  gap: 20px;
  display: flex;
  flex-direction: row;
  margin-left: auto;
}

/* tab2 */
#tabulator-worker-new.tabulator .tabulator-header .tabulator-col {
  color: #17519A;
}
/* tab2 */
/* budi */



@media only screen and (max-width: 1656px) {

.header-wrap:has(#tab1:checked)~.panel-tabs>.tab-content:nth-of-type(1),
.header-wrap:has(#tab2:checked)~.panel-tabs>.tab-content:nth-of-type(2),
.header-wrap:has(#tabMessage:checked)~.panel-tabs>.tab-content:nth-of-type(3),
.header-wrap:has(#tabEvent:checked)~.panel-tabs>.tab-content:nth-of-type(4) {
  max-height: 78vh;
  visibility: visible;
  padding-top: 10px;
  height: 78vh;
  display: flex;
}

#tabulator-complaint.tabulator .tabulator-header .tabulator-col:first-of-type,
#tabulator-complaint .tabulator-row .tabulator-cell:first-of-type {
  padding-left: 10px;
}

}

@media only screen and (max-width: 1367px) {
.status-card-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#tabulator-complaint.tabulator .tabulator-header .tabulator-col:first-of-type,
#tabulator-complaint .tabulator-row .tabulator-cell:first-of-type {
  padding-left: 10px;
}

}