body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      /* height: 700px; */
    }

    .mapboxgl-ctrl-attrib {
      display: none;
    }

    .mapboxgl-popup-content {
      background: var(--card-bg);
      border-radius: 10px;
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow);
      color: var(--text-color);
      font-size: 0.9rem;
    }

    .mapboxgl-ctrl.app-name {
      background: #1d60cc;
      padding: 8px 20px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      font-size: 24px;
    }

    .mapboxgl-ctrl.loc-info {
      background: rgba(255, 255, 255, 0.95);
      padding: 8px 10px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      font-size: 11px;
    }

    #status {
      margin-top: 6px;
      color: #555;
      font-size: 12px;
      max-width: 320px;
    }

    .btn {
      display: inline-block;
      padding: 6px 8px;
      background: #2b7;
      color: #002;
      border-radius: 6px;
      cursor: pointer;
      text-decoration: none;
      margin-left: 6px;
    }

    .btn:active {
      transform: translateY(1px);
    }

    .mapboxgl-popup-content>div {
      max-height: 300px;
      overflow-y: auto;
    }

    .mapboxgl-ctrl.style-switcher {
      background: #efefef;
      font-family: 'Open Sans', sans-serif;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .calculation-box {
      display: block;
      height: 45px;
      width: 150px;
      position: absolute;
      bottom: 1vh;
      right: 100px;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 15px;
      text-align: center;
      border-radius: 0.5rem;
      z-index: 2;
    }

    .calculation-box p {
      margin: 0px 2px;
    }

    .calculation-box button {
      border: none;
      background: transparent;
      position: absolute;
      top: 5px;
      right: 5px;
      cursor: pointer;
    }

    .mapbox-ctrl-ruler button {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
    }

    .mapbox-ctrl-ruler button.-active {
      color: #4264fb;
    }

    .rounded-rect {
        background: white;
        border-radius: 10px;
        box-shadow: 0 0 50px -25px black;
    }

    .flex-center {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flex-center.left {
        left: 0px;
    }

    .flex-center.right {
        right: 0px;
    }

    .sidebar-content {
        position: absolute;
        background: #eeeeee;
        color: #898989;
        width: 95%;
        /* font-family: Arial, Helvetica, sans-serif; */
        font-size: 12px;
        padding: 1rem 0.5rem;
        box-sizing: unset;
    }

    .sidebar-content .content {
        height: 95%;
    }

    .sidebar-content hr {
      border-color: #ffffff3d;
      margin: 0.5rem 0;
    }

    .left .sidebar-content {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      padding: 1rem;
    }

    .sidebar.right {
      width: 400px;
    }

    .content-header {
      margin: -1rem -1rem 1rem -1rem;
      padding: 1rem;
      background: #1d60cb;
    }

    .sidebar.right table {
      border-collapse: collapse;
      border-spacing: 0;
    }

    .sidebar.right table > thead > tr > th, .sidebar.right table > tbody > tr > th, .sidebar.right table > tfoot > tr > th, .sidebar.right table > thead > tr > td, .sidebar.right table > tbody > tr > td, .sidebar.right table > tfoot > tr > td {
      border: 1px solid #89898940;
      padding: 8px;
      line-height: 1.42857143;
    }

    .right .sidebar-content {
      height: 45%;
      margin-right: 10px;
    }

    .right .sidebar-content .wrp {
      height: 100%;
      overflow-y: auto;
    }

    .sidebar-toggle {
        position: absolute;
        background: #eeeeee;
        color: #898989;
        /* width: 1.3em;
        height: 1.3em; */
        overflow: visible;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        padding: 0.45rem;
    }

    .sidebar-toggle.left {
        right: -3.5em;
        transition: transform 0.3s;
    }

    .sidebar-toggle.right {
        left: -2.5em;
        transition: transform 0.3s;
    }

    .sidebar.left.collapsed .sidebar-toggle {
      transform: rotate(180deg);
    }

    .sidebar.right.collapsed .sidebar-toggle {
      transform: rotate(180deg);
    }

    .sidebar-toggle:hover {
        color: #0aa1cf;
        cursor: pointer;
    }

    .sidebar {
        transition: transform 1s;
        z-index: 1;
        width: 300px;
        height: 100%;
    }

    #style-switcher {
      display:flex;
      justify-content: space-between;
      align-items: center;
    }

    #style-switcher .label-layer {
      padding: 0.5rem 0.8rem;
    }

    #layers-list {
      overflow-y: auto;
      direction: rtl;
      height: 65%;
      padding-left: 5px;
    }

    #layers-list * {
      direction: ltr;
    }

    #layers-list a {
      text-decoration: none;
    }

    #layers-list ul, .wrp ul{
      list-style: none;
      padding: 0;
      margin: 0;
    }

    /* Sembunyikan checkbox */
    #layers-list .cbx-nav, .wrp .cbx-nav {
      display: none;
    }


    .wrp .head-info {
      display: block;
      background: #1d60cb;
      padding: 1rem;
      color: #fff;
      border-bottom: 1px solid #eeeeee;
    }

    .wrp div .wrp-tbl, .wrp table {
      display: none;
    }

    .wrp table.visible {
      display: table;
    }

    /* Submenu tersembunyi */
    #layers-list ul ul {
      display: none;
      padding-left: 0.5rem;
    }

    #layers-list li {
      margin: 5px 0 0 0;
    }

    /* #layers-list input[type="checkbox"] {
      margin: 0;
    } */

    .export-controls button {
      width: 100%;
      border: 1px solid #898989;
      color: #898989;
      padding: 0.5rem;
      border-radius: 5px;
      cursor: pointer;
    }

    #export-btn {
      width: 35px;
      height: 35px;
      position: absolute;
      top: 10px;
      right: 260px;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 5px;
      text-align: center;
      border-radius: 0.5rem;
      z-index: 2;
      color: #000;
    }

    #export-btn button {
      background: url('data:image/svg+xml;charset=UTF-8,<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m422.5 99v-24c0-41.355-33.645-75-75-75h-184c-41.355 0-75 33.645-75 75v24z"/><path d="m118.5 319v122 26 15c0 16.568 13.431 30 30 30h214c16.569 0 30-13.432 30-30v-15-26-122zm177 128h-80c-8.284 0-15-6.716-15-15s6.716-15 15-15h80c8.284 0 15 6.716 15 15s-6.716 15-15 15zm0-64h-80c-8.284 0-15-6.716-15-15s6.716-15 15-15h80c8.284 0 15 6.716 15 15s-6.716 15-15 15z"/><path d="m436.5 129h-361c-41.355 0-75 33.645-75 75v120c0 41.355 33.645 75 75 75h13v-80h-9c-8.284 0-15-6.716-15-15s6.716-15 15-15h24 304 24c8.284 0 15 6.716 15 15s-6.716 15-15 15h-9v80h14c41.355 0 75-33.645 75-75v-120c0-41.355-33.645-75-75-75zm-309 94h-48c-8.284 0-15-6.716-15-15s6.716-15 15-15h48c8.284 0 15 6.716 15 15s-6.716 15-15 15z"/></g></svg>');
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100%;
      width: 20px;
      height: 25px;
      border: none;
      cursor: pointer;
    }

    #export-controls {
      display: none;
      position: absolute;
      top: 50px;
      right: 260px;
      width: 350px;
      background-color: #fff;
      padding: 15px;
      border-radius: 0.5rem;
      color: #898989;
    }

    #export-controls-content, #tabular-control-content {
      padding: 10px;
      border-radius: 0.5rem;
      box-shadow: inset 0px 0px 3px 0px;
    }

    #tabular-control {
      display: none;
      position: absolute;
      bottom: 0.5rem;
      right: 15%;
      z-index: 2;
      width: 900px;
      height: 400px;
      padding: 15px;
      color: #898989;
    }

    #tabular-control .button-close {
      border: none;
      background: transparent;
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }

    #tabular tr {
      cursor: pointer;
    }

    /* #export-controls button {
      width: 100%;
      border: none;
      color: #7b7b7b;
      padding: 0.5rem;
      border-radius: 5px;
      cursor: pointer;
    } */

    .label-layer {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0.5rem;
      background: transparent;
      border-radius: 5px;
      margin: 10px 5px;
      border: 1px solid #898989;
      /* box-shadow: 3px 3px 5px 1px #00000038; */
    }

    .layer-item {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
    }

    #style-switcher .label-layer {
      border: 1px solid #898989;
      background: transparent;
    }

    .label-layer input, .layer-item input {
      margin: 3px 3px 3px 4px;
    }

    .label-layer input[type="radio"] {
      display: none;
    }

    .label-layer:has(input[type="radio"]:checked)  {
      background: #1d60cb !important;
      border: none !important;
      color: #f4f4f4;
      box-shadow: 3px 3px 5px 1px #00000038;
    }

    .legend-img {
      overflow-x: auto;
    }

    /* Jika checkbox dicentang, tampilkan submenu */
    #layers-list ul:has(.label-layer .cbx-nav:checked) > ul, #layers-list li:has(.label-layer .cbx-nav:checked) > ul, .wrp .head-info:has(.cbx-nav:checked) ~ .wrp-tbl {
      display: block;
      animation: fadeIn 0.7s ease;
    }

    #layers-list .label-layer:has(.cbx-nav:checked), #layers-list .label-layer:has(input[type="checkbox"]:checked){
      background: #fff;
      border: none;
      box-shadow: 3px 3px 5px 1px #00000038;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-5px); }
      to { opacity: 1; transform: translateY(0); }
    }

    #layers-list li:has(.label-layer input[name="layers"]) > .legend-img {
      display: none;
    }

    #layers-list li:has(.label-layer input[name="layers"]:checked) > .legend-img {
      display: block;
      padding: 0.5rem;
      background: #fff;
      border-radius: 5px;
      margin: 10px 5px;
      box-shadow: 3px 3px 5px 1px #00000038;
    }

    /* Icon panah (opsional) */
    #layers-list .cbx-nav-label::before, .wrp .cbx-nav-label::before {
      margin-right: 5px;
      content: "▶";
      float: left;
      transition: transform 0.3s;
      color: #1d60cb;
    }
    .wrp .cbx-nav-label::before {
      color: #fff;
    }

    #layers-list .label-layer .cbx-nav:checked + .cbx-nav-label::before, .wrp .cbx-nav:checked + .cbx-nav-label::before {
      transform: rotate(90deg);
    }

    a.mapboxgl-ctrl-logo {
      display: none;
    }

    /*
  The sidebar styling has them "expanded" by default, we use CSS transforms to push them offscreen
  The toggleSidebar() function removes this class from the element in order to expand it.
*/
    .left.collapsed {
        transform: translateX(-335px);
    }

    .right.collapsed {
        transform: translateX(400px);
    }

    ::-webkit-scrollbar {
      width: 15px;
      height: 15px;
      background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
      background: #909090;
      -webkit-border-radius: 20px;
      border-radius: 20px;
      border: 4px solid #f1f1f1;
    }