/*=========================================================
  DASHBOARD COMMAND CENTER BPBD DKI JAKARTA
==========================================================*/

:root{

--primary:#1976d2;

--secondary:#0d47a1;

--cyan:#00d4ff;

--green:#00ff99;

--danger:#ff4d4d;

--warning:#ffc107;

--orange:#ff9800;

--glass:rgba(17,35,60,.82);

--glass2:rgba(255,255,255,.05);

--border:rgba(255,255,255,.08);

--shadow:0 15px 45px rgba(0,0,0,.35);

--radius:18px;

}

/************************************************/

html{

scroll-behavior:smooth;

}

body{

margin:0;

padding:0;

background:
linear-gradient(135deg,#031321,#072743,#0d3b66);

background-size:400% 400%;

animation:bgMove 18s ease infinite;

font-family:'Segoe UI',sans-serif;

overflow-x:hidden;

color:#FFF;

}

/************************************************/

@keyframes bgMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

/************************************************/

body::before{

content:"";

position:fixed;

top:-300px;

left:-250px;

width:700px;

height:700px;

background:

radial-gradient(circle,

rgba(0,180,255,.18),

transparent 70%);

z-index:-2;

animation:moveLight1 18s linear infinite;

}

/************************************************/

body::after{

content:"";

position:fixed;

bottom:-350px;

right:-250px;

width:800px;

height:800px;

background:

radial-gradient(circle,

rgba(0,255,180,.12),

transparent 70%);

z-index:-2;

animation:moveLight2 20s linear infinite;

}

@keyframes moveLight1{

0%{

transform:translate(0,0);

}

50%{

transform:translate(150px,120px);

}

100%{

transform:translate(0,0);

}

}

@keyframes moveLight2{

0%{

transform:translate(0,0);

}

50%{

transform:translate(-180px,-120px);

}

100%{

transform:translate(0,0);

}

}

/************************************************/

.page-wrapper{

background:transparent;

padding:20px;

min-height:100vh;

}

/************************************************/

.page-content{

position:relative;

z-index:5;

}

/************************************************/

.row{

--bs-gutter-x:1rem;

--bs-gutter-y:1rem;

}

/************************************************/

.card{

background:var(--glass);

backdrop-filter:blur(14px);

border:1px solid var(--border);

border-radius:var(--radius);

box-shadow:var(--shadow);

overflow:hidden;

position:relative;

transition:.35s;

}

/************************************************/

.card:hover{

transform:translateY(-5px);

box-shadow:

0 25px 60px rgba(0,190,255,.18);

}

/************************************************/

.card::before{

content:"";

position:absolute;

left:0;

top:0;

height:3px;

width:100%;

background:

linear-gradient(

90deg,

#00E5FF,

#2979FF,

#00E5FF);

background-size:300%;

animation:borderFlow 5s linear infinite;

}

@keyframes borderFlow{

100%{

background-position:300%;

}

}

/************************************************/

.card-header{

background:rgba(255,255,255,.03);

border-bottom:1px solid rgba(255,255,255,.05);

color:#FFF;

font-weight:600;

letter-spacing:.4px;

padding:15px;

}

/************************************************/

.card-title{

margin:0;

font-size:15px;

font-weight:700;

}

/************************************************/

.card-body{

color:#FFF;

}

/************************************************/

.radius-10{

border-radius:18px!important;

}

/*=========================================================
  HEADER COMMAND CENTER
=========================================================*/

.header-wrapper{

position:sticky;

top:0;

left:0;

width:100%;

z-index:9999;

padding:12px 18px;

background:rgba(3,18,35,.65);

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(255,255,255,.08);

box-shadow:0 10px 35px rgba(0,0,0,.35);

}

/************************************************/

.main-header{

border-radius:20px;

background:linear-gradient(
135deg,
rgba(12,36,70,.95),
rgba(8,25,50,.90));

overflow:hidden;

position:relative;

}

/************************************************/

.main-header::before{

content:"";

position:absolute;

left:-40%;

top:0;

width:40%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.12),
transparent);

animation:headerLight 8s linear infinite;

}

