.bg-skema {
   background-color: hsl(210 25% 70% / 1) !important;
}

.bg_svg {
   fill: hsl(210 25% 70% / 1) !important;
}

#g_info b,
#g_info .fw-bold {
   color: #0d73a5;
   cursor: default;
}

#g_info span,
#g_info div {
   cursor: default;
}

.table.limitmin td {
   color: #5a5a5a;
   padding: 0px;
   padding-bottom: 1px;
   border-bottom: 0;
}

.bangunan circle.cbg {
   stroke-width: 4px;
   stroke: #0066dd;
   transition: stroke-width 0.3s ease, stroke 0.3s ease;
}

.bangunan:hover circle.cbg,
.bangunan.over circle.cbg {
   stroke-width: 25px;
   stroke: #ffaa2288;
}

.bangunan.active circle.cbg {
   stroke-width: 35px;
   stroke: #ffaa22aa;
}

.bangunan.active circle.c2 {
   fill: #22ccff;
}

.bangunan.active circle.c1 {
   fill: #fff;
}

.bsa.active circle.c2 {
   stroke-width: 2px;
   fill: #365c85;
}

.saluran_tersier {
   stroke: #335577 !important;
}

.saluran.active {
   stroke: #456cee !important;
}

.saluran.shd.active {
   stroke: #ffffff55 !important;
   stroke-width: 20px !important;
}

#g_info>div {
   padding: 0 12px;
}

.bg-nama_bangunan {
   background: #014f7f;
   border-left: 8px solid #ff9500;
   color: #fff !important;
   padding-top: 12px !important;
   padding-bottom: 12px !important;
   /* border-top: 1px solid #d7dadf; */
}

.bg-nama_bangunan .fw-bold {
   color: #fff !important;
}

.bdr-b {
   border-bottom: 1px solid #d7dadf !important;
}

.bdr-t {
   border-top: 1px solid #d7dadf !important;
}

.trdetail {
   cursor: pointer;
}

.hide {
   transition: opacity 500ms, display 500ms, visibility 500ms;
   display: none;
   opacity: 0;
}

.iconColor {
   color: #b6cadf !important;
}

.ter.blank .tersier {
   fill: #c2dae744;
}

.ter.olah .tersier {
   fill: #99ffee;
}

i.padi,
.ter.tumbuh .tersier {
   fill: #99ff88;
}

.ter.panen .tersier {
   fill: #ffdd77;
}

i.palawija,
.ter.palawija .tersier {
   fill: #ddff88;
}

i.tebu,
.ter.tebu .tersier {
   fill: #66bb44;
}

.ter.bera .tersier {
   fill: #cfddd0bb;
   stroke: #889988;
}

i.padi {
   color: #19b000;
}

i.palawija {
   color: #ead800;
}

i.tebu {
   color: #78963e;
}

i.grey {
   color: #7a9bbf;
}

.ter.olah .tersier.zeroDebit {
   fill: #7bcfc1;
}

i.padi,
.ter.tumbuh .tersier.zeroDebit {
   fill: #90e082;
}


.trhide td {
   background-color: #f3f6fa;
}

.goSaluran {
   cursor: pointer;
}

.goSaluran:hover {
   background-color: #f4f6fa;
}

.goSaluran:hover .iconColor {
   color: #0dcaf0 !important;
}

.ter.active .bg_petak {
   stroke: #ffb75199 !important;
   stroke-width: 15px !important;
   /* fill: #dafff8; */
}

.ter.active .tersier {
   stroke-width: 2px !important;
}

.ter.blank.on .tersier,
.ter.olah.on .tersier,
.ter.tumbuh.on .tersier,
.ter.panen.on .tersier,
.ter.palawija.on .tersier,
.ter.tebu.on .tersier,
.ter.bera.on .tersier {
   fill: #ffffff66;
}

.ter.on .bg_petak {
   fill: #ffffff;
   opacity: 1 !important;
   stroke-width: 10px !important;
}

.ter.blank.on .tersier {
   fill: #ffffff;
}

.ter.golongan_1.on .bg_petak {
   stroke: #3aad0899 !important;
}

.ter.golongan_1.on .tersier {
   fill: #ddfff0cc;
   stroke: #3aad0899 !important;
}

.ter.golongan_2.on .bg_petak {
   stroke: #e57a0099 !important;
}

.ter.golongan_2.on .tersier {
   fill: #fffadaaa;
   stroke: #3aad0899 !important;
}

.ter.golongan_3.on .bg_petak {
   stroke: #0757d399 !important;
}

.ter.golongan_3.on .tersier {
   fill: #cceef6;
   stroke: #0757d399 !important;
}

.ter.golongan_4.on .bg_petak {
   stroke: #733da399 !important;
}

.ter.golongan_5.on .bg_petak {
   stroke: #87103b99 !important;
}

.ter.golongan_6.on .bg_petak {
   stroke: #833d0099 !important;
}