@keyframes headerLight{

0%{

left:-40%;

}

100%{

left:140%;

}

}

/************************************************/

.navbar{

padding:14px 25px;

}

/************************************************/

.header-side{

display:flex;

align-items:center;

justify-content:center;

min-width:90px;

}

/************************************************/

.logo-main{

width:62px;

height:62px;

object-fit:contain;

transition:.4s;

filter:drop-shadow(0 0 10px rgba(0,212,255,.25));

cursor:pointer;

}

.logo-main:hover{

transform:scale(1.12) rotate(5deg);

filter:

drop-shadow(0 0 20px #00d4ff)

drop-shadow(0 0 35px #00d4ff);

}

/************************************************/

.header-center{

flex:1;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

text-align:center;

}

/************************************************/

.title-group h2{

margin:0;

font-size:30px;

font-weight:700;

letter-spacing:1px;

color:#FFF;

text-shadow:

0 0 12px rgba(0,212,255,.25);

animation:titleFade 1.2s;

}

@keyframes titleFade{

from{

opacity:0;

transform:translateY(-20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/************************************************/

.title-group span{

display:block;

margin-top:5px;

font-size:14px;

letter-spacing:3px;

text-transform:uppercase;

color:#8ec9ff;

}

/************************************************/

.header-right{

display:flex;

align-items:center;

gap:18px;

}

/************************************************/

.status-live{

display:flex;

align-items:center;

gap:8px;

padding:8px 16px;

border-radius:30px;

background:rgba(0,255,120,.08);

border:1px solid rgba(0,255,120,.25);

font-size:13px;

font-weight:700;

color:#8dffbd;

}

/************************************************/

.live-dot{

width:10px;

height:10px;

border-radius:50%;

background:#00ff66;

animation:livePulse 1.2s infinite;

}

@keyframes livePulse{

0%{

box-shadow:0 0 0 0 rgba(0,255,120,.8);

}

100%{

box-shadow:0 0 0 14px rgba(0,255,120,0);

}

}

/************************************************/

.header-clock{

min-width:150px;

padding:10px 16px;

text-align:center;

border-radius:15px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

}

#tanggal-dashboard{

font-size:12px;

color:#9fd4ff;

letter-spacing:.5px;

}

#jam-dashboard{

font-size:22px;

font-weight:700;

color:#00e5ff;

letter-spacing:2px;

font-family:Consolas,monospace;

text-shadow:

0 0 12px rgba(0,229,255,.4);

}

/************************************************/

.dashboard-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 22px;

background:linear-gradient(
90deg,
rgba(255,255,255,.04),
rgba(255,255,255,.02));

}

.dashboard-header h4{

margin:0;

font-size:22px;

font-weight:700;

color:#FFF;

}

.dashboard-header small{

color:#8bbfff;

font-size:13px;

}

/************************************************/

.dashboard-header .btn{

border-radius:30px;

padding:7px 18px;

font-size:13px;

font-weight:600;

box-shadow:0 5px 18px rgba(0,123,255,.35);

transition:.3s;

}

.dashboard-header .btn:hover{

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(0,180,255,.45);

}

/*=========================================================
=            KPI CARD COMMAND CENTER
=========================================================*/

.dashboard-kpi{

    position:relative;

    overflow:hidden;

    min-height:115px;

    cursor:pointer;

    transition:.35s ease;

}

.dashboard-kpi::after{

    content:"";

    position:absolute;

    top:-60px;

    right:-60px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(255,255,255,.03);

}

.dashboard-kpi:hover{

    transform:translateY(-8px);

    box-shadow:
        0 15px 35px rgba(0,212,255,.25);

}

.dashboard-kpi .card-body{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px;

}

/************************************************/

.kpi-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:#fff;

    background:linear-gradient(135deg,#1976d2,#00bcd4);

    box-shadow:

        0 0 15px rgba(0,212,255,.35),

        inset 0 0 15px rgba(255,255,255,.15);

    transition:.35s;

}

.dashboard-kpi:hover .kpi-icon{

    transform:rotate(12deg) scale(1.12);

    box-shadow:

        0 0 25px rgba(0,255,255,.65),

        0 0 40px rgba(0,212,255,.35);

}

/************************************************/

.dashboard-kpi h6{

    margin:0;

    font-size:14px;

    color:#8fd3ff;

    letter-spacing:.5px;

    font-weight:600;

}

.dashboard-kpi h2{

    margin-top:8px;

    margin-bottom:0;

    font-size:34px;

    font-weight:700;

    color:#fff;

    text-shadow:

        0 0 12px rgba(0,212,255,.25);

}

/************************************************/
/* Warna Icon Berbeda                           */
/************************************************/

.dashboard-kpi:nth-child(1) .kpi-icon{

    background:linear-gradient(135deg,#ef5350,#ff9800);

}

.dashboard-kpi:nth-child(2) .kpi-icon{

    background:linear-gradient(135deg,#26c6da,#00acc1);

}

.dashboard-kpi:nth-child(3) .kpi-icon{

    background:linear-gradient(135deg,#5c6bc0,#3949ab);

}

.dashboard-kpi:nth-child(4) .kpi-icon{

    background:linear-gradient(135deg,#43a047,#00c853);

}

/************************************************/
/* Garis Glow Atas                              */
/************************************************/

.dashboard-kpi::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:3px;

    background:

    linear-gradient(
        90deg,
        transparent,
        #00e5ff,
        transparent);

    animation:kpiGlow 4s linear infinite;

}

@keyframes kpiGlow{

    100%{

        left:100%;

    }

}

/************************************************/
/* Efek Cahaya Hover                            */
/************************************************/

.dashboard-kpi:hover{

    background:

    linear-gradient(

        135deg,

        rgba(0,150,255,.12),

        rgba(255,255,255,.04)

    );

}

/************************************************/
/* Angka Berkedip Halus                         */
/************************************************/

.dashboard-kpi h2{

    animation:numberGlow 2s infinite alternate;

}

@keyframes numberGlow{

    from{

        text-shadow:

        0 0 8px rgba(255,255,255,.15);

    }

    to{

        text-shadow:

        0 0 18px rgba(0,212,255,.45);

    }

}

/************************************************/
/* Progress Bar Decorative                      */
/************************************************/

.dashboard-kpi .card-body::after{

    content:"";

    position:absolute;

    left:20px;

    right:20px;

    bottom:15px;

    height:4px;

    border-radius:50px;

    background:rgba(255,255,255,.08);

}

.dashboard-kpi .card-body::before{

    content:"";

    position:absolute;

    left:20px;

    bottom:15px;

    width:65%;

    height:4px;

    border-radius:50px;

    background:linear-gradient(90deg,#00e5ff,#2979ff);

    animation:progressMove 3s ease-in-out infinite;

}

@keyframes progressMove{

    0%{

        width:20%;

    }

    50%{

        width:80%;

    }

    100%{

        width:20%;

    }

}

/*=========================================================
=            MAP COMMAND CENTER
=========================================================*/

.chart-container-map{

    position:relative;

    height:78vh;

    padding:12px;

    border-radius:20px;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.02),
        rgba(255,255,255,.04));

}

/************************************************/

#init-map{

    width:100%;

    height:100%;

    border-radius:18px;

    overflow:hidden;

    border:2px solid rgba(0,212,255,.15);

    box-shadow:

        inset 0 0 35px rgba(0,0,0,.45),

        0 0 30px rgba(0,212,255,.10);

    position:relative;

    transition:.35s;

}

/************************************************/

#init-map:hover{

    box-shadow:

        inset 0 0 35px rgba(0,0,0,.55),

        0 0 45px rgba(0,212,255,.30);

}

/************************************************/
/* Bingkai Glow */
/************************************************/

.chart-container-map::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:20px;

    padding:2px;

    background:
    linear-gradient(
        90deg,
        #00d4ff,
        #2979ff,
        #00d4ff);

    background-size:300%;

    animation:borderMap 6s linear infinite;

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}

@keyframes borderMap{

    from{

        background-position:0%;

    }

    to{

        background-position:300%;

    }

}

/************************************************/
/* Label GIS LIVE */
/************************************************/

.chart-container-map::after{

    content:"🛰  GIS ANALYTICS DISASTER";

    position:absolute;

    top:22px;

    left:53px;

    z-index:600;

    background:rgba(0,0,0,.45);

    color:#00ff99;

    padding:7px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    backdrop-filter:blur(8px);

    border:1px solid rgba(0,255,153,.25);

}

/************************************************/
/* Watermark */
/************************************************/

.map-watermark{

    position:absolute;

    bottom:25px;

    right:25px;

    z-index:500;

    opacity:.08;

    font-size:90px;

    color:#FFF;

    pointer-events:none;

}



/************************************************/
/* Loading */
/************************************************/

.map-loading{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

    z-index:999;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    backdrop-filter:blur(5px);

}

.map-loading .spinner{

    width:60px;

    height:60px;

    border-radius:50%;

    border:5px solid rgba(255,255,255,.15);

    border-top:5px solid #00d4ff;

    animation:spin 1s linear infinite;

}

.map-loading span{

    margin-top:20px;

    color:#FFF;

    letter-spacing:2px;

    font-weight:600;

}

@keyframes spin{

    100%{

        transform:rotate(360deg);

    }

}

/************************************************/
/* Leaflet */
/************************************************/

.leaflet-control-zoom{

    border:none!important;

}

.leaflet-control-zoom a{

    background:#10345d!important;

    color:#FFF!important;

    border:none!important;

    transition:.3s;

}

.leaflet-control-zoom a:hover{

    background:#00bcd4!important;

}

.leaflet-popup-content-wrapper{

    border-radius:12px;

}

.leaflet-popup-tip{

    background:#FFF;

}

/************************************************/
/* Fullscreen Button */
/************************************************/

.map-fullscreen{

    position:absolute;

    left:24px;

    bottom:30px;

    z-index:700;

}

.map-fullscreen button{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#0f4479;

    color:#FFF;

    transition:.3s;

}

.map-fullscreen button:hover{

    background:#00bcd4;

    transform:scale(1.08);

}

/************************************************/
/* Koordinat */
/************************************************/

.coordinate-box{

    position:absolute;

    bottom:24px;

    right:24px;

    z-index:600;

    padding:8px 14px;

    border-radius:10px;

    background:rgba(0,0,0,.45);

    color:#FFF;

    font-size:12px;

    backdrop-filter:blur(8px);

}

/*=========================================================
=              SIDEBAR COMMAND CENTER
=========================================================*/

/************************************************/
/* Sidebar Card */
/************************************************/

.col-xl-2 .dashboard-card{

    margin-bottom:18px;

}

/************************************************/

.dashboard-card{

    position:relative;

}

/************************************************/

.dashboard-card .card-header{

    background:
    linear-gradient(
        90deg,
        rgba(0,140,255,.18),
        rgba(255,255,255,.04));

    color:#FFF;

    font-weight:700;

    text-align:center;

    border-bottom:1px solid rgba(255,255,255,.08);

    letter-spacing:.5px;

    font-size:15px;

}

/************************************************/

.dashboard-card .card-header i{

    color:#00d4ff;

    margin-right:8px;

    font-size:16px;

}

/************************************************/
/* Chart */
/************************************************/

#pie1{

    width:100%;

    min-height:250px;

    transition:.35s;

}

.dashboard-card:hover #pie1{

    transform:scale(1.02);

}