.boxgol {
   border: 3px solid;
   width: 30px;
   height: 18px;
   border-radius: 3px;
}

.boxgol.box1 {
   border-color: #3aad08;
}

.boxgol.box2 {
   border-color: #e57a00;
}

.boxgol.box3 {
   border-color: #0757d3;
}

.boxgol.box4 {
   border-color: #733da3;
}

.boxgol.box5 {
   border-color: #87103b;
}

.boxgol.box6 {
   border-color: #833d00;
}


.saluran.basic_waterFlow {
   stroke: hsl(215, 27%, 45%);
   stroke-width: 12 !important;
   stroke-dasharray: 600;
   stroke-dashoffset: 600;
   animation: bdash 6s linear infinite;
}

.saluran.basic_flowShd {
   stroke: hsl(216, 19%, 49%);
   stroke-width: 16 !important;
   animation: bwarna 12s linear infinite;
}

.saluran.waterFlow {
   stroke: #4499ff;
   stroke-width: 12 !important;
   stroke-dasharray: 600;
   stroke-dashoffset: 600;
   animation: dash 8s linear infinite;
}

.saluran.flowShd {
   stroke: #4499ff;
   stroke-width: 16 !important;
   animation: warna 12s linear infinite;
}

/* Over-Supply Mode - Saluran Merah */
.saluran.overSupply_1 {
   stroke: hsl(260, 100%, 60%) !important;
   stroke-width: 12 !important;
   stroke-dasharray: 600;
   stroke-dashoffset: 600;
   animation: dashRed 8s linear infinite;
}

.saluran.overSupplyShd_1 {
   stroke: hsl(260 100% 40%) !important;
   stroke-width: 16 !important;
   animation: warnaRed 12s linear infinite;
}

.saluran.overSupply_2 {
   stroke: hsl(290, 100%, 60%) !important;
   stroke-width: 12 !important;
   stroke-dasharray: 600;
   stroke-dashoffset: 600;
   animation: dashRed 8s linear infinite;
}

.saluran.overSupplyShd_2 {
   stroke: hsl(290, 100%, 40%) !important;
   stroke-width: 16 !important;
   animation: warnaRed 12s linear infinite;
}

.saluran.overSupply_3 {
   stroke: hsl(0, 100%, 60%) !important;
   stroke-width: 12 !important;
   stroke-dasharray: 600;
   stroke-dashoffset: 600;
   animation: dashRed 8s linear infinite;
}

.saluran.overSupplyShd_3 {
   stroke: hsl(0, 100%, 40%) !important;
   stroke-width: 16 !important;
   animation: warnaRed 12s linear infinite;
}

.saluran.underSupply_1 {
   stroke: hsl(200, 100%, 50%) !important;
   stroke-width: 12 !important;
   stroke-dasharray: 600;
   stroke-dashoffset: 600;
   animation: dashRed 8s linear infinite;
}

.saluran.underSupplyShd_1 {
   stroke: hsl(200, 100%, 40%) !important;
   stroke-width: 16 !important;
   animation: warnaRed 12s linear infinite;
}

.saluran.underSupply_2 {
   stroke: hsl(183, 100%, 42%) !important;
   stroke-width: 12 !important;
   stroke-dasharray: 600;
   stroke-dashoffset: 600;
   animation: dashRed 8s linear infinite;
}

.saluran.underSupplyShd_2 {
   stroke: hsl(183, 100%, 32%) !important;
   stroke-width: 16 !important;
   animation: warnaRed 12s linear infinite;
}

.saluran.underSupply_3 {
   stroke: rgb(224, 191, 0) !important;
   stroke-width: 12 !important;
   stroke-dasharray: 600;
   stroke-dashoffset: 600;
   animation: dashRed 8s linear infinite;
}

.saluran.underSupplyShd_3 {
   stroke: rgb(164, 140, 0) !important;
   stroke-width: 16 !important;
   animation: warnaRed 12s linear infinite;
}