/************************************************/
/* Legend */
/************************************************/

.legend-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 12px;

    margin-bottom:8px;

    border-radius:12px;

    transition:.3s;

    cursor:pointer;

    background:rgba(255,255,255,.02);

}

.legend-item:hover{

    background:rgba(0,212,255,.10);

    transform:translateX(6px);

    box-shadow:

        0 5px 18px rgba(0,212,255,.15);

}

/************************************************/

.legend-color{

    width:18px;

    height:18px;

    border-radius:5px;

    border:1px solid rgba(255,255,255,.20);

    box-shadow:

        0 0 10px rgba(255,255,255,.15);

}

/************************************************/

.legend-item span:last-child{

    color:#FFF;

    font-size:13px;

    font-weight:600;

}

/************************************************/
/* Glow */
/************************************************/

.legend-item:hover .legend-color{

    transform:scale(1.2);

    box-shadow:

        0 0 15px currentColor;

}

/************************************************/
/* Judul */
/************************************************/

.dashboard-card .card-header{

    position:relative;

}

.dashboard-card .card-header::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:6px;

    width:40px;

    height:2px;

    background:#00d4ff;

    border-radius:50px;

}

/************************************************/
/* Scroll */
/************************************************/

#keterangan-legenda-3,

#keterangan-legenda-5{

    max-height:260px;

    overflow-y:auto;

    padding-right:4px;

}

/************************************************/
/* Scrollbar */
/************************************************/

#keterangan-legenda-3::-webkit-scrollbar,

#keterangan-legenda-5::-webkit-scrollbar{

    width:6px;

}

#keterangan-legenda-3::-webkit-scrollbar-thumb,

#keterangan-legenda-5::-webkit-scrollbar-thumb{

    background:#00bcd4;

    border-radius:30px;

}

/************************************************/
/* Efek Cahaya */
/************************************************/

.dashboard-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:18px;

    pointer-events:none;

    box-shadow:

        inset 0 0 25px rgba(255,255,255,.02);

}

/************************************************/
/* Animasi Muncul */
/************************************************/

.dashboard-card{

    animation:fadePanel .8s;

}

@keyframes fadePanel{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/************************************************/
/* Hover Judul */
/************************************************/

.dashboard-card:hover .card-header{

    background:

    linear-gradient(

        90deg,

        rgba(0,180,255,.30),

        rgba(255,255,255,.05)

    );

}

/************************************************/
/* Badge */
/************************************************/

.card-badge{

    display:inline-block;

    padding:3px 8px;

    border-radius:20px;

    background:#00bcd4;

    color:#FFF;

    font-size:11px;

    margin-left:6px;

}

/************************************************/
/* Efek Pie Chart */
/************************************************/

.chart-container-1{

    position:relative;

}

.chart-container-1::before{

    content:"";

    position:absolute;

    inset:15px;

    border-radius:50%;

    border:1px dashed rgba(255,255,255,.08);

    animation:rotateCircle 18s linear infinite;

    pointer-events:none;

}

@keyframes rotateCircle{

    100%{

        transform:rotate(360deg);

    }

}

/*=========================================================
=              FOOTER & FLOATING BUTTON
=========================================================*/

/************************************************/
/* Footer */
/************************************************/

.page-footer{

    position:relative;

    margin-top:20px;

    padding:18px 30px;

    background:
    linear-gradient(
        90deg,
        rgba(5,25,50,.95),
        rgba(8,40,75,.92));

    border-top:1px solid rgba(255,255,255,.08);

    color:#FFF;

    overflow:hidden;

}

.page-footer::before{

    content:"";

    position:absolute;

    left:-50%;

    top:0;

    width:50%;

    height:100%;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent);

    animation:footerLight 10s linear infinite;

}