.leftMapMenu {
   position: absolute;
   z-index: 10000;
   top: 130px;
   left: 40px;
   border-radius: 5px;
   filter: drop-shadow(0 0 4px #0135);
}

.rightMapMenu {
   position: absolute;
   z-index: 10000;
   top: 75px;
   right: 40px;
   border-radius: 5px;
   filter: drop-shadow(0 0 4px #0135);
   background-color: #ffffff;
   overflow: hidden;
}

.navScema {
   position: absolute;
   z-index: 10000;
   top: 80px;
   left: 40px;
   border-radius: 5px;
   display: flex;
   background-color: #ffffff40;
   border-radius: 50px;
   padding: 2px 5px;
   /* filter: drop-shadow(0 0 4px #0135); */
}

.legendGolongan {
   position: absolute;
   z-index: 10000;
   top: 120px;
   left: 40px;
   border-radius: 10px;
   display: flex;
   background-color: #ffffff40;
   border-radius: 15px;
   padding: 5px;
}

.legendGolongan>div {
   background-color: #ffffff;
   border-radius: 10px;
   padding: 0px 4px;
   font-size: 1.1em;
}

.legendGolongan>div th {
   font-size: 1em;
}

.legendGolongan>div td {
   padding: 0px;
   margin: 0px;
   vertical-align: middle !important;
}

.navScema .btn {
   border-radius: 15px !important;
   margin: 3px !important;
   padding: 4px 10px !important;
   font-size: .8em;
}

@keyframes dash {
   to {
      stroke-dashoffset: -50;
   }

   0% {
      stroke: #e0efff;
   }

   40% {
      stroke: #4499ff;
   }

   100% {
      stroke: #4499ff;
   }

}







@keyframes bdash {
   to {
      stroke-dashoffset: -50;
   }

   0% {
      stroke: #1d83e2;
   }

   50% {
      /* stroke: #114497; */
      stroke: #0055aa;
   }

   100% {
      stroke: #004466;
   }

}

@keyframes bwarna {
   0% {
      stroke: #004466;
   }

   30% {
      stroke: #002255;
   }

   90% {
      stroke: #005588;
   }

   100% {
      stroke: #004466;
   }
}









@keyframes warna {
   0% {
      stroke: #226688;
   }

   30% {
      stroke: #55aaff;
   }

   90% {
      stroke: #55aaff;
   }

   100% {
      stroke: #226688;
   }
}

/* Keyframes untuk Over-Supply (Merah) */
@keyframes dashRed {
   to {
      stroke-dashoffset: -50;
   }

   0% {
      stroke: #ffcccc;
   }

   40% {
      stroke: #ff3333;
   }

   100% {
      stroke: #ff3333;
   }
}

@keyframes warnaRed {
   0% {
      stroke: #cc0000;
   }

   30% {
      stroke: #ff5555;
   }

   90% {
      stroke: #ff5555;
   }

   100% {
      stroke: #cc0000;
   }
}


label.btn.btn-sm.btn-outline {
   background: #fff5;
   border: 1px solid #0003;
   font-weight: 500;
   color: #000a;
}

.btn-check:checked+.btn-outline,
.btn-outline.active,
.btn-outline.dropdown-toggle.show,
.btn-outline:active {
   background: #fff !important;
}

/* Stroke Classes untuk Giliran terpilih di Peta */
.giliran-active rect.tersier {
   stroke-width: 1px !important;
}

.giliran-active rect.bg_petak {
   stroke-width: 6px !important;
   animation: pulseActive 2.5s infinite ease-in-out;
   opacity: 1 !important;
}

/* Color definitions for both rects to ensure maximum visibility */
.rot-stroke-1 rect.tersier,
.rot-stroke-1 rect.bg_petak {
   stroke: #ff0000a7 !important;
}

.rot-stroke-2 rect.tersier,
.rot-stroke-2 rect.bg_petak {
   stroke: #0000ffa7 !important;
}

.rot-stroke-3 rect.tersier,
.rot-stroke-3 rect.bg_petak {
   stroke: #00aa00a7 !important;
}

.rot-stroke-4 rect.tersier,
.rot-stroke-4 rect.bg_petak {
   stroke: #aa00ffa7 !important;
}

.rot-stroke-5 rect.tersier,
.rot-stroke-5 rect.bg_petak {
   stroke: #00ccffa7 !important;
}

.rot-stroke-6 rect.tersier,
.rot-stroke-6 rect.bg_petak {
   stroke: #ff8800a7 !important;
}

/* Rotation Visual Status */
.watering {
   stroke: #007bff !important;
   stroke-width: 8px !important;
   fill: #cce5ff !important;
   animation: rotationPulse 2s infinite ease-in-out;
}

.waiting-turn {
   stroke: #ffc107 !important;
   stroke-width: 4px !important;
   stroke-dasharray: 5, 5;
}

@keyframes rotationPulse {
   0% {
      stroke-opacity: 0.2;
      stroke-width: 3px;
   }

   50% {
      stroke-opacity: 0.1;
      stroke-width: 6px;
   }

   100% {
      stroke-opacity: 0.2;
      stroke-width: 3px;
   }
}

@keyframes pulseActive {
   0% {
      stroke-opacity: 0.6;
      stroke-width: 6px;
   }

   50% {
      stroke-opacity: 0.2;
      stroke-width: 12px;
   }

   100% {
      stroke-opacity: 0.6;
      stroke-width: 6px;
   }
}

/* Tambahan untuk teks agar lebih terbaca saat ada stroke */
.giliran-active text.text_tersier {
   paint-order: stroke;
   stroke: #ffffff7b !important;
   stroke-width: 1px !important;
   font-weight: 500;
}

.zeroDebit {
   color: #adb5bd !important;
   font-style: italic;
   opacity: 0.7;
}

.zeroDebit b,
.zeroDebit .fw-bold,
.zeroDebit .fn-6 {
   color: #adb5bd !important;
}