@keyframes footerLight{

    from{

        left:-50%;

    }

    to{

        left:150%;

    }

}

.page-footer p{

    margin:0;

    text-align:center;

    letter-spacing:1px;

    font-size:14px;

    color:#d7ecff;

}

/************************************************/
/* Floating Button */
/************************************************/

.switcher-wrapper{
    position:fixed;
    z-index:9999;
}
.switcher-btn{
width: 150px;
    animation:floating 3s ease-in-out infinite;

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.switcher-btn .btn{

  

    border:none;

    border-radius:10px;



    font-size:15px;

    font-weight:700;

    letter-spacing:.5px;

    color:#FFF;

    background:

    linear-gradient(
        135deg,
        #1565c0,
        #00bcd4);

    box-shadow:

        0 10px 25px rgba(0,180,255,.35);

    transition:.35s;

}

.switcher-btn .btn:hover{

    transform:scale(1.08);

    box-shadow:

        0 15px 35px rgba(0,212,255,.55);

    background:

    linear-gradient(
        135deg,
        #1976d2,
        #26c6da);

}

/************************************************/
/* Ripple Effect */
/************************************************/

.switcher-btn .btn{

    position:relative;

    overflow:hidden;

}

.switcher-btn .btn::before{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-radius:50%;

    background:rgba(255,255,255,.25);

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    transition:.6s;

}

.switcher-btn .btn:hover::before{

    width:320px;

    height:320px;

}

/************************************************/
/* Icon */
/************************************************/

.switcher-btn .btn i{

    margin-right:8px;

    transition:.3s;

}

.switcher-btn .btn:hover i{

    transform:rotate(180deg);

}

/************************************************/
/* Mobile */
/************************************************/

@media(max-width:768px){

.switcher-wrapper{

right:15px;

bottom:15px;

}

.switcher-btn .btn{

padding:12px 18px;

font-size:13px;

}

.page-footer{

padding:15px;

}

}

/*=========================================================
=              RESPONSIVE COMMAND CENTER
=========================================================*/

/************************************************/
/* 4K Monitor */
/************************************************/

@media (min-width:1920px){

.page-content{

    max-width:1850px;

    margin:auto;

}

.chart-container-map{

    height:82vh;

}

.title-group h2{

    font-size:34px;

}

.dashboard-kpi h2{

    font-size:42px;

}

}

/************************************************/
/* Laptop Besar */
/************************************************/

@media (max-width:1600px){

.chart-container-map{

    height:74vh;

}

.dashboard-kpi h2{

    font-size:30px;

}

}

/************************************************/
/* Laptop 1366 */
/************************************************/

@media (max-width:1400px){

.chart-container-map{

    height:70vh;

}

.dashboard-header h4{

    font-size:20px;

}

.logo-main{

    width:56px;

}

}

/************************************************/
/* Tablet Landscape */
/************************************************/

@media (max-width:1200px){

.header-center{

    text-align:center;

}

.title-group h2{

    font-size:22px;

}

.chart-container-map{

    height:65vh;

}

.dashboard-kpi{

    margin-bottom:15px;

}

}

/************************************************/
/* Tablet */
/************************************************/

@media (max-width:992px){

.header-right{

    display:none;

}

.header-side{

    display:none;

}

.title-group{

    width:100%;

}

.title-group h2{

    font-size:22px;

}

.title-group span{

    font-size:11px;

    letter-spacing:1px;

}

.dashboard-header{

    flex-direction:column;

    gap:12px;

    text-align:center;

}

.chart-container-map{

    height:60vh;

}

.dashboard-kpi .card-body{

    padding:18px;

}

.kpi-icon{

    width:60px;

    height:60px;

    font-size:24px;

}

.dashboard-kpi h2{

    font-size:28px;

}

}

/************************************************/
/* Mobile */
/************************************************/

@media (max-width:768px){

.page-wrapper{

    padding:10px;

}

.header-wrapper{

    padding:8px;

}

.main-header{

    border-radius:12px;

}

.navbar{

    padding:10px;

}

.title-group h2{

    font-size:18px;

    line-height:1.3;

}

.title-group span{

    display:none;

}

.chart-container-map{

    height:50vh;

    padding:8px;

}

.dashboard-header{

    padding:12px;

}

.dashboard-header h4{

    font-size:18px;

}

.dashboard-header small{

    display:none;

}

.dashboard-kpi{

    margin-bottom:12px;

}

.dashboard-kpi .card-body{

    justify-content:flex-start;

    gap:15px;

}

.dashboard-kpi h6{

    font-size:12px;

}

.dashboard-kpi h2{

    font-size:24px;

}



.coordinate-box{

    display:none;

}

.chart-container-map::after{

    display:none;

}

}

/************************************************/
/* Mobile Kecil */
/************************************************/

@media (max-width:576px){

.logo-main{

    width:42px;

}

.title-group h2{

    font-size:16px;

}

.dashboard-header h4{

    font-size:16px;

}

.dashboard-header .btn{

    width:100%;

}

.card-header{

    font-size:13px;

}

.legend-item{

    padding:8px;

}

.legend-item span{

    font-size:12px;

}

.chart-container-map{

    height:45vh;

}

.switcher-btn .btn{

    width:60px;

    height:60px;

    border-radius:50%;

    padding:0;

    font-size:0;

}

.switcher-btn .btn i{

    margin:0;

    font-size:22px;

}

}

/************************************************/
/* Animasi Responsive */
/************************************************/

@media (prefers-reduced-motion:reduce){

*{

    animation:none!important;

    transition:none!important;

}

}

#dashboard-loading{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

z-index:99999;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

background:rgba(5,20,35,.55);

backdrop-filter:blur(3px);

}

.command-modal{

background:#081b33;

border:none;

border-radius:24px;

overflow:hidden;

box-shadow:

0 30px 80px rgba(0,0,0,.45);

}

.command-header{

background:

linear-gradient(

135deg,

#0d47a1,

#1565c0,

#0288d1

);

padding:22px;

color:#FFF;

position:relative;

overflow:hidden;

}

.command-header::before{

content:"";

position:absolute;

left:-40%;

top:0;

width:40%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.18),

transparent);

animation:headerLight 6s linear infinite;

}

.header-icon{

width:65px;

height:65px;

border-radius:50%;

background:rgba(255,255,255,.12);

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

backdrop-filter:blur(8px);

}

.command-header h4{

font-weight:700;

letter-spacing:.5px;

}

.command-header small{

color:#dbefff;

}

.command-body{

background:

linear-gradient(

180deg,

#061529,

#0b2746

);

padding:30px;

}

.command-body label{

color:#ffffff;

font-weight:600;

margin-bottom:8px;

}

.command-body .form-group{

margin-bottom:25px;

}

.command-body select{

background:#102d50;

border:1px solid rgba(255,255,255,.12);

color:#FFF;

border-radius:14px;

padding:12px;

transition:.3s;

}

.command-body select:focus{

border-color:#00d4ff;
color:#a7a1a1;
box-shadow:

0 0 18px rgba(0,212,255,.25);

background:#14385f;

}

/* Select2 */
.command-body .select2-container .select2-selection--single,
.command-body .select2-container .select2-selection--multiple {
    background: #102d50;
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    border-radius: 14px;
    padding: 6px 12px;
    min-height: 46px;
    transition: .3s;
}

/* Text */
.command-body .select2-container .select2-selection__rendered {
    color: #fff;
    line-height: 32px;
}

/* Placeholder */
.command-body .select2-container .select2-selection__placeholder {
    color: #a7a1a1;
}

/* Arrow */
.command-body .select2-container .select2-selection__arrow b {
    border-color: #fff transparent transparent transparent;
}

/* Focus */
.command-body .select2-container--focus .select2-selection,
.command-body .select2-container--open .select2-selection {
    border-color: #00d4ff !important;
    background: #14385f;
    box-shadow: 0 0 18px rgba(0, 212, 255, .25);
}

/* Dropdown */
.select2-dropdown {
    background: #102d50;
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
}

.select2-results__option {
    color: #fff;
}

.select2-results__option--highlighted {
    background: #00d4ff !important;
    color: #ffffff;
}

.command-body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #00d4ff;
    border: none;
    color: #000;
    border-radius: 8px;
}

.command-body .select2-container--default .select2-search--inline .select2-search__field {
    color: #fff;
}

.command-body option{

background:#16395f;

color:#FFF;

}

.command-footer{

background:#081b33;

border:none;

padding:20px;

display:flex;

justify-content:space-between;

}

.command-footer .btn{

border-radius:50px;

padding:12px 30px;

font-weight:bold;

transition:.3s;

}

#submit{

background:

linear-gradient(

135deg,

#00bcd4,

#1976d2

);

border:none;

}

#submit:hover{

transform:translateY(-3px);

box-shadow:

0 10px 25px rgba(0,212,255,.35);

}

#close-modal{

background:#37474f;

border:none;

}

#close-modal:hover{

background:#455a64;

